From 5085c05623308c0cba24d2ca1abcc2d15bfb967d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Mon, 5 Sep 2022 22:03:53 -0300 Subject: [PATCH] Add initial desktop register screen --- src/app/UnauthenticatedApp.js | 2 + src/context/auth.js | 26 ++++- src/screens/Register/View.js | 179 +++++++++++++++++++++++++++++++++ src/screens/Register/index.js | 49 +++++++++ src/screens/Register/styles.js | 89 ++++++++++++++++ src/services/user-service.js | 12 +++ 6 files changed, 354 insertions(+), 3 deletions(-) create mode 100644 src/screens/Register/View.js create mode 100644 src/screens/Register/index.js create mode 100644 src/screens/Register/styles.js diff --git a/src/app/UnauthenticatedApp.js b/src/app/UnauthenticatedApp.js index 32d2501..9a81ad7 100644 --- a/src/app/UnauthenticatedApp.js +++ b/src/app/UnauthenticatedApp.js @@ -2,6 +2,7 @@ import { Container } from '@mui/material'; import { Navigate, Route, Routes } from 'react-router-dom'; import Login from '../screens/Login'; +import Register from '../screens/Register'; import UnauthenticatedHome from '../screens/UnauthenticatedHome'; function UnauthenticatedApp() { @@ -10,6 +11,7 @@ function UnauthenticatedApp() { } /> } /> + } /> } /> diff --git a/src/context/auth.js b/src/context/auth.js index 1d5fb19..fc3f4b2 100644 --- a/src/context/auth.js +++ b/src/context/auth.js @@ -1,5 +1,5 @@ import { createContext, useContext, useEffect, useState } from 'react'; -import { getUser } from '../services/user-service'; +import { getUser, registerUser } from '../services/user-service'; const AuthContext = createContext(); @@ -20,6 +20,20 @@ function AuthProvider(props) { bootstrapUser(); }, []); + const register = data => { + setState({ ...state, status: 'pending' }); + let shouldFail = + data.email !== 'leo@gmail.com' && data.password !== '#leo1234'; + + return registerUser(data, shouldFail).then(data => { + if (shouldFail) { + return setState({ status: 'error', user: null, error: data }); + } else { + return setState({ status: 'success', user: data, error: null }); + } + }); + }; + const login = (email, password) => { setState({ ...state, status: 'pending' }); let shouldFail = email !== 'leo@gmail.com' && password !== '#leo1234'; @@ -38,11 +52,16 @@ function AuthProvider(props) { window.localStorage.clear(); }; - return ; + return ( + + ); } function useAuthState() { - const { state, login, logout } = useContext(AuthContext); + const { state, register, login, logout } = useContext(AuthContext); const isPending = state.status === 'pending'; const isError = state.status === 'error'; const isSuccess = state.status === 'success'; @@ -55,6 +74,7 @@ function useAuthState() { isError, isSuccess, isAuthenticated, + register, login, logout, }; diff --git a/src/screens/Register/View.js b/src/screens/Register/View.js new file mode 100644 index 0000000..96faa34 --- /dev/null +++ b/src/screens/Register/View.js @@ -0,0 +1,179 @@ +import { Fragment } from 'react'; +import { + Box, + Button, + Container, + FormControl, + InputLabel, + Link, + MenuItem, + Paper, + Select, + Stack, + TextField, +} from '@mui/material'; + +import SnackbarIndicator from '../../components/SnackbarIndicator'; +import LoadingIndicator from '../../components/LoadingIndicator'; + +import logoImage from '../../assets/if-salas-logo.svg'; + +import styles from './styles'; +import dayjs from 'dayjs'; + +function View({ + isPending, + isError, + error, + layoutType, + data, + onChangeInput, + onTryRegister, +}) { + const { paper, boxLogo, boxForm, logoContainer } = styles[layoutType]; + const currentYear = dayjs().year(); + console.log(currentYear); + + return ( + + + +

Criar conta

+

Crie sua conta digitando os dados abaixo.

+ + + + + + + Curso + + + + + + Ano da turma + + + + {/* TODO: Add field mask */} + + + + + Esqueci minha senha + Cadastre-se + + + + + Logotipo +

A plataforma de ensino de código aberto.

+ + + + + + + ); +} + +export default View; diff --git a/src/screens/Register/index.js b/src/screens/Register/index.js new file mode 100644 index 0000000..19f609a --- /dev/null +++ b/src/screens/Register/index.js @@ -0,0 +1,49 @@ +import { Button } from '@mui/material'; +import { useState } from 'react'; +import { useAuthState } from '../../context/auth'; +import { useDocumentTitle } from '../../hooks/useDocumentTitle'; +import useLayoutType from '../../hooks/useLayoutType'; + +import View from './View'; + +function Register() { + useDocumentTitle('Entrar'); + const { register, isPending, isError, error } = useAuthState(); + const layoutType = useLayoutType(); + const [data, setData] = useState({ + firstName: '', + lastName: '', + ra: '', + course: 0, + year: 0, + phone: '', + email: '', + password: '', + termsAgreed: false, + }); + + const onTryRegister = () => { + register(data); + }; + + const onChangeInput = e => { + const name = e.target.name; + const value = e.target.value; + + setData(prev => ({ ...prev, [name]: value })); + }; + + return ( + + ); +} + +export default Register; diff --git a/src/screens/Register/styles.js b/src/screens/Register/styles.js new file mode 100644 index 0000000..a09cf88 --- /dev/null +++ b/src/screens/Register/styles.js @@ -0,0 +1,89 @@ +// ========== Desktop ========== +const desktopPaper = { + width: '1500px', + height: '70%', + display: 'flex', + justifyContent: 'center', + color: 'white', + textAlign: 'center', +}; + +const baseBox = { + width: '100%', + height: '100%', + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + padding: '0 70px', +}; + +const desktopBoxLogo = { + ...baseBox, + backgroundColor: 'secondary.main', +}; + +const desktopBoxForm = { + ...baseBox, + '> h1, p ': { + textAlign: 'initial', + }, + '> h1': { + color: 'primary.black', + margin: 0, + }, + '> p': { + color: 'primary.lightGray', + }, +}; + +const logoContainerDesktop = {}; + +const desktop = { + paper: desktopPaper, + boxLogo: desktopBoxLogo, + boxForm: desktopBoxForm, + logoContainer: logoContainerDesktop, +}; + +// ========== Mobile ========== +const mobilePaper = { + ...desktopPaper, + flexDirection: 'column', + height: '700px', + marginLeft: '10px', + marginRight: '10px', +}; + +const mobileBoxLogo = { + ...desktopBoxLogo, + height: '50%', + padding: '0', +}; + +const mobileBoxForm = { + ...desktopBoxForm, + padding: '0 15px', + width: 'fit-content', +}; + +const logoContainerMobile = { + padding: '20px 16px', +}; + +const mobile = { + paper: mobilePaper, + boxLogo: mobileBoxLogo, + boxForm: mobileBoxForm, + logoContainer: logoContainerMobile, +}; + +// ========== Unset ========== +const unset = { + paper: null, + boxLogo: null, + boxForm: null, + logoContainer: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles; diff --git a/src/services/user-service.js b/src/services/user-service.js index 93b7ee7..9d757e3 100644 --- a/src/services/user-service.js +++ b/src/services/user-service.js @@ -86,6 +86,17 @@ const getUser = shouldFail => } }); +const registerUser = (data, shouldFail) => + sleep(3000).then(() => { + if (shouldFail) { + return authFailure; + } else { + console.log(data); + window.localStorage.setItem('$USER', JSON.stringify(data)); + return data; + } + }); + export { getClassrooms, getClassroomById, @@ -96,4 +107,5 @@ export { getPeopleByClassId, getFaq, getUser, + registerUser, };