diff --git a/package-lock.json b/package-lock.json index 91142d2..3f7ced6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,8 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "uuid": "^8.3.2", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" } }, "node_modules/@ampproject/remapping": { @@ -3591,6 +3592,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "node_modules/@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -11983,6 +11989,11 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", @@ -13935,6 +13946,11 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -16030,6 +16046,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + }, "node_modules/tough-cookie": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", @@ -17313,6 +17334,23 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } } }, "dependencies": { @@ -19793,6 +19831,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -25962,6 +26005,11 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", @@ -27250,6 +27298,11 @@ "react-is": "^16.13.1" } }, + "property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -28798,6 +28851,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + }, "tough-cookie": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", @@ -29777,6 +29835,20 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + } } } } diff --git a/package.json b/package.json index 72d7c92..71940ef 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "uuid": "^8.3.2", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/src/componentes/pages/register/Register.css b/src/componentes/pages/register/Register.css index 52b8f19..801fb68 100644 --- a/src/componentes/pages/register/Register.css +++ b/src/componentes/pages/register/Register.css @@ -47,16 +47,14 @@ width: 100px; } -.form-control{ +.wrap-input{ width: 100%; position: relative; border-bottom: 2px solid #adadad; margin-bottom: 37px; } -input[type = 'text'], -input[type = 'email'], -input[type = 'password'] { +.input{ font-size: 15px; color: #fff; line-height: 1.2; @@ -67,11 +65,39 @@ input[type = 'password'] { height: 45px; background-color: transparent; + text-transform: lowercase; padding: 0 5px; - } +.focus-input{ + position: absolute; + display: block; + width: 100%; + height: 100%; + + top: 0; + left: 0; + + pointer-events: none; + color: #adadad; +} + +.focus-input::before{ + content: ''; + display: block; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + + -webkit-transition: all 0.4s; + -o-transition: all 0.4s; + -moz-transition: all 0.4s; + + background-color: var(--main-color); +} .focus-input::after{ font-size: 15px; @@ -87,6 +113,9 @@ input[type = 'password'] { left: 0px; padding-left: 5px; + -webkit-transition: all 0.4s; + -o-transition: all 0.4s; + -moz-transition: all 0.4s; } .input:focus{ @@ -146,6 +175,35 @@ input[type = 'password'] { /* mask-repeat: no-repeat; */ } -.error { +.text-center{ + display: flex; + align-items: center; + justify-content: center; + + margin-top: 50px; +} + +.txt1{ + font-size: 14px; + color: #adadad; + line-height: 1.5; + padding-right: 5px; + + text-decoration: none; +} + +.txt2{ + font-size: 14px; + color: #c7c41a; + line-height: 1.5; + + text-decoration: none; +} + +.txt2:hover{ + color: #fff; +} +label{ + font-size: 10px; color: red; } \ No newline at end of file diff --git a/src/componentes/pages/register/Register.js b/src/componentes/pages/register/Register.js index 5e9ce5a..1edcff5 100644 --- a/src/componentes/pages/register/Register.js +++ b/src/componentes/pages/register/Register.js @@ -4,179 +4,110 @@ import logo from '../../../assets/images/Logo_grande.png'; import { useState, useContext } from 'react'; import { AuthContext } from '../../../contexts/auth'; import { Link } from 'react-router-dom'; -import { useFormik } from 'formik'; - -const initialValues = { - name: '', - lastName: '', - email: '', - password: '', - confirmPassword: '' -} -const onSubmit = values => { - console.log('Dados envidados!', values) -} - -const validate = values => { - - - let errors = { - - } - - if (!values.name) { - errors.name = 'Obrigatório!' +const Register = () => { + const { register } = useContext(AuthContext); + + const [name, setName] = useState(''); + const [lastName, setLastName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error,setError]=useState(false) + + const handleSubmit = (e) => { + + let regex = /^[\w.+\-]+@alunos.utfpr.edu.br$/g; + + e.preventDefault(); + if( name.length == 0 || lastName.length == 0 ){ + setError(true) + }else if(password.length == 0){ + setError(true) + }else if(email.length == 0 || !regex.test(email)){ + setError(true) + }else{ + console.log("Submitted", { name, lastName, email, password }); + register(name, lastName, email, password); + } } - if (!values.lastName) { - errors.lastName = 'Obrigatório!' - } - if (!values.email) { - errors.email = 'Obrigatório!' - }else if(!/^[A-Z0-9._%+-]+@[utfpr.edu.]+\.[B-R]{2,4}$/i.test(values.email)){ - errors.email = 'email inválido! (utilize seu email institucional)' - } - if (!values.password) { - errors.password = 'Obrigatório!' - } - if (!values.confirmPassword) { - errors.confirmPassword = 'Obrigatório' - }else if(values.password != values.confirmPassword){ - errors.confirmPassword = 'As senhas devem ser iguais!' - } - return errors -} - - -function Register() { - const formik = useFormik({ - initialValues, - onSubmit, - validate - }) - - const [name] = useState(''); - const [lastName] = useState(''); - const [email] = useState(''); - const [password] = useState(''); - const [confirmPassword] = useState(''); - return (
-
+ - + -
- - - - { formik.touched.name && formik.errors.name ? ( -
{formik.errors.name} -
) : null} +
+ setName(e.target.value)} /> +
- -
- + {error && name.length <= 0 ? + :""} + +
- - { formik.touched.lastName && formik.errors.lastName ? ( -
{formik.errors.lastName} -
) : null} + className={lastName !== '' ? 'has-val input' : 'input'} + type="text" + value={lastName} + onChange={e => setLastName(e.target.value)} /> +
- -
- - - - {formik.touched.email && formik.errors.email ? ( -
{formik.errors.email} -
) : null} + {error && lastName.length <= 0 ? + :""} + +
+ setEmail(e.target.value)} /> +
- -
- - - - {formik.touched.password && formik.errors.password ? ( -
{formik.errors.password} -
) : null} + {error && email.length <= 0 || email.length > 10 && !/^[\w.+\-]+@alunos.utfpr.edu.br$/g.test(email) ? + :""} + +
+ setPassword(e.target.value)} /> +
+ {error && password.length <= 0 ? + :""} -
- - - - {formik.touched.confirmPassword && formik.errors.confirmPassword ? ( -
{formik.errors.confirmPassword} -
) : null} +
+
+
+ + Já possui uma conta? + - + + Faça login + +
) - } - export default Register; \ No newline at end of file