diff --git a/.env.template b/.env.template index e122053..37c1000 100644 --- a/.env.template +++ b/.env.template @@ -1,2 +1,4 @@ REACT_APP_API_URL= -REACT_APP_TELEGRAM_BOT_NAME= \ No newline at end of file +REACT_APP_TELEGRAM_BOT_NAME= + +# REACT_APP_DONATE_LINK= \ No newline at end of file diff --git a/src/App.css b/src/App.css index 78cc313..12a1b69 100644 --- a/src/App.css +++ b/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%; + } } diff --git a/src/App.js b/src/App.js index 6213161..05f10dd 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ function App() { - + diff --git a/src/features/auth/authSlice.js b/src/features/auth/authSlice.js index e1871d3..a90d66c 100644 --- a/src/features/auth/authSlice.js +++ b/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({ diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index 161f1fa..1d19593 100644 --- a/src/screens/HomeScreen.js +++ b/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 ; - + return ( - - - + + {process.env.REACT_APP_DONATE_LINK && ( + + + + + + + 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! + + + )} + + ); diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 86f2273..741e478 100644 --- a/src/screens/LoginScreen.js +++ b/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 ; - 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 ( - + SSR Covid Tracing Login - + + + + Privacy notes:
+ 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. +
+
+ All the code for this project is{' '} + + Open Source + + , that means anyone, including you can audit and verify that your + information is being handled securely. + ); diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js index eb2a9d1..1fb0a33 100644 --- a/src/screens/ScannerScreen.js +++ b/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, }); } } diff --git a/src/screens/VerifyScreen.js b/src/screens/VerifyScreen.js index 2953983..79c4689 100644 --- a/src/screens/VerifyScreen.js +++ b/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 = ( - An error has occured verifying you. Please try scanning the QR code again? - ); - const loadingMessage = ( - We are currently verifying you. Please wait. - ); + const errorMessage = ( + + An error has occured verifying you. Please try scanning the QR code again? + + ); + const loadingMessage = ( + We are currently verifying you. Please wait. + ); - return ( - - - {verifyError ? errorMessage : loadingMessage} - - - ); + return ( + + + {verifyError ? errorMessage : loadingMessage} + + + ); } -export default Verify; \ No newline at end of file +export default Verify;