Browse Source

ran linter

pull/6/head
Nareshkumar Rao 3 years ago
parent
commit
000034c55c
  1. 2
      src/App.js
  2. 2
      src/features/auth/authSlice.js
  3. 61
      src/screens/HomeScreen.js
  4. 62
      src/screens/LoginScreen.js
  5. 12
      src/screens/ScannerScreen.js
  6. 95
      src/screens/VerifyScreen.js

2
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>

2
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({

61
src/screens/HomeScreen.js

@ -1,4 +1,12 @@
import { Button, Divider, Flex, Image, Link, Spinner, Text } from '@chakra-ui/react';
import {
Button,
Divider,
Flex,
Image,
Link,
Spinner,
Text,
} from '@chakra-ui/react';
import axios from 'axios';
import { Fragment, React, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
@ -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,21 +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>
{
process.env.REACT_APP_DONATE_LINK &&
<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} />
<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>
<Button colorScheme="red" mb={6} onClick={handleLogout}>
Log Out!
</Button>
</Flex>
</Flex>
);

62
src/screens/LoginScreen.js

@ -14,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(
@ -36,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 {
@ -55,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',
@ -66,7 +66,7 @@ function Login() {
isClosable: true,
});
}
}else{
} else {
toast({
title: 'An error occurred',
description: 'Sorry, an error occurred on our side.',
@ -75,7 +75,6 @@ function Login() {
isClosable: true,
});
}
});
};
@ -86,26 +85,45 @@ function Login() {
alignItems="center"
justifyContent="center"
>
<Flex direction="column" mt={5} mb={5} background="white" p={12} rounded={6} id="contentFlex">
<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} />
<Divider mb={6} mt={6}/>
<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.
<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>

12
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,
});
}
}

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

Loading…
Cancel
Save