feat(client): add login view styles

packages/client/src/Routes.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import { routes } from './constants';
-import { Dashboard, SignIn, SignUp } from './containers';
+import { Dashboard, Login, Registration } from './containers';
 
 const Routes = () => (
   <BrowserRouter>
     <Switch>
-      <Route exact path={routes.home} component={SignIn} />
-      <Route path={routes.registration} component={SignUp} />
+      <Route exact path={routes.home} component={Login} />
+      <Route path={routes.registration} component={Registration} />
       <Route path={routes.dashboard} component={Dashboard} />
     </Switch>
   </BrowserRouter>

packages/client/src/containers/Login/Login.styled.ts

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  padding-bottom: 5vh;
+`;
+
+export const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 30px;
+  height: 50px;
+`;
+
+export const LogoWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const CardContainer = styled.div`
+  max-width: 500px;
+  width: 100%;
+  margin: 10px;
+`;
+
+export const ActionsContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  flex-wrap: wrap;
+`;
+
+export const LoginButtonContainer = styled.div(
+  ({ theme: { breakpoints, down } }) => `
+  max-width: 200px;
+  width: 100%;
+  margin-left: 10px;
+  ${down(breakpoints.sm)} {
+    max-width: 100%;
+    margin-left: 0;
+    margin-top: 20px;
+  }
+`,
+);
+
+export const IconWrapper = styled.div`
+  color: ${({ theme }) => theme.palette.colors.orange};
+`;

packages/client/src/containers/SignIn/SignIn.types.d.ts → packages/client/src/containers/Login/Login.types.d.ts

@@ -1,4 +1,4 @@
-export interface SignInInputs {
+export interface LoginInputs {
   email: string;
   password: string;
   keepMeLoggedIn?: boolean;

packages/client/src/containers/Login/index.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useHistory } from 'react-router-dom';
+
+import { BackgroundLogo, Button, Card, Checkbox, Form, Link, TextField } from '../../elements';
+import { useAuth, useSnackbar } from '../../hooks';
+import { EmailIcon, SmartGateLogo } from '../../icons';
+import {
+  ActionsContainer,
+  CardContainer,
+  Container,
+  IconWrapper,
+  LinksContainer,
+  LoginButtonContainer,
+  LogoWrapper,
+} from './Login.styled';
+import { LoginInputs } from './Login.types';
+
+const Login = () => {
+  const history = useHistory();
+  const [loading, setLoading] = useState(false);
+  const showSnackbar = useSnackbar();
+  const { register, handleSubmit, errors, reset, trigger } = useForm<LoginInputs>({
+    mode: 'onBlur',
+  });
+  const auth = useAuth();
+
+  if (!auth) {
+    return null;
+  }
+
+  const onSubmit = async (values: LoginInputs) => {
+    setLoading(true);
+    const isValid = await trigger();
+
+    if (!isValid) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await auth.login(values);
+      reset();
+      history.push('/dashboard');
+    } catch (error) {
+      if (!error.response) {
+        showSnackbar({ message: error.message, severity: 'error' });
+      } else {
+        const { message } = error.response.data;
+        showSnackbar({ message, severity: 'error' });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const emailIcon = (
+    <IconWrapper>
+      <EmailIcon />
+    </IconWrapper>
+  );
+
+  return (
+    <Container>
+      <BackgroundLogo />
+      <CardContainer>
+        <Card>
+          <LogoWrapper>
+            <SmartGateLogo />
+          </LogoWrapper>
+          <Form
+            onSubmit={handleSubmit(onSubmit)}
+            errors={errors}
+            register={register}
+            loading={loading}
+          >
+            <TextField
+              name="email"
+              placeholder="Enter your email"
+              required
+              autoFocus
+              startAdornment={emailIcon}
+            />
+            <TextField
+              required
+              name="password"
+              placeholder="Enter your password"
+              type="password"
+              autoComplete="current-password"
+            />
+            <ActionsContainer>
+              <Checkbox name="keepMeLoggedIn" />
+              <LoginButtonContainer>
+                <Button type="submit" fullWidth disabled={loading} withArrow>
+                  Log in
+                </Button>
+              </LoginButtonContainer>
+            </ActionsContainer>
+            <LinksContainer>
+              <Link to="/" colorVariant="grey">
+                Forgot password?
+              </Link>
+              <Link to="/registration" colorVariant="colour">
+                I don’t have an account
+              </Link>
+            </LinksContainer>
+          </Form>
+        </Card>
+      </CardContainer>
+    </Container>
+  );
+};
+
+export default Login;

packages/client/src/containers/SignUp/SignUp.types.d.ts → packages/client/src/containers/Registration/Registration.types.d.ts

@@ -1,4 +1,4 @@
-export interface SignUpInputs {
+export interface RegistrationInputs {
   firstName: string;
   lastName: string;
   email: string;

packages/client/src/containers/SignUp/index.tsx → packages/client/src/containers/Registration/index.tsx

@@ -6,23 +6,25 @@ import { regex } from '../../constants';
 import { Button, Card, Form, Link, TextField } from '../../elements';
 import { useAuth, useSnackbar } from '../../hooks';
 import { UserIcon } from '../../icons';
-import { Container } from './SignUp.styled';
-import { SignUpInputs } from './SignUp.types';
+import { Container } from './Registration.styled';
+import { RegistrationInputs } from './Registration.types';
 
-export default function Index() {
+const Registration = () => {
   const showSnackbar = useSnackbar();
   const history = useHistory();
   const [loading, setLoading] = useState(false);
-  const { register, handleSubmit, errors, reset, trigger, getValues } = useForm<SignUpInputs>({
-    mode: 'onBlur',
-  });
+  const { register, handleSubmit, errors, reset, trigger, getValues } = useForm<RegistrationInputs>(
+    {
+      mode: 'onBlur',
+    },
+  );
   const auth = useAuth();
 
   if (!auth) {
     return null;
   }
 
-  const onSubmit = async (values: SignUpInputs) => {
+  const onSubmit = async (values: RegistrationInputs) => {
     setLoading(true);
     const isValid = await trigger();
 
@@ -99,4 +101,6 @@ export default function Index() {
       </Card>
     </Container>
   );
-}
+};
+
+export default Registration;

packages/client/src/containers/index.ts

@@ -1,4 +1,4 @@
 export { default as Dashboard } from './Dashboard';
 export { default as DefaultLayout } from './DefaultLayout';
-export { default as SignIn } from './SignIn';
-export { default as SignUp } from './SignUp';
+export { default as Login } from './Login';
+export { default as Registration } from './Registration';

packages/client/src/elements/BackgroundLogo/BackgroundLogo.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import BackgroundLogo from '.';
+
+export default {
+  title: 'Elements/BackgroundLogo',
+  component: BackgroundLogo,
+} as Meta;
+
+const Template: Story = (args) => <BackgroundLogo {...args} />;
+
+export const Default = Template.bind({});

packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const BackgroundLogoWrapper = styled.div(
+  ({ theme: { breakpoints, up, palette } }) => `
+  display: none;
+  ${up(breakpoints.lg)} {
+      position: fixed;
+      z-index: -999;
+      top: -2%;
+      right: -15%;
+      left: 50%;
+      bottom: -2%;
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      color: ${palette.background.paper};
+      opacity: 0.75
+  }
+  `,
+);