diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..94d599d --- /dev/null +++ b/src/App.css @@ -0,0 +1,9 @@ +#QRFlex{ + width: 30%; +} + +@media only screen and (max-width: 600px) { + #QRFlex { + width: 90% ; + } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 15e0140..d408765 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,8 @@ import { Redirect, Route, Switch } from 'react-router-dom'; import Home from './screens/HomeScreen'; import Login from './screens/LoginScreen'; import Create from './screens/CreateScreen'; +import Success from './screens/SuccessScreen'; +import './App.css'; function App() { return ( @@ -18,6 +20,9 @@ function App() { + + + diff --git a/src/screens/CreateScreen.js b/src/screens/CreateScreen.js index a27553c..8edbcd5 100644 --- a/src/screens/CreateScreen.js +++ b/src/screens/CreateScreen.js @@ -1,4 +1,4 @@ -import { FormControl, Box, Flex, Image, FormLabel, Input, Select, Heading, Button, useToast } from '@chakra-ui/react'; +import { Button, Flex, FormControl, FormLabel, Heading, Input, Select, useToast } from '@chakra-ui/react'; import axios from 'axios'; import { useState } from 'react'; import { useDispatch } from 'react-redux'; diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index 86c432f..a3c750a 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -1,4 +1,4 @@ -import { Box, Flex, Image } from '@chakra-ui/react'; +import { Box, Center, Flex, Image, Spinner, Text } from '@chakra-ui/react'; import axios from 'axios'; import { React, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; @@ -10,6 +10,7 @@ function QRCode() { const dispatch = useDispatch(); if (!url) { + setURL("none"); axios .get(`${process.env.REACT_APP_API_URL}/code`, { withCredentials: true }) .then(response => { @@ -22,13 +23,12 @@ function QRCode() { dispatch(authLogout()); } }); - } - - if (url) { + } else if(url === "none"){ + return + }else { return ; - } else { - return ; } + } function Home() { @@ -42,8 +42,9 @@ function Home() { alignItems="center" justifyContent="center" > - - + + + This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account! ); diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 35dcafa..df4e0fa 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -36,6 +36,13 @@ function Login() { return; } + toast({ + title: 'Loading', + status: 'info', + duration: 9000, + isClosable: true, + }); + axios .post( `${process.env.REACT_APP_API_URL}/login`, @@ -109,14 +116,6 @@ function Login() { Login! - - ); diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js new file mode 100644 index 0000000..e4960c5 --- /dev/null +++ b/src/screens/SuccessScreen.js @@ -0,0 +1,23 @@ +import { Button, Flex, Heading, Text } from "@chakra-ui/react"; +import { useHistory } from "react-router-dom"; + +function Success(){ + const history = useHistory(); + + return ( + + + Success! + We have succesfully saved your contact! Stay safe out there! + + + + ); +} + +export default Success; \ No newline at end of file