From 0b8cbaad41e0e0802a154704087f47cf901fdc7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 6 Sep 2022 21:36:58 -0300
Subject: [PATCH] Add missing register fields and some improvements

---
 src/app/AuthenticatedApp.js   |  3 ++-
 src/screens/Login/View.js     |  2 +-
 src/screens/Register/View.js  | 28 ++++++++++++++++++++++------
 src/screens/Register/index.js | 11 +++++++++--
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/app/AuthenticatedApp.js b/src/app/AuthenticatedApp.js
index 38afdce..ec7c01e 100644
--- a/src/app/AuthenticatedApp.js
+++ b/src/app/AuthenticatedApp.js
@@ -27,7 +27,7 @@ function AuthenticatedApp() {
         <Toolbar
           title={
             <p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
-              Olá, <strong>{state.user.name}</strong> 👋
+              Olá, <strong>{state.user.firstName}</strong> 👋
             </p>
           }
           layoutType={layoutType}
@@ -52,6 +52,7 @@ function AuthenticatedApp() {
               <Route path=":id" element={<Assignment />} />
             </Route>
             <Route path="/login" element={<Navigate to="/home" />} />
+            <Route path="/register" element={<Navigate to="/home" />} />
             <Route path="/" element={<Navigate to="/home" />} />
           </Routes>
         </Container>
diff --git a/src/screens/Login/View.js b/src/screens/Login/View.js
index 10c4389..a5cc106 100644
--- a/src/screens/Login/View.js
+++ b/src/screens/Login/View.js
@@ -72,7 +72,7 @@ function View({
               Entrar
             </Button>
             <Link href="#">Esqueci minha senha</Link>
-            <Link href="#">Cadastre-se</Link>
+            <Link href="register">Cadastre-se</Link>
           </Stack>
         </Box>
       </Paper>
diff --git a/src/screens/Register/View.js b/src/screens/Register/View.js
index 96faa34..f6b9b25 100644
--- a/src/screens/Register/View.js
+++ b/src/screens/Register/View.js
@@ -2,6 +2,7 @@ import { Fragment } from 'react';
 import {
   Box,
   Button,
+  Checkbox,
   Container,
   FormControl,
   InputLabel,
@@ -11,7 +12,9 @@ import {
   Select,
   Stack,
   TextField,
+  Typography,
 } from '@mui/material';
+import dayjs from 'dayjs';
 
 import SnackbarIndicator from '../../components/SnackbarIndicator';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -19,7 +22,6 @@ import LoadingIndicator from '../../components/LoadingIndicator';
 import logoImage from '../../assets/if-salas-logo.svg';
 
 import styles from './styles';
-import dayjs from 'dayjs';
 
 function View({
   isPending,
@@ -28,11 +30,11 @@ function View({
   layoutType,
   data,
   onChangeInput,
+  onChangeCheckbox,
   onTryRegister,
 }) {
   const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType];
   const currentYear = dayjs().year();
-  console.log(currentYear);
 
   return (
     <Fragment>
@@ -144,15 +146,29 @@ function View({
               value={data.password}
               onChange={onChangeInput}
             />
+            <Stack flexDirection="row" alignItems="center">
+              <Checkbox
+                name="termsAgreed"
+                value={data.termsAgreed}
+                onChange={onChangeCheckbox}
+              />
+              <Typography sx={{ color: '#595959' }} variant="body1">
+                Eu li e aceito os <Link href="#">termos de uso. </Link>
+              </Typography>
+            </Stack>
             <Button
-              // disabled={!isSubmitable}
               onClick={onTryRegister}
               variant="contained"
+              disabled={!data.termsAgreed}
             >
-              Entrar
+              Criar conta
             </Button>
-            <Link href="#">Esqueci minha senha</Link>
-            <Link href="#">Cadastre-se</Link>
+
+            <Stack alignItems="center">
+              <Typography sx={{ color: '#595959' }} variant="body1">
+                Já possui uma conta? Então <Link href="login">faça login.</Link>
+              </Typography>
+            </Stack>
           </Stack>
         </Box>
         <Box sx={boxLogo}>
diff --git a/src/screens/Register/index.js b/src/screens/Register/index.js
index 19f609a..39af778 100644
--- a/src/screens/Register/index.js
+++ b/src/screens/Register/index.js
@@ -1,4 +1,3 @@
-import { Button } from '@mui/material';
 import { useState } from 'react';
 import { useAuthState } from '../../context/auth';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
@@ -7,7 +6,7 @@ import useLayoutType from '../../hooks/useLayoutType';
 import View from './View';
 
 function Register() {
-  useDocumentTitle('Entrar');
+  useDocumentTitle('Criar conta');
   const { register, isPending, isError, error } = useAuthState();
   const layoutType = useLayoutType();
   const [data, setData] = useState({
@@ -33,6 +32,13 @@ function Register() {
     setData(prev => ({ ...prev, [name]: value }));
   };
 
+  const onChangeCheckbox = e => {
+    const name = e.target.name;
+    const value = e.target.checked;
+
+    setData(prev => ({ ...prev, [name]: value }));
+  };
+
   return (
     <View
       isPending={isPending}
@@ -41,6 +47,7 @@ function Register() {
       layoutType={layoutType}
       data={data}
       onChangeInput={onChangeInput}
+      onChangeCheckbox={onChangeCheckbox}
       onTryRegister={onTryRegister}
     />
   );