Merge pull request #6 from naresh97/development

-added privacy notice

.env.template

@@ -1,2 +1,4 @@
 REACT_APP_API_URL=
-REACT_APP_TELEGRAM_BOT_NAME=
+REACT_APP_TELEGRAM_BOT_NAME=
+
+# REACT_APP_DONATE_LINK=

src/App.css

@@ -1,9 +1,20 @@
+:root {
+  background: var(--chakra-colors-teal-100);
+}
+
 #QRFlex {
   width: 30%;
 }
 
-@media only screen and (max-width: 600px) {
+#contentFlex {
+  width: 30%;
+}
+
+@media only screen and (max-width: 800px) {
   #QRFlex {
     width: 90%;
   }
+  #contentFlex {
+    width: 90%;
+  }
 }

src/App.js

@@ -24,7 +24,7 @@ function App() {
         <Route path="/scanner">
           <Scanner />
         </Route>
-        <Route path="/verify/:id" component={Verify}/>
+        <Route path="/verify/:id" component={Verify} />
         <Route path="/">
           <Redirect to="/home" />
         </Route>

src/features/auth/authSlice.js

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import Cookies from 'js-cookie';
 
 const initialState = {
-  isAuthenticated: Cookies.get('authorized') === "true" ? true : false,
+  isAuthenticated: Cookies.get('authorized') === 'true' ? true : false,
 };
 
 export const authSlice = createSlice({

src/screens/HomeScreen.js

@@ -1,6 +1,14 @@
-import { Button, Divider, Flex, Image, Spinner, Text } from '@chakra-ui/react';
+import {
+  Button,
+  Divider,
+  Flex,
+  Image,
+  Link,
+  Spinner,
+  Text,
+} from '@chakra-ui/react';
 import axios from 'axios';
-import { React, useEffect, useState } from 'react';
+import { Fragment, React, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect, useHistory } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
@@ -18,9 +26,9 @@ function QRCode() {
         }
       })
       .catch(err => {
-        if(!err.response){
-          console.log("No response... Strange");
-        }else if (err.response.status === 401) {
+        if (!err.response) {
+          console.log('No response... Strange');
+        } else if (err.response.status === 401) {
           dispatch(authLogout());
         }
       });
@@ -39,12 +47,12 @@ function Home() {
 
   const handleLogout = () => {
     dispatch(authLogout());
-    history.push("/login");
-  }
+    history.push('/login');
+  };
 
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   if (!isAuthenticated) return <Redirect to="/login" />;
-  
+
   return (
     <Flex
       height="100vh"
@@ -65,9 +73,34 @@ function Home() {
           contact, or allow them to create an account!
         </Text>
         <Divider mb={6} />
-        <Button mb={6} onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
-        <Divider mb={10} />
-        <Button mb={6} onClick={handleLogout}>Log Out!</Button>
+        <Button
+          mb={6}
+          onClick={() => {
+            history.push('/scanner');
+          }}
+        >
+          Scan a QR Code
+        </Button>
+        {process.env.REACT_APP_DONATE_LINK && (
+          <Fragment>
+            <Divider mb={6} />
+            <Link href={process.env.REACT_APP_DONATE_LINK}>
+              <Button style={{ width: '100%  ' }} mb={6} colorScheme="blue">
+                Donate!
+              </Button>
+            </Link>
+            <Text mb={6}>
+              Servers require money to run, and apps require labor to develop
+              and maintain. You can show your support by donating what you can.
+              Every cent counts, buy me my next coffee, or help pay for a month
+              of server usage!
+            </Text>
+          </Fragment>
+        )}
+        <Divider mb={6} />
+        <Button colorScheme="red" mb={6} onClick={handleLogout}>
+          Log Out!
+        </Button>
       </Flex>
     </Flex>
   );

src/screens/LoginScreen.js

@@ -1,6 +1,4 @@
-import {
-  Flex, Heading, useToast
-} from '@chakra-ui/react';
+import { Divider, Flex, Heading, Link, Text, useToast } from '@chakra-ui/react';
 import axios from 'axios';
 import { React } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,13 +14,13 @@ function Login() {
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   if (isAuthenticated) return <Redirect to="/home" />;
 
-  const handleTelegramResponse = (response) => {
+  const handleTelegramResponse = response => {
     toast({
-      title: "Logging you in",
+      title: 'Logging you in',
       description: "Hold on, we're logging you in.",
       status: 'info',
       duration: 10000,
-      isClosable: false
+      isClosable: false,
     });
     axios
       .post(
@@ -38,9 +36,9 @@ function Login() {
         if (response.data.authorized) {
           dispatch(authLogin());
           toast.closeAll();
-          if(response.data.contactSuccess){
+          if (response.data.contactSuccess) {
             history.push('/success');
-          }else{
+          } else {
             history.push('/home');
           }
         } else {
@@ -57,8 +55,8 @@ function Login() {
       })
       .catch(err => {
         toast.closeAll();
-        if(err.response){
-          if(err.response.status === 401){
+        if (err.response) {
+          if (err.response.status === 401) {
             dispatch(authLogout());
             toast({
               title: 'Login Failed',
@@ -68,7 +66,7 @@ function Login() {
               isClosable: true,
             });
           }
-        }else{
+        } else {
           toast({
             title: 'An error occurred',
             description: 'Sorry, an error occurred on our side.',
@@ -77,25 +75,56 @@ function Login() {
             isClosable: true,
           });
         }
-        
       });
   };
 
   return (
     <Flex
-      height="100vh"
+      height="100%"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex
+        direction="column"
+        mt={5}
+        mb={5}
+        background="white"
+        p={12}
+        rounded={6}
+        id="contentFlex"
+      >
         <Heading size="xl" mb={6}>
           SSR Covid Tracing
         </Heading>
         <Heading size="lg" mb={4}>
           Login
         </Heading>
-        <TelegramLoginButton dataOnauth={handleTelegramResponse} botName={process.env.REACT_APP_TELEGRAM_BOT_NAME} />
+        <TelegramLoginButton
+          dataOnauth={handleTelegramResponse}
+          botName={process.env.REACT_APP_TELEGRAM_BOT_NAME}
+        />
+        <Divider mb={6} mt={6} />
+        <Text fontSize="sm">
+          <b>Privacy notes:</b> <br />
+          Telegram Login allows us to verify your identity, without collecting
+          any of your data. Telegram does NOT give us your phone number. The
+          only piece of information stored on our server is your Telegram ID,
+          this is an internal ID Number Telegram uses that is SEPARATE from your
+          Telegram Username.
+          <br />
+          <br />
+          All the code for this project is{' '}
+          <Link
+            color="teal.500"
+            href="https://github.com/naresh97/ssr-tracing"
+            isExternal
+          >
+            Open Source
+          </Link>
+          , that means anyone, including you can audit and verify that your
+          information is being handled securely.
+        </Text>
       </Flex>
     </Flex>
   );

src/screens/ScannerScreen.js

@@ -31,11 +31,11 @@ function Scanner() {
       const hash = re.exec(scanData);
       if (hash) {
         toast({
-          title: "Checking QR code.",
+          title: 'Checking QR code.',
           description: "Hold on, we're checking this QR code.",
           status: 'info',
           duration: 10000,
-          isClosable: false
+          isClosable: false,
         });
         axios
           .post(
@@ -57,7 +57,7 @@ function Scanner() {
               } else {
                 toast({
                   title: "You're not logged in!",
-                  description: "Please log in and try again!",
+                  description: 'Please log in and try again!',
                   status: 'error',
                   duration: 2000,
                 });
@@ -74,13 +74,13 @@ function Scanner() {
               duration: 2000,
             });
           });
-      }else{
+      } else {
         toast.closeAll();
         toast({
-          title: "Bad QR code",
+          title: 'Bad QR code',
           status: 'error',
           duration: 3000,
-          isClosable: true
+          isClosable: true,
         });
       }
     }

src/screens/VerifyScreen.js

@@ -1,55 +1,58 @@
 import { Flex, Text } from '@chakra-ui/react';
 import axios from 'axios';
-import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 
 function Verify(props) {
-    const verifyID = props.match.params.id;
-    const [verifyError, setVerifyError] = useState(false);
-    const history = useHistory();
+  const verifyID = props.match.params.id;
+  const [verifyError, setVerifyError] = useState(false);
+  const history = useHistory();
 
-    useEffect(() => {
-        if(verifyError) return;
-        axios
-            .post(`${process.env.REACT_APP_API_URL}/verify`,
-                {
-                    id: verifyID,
-                },
-                { withCredentials: true },
-            )
-            .then(response => {
-                if (response.data.success) {
-                    if (response.data.loggedIn) {
-                        history.push("/success");
-                    } else {
-                        history.push("/login");
-                    }
-                }
-            })
-            .catch(err => {
-                setVerifyError(true);
-            });
-    }, [verifyError, history, verifyID]);
+  useEffect(() => {
+    if (verifyError) return;
+    axios
+      .post(
+        `${process.env.REACT_APP_API_URL}/verify`,
+        {
+          id: verifyID,
+        },
+        { withCredentials: true }
+      )
+      .then(response => {
+        if (response.data.success) {
+          if (response.data.loggedIn) {
+            history.push('/success');
+          } else {
+            history.push('/login');
+          }
+        }
+      })
+      .catch(err => {
+        setVerifyError(true);
+      });
+  }, [verifyError, history, verifyID]);
 
-    const errorMessage = (
-        <Text>An error has occured verifying you. Please try scanning the QR code again?</Text>
-    );
-    const loadingMessage = (
-        <Text>We are currently verifying you. Please wait.</Text>
-    );
+  const errorMessage = (
+    <Text>
+      An error has occured verifying you. Please try scanning the QR code again?
+    </Text>
+  );
+  const loadingMessage = (
+    <Text>We are currently verifying you. Please wait.</Text>
+  );
 
-    return (
-        <Flex
-            height="100vh"
-            background="teal.100"
-            alignItems="center"
-            justifyContent="center"
-        >
-            <Flex direction="column" background="white" p={12} rounded={6}>
-                {verifyError ? errorMessage : loadingMessage}
-            </Flex>
-        </Flex>
-    );
+  return (
+    <Flex
+      height="100vh"
+      background="teal.100"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Flex direction="column" background="white" p={12} rounded={6}>
+        {verifyError ? errorMessage : loadingMessage}
+      </Flex>
+    </Flex>
+  );
 }
 
-export default Verify;
+export default Verify;