0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create a separate flow for registration

Browse source
This commit is contained in:
Vishnu Mohandas 2020-11-21 17:48:03 +05:30
parent a7664dbab1
commit b298c94519
7 changed files with 137 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Container.ts
View file

@ -11,3 +11,10 @@ const Container = styled.div`
`;
export default Container;
export const DisclaimerContainer = styled.div`
margin: 16px 0;
color: rgb(158, 150, 137);
font-size: 14px;
`;

4
src/pages/generate/index.tsx
View file

@ -7,7 +7,7 @@ import constants from 'utils/strings/constants';
import { Formik, FormikHelpers } from 'formik';
import * as Yup from 'yup';
import Button from 'react-bootstrap/Button';
import { putKeyAttributes } from 'services/userService';
import { putAttributes } from 'services/userService';
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
import { useRouter } from 'next/router';
import { getKey, SESSION_KEYS, setKey } from 'utils/storage/sessionStorage';
@ -68,7 +68,7 @@ export default function Generate() {
encryptedSecretKey: await cryptoWorker.toB64(encryptedKeyPairAttributes.encryptedData),
secretKeyDecryptionNonce: await cryptoWorker.toB64(encryptedKeyPairAttributes.nonce)
};
await putKeyAttributes(token, keyAttributes);
await putAttributes(token, getData(LS_KEYS.USER).name, keyAttributes);
setData(LS_KEYS.KEY_ATTRIBUTES, keyAttributes);
const sessionKeyAttributes = await cryptoWorker.encrypt(key);

21
src/pages/index.tsx
View file

@ -18,9 +18,10 @@ interface formValues {
export default function Home() {
const [loading, setLoading] = useState(false);
const router = useRouter();
useEffect(() => {
router.prefetch('/verify');
router.prefetch('/signup');
const user = getData(LS_KEYS.USER);
if (user?.email) {
router.push('/verify');
@ -39,13 +40,17 @@ export default function Home() {
setLoading(false);
}
const register = () => {
router.push('/signup');
}
return (
<Container>
<Card style={{ minWidth: '300px' }}>
<Card style={{ minWidth: '300px' }} className="text-center">
<Card.Body>
<Card.Title>{constants.LOGIN}</Card.Title>
<Card.Title style={{ marginBottom: '20px' }}>{constants.LOGIN}</Card.Title>
<Formik<formValues>
initialValues={{email: ''}}
initialValues={{ email: '' }}
validationSchema={Yup.object().shape({
email: Yup.string()
.email(constants.EMAIL_ERROR)
@ -53,10 +58,9 @@ export default function Home() {
})}
onSubmit={loginUser}
>
{({values, errors, touched, handleChange, handleBlur, handleSubmit}) => (
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>{constants.EMAIL}</Form.Label>
<Form.Control
type="email"
placeholder={constants.ENTER_EMAIL}
@ -69,19 +73,18 @@ export default function Home() {
<FormControl.Feedback type="invalid">
{errors.email}
</FormControl.Feedback>
<Form.Text className="text-muted">
{constants.EMAIL_DISCLAIMER}
</Form.Text>
</Form.Group>
<Button
variant="primary" type="submit" block
disabled={loading}
style={{ marginBottom: '12px' }}
>
{constants.SUBMIT}
</Button>
</Form>
)}
</Formik>
<Card.Link href="#" onClick={register} style={{ fontSize: '14px' }}>Don't have an account?</Card.Link>
</Card.Body>
</Card>
</Container>

107
src/pages/signup/index.tsx Normal file
View file

@ -0,0 +1,107 @@
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Card from 'react-bootstrap/Card';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import constants from 'utils/strings/constants';
import { Formik, FormikHelpers } from 'formik';
import * as Yup from 'yup';
import { getOtt } from 'services/userService';
import Container from 'components/Container';
import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
import { DisclaimerContainer } from 'components/Container';
interface FormValues {
name: string;
email: string;
}
export default function Home() {
const [loading, setLoading] = useState(false);
const router = useRouter();
useEffect(() => {
router.prefetch('/verify');
const user = getData(LS_KEYS.USER);
if (user?.email) {
router.push('/verify');
}
}, []);
const registerUser = async ({ name, email }: FormValues, { setFieldError }: FormikHelpers<FormValues>) => {
try {
setLoading(true);
setData(LS_KEYS.USER, { name, email });
await getOtt(email);
router.push('/verify');
} catch (e) {
setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
}
setLoading(false);
}
return (
<Container>
<Card style={{ minWidth: '300px' }} className="text-center" >
<Card.Body>
<Card.Title style={{ marginBottom: '20px' }}>{constants.SIGN_UP}</Card.Title>
<Formik<FormValues>
initialValues={{ name: '', email: '' }}
validationSchema={Yup.object().shape({
name: Yup.string()
.required(constants.REQUIRED),
email: Yup.string()
.email(constants.EMAIL_ERROR)
.required(constants.REQUIRED)
})}
onSubmit={registerUser}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }): JSX.Element => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="registrationForm.name">
<Form.Control
type="text"
placeholder={constants.ENTER_NAME}
value={values.name}
onChange={handleChange('name')}
onBlur={handleBlur('name')}
isInvalid={Boolean(touched.name && errors.name)}
disabled={loading}
/>
<FormControl.Feedback type="invalid">
{errors.name}
</FormControl.Feedback>
</Form.Group>
<Form.Group controlId="registrationForm.email">
<Form.Control
type="email"
placeholder={constants.ENTER_EMAIL}
value={values.email}
onChange={handleChange('email')}
onBlur={handleBlur('email')}
isInvalid={Boolean(touched.email && errors.email)}
disabled={loading}
/>
<FormControl.Feedback type="invalid">
{errors.email}
</FormControl.Feedback>
</Form.Group>
<DisclaimerContainer>
{constants.DATA_DISCLAIMER}
</DisclaimerContainer>
<Button
variant="primary" type="submit" block
disabled={loading}
>
{constants.SUBMIT}
</Button>
</Form>
)}
</Formik>
</Card.Body>
</Card>
</Container>
)
}

1
src/pages/verify/index.tsx
View file

@ -45,6 +45,7 @@ export default function Verify() {
setLoading(true);
const resp = await verifyOtt(email, ott);
setData(LS_KEYS.USER, {
...getData(LS_KEYS.USER),
email,
token: resp.data.token,
id: resp.data.id,

5
src/services/userService.ts
View file

@ -12,8 +12,9 @@ export const verifyOtt = (email: string, ott: string) => {
return HTTPService.get(`${ENDPOINT}/users/credentials`, { email, ott });
}
export const putKeyAttributes = (token: string, keyAttributes: keyAttributes) => {
return HTTPService.put(`${ENDPOINT}/users/attributes`, { 'keyAttributes': keyAttributes, 'name': 'Dummy Name' }, null, {
export const putAttributes = (token: string, name: string, keyAttributes: keyAttributes) => {
console.log("name " + name);
return HTTPService.put(`${ENDPOINT}/users/attributes`, { 'name': name, 'keyAttributes': keyAttributes }, null, {
'X-Auth-Token': token,
});
}

7
src/utils/strings/englishConstants.tsx
View file

@ -6,9 +6,12 @@ import { template } from "./vernacularStrings";
const englishConstants = {
COMPANY_NAME: 'ente',
LOGIN: 'Login',
SIGN_UP: 'Sign Up',
NAME: 'Name',
ENTER_NAME: 'your name',
EMAIL: 'Email Address',
ENTER_EMAIL: 'Enter email',
EMAIL_DISCLAIMER: `We'll never share your email with anyone else.`,
ENTER_EMAIL: 'email address',
DATA_DISCLAIMER: `We'll never share your data with anyone else.`,
SUBMIT: 'Submit',
EMAIL_ERROR: 'Enter a valid email address',
REQUIRED: 'Required',