diff --git a/src/components/FormUpdate/index.tsx b/src/components/FormUpdate/index.tsx index dee9fef..007d000 100644 --- a/src/components/FormUpdate/index.tsx +++ b/src/components/FormUpdate/index.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; +import React, { useCallback } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; import { Form } from '@unform/web'; @@ -7,13 +7,15 @@ import InputForm from 'components/InputForm'; import Button from 'components/Button/Button'; import Input from 'components/Input/Input'; -import { Container } from './styles'; +import { Container, SectionButton } from './styles'; interface FormUpdateProps { emailIsNotAllowed?: boolean; handleSubmit: any; formRef: any; hasPasswordField?: boolean; + goBackEnabled?: boolean; + buttonText?: string; inviteInfo: { name: string; email: string }; user?: { id: string; @@ -37,12 +39,19 @@ function FormUpdate({ formRef, inviteInfo, hasPasswordField, + goBackEnabled, + buttonText, user, }: FormUpdateProps) { + const history = useHistory(); const params = useParams(); const paramsEmail = params.email; + const handleGoBack = useCallback(() => { + history.goBack(); + }, [history]); + return (
@@ -106,7 +115,14 @@ function FormUpdate({ )} - + + {goBackEnabled && ( + + )} + +
); @@ -115,6 +131,8 @@ function FormUpdate({ FormUpdate.defaultProps = { emailIsNotAllowed: false, hasPasswordField: false, + goBackEnabled: false, + buttonText: '', user: { name: '', email: '', diff --git a/src/components/FormUpdate/styles.ts b/src/components/FormUpdate/styles.ts index 19af5f3..bd12e84 100644 --- a/src/components/FormUpdate/styles.ts +++ b/src/components/FormUpdate/styles.ts @@ -36,3 +36,17 @@ export const Container = styled.div` } } `; + +export const SectionButton = styled.section` + width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; + + max-width: 90rem; + padding: 0 35px; + + button:nth-child(1) { + margin-right: 2rem; + } +`; diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index f2d81c2..e74cf26 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -17,8 +17,8 @@ export const StyledInput = styled.div` margin: 0; h3 { - font-weight: 500; - font-size: ${props => props.Size || '1.5rem'}; + font-weight: bold; + font-size: ${props => props.Size}; color: ${props => props.Color || 'var(--black)'}; margin-bottom: 5px; @@ -37,7 +37,7 @@ export const StyledInput = styled.div` font-weight: ${props => props.weight || '400'}; outline: none; - border: 0; + border: none; border-radius: 1.25rem; color: ${props => props.Color || 'var(--black)'}; diff --git a/src/components/InputForm/styles.ts b/src/components/InputForm/styles.ts index 65ef353..c2be615 100644 --- a/src/components/InputForm/styles.ts +++ b/src/components/InputForm/styles.ts @@ -34,14 +34,14 @@ export const Container = styled.div` background-color: var(--soft-gray); border-radius: 1.25rem; - border: 2px solid rgba(206, 207, 208, 0.2); + border: 2px solid rgb(245 245 246); - transition: border-color .3s; + transition: border-color 0.3s; ${props => props.isErrored && css` - transition: border-color .3s; + transition: border-color 0.3s; border-color: #c53030; `} @@ -52,7 +52,7 @@ export const Container = styled.div` font-family: Roboto; font-size: 1.3rem; font-style: normal; - font-weight: bold; + font-weight: normal; width: 100%; diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx new file mode 100644 index 0000000..b966912 --- /dev/null +++ b/src/components/Logo/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import logoIcon from 'assets/logo.svg'; + +import * as s from './styles'; + +const TypextLogo = () => { + return ( + + + + ); +}; + +export default TypextLogo; diff --git a/src/components/Logo/styles.ts b/src/components/Logo/styles.ts new file mode 100644 index 0000000..36baa45 --- /dev/null +++ b/src/components/Logo/styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +export const Link = styled.a``; + +export const Image = styled.img` + width: 18.125rem; + height: 3.125rem; +`; diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts index d1de906..59a6182 100644 --- a/src/components/Select/styles.ts +++ b/src/components/Select/styles.ts @@ -34,5 +34,4 @@ export const StyledSelect = styled.div` max-width: ${props => props.SelectWidth || '23.75rem'}; width: 100%; } - `; diff --git a/src/pages/Invite/components/Select/styles.ts b/src/pages/Invite/components/Select/styles.ts index 6df3943..a0291e4 100644 --- a/src/pages/Invite/components/Select/styles.ts +++ b/src/pages/Invite/components/Select/styles.ts @@ -12,7 +12,7 @@ export const Container = styled.div` display: flex; flex-direction: column; width: 100%; - max-width: 41.875rem; + max-width: 40rem; position: relative; .inputSelect { @@ -24,6 +24,7 @@ export const Container = styled.div` font-style: normal; font-weight: 500; font-size: 2rem; + color: var(--black); width: 100%; display: flex; @@ -39,6 +40,7 @@ export const Container = styled.div` background-color: var(--soft-gray); border-radius: 1.25rem; width: 100%; + max-width: 40rem; height: 4.063rem; display: flex; @@ -73,7 +75,7 @@ export const SelectContainer = styled.ul` position: absolute; list-style: none; width: 100%; - max-width: 41.875rem; + max-width: 40rem; margin-top: 6rem; background: #f5f5f6; border-radius: 0 0 12px 12px; diff --git a/src/pages/Invite/index.tsx b/src/pages/Invite/index.tsx index 9f30d3c..c92fd61 100644 --- a/src/pages/Invite/index.tsx +++ b/src/pages/Invite/index.tsx @@ -1,9 +1,12 @@ -import React, { useState, useCallback } from 'react'; -import { message } from 'antd'; +import React, { useRef, useState, useCallback } from 'react'; +import * as Yup from 'yup'; +import { Form } from '@unform/web'; +import { FormHandles } from '@unform/core'; import { useAuth } from 'contexts/auth'; +import getValidationErrors from 'utils/getValidationErrors'; -import Input from 'components/Input/Input'; +import InputForm from 'components/InputForm'; import Button from 'components/Button/Button'; import Select from './components/Select'; @@ -14,31 +17,40 @@ import InviteConfirmationModal from './components/InviteConfirmationModal'; function InviteUsers() { const { inviteUser } = useAuth(); + const formRef = useRef(null); + const [openInvitationModal, setOpenInvitationModal] = useState( false, ); const [userPermission, setUserPermission] = useState('Usuário'); - const [userName, setUserName] = useState(''); - const [userEmail, setUserEmail] = useState(''); const handleInviteUser = useCallback( - e => { - e.preventDefault(); - - if (!userName || !userEmail) { - message.error('Todos os campos devem estar preenchidos'); - return; + async (data: { name: string; email: string }) => { + try { + formRef.current?.setErrors({}); + + const schema = Yup.object().shape({ + email: Yup.string() + .required('O email é obrigatório') + .email('Digite um email valído'), + name: Yup.string().required('O nome é obrigatório'), + }); + + await schema.validate(data, { abortEarly: false }); + + setOpenInvitationModal(true); + inviteUser({ + name: data.name, + email: data.email, + type: userPermission, + }); + } catch (err) { + const errors = getValidationErrors(err); + formRef.current?.setErrors(errors); } - - setOpenInvitationModal(true); - inviteUser({ - name: userName, - email: userEmail, - type: userPermission, - }); }, - [inviteUser, userName, userEmail, userPermission], + [inviteUser, userPermission], ); return ( @@ -50,22 +62,14 @@ function InviteUsers() {

Convidar Participante

-
- setUserName(event.target.value)} - /> + + - setUserEmail(event.target.value)} - /> + + setUserEmail(event.target.value)} /> - - + diff --git a/src/pages/Recovery/styles.ts b/src/pages/Recovery/styles.ts index a3e79d7..40d137c 100644 --- a/src/pages/Recovery/styles.ts +++ b/src/pages/Recovery/styles.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; const StyledRecoveryPassword = styled.div` display: flex; justify-content: center; - margin-top: 4.375rem; + padding: 4rem; .RecoveryPassword { display: flex; @@ -14,28 +14,19 @@ const StyledRecoveryPassword = styled.div` max-width: 102.125rem; width: 100%; - a { - width: 18.125rem; - height: 3.125rem; - - img { - width: 18.125rem; - height: 3.125rem; - } - } - .Email { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; - width: 41.875rem; + width: 100%; + max-width: 40rem; margin-top: 16rem; Button { - margin-top: 9.688rem; + margin-top: 5.688rem; } } } diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index 3443a9c..f05f38c 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -7,11 +7,10 @@ import { useAuth } from 'contexts/auth'; import { getInviteInfo } from 'services/auth'; import FormUpdate from 'components/FormUpdate'; -import LogoIcon from 'assets/logo.svg'; - import getValidationErrors from 'utils/getValidationErrors'; import registerSchemaValidation from 'utils/registerSchemaValidation'; +import TypextLogo from 'components/Logo'; import RegisterModal from './components/RegisterModal'; import StyledRegisterNewUser from './styles'; @@ -58,9 +57,7 @@ const RegisterNewUser = () => { {openRegisterModal && } - - Typext - +
{ const params: ParamsData = useParams(); - + const formRef = useRef(null); const { resetPassword } = useAuth(); const [showResetModal, setShowResetModal] = useState(false); - const [userPassword, setUserPassword] = useState(''); - const [userConfirmPassword, setUserConfirmPassword] = useState(''); - const handleCloseResetModal = useCallback(() => { setShowResetModal(false); }, []); - const handleResetPassword = useCallback(() => { - const userEmail = params.email; - - if (!userPassword || !userConfirmPassword) { - message.error('Todos os campos devem estar preenchidos'); - return; - } - - setShowResetModal(true); - resetPassword({ - email: userEmail, - password: userPassword, - password_confirmation: userConfirmPassword, - }); - }, [resetPassword, params, userPassword, userConfirmPassword]); + const handleResetPassword = useCallback( + async (data: { password: string; password_confirmation: string }) => { + const userEmail = params.email; + + try { + formRef.current?.setErrors({}); + + const schema = Yup.object().shape({ + password: Yup.string().required('Senha obrigatória'), + password_confirmation: Yup.string().oneOf( + [Yup.ref('password'), null], + 'As senhas devem ser iguais', + ), + }); + + await schema.validate(data, { abortEarly: false }); + + setShowResetModal(true); + await resetPassword({ + email: userEmail, + password: data.password, + password_confirmation: data.password_confirmation, + }); + } catch (err) { + const errors = getValidationErrors(err); + formRef.current?.setErrors(errors); + } + }, + [resetPassword, params], + ); return ( <> {showResetModal && } - Logo Typext - -
- + +
+ setUserPassword(event.target.value)} /> - setUserConfirmPassword(event.target.value)} /> - -
+ ); diff --git a/src/pages/ResetPassword/styles.ts b/src/pages/ResetPassword/styles.ts index 70631b6..8065106 100644 --- a/src/pages/ResetPassword/styles.ts +++ b/src/pages/ResetPassword/styles.ts @@ -5,8 +5,7 @@ export const StyledNewPassword = styled.div` flex-direction: column; align-items: center; justify-content: center; - - margin-top: 4.375rem; + padding: 4rem; .NewPassword { display: flex; @@ -21,11 +20,7 @@ export const StyledNewPassword = styled.div` align-items: flex-end; - Input { - margin-bottom: 2rem; - } - - Button { + button { margin-top: 4rem; width: 14.063rem; } diff --git a/src/pages/UserUpdate/index.tsx b/src/pages/UserUpdate/index.tsx index 0dd6e8b..9e841d2 100644 --- a/src/pages/UserUpdate/index.tsx +++ b/src/pages/UserUpdate/index.tsx @@ -63,6 +63,8 @@ function UserUpdate() { handleSubmit={handleSubmit} user={user} emailIsNotAllowed + buttonText="Atualizar" + goBackEnabled /> diff --git a/src/pages/UserUpdate/styles.ts b/src/pages/UserUpdate/styles.ts index 002c860..1bccf86 100644 --- a/src/pages/UserUpdate/styles.ts +++ b/src/pages/UserUpdate/styles.ts @@ -4,17 +4,20 @@ export const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 3rem; + padding: 4rem; h1 { - margin-top: 2rem; - font-family: Roboto; font-style: normal; font-weight: 900; - font-size: 50px; - line-height: 59px; + font-size: 3.2rem; color: #cecfd0; + + margin: 1rem 0 2rem 0; + } + + form.Content { + margin: 0; } `;