Ajusts in login screen and implementing 404 page

src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { ButtonHTMLAttributes } from 'react';
 import StyledButton from './styles';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  color: string;
+  color?: string;
   colorText?: string;
   size?: string;
 }
@@ -24,6 +24,7 @@ const Button: React.FC<Props> = ({
 Button.defaultProps = {
   colorText: '#fff',
   size: '17.313rem',
+  color: '#F60846',
 };
 
 export default Button;

src/components/Button/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 interface StyledButtonProps {
-  color: string;
+  color?: string;
   colorText?: string;
   size?: string;
 }
@@ -23,7 +23,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   font-size: 1.5rem;
 
   color: ${props => props.colorText || '#fff'};
-  background: ${props => props.color};
+  background: ${props => props.color || '#F60846'};
 
   img {
     height: 1.875rem;

src/components/InputForm/styles.ts

@@ -9,7 +9,7 @@ interface ContainerProps {
 
 export const Container = styled.div<ContainerProps>`
   width: 100%;
-  max-width: 400px;
+  max-width: 40rem;
 
   display: flex;
   flex-direction: column;
@@ -26,7 +26,7 @@ export const Container = styled.div<ContainerProps>`
   section {
     display: flex;
     align-items: center;
-    max-width: 400px;
+    max-width: 40rem;
     width: 100%;
 
     padding: 0.2rem 1rem;

src/pages/Login/index.tsx

@@ -1,5 +1,6 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useLayoutEffect } from 'react';
 import { useHistory } from 'react-router-dom';
+import { message } from 'antd';
 
 import { Form } from '@unform/web';
 import { FormHandles } from '@unform/core';
@@ -10,6 +11,7 @@ import getValidationErrors from 'utils/getValidationErrors';
 import InputForm from 'components/InputForm';
 import Button from 'components/Button/Button';
 import Logo from 'assets/logo.svg';
+import { getUserToken } from 'services/auth';
 
 import loginSchema from './loginSchema';
 import Content from './styles';
@@ -24,6 +26,12 @@ function Login() {
   const history = useHistory();
   const formRef = useRef<FormHandles>(null);
 
+  useLayoutEffect(() => {
+    const userToken = getUserToken();
+
+    if (userToken) history.push('/home');
+  }, [history]);
+
   const handleLoginDebug = useCallback(() => {
     const debugUser = {
       name: 'Debug Develop',
@@ -47,10 +55,13 @@ function Login() {
   }, [history]);
 
   const handleLogin = useCallback(
-    (data: SignInData) => {
-      const isLoginSuccess = signIn(data);
+    async (data: SignInData) => {
+      const isLoginSuccess = await signIn(data);
 
       if (isLoginSuccess) history.push('/home');
+      message.error(
+        'Erro ao fazer login! se persistir contacte o administrador',
+      );
     },
     [signIn, history],
   );

src/pages/Login/styles.ts

@@ -18,7 +18,7 @@ const Content = styled.div`
     .EmailPassword,
     .LoginPassForgot {
       width: 100%;
-      max-width: 50rem;
+      max-width: 40rem;
     }
 
     a {

src/pages/NotFound/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from 'components/Button/Button';
+
+import { Container } from './styles';
+
+const NotFound = () => {
+  return (
+    <Container>
+      <h1>NotFound</h1>
+      <h2>404</h2>
+      <Button>HOME</Button>
+    </Container>
+  );
+};
+
+export default NotFound;

src/pages/NotFound/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+`;

src/pages/RegisterNewUser/index.tsx

@@ -88,7 +88,7 @@ const RegisterNewUser = () => {
               <Input
                 name="email"
                 title="E-mail"
-                styleWidth="400px"
+                styleWidth="40rem"
                 defaultValue={inviteInfo?.email || ''}
                 readOnly={!!inviteInfo?.email}
               />

src/routes.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import RecoveryPassword from 'pages/RecoveryPassword';
-import { Switch, BrowserRouter } from 'react-router-dom';
+import { Switch, BrowserRouter, Redirect } from 'react-router-dom';
 
 import { getMode } from 'services/api';
 
@@ -13,6 +13,7 @@ import Home from 'pages/Home';
 import Main from './pages/Main';
 import Login from './pages/Login';
 import InviteUsers from './pages/InviteUsers';
+import NotFound from './pages/NotFound';
 
 export default function Routes() {
   const isNotProduction = getMode();
@@ -28,6 +29,8 @@ export default function Routes() {
         <Route path="/recovery" component={RecoveryPassword} />
         <Route path="/login" component={Login} />
         <Route path="/invite/:token" component={RegisterNewUser} />
+        <Route path="/404" component={NotFound} />
+        <Redirect to="/404" />
       </Switch>
     </BrowserRouter>
   );