From 4b304ee5afef2413e4852f11798b3be69bde7c94 Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Mon, 25 Sep 2023 20:28:11 -0300 Subject: [PATCH 1/2] wip register page --- next/pages/api/user/registerAccount.js | 5 +- next/pages/user/register.js | 319 ++++++++++++++----------- 2 files changed, 188 insertions(+), 136 deletions(-) diff --git a/next/pages/api/user/registerAccount.js b/next/pages/api/user/registerAccount.js index c283abf1..7ad2cc5e 100644 --- a/next/pages/api/user/registerAccount.js +++ b/next/pages/api/user/registerAccount.js @@ -3,9 +3,8 @@ import axios from "axios"; const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` export default async function registerAccount({ - userName, firstName, - lastName, + lastName = "", email, password, }) { @@ -21,7 +20,7 @@ export default async function registerAccount({ mutation { CreateUpdateAccount (input: { - username : "${userName}" + username : "${email}" email: "${email}" firstName: "${firstName}" lastName: "${lastName}" diff --git a/next/pages/user/register.js b/next/pages/user/register.js index fb1f4436..6af62204 100644 --- a/next/pages/user/register.js +++ b/next/pages/user/register.js @@ -1,16 +1,12 @@ import { Stack, - Flex, FormControl, FormLabel, FormErrorMessage, UnorderedList, ListItem, - Popover, - PopoverTrigger, - PopoverContent, - PopoverCloseButton, - PopoverHeader, + VStack, + Text } from "@chakra-ui/react"; import { useState } from "react"; @@ -18,14 +14,16 @@ import { registerAccount, getToken } from "../api/user"; import Input from "../../components/atoms/SimpleInput"; import Button from "../../components/atoms/RoundedButton"; +import Display from "../../components/atoms/Display"; import { MainPageTemplate } from "../../components/templates/main"; +import { isMobileMod } from "../../hooks/useCheckMobile.hook" import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon"; - +import Exclamation from "../../public/img/icons/exclamationIcon"; +import Link from "../../components/atoms/Link"; export default function Register() { const [formData, setFormData] = useState({ - userName: "", firstName: "", lastName: "", email: "", @@ -33,9 +31,7 @@ export default function Register() { confirmPassword: "" }) const [errors, setErrors] = useState({ - userName: "", firstName: "", - lastName: "", email: "", password: "", regexPassword: { @@ -61,20 +57,14 @@ export default function Register() { const validationErrors = {} e.preventDefault() - if (!formData.userName) { - validationErrors.userName = "O nome de usuário é necessário" - } if (!formData.firstName) { - validationErrors.firstName = "O primeiro nome é necessário" - } - if (!formData.lastName) { - validationErrors.lastName = "O sobrenome é necessário" + validationErrors.firstName = "Por favor, insira seu nome." } if (!formData.email) { - validationErrors.email = "O email é necessário" + validationErrors.email = "Endereço de e-mail inválido ou já existe uma conta com este e-mail." } if (!/^\S+@\S+$/.test(formData.email)) { - validationErrors.email = "Email inválido" + validationErrors.email = "Endereço de e-mail inválido ou já existe uma conta com este e-mail." } if(!/^.{8,}$/.test(formData.password)) { regexPassword = {...regexPassword, amount: true} @@ -88,14 +78,11 @@ export default function Register() { if(!/(?=.*?[#?!@$%^&*-])/.test(formData.password)) { regexPassword = {...regexPassword, special: true} } - if (!formData.password) { - validationErrors.password = "A senha é necessária" - } if (!formData.confirmPassword) { validationErrors.confirmPassword = "Confirmar a senha é necessário" } if(formData.confirmPassword !== formData.password) { - validationErrors.confirmPassword = "As senhas tem que ser iguais" + validationErrors.confirmPassword = "A senha inserida não coincide com a senha criada no campo acima. Por favor, verifique se não há erros de digitação e tente novamente." } if (Object.keys(regexPassword).length != 0) validationErrors.regexPassword = regexPassword @@ -106,13 +93,12 @@ export default function Register() { } } - const fetchRegister = async ({ userName, firstName, lastName, email, password }) => { - const result = await registerAccount({userName, firstName, lastName, email, password}) + const fetchRegister = async ({ firstName, lastName, email, password }) => { + const result = await registerAccount({ firstName, lastName, email, password }) let arrayErrors = {} if(result?.errors?.length > 0) { result.errors.map((elm) => { - if(elm.field === "username") arrayErrors = ({...arrayErrors, userName: elm.messages}) if(elm.field === "email") arrayErrors = ({...arrayErrors, email: elm.messages}) }) } @@ -133,7 +119,9 @@ export default function Register() { color="#252A32" fontFamily="ubuntu" letterSpacing="0.2px" - lineHeight="24px" + lineHeight="16px" + fontWeight="400" + fontSize="16px" >{text} ) } @@ -143,34 +131,39 @@ export default function Register() { - - - - {errors.userName} - + Cadastre-se - - - + + + - {errors.firstName} + + {errors.firstName} + @@ -180,105 +173,165 @@ export default function Register() { name="lastName" value={formData.lastName} onChange={handleInputChange} - placeholder="Dados" + placeholder="Insira seu sobrenome (opcional)" + height="40px" + fontSize="14px" + borderRadius="16px" + _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> - {errors.lastName} + + {errors.lastName} + - - - - - {errors.email} - + + + + + {errors.email} + + - - - setShowPassword(!showPassword) - }} - elmRight={showPassword ? - - : - - } - /> - - Ter no mínimo 8 caracteres - Pelo menos uma letra maiúscula e minúscula - Um dígito - E um caractere especial - - {errors.password} - + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + Certifique-se que a senha tenha no mínimo: + + Ter no mínimo 8 caracteres + Pelo menos uma letra maiúscula e minúscula + Um dígito + E um caractere especial + + - - - setShowConfirmPassword(!showConfirmPassword) - }} - elmRight={showConfirmPassword ? - - : - - } - /> - {errors.confirmPassword} - + + + setShowConfirmPassword(!showConfirmPassword) + }} + elmRight={showConfirmPassword ? + + : + + } + /> + + {errors.confirmPassword} + + + + + + Ao clicar em “Cadastrar” acima, você confirma que leu, compreendeu e aceita os Termos de uso e Políticas de privacidade da Base dos Dados. + + + + Já tem uma conta? Faça login. + ) From 2f109cc699cf3efb19af5f04404b58ae38cbd94e Mon Sep 17 00:00:00 2001 From: AldemirLucas Date: Tue, 26 Sep 2023 20:57:44 -0300 Subject: [PATCH 2/2] finish page login and register --- next/pages/user/login.js | 171 ++++++++++++++++++++++-------------- next/pages/user/register.js | 28 +++--- 2 files changed, 119 insertions(+), 80 deletions(-) diff --git a/next/pages/user/login.js b/next/pages/user/login.js index 136101e5..072fa54d 100644 --- a/next/pages/user/login.js +++ b/next/pages/user/login.js @@ -1,10 +1,9 @@ import { + Box, Stack, FormControl, FormLabel, FormErrorMessage, - Alert, - AlertIcon, } from "@chakra-ui/react"; import { useState } from "react"; import cookies from 'js-cookie'; @@ -14,12 +13,15 @@ import { getUser } from "../api/user"; +import Display from "../../components/atoms/Display"; import Input from "../../components/atoms/SimpleInput"; import Button from "../../components/atoms/RoundedButton"; import ButtonSimple from "../../components/atoms/SimpleButton"; import SectionText from "../../components/atoms/SectionText"; +import { isMobileMod } from "../../hooks/useCheckMobile.hook" import { MainPageTemplate } from "../../components/templates/main"; +import Exclamation from "../../public/img/icons/exclamationIcon"; import { EyeIcon, EyeOffIcon } from "../../public/img/icons/eyeIcon"; export default function Login() { @@ -37,11 +39,11 @@ export default function Login() { const handleSubmit = () => { let validationErrors = {} if (!formData.email) { - validationErrors.email = "O email é necessário" + validationErrors.email = "Por favor, insira um endereço de e-mail válido." } else if (!/^\S+@\S+$/.test(formData.email)) { - validationErrors.email = "Email inválido" + validationErrors.email = "Por favor, insira um endereço de e-mail válido." } - if (!formData.password) validationErrors.password = "A senha é necessária" + if (!formData.password) validationErrors.password = "Por favor, insira a senha." setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { @@ -52,7 +54,7 @@ export default function Login() { const fetchToken = async ({ email, password }) => { const result = await getToken({email: email, password: password}) - if(result?.tokenAuth === null || result?.errors?.length > 0) return setErrors({login:"Email ou senha inválida"}) + if(result?.tokenAuth === null || result?.errors?.length > 0) return setErrors({login:"E-mail ou senha incorretos."}) try { const userData = await getUser(result.tokenAuth.payload.email) @@ -63,13 +65,16 @@ export default function Login() { } } - const LabelTextForm = ({ text }) => { + const LabelTextForm = ({ text, ...props }) => { return ( {text} ) } @@ -85,39 +90,76 @@ export default function Login() { + Faça login + {errors.login && - - + {errors.login} - + } - - + + + - {errors.email} + + {errors.email} + - - + + + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + setShowPassword(!showPassword) }} elmRight={showPassword ? : } /> - {errors.password} + + {errors.password} + - - {/* window.open("./password-recovery", "_self")} - >Esqueceu a senha? - */} - - - Não tem uma conta? - window.open("./register", "_self")} - >{" "}cadastre-se - - - - + + + Não tem uma conta? + window.open("./register", "_self")} + >{" "}cadastre-se + . + ) diff --git a/next/pages/user/register.js b/next/pages/user/register.js index 6af62204..d93c88b6 100644 --- a/next/pages/user/register.js +++ b/next/pages/user/register.js @@ -34,12 +34,7 @@ export default function Register() { firstName: "", email: "", password: "", - regexPassword: { - amount: false, - uppercaseLowercase: false, - number: false, - special: false - }, + regexPassword: {}, confirmPassword: "" }) const [showPassword, setShowPassword] = useState(true) @@ -85,7 +80,7 @@ export default function Register() { validationErrors.confirmPassword = "A senha inserida não coincide com a senha criada no campo acima. Por favor, verifique se não há erros de digitação e tente novamente." } - if (Object.keys(regexPassword).length != 0) validationErrors.regexPassword = regexPassword + validationErrors.regexPassword = regexPassword setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { @@ -156,12 +151,13 @@ export default function Register() { value={formData.firstName} onChange={handleInputChange} placeholder="Insira seu nome" + fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> - + {errors.firstName} @@ -174,12 +170,13 @@ export default function Register() { value={formData.lastName} onChange={handleInputChange} placeholder="Insira seu sobrenome (opcional)" + fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> - + {errors.lastName} @@ -192,12 +189,13 @@ export default function Register() { value={formData.email} onChange={handleInputChange} placeholder="Insira seu e-mail" + fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} /> - + {errors.email} @@ -211,6 +209,7 @@ export default function Register() { value={formData.password} onChange={handleInputChange} placeholder="Crie uma senha" + fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" @@ -239,7 +238,7 @@ export default function Register() { /> 0 ? "#D93B3B" : "#7D7D7D"} fontFamily= "Ubuntu" fontSize= "12px" fontWeight= "400" @@ -249,8 +248,8 @@ export default function Register() { flexDirection="row" gap="4px" alignItems="flex-start" - > Certifique-se que a senha tenha no mínimo: - + > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo: + Ter no mínimo 8 caracteres Pelo menos uma letra maiúscula e minúscula Um dígito @@ -267,6 +266,7 @@ export default function Register() { value={formData.confirmPassword} onChange={handleInputChange} placeholder="Insira a senha novamente" + fontFamily="ubuntu" height="40px" fontSize="14px" borderRadius="16px" @@ -293,7 +293,7 @@ export default function Register() { /> } /> - + {errors.confirmPassword}