naresh
/
our-sejahtera
mirror of https://github.com/naresh97/our-sejahtera
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

formatting

feature/qrscanner
Nareshkumar Rao 3 years ago
parent
77f0b3b753
commit
81f0a541f9
6 changed files with 182 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      README.md
  2. 10
      src/App.css
  3. 229
      src/screens/CreateScreen.js
  4. 16
      src/screens/HomeScreen.js
  5. 9
      src/screens/LoginScreen.js
  6. 43
      src/screens/SuccessScreen.js

9
README.md
View File

@ -3,24 +3,29 @@
This app was created to serve the need for easy to use contact tracing. This app was created to serve the need for easy to use contact tracing.
## Usage ## Usage
The app should work as such: The app should work as such:
1. Group/Organization leaders will be created an account on the app. 1. Group/Organization leaders will be created an account on the app.
2. Upon logging in, they will see a QR code that they can display 2. Upon logging in, they will see a QR code that they can display
3. Their members can scan this QR code, in order to create their own accounts. This way, there each member has a "parent" member, and all memberships can be traced. 3. Their members can scan this QR code, in order to create their own accounts. This way, there each member has a "parent" member, and all memberships can be traced.
4. Upon creating their account, new members will also have a QR Code they can display. 4. Upon creating their account, new members will also have a QR Code they can display.
5. Other members can scan each other QR codes in order to register a *Contact* in the backend.
6. All *Contacts* between members can be retrievable from the backend at a later time.
5. Other members can scan each other QR codes in order to register a _Contact_ in the backend.
6. All _Contacts_ between members can be retrievable from the backend at a later time.
## Development ## Development
### Prerequisites ### Prerequisites
- NodeJS - NodeJS
- Yarn - Yarn
### Building ### Building
- Use `yarn install` to install the necessary packages - Use `yarn install` to install the necessary packages
- Use `yarn start` to start app in development mode in [http://localhost:3000](http://localhost:3000) - Use `yarn start` to start app in development mode in [http://localhost:3000](http://localhost:3000)
- Use `yarn build` to build an optimized app for production. - Use `yarn build` to build an optimized app for production.
### .env ### .env
Don't forget to copy the .env.template to .env and fill in the values Don't forget to copy the .env.template to .env and fill in the values

10
src/App.css
View File

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

229
src/screens/CreateScreen.js
View File

@ -1,4 +1,13 @@
import { Button, Flex, FormControl, FormLabel, Heading, Input, Select, useToast } from '@chakra-ui/react';
import {
Button,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Select,
useToast,
} from '@chakra-ui/react';
import axios from 'axios'; import axios from 'axios';
import { useState } from 'react'; import { useState } from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
@ -6,124 +15,126 @@ import { useHistory } from 'react-router-dom';
import { authLogin } from '../features/auth/authSlice'; import { authLogin } from '../features/auth/authSlice';
function OrgSelect(props) { function OrgSelect(props) {
const orgs = ["MISI: Solidariti", "UNDI18"];
const orgOptions = orgs.map((name) => {
return (
<option value={name}>{name}</option>
)
});
const orgs = ['MISI: Solidariti', 'UNDI18'];
const orgOptions = orgs.map(name => {
return <option value={name}>{name}</option>;
});
return (
<Select placeholder={props.placeholder} onChange={props.onChange}>
{orgOptions}
</Select>
);
return (
<Select placeholder={props.placeholder} onChange={props.onChange}>
{orgOptions}
</Select>
);
} }
function Create() { function Create() {
const dispatch = useDispatch();
const toast = useToast();
const history = useHistory();
const dispatch = useDispatch();
const toast = useToast();
const history = useHistory();
const [name, setName] = useState(null);
const [email, setEmail] = useState(null);
const [phoneNumber, setPhoneNumber] = useState(null);
const [org, setOrg] = useState(null);
const [password, setPassword] = useState(null);
const [name, setName] = useState(null);
const [email, setEmail] = useState(null);
const [phoneNumber, setPhoneNumber] = useState(null);
const [org, setOrg] = useState(null);
const [password, setPassword] = useState(null);
const handleSubmit = e => {
e.preventDefault();
const handleSubmit = (e) => {
e.preventDefault();
if (!name | !email | !phoneNumber | !org | !password) {
toast({
title: 'Problem!',
description: 'Please fill in all the fields',
status: 'error',
duration: 2000,
isClosable: true,
});
return;
}
if (!name | !email | !phoneNumber | !org | !password) {
toast({
title: 'Problem!',
description: 'Please fill in all the fields',
status: 'error',
duration: 2000,
isClosable: true,
});
return;
axios
.post(
`${process.env.REACT_APP_API_URL}/create`,
{
name: name,
email: email,
org: org,
phoneNumber: org,
password: password,
},
{
withCredentials: true,
} }
)
.then(response => {
if (response.data.success) {
dispatch(authLogin());
history.push('/success');
} else {
toast({
title: 'An error occurred',
description: response.data.message,
status: 'error',
duration: 5000,
isClosable: true,
});
}
})
.catch(e => {
if (e.response.status === 401) {
toast({
title: 'Verification Error',
description:
"You couldn't be verified. Please try scanning the verification QR Code again.",
status: 'error',
duration: 9000,
isClosable: true,
});
}
});
};
axios
.post(
`${process.env.REACT_APP_API_URL}/create`,
{
name: name,
email: email,
org: org,
phoneNumber: org,
password: password,
},
{
withCredentials: true,
}
)
.then(response => {
if (response.data.success) {
dispatch(authLogin());
history.push('/success');
} else {
toast({
title: 'An error occurred',
description: response.data.message,
status: 'error',
duration: 5000,
isClosable: true,
});
}
})
.catch(e=>{
if(e.response.status === 401){
toast({
title: 'Verification Error',
description: "You couldn't be verified. Please try scanning the verification QR Code again.",
status: 'error',
duration: 9000,
isClosable: true,
});
}
});
}
return (
<Flex
height="100vh"
background="teal.100"
alignItems="center"
justifyContent="center"
>
<Flex direction="column" background="white" p={12} rounded={6}>
<Heading mb={6}>
Create Account
</Heading>
<form onSubmit={handleSubmit}>
<FormControl mb={6}>
<FormLabel>Name:</FormLabel>
<Input onChange={e => setName(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel >Email:</FormLabel>
<Input type="email" onChange={e => setEmail(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Phone Number:</FormLabel>
<Input onChange={e => setPhoneNumber(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Organization:</FormLabel>
<OrgSelect placeholder="Select Organization" onChange={e => setOrg(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Password:</FormLabel>
<Input type="password" onChange={e => setPassword(e.target.value)} />
</FormControl>
<Button type="submit">Create!</Button>
</form>
</Flex>
</Flex>
)
return (
<Flex
height="100vh"
background="teal.100"
alignItems="center"
justifyContent="center"
>
<Flex direction="column" background="white" p={12} rounded={6}>
<Heading mb={6}>Create Account</Heading>
<form onSubmit={handleSubmit}>
<FormControl mb={6}>
<FormLabel>Name:</FormLabel>
<Input onChange={e => setName(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Email:</FormLabel>
<Input type="email" onChange={e => setEmail(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Phone Number:</FormLabel>
<Input onChange={e => setPhoneNumber(e.target.value)} />
</FormControl>
<FormControl mb={6}>
<FormLabel>Organization:</FormLabel>
<OrgSelect
placeholder="Select Organization"
onChange={e => setOrg(e.target.value)}
/>
</FormControl>
<FormControl mb={6}>
<FormLabel>Password:</FormLabel>
<Input
type="password"
onChange={e => setPassword(e.target.value)}
/>
</FormControl>
<Button type="submit">Create!</Button>
</form>
</Flex>
</Flex>
);
} }
export default Create; export default Create;

16
src/screens/HomeScreen.js
View File

@ -22,14 +22,13 @@ function QRCode() {
dispatch(authLogout()); dispatch(authLogout());
} }
}); });
}, [])
}, []);
if (url) { if (url) {
return <Image src={url} />; return <Image src={url} />;
} else { } else {
return <Spinner />; return <Spinner />;
} }
} }
function Home() { function Home() {
@ -43,9 +42,18 @@ function Home() {
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
> >
<Flex direction="column" background="white" p={12} rounded={6} id="QRFlex">
<Flex
direction="column"
background="white"
p={12}
rounded={6}
id="QRFlex"
>
<QRCode /> <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>
<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>
</Flex> </Flex>
); );

9
src/screens/LoginScreen.js
View File

@ -1,10 +1,11 @@
import { import {
Button, Flex,
Button,
Flex,
FormControl, FormControl,
FormLabel, FormLabel,
Heading, Heading,
Input, Input,
useToast
useToast,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import axios from 'axios'; import axios from 'axios';
import { React, useState } from 'react'; import { React, useState } from 'react';
@ -77,7 +78,9 @@ function Login() {
isClosable: true, isClosable: true,
}); });
}) })
.finally(() => { toast.closeAll(); });
.finally(() => {
toast.closeAll();
});
e.preventDefault(); e.preventDefault();
}; };

43
src/screens/SuccessScreen.js
View File

@ -1,23 +1,32 @@
import { Button, Flex, Heading, Text } from "@chakra-ui/react";
import { useHistory } from "react-router-dom";
import { Button, Flex, Heading, Text } from '@chakra-ui/react';
import { useHistory } from 'react-router-dom';
function Success(){
const history = useHistory();
function Success() {
const history = useHistory();
return (
<Flex
height="100vh"
background="teal.100"
alignItems="center"
justifyContent="center"
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, and let
others scan your QR code too!
</Text>
<Button
onClick={() => {
history.push('/home');
}}
> >
<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, and let others scan your QR code too!</Text>
<Button onClick={()=>{history.push("/home")}}>Return home</Button>
</Flex>
</Flex>
);
Return home
</Button>
</Flex>
</Flex>
);
} }
export default Success; export default Success;
Write Preview
Loading…
Cancel
Save