added success screen

src/App.css

@@ -0,0 +1,9 @@
+#QRFlex{
+    width: 30%;
+}
+
+@media only screen and (max-width: 600px) {
+    #QRFlex {
+        width: 90% ;
+    }
+}

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() {
         <Route path="/create">
           <Create />
         </Route>
+        <Route path="/success">
+          <Success />
+        </Route>
         <Route path="/">
           <Redirect to="/home" />
         </Route>

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';

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 <Spinner/>
+  }else {
     return <Image src={url} />;
-  } else {
-    return <Box />;
   }
+
 }
 
 function Home() {
@@ -42,8 +42,9 @@ function Home() {
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
-        <QRCode />
+      <Flex direction="column" background="white" p={12} rounded={6} id="QRFlex">
+          <QRCode />
+          <Text align="center" fontSize="lg">This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!</Text>
       </Flex>
     </Flex>
   );

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!
           </Button>
         </form>
-        <Divider mb={6} />
-        <Button
-          onClick={() => {
-            history.push('/validate');
-          }}
-        >
-          Get Validated!
-        </Button>
       </Flex>
     </Flex>
   );

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 (
+        <Flex
+          height="100vh"
+          background="teal.100"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Flex direction="column" background="white" p={12} rounded={6}>
+            <Heading>Success!</Heading>
+            <Text fontSize="lg">We have succesfully saved your contact! Stay safe out there!</Text>
+            <Button onClick={()=>{history.push("/home")}}>Return home</Button>
+          </Flex>
+        </Flex>
+      );
+}
+
+export default Success;