Create a separate flow for registration

src/components/Container.ts

@@ -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;
+`;

src/pages/generate/index.tsx

@@ -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);

src/pages/index.tsx

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

src/pages/signup/index.tsx

@@ -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>
+    )
+}

src/pages/verify/index.tsx

@@ -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,

src/services/userService.ts

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

src/utils/strings/englishConstants.tsx

@@ -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',