Merge pull request #229 from glific/auth-restructuring

Auth restructuring

src/containers/Auth/Auth.module.css

@@ -0,0 +1,122 @@
+.Container {
+  width: 100%;
+  height: 100vh;
+}
+
+.Auth {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  vertical-align: middle;
+}
+
+.GlificLogo {
+  font-family: 'Tenor Sans';
+  color: #0d6b3d;
+  font-size: 36px;
+  margin-top: 5vh;
+}
+
+.Box {
+  border-radius: 12px;
+  margin-top: 5vh;
+  align-content: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.RegistrationBox {
+  width: 400px;
+  height: 450px;
+  background-color: #073f24;
+}
+
+.OTPBox {
+  width: 400px;
+  height: 360px;
+  background-color: #073f24;
+}
+
+.LoginBox {
+  height: 390px;
+  width: 395px;
+  border-color: #eaedec;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.BoxTitle {
+  justify-content: start;
+  margin-bottom: 10px;
+  margin-top: 32px;
+  margin-left: 32px;
+  font-weight: bold;
+  width: 320px;
+}
+
+.RegistrationBoxTitle {
+  color: white;
+}
+
+.LoginBoxTitle {
+  color: #073f24;
+}
+
+.TitleText {
+  font-weight: bold !important;
+}
+
+.CenterBox {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.AuthButton {
+  width: 335px;
+  border-radius: 27px !important;
+  margin-top: 20px !important;
+}
+
+.LoginButton {
+  background-color: white !important;
+  border: solid 2px #119656 !important;
+  margin-top: 0px;
+  color: #119656 !important;
+}
+
+.OrText {
+  color: #93a29b;
+  font-weight: bolder;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  font-size: 16px;
+}
+
+.Auth a {
+  color: #119656;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: bolder;
+}
+
+.Auth a:visited {
+  color: #119656;
+}
+
+.Auth hr {
+  margin-top: 32px;
+  margin-left: 18px;
+  margin-right: 18px;
+  height: 1px;
+  width: 142px;
+  border-color: #eaedec;
+  background-color: #eaedec;
+  color: #eaedec;
+  border-style: solid;
+}
+
+.Or {
+  display: flex;
+  flex-direction: row;
+}

src/containers/Auth/Auth.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import styles from './Auth.module.css';
+import { Typography } from '@material-ui/core';
+import { Button } from '../../components/UI/Form/Button/Button';
+import { Link } from 'react-router-dom';
+
+export interface AuthProps {
+  children: any;
+  pageTitle: string;
+  buttonText: string;
+  alternateLink?: string;
+  alternateText?: string;
+  handlerSubmitCallback: Function;
+  mode: string;
+}
+
+const Auth: React.SFC<AuthProps> = (props) => {
+  const boxClass = [styles.Box];
+  const boxTitleClass = [styles.BoxTitle];
+  const buttonClass = [styles.AuthButton];
+  switch (props.mode) {
+    case 'login':
+      boxClass.push(styles.LoginBox);
+      boxTitleClass.push(styles.LoginBoxTitle);
+      buttonClass.push(styles.LoginButton);
+      break;
+    case 'registration':
+      boxClass.push(styles.RegistrationBox);
+      boxTitleClass.push(styles.RegistrationBoxTitle);
+      break;
+    case 'confirmotp':
+      boxClass.push(styles.OTPBox);
+      boxTitleClass.push(styles.RegistrationBoxTitle);
+      break;
+  }
+
+  return (
+    <div className={styles.Container}>
+      <div className={styles.Auth}>
+        <div className={styles.GlificLogo}>Glific</div>
+        <div className={boxClass.join(' ')}>
+          <div className={boxTitleClass.join(' ')}>
+            <Typography variant="h4" classes={{ root: styles.TitleText }}>
+              {props.pageTitle}
+            </Typography>
+          </div>
+          <div className={styles.CenterBox}>
+            {props.children}
+            <Button
+              data-testid="AuthButton"
+              onClick={props.handlerSubmitCallback}
+              color="primary"
+              variant={'contained'}
+              className={buttonClass.join(' ')}
+            >
+              {props.buttonText}
+            </Button>
+          </div>
+        </div>
+        {props.alternateText ? (
+          <>
+            <div className={styles.Or}>
+              <hr />
+              <div className={styles.OrText}>OR</div>
+              <hr />
+            </div>
+            <div>
+              <Link to={'/' + props.alternateLink}>{props.alternateText}</Link>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Auth;

src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { ConfirmOTP } from './ConfirmOTP';
-import { OutlinedInput, Button, FormHelperText } from '@material-ui/core';
+import { OutlinedInput, Button } from '@material-ui/core';
 import axios from 'axios';
+import { wait } from '@testing-library/react';
+
+import { ConfirmOTP } from './ConfirmOTP';
 
 jest.mock('axios');
 const mockedAxios = axios as jest.Mocked<typeof axios>;
@@ -21,7 +23,7 @@ describe('ConfirmOTP test', () => {
     expect(wrapper.find(OutlinedInput).prop('value')).toEqual('123456');
   });
 
-  it('axios post request catchs error', () => {
+  it('axios post request catchs error', async () => {
     jest.mock('axios');
     const wrapper = mount(createConfirmOTP());
     const response = {
@@ -31,9 +33,9 @@ describe('ConfirmOTP test', () => {
     wrapper.find(Button).simulate('click');
   });
 
-  it('sends post request', () => {
+  it('sends post request', async () => {
     jest.mock('axios');
-    const wrapper = shallow(
+    const wrapper = mount(
       <ConfirmOTP
         location={{
           state: {
@@ -46,13 +48,16 @@ describe('ConfirmOTP test', () => {
     const response = {
       data: { renewal_token: '123213123', access_token: '456456456' },
     };
+
     wrapper
-      .find(OutlinedInput)
-      .at(0)
+      .find('[data-testid="AuthenticationCode"] input')
       .simulate('change', { target: { value: '123456' } });
-    expect(wrapper.find(OutlinedInput).prop('value')).toEqual('123456');
+    expect(wrapper.find('[data-testid="AuthenticationCode"] input').prop('value')).toEqual(
+      '123456'
+    );
     mockedAxios.post = jest.fn().mockResolvedValueOnce(Promise.resolve(response));
-    wrapper.find('Button').simulate('click');
+    wrapper.find('button[data-testid="AuthButton"]').simulate('click');
+    await wait();
     expect(mockedAxios.post).toHaveBeenCalledTimes(1);
   });