+ <>
-
+
);
}
@@ -23,6 +24,7 @@ FormInput.propTypes = {
type: PropTypes.string.isRequired,
placeholder: PropTypes.string,
className: PropTypes.string,
+ onChange: PropTypes.string,
register: PropTypes.func.isRequired,
errors: PropTypes.oneOfType([
PropTypes.object,
diff --git a/cosiap_frontend/src/components/common/base/FormInputPassword.jsx b/cosiap_frontend/src/components/common/base/FormInputPassword.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cd684e4f4a6b11cd305775ce5a01e317aa63832e
--- /dev/null
+++ b/cosiap_frontend/src/components/common/base/FormInputPassword.jsx
@@ -0,0 +1,51 @@
+import {FormInput} from '@/components/common/base/FormInput.jsx';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+export const FormInputPassword = ({ name, placeholder, className, register, errors }) => {
+ const [showPassword, setShowPassword] = useState(false);
+ const [inputValue, setInputValue] = useState('');
+
+ const switchShowPassword = () => {
+ setShowPassword(!showPassword);
+ };
+
+ const handleInputChange = (e) => {
+ setInputValue(e.target.value);
+ };
+
+ return (
+ <>
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/ui/ErrorDisplay.jsx b/cosiap_frontend/src/components/common/ui/ErrorDisplay.jsx
index ebcada877ddd525791e2a761db42e2090d3e0a50..1c3f76cc474a5ca69803294bb3f7c373d90a2626 100644
--- a/cosiap_frontend/src/components/common/ui/ErrorDisplay.jsx
+++ b/cosiap_frontend/src/components/common/ui/ErrorDisplay.jsx
@@ -5,7 +5,7 @@ export const ErrorDisplay = ({ errors }) => {
if (!errors) return null;
return (
-
+
+ {/* Contenido de authentication */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ {children}
+
+ + {title} +
+
+ ;
+ case 'Register':
+ return
+ {renderPage()}
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Login/Login.jsx b/cosiap_frontend/src/components/users/Login/Login.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..da4d585bbec15e8edf1227bbc9ad34ebd8373e6f
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Login/Login.jsx
@@ -0,0 +1,19 @@
+
+import { LoginForm } from './LoginForm';
+
+export function Login( {setComponent} ) {
+ return (
+ <>
+ 
+
+
+ );
+};
+
+LoginInputCURP.propTypes = {
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+};
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx b/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1daaa4a099d22b100b2bd1023f7d818cb95d739a
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx
@@ -0,0 +1,31 @@
+import {FormInputPassword} from '@/components/common/base/FormInputPassword.jsx';
+import PropTypes from 'prop-types';
+
+export const LoginInputPassword = ({ name, placeholder, className, register, errors }) => {
+
+ return (
+ <>
+ 
+
+ );
+};
+
+LoginInputPassword.propTypes = {
+ name: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+};
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx b/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx
deleted file mode 100644
index c15abd263ed6150a265c98787371ec089265cc7d..0000000000000000000000000000000000000000
--- a/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { LoginForm } from './LoginForm';
-
-export function LoginContainer() {
- return (
-
{renderErrors(errors)}
);
diff --git a/cosiap_frontend/src/components/users/AuthPage.jsx b/cosiap_frontend/src/components/users/AuthPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..75bbf61aa25dfada2ef84590ebb79121f36c5a0f
--- /dev/null
+++ b/cosiap_frontend/src/components/users/AuthPage.jsx
@@ -0,0 +1,29 @@
+import LayoutBaseAuthenticator from '@/components/common/layouts/LayoutBaseAuthenticator';
+import { Login } from "./Login/Login";
+import Register from './Register/Register';
+import { useState } from 'react';
+
+export function AuthPage() {
+ const [component, setComponent] = useState('Login')
+
+ const renderPage = () => {
+ switch (component) {
+ case 'Login':
+ return + ¿Haz olvidado tu contraseña? +
++ ¿Aun no tienes cuenta? +
+setComponent('Register')}> + Registrate +
+ + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/LoginPage/LoginForm.jsx b/cosiap_frontend/src/components/users/Login/LoginForm.jsx similarity index 61% rename from cosiap_frontend/src/components/users/LoginPage/LoginForm.jsx rename to cosiap_frontend/src/components/users/Login/LoginForm.jsx index a9ab1fe01e8e38b124af8a36164d9eb157d7cad5..c6d1a0b645810e597029cba4b05a3eaa29fcb435 100644 --- a/cosiap_frontend/src/components/users/LoginPage/LoginForm.jsx +++ b/cosiap_frontend/src/components/users/Login/LoginForm.jsx @@ -2,7 +2,8 @@ import { useForm } from "react-hook-form"; import * as Yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import api from "@/api"; // Asegúrate de importar tu instancia de API -import {LoginInput} from '@/components/users/LoginPage/loginInput' +import {LoginInputCURP} from '@/components/users/Login/LoginInputCURP' +import { LoginInputPassword } from "@/components/users/Login/LoginInputPassword"; import { useState } from "react"; import {ErrorDisplay} from '@/components/common/ui/ErrorDisplay' @@ -10,8 +11,8 @@ const CURP_REGEX = /^[A-Z]{1}[AEIOU]{1}[A-Z]{2}[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|1[ const validationSchema = Yup.object({ curp: Yup.string() - .matches(CURP_REGEX, "CURP inválido") - .required("Requerido"), + .required("Requerido") + .matches(CURP_REGEX, "CURP inválido"), password: Yup.string().required("Requerido"), }); @@ -38,41 +39,40 @@ export function LoginForm() { return (
+
-
);
}
diff --git a/cosiap_frontend/src/components/users/Login/LoginInputCURP.jsx b/cosiap_frontend/src/components/users/Login/LoginInputCURP.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5ffafa97ce5fbf4f0611213c4dd346b05f8aeff
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Login/LoginInputCURP.jsx
@@ -0,0 +1,33 @@
+import {FormInput} from '@/components/common/base/FormInput.jsx';
+import PropTypes from 'prop-types';
+
+export const LoginInputCURP = ({ name, type, placeholder, className, register, errors }) => {
+ return (
+ <>
+ - ¿Haz olvidado tu contraseña? -
-- ¿Aun no tienes cuenta? -
-- Registrate -
+
+
+
+ );
+};
+
+LoginInputCURP.propTypes = {
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+};
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx b/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1daaa4a099d22b100b2bd1023f7d818cb95d739a
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Login/LoginInputPassword.jsx
@@ -0,0 +1,31 @@
+import {FormInputPassword} from '@/components/common/base/FormInputPassword.jsx';
+import PropTypes from 'prop-types';
+
+export const LoginInputPassword = ({ name, placeholder, className, register, errors }) => {
+
+ return (
+ <>
+
+
+ );
+};
+
+LoginInputPassword.propTypes = {
+ name: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+};
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx b/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx
deleted file mode 100644
index c15abd263ed6150a265c98787371ec089265cc7d..0000000000000000000000000000000000000000
--- a/cosiap_frontend/src/components/users/LoginPage/LoginContainer.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { LoginForm } from './LoginForm';
-
-export function LoginContainer() {
- return (
-
-
- );
-}
diff --git a/cosiap_frontend/src/components/users/LoginPage/LoginPage.jsx b/cosiap_frontend/src/components/users/LoginPage/LoginPage.jsx
deleted file mode 100644
index fa918d383ec92a10046873942ec62c2fa1fada5e..0000000000000000000000000000000000000000
--- a/cosiap_frontend/src/components/users/LoginPage/LoginPage.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { LoginContainer } from './LoginContainer';
-
-export function LoginPage() {
- return (
-
-
- = 640 ? "absolute" : "relative",
- left: window.innerWidth >= 640 ? "25%" : "0",
- top: window.innerWidth >= 640 ? "50%" : "auto",
- transform: window.innerWidth >= 640 ? "translateY(-50%)" : "none",
- }}
- >
-
-
- 
-
-
- - INICIAR SESIÓN -
-setComponent('Login')}> + Iniciar sesión +
+ + ) : ( + <> +
+
+
+
+ ¡Correo de confirmación
enviado!
+
+ Se ha enviado un correo
electrónico para confirmar la
creación de tu cuenta.
+
+
+
+ )
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7cd781fb85022ae9766427b19eea7c15f1d0a926
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
@@ -0,0 +1,110 @@
+import { RegisterInput } from "./RegisterInput";
+import { RegisterInputPassword } from "./RegisterInputPassword";
+import { useState } from "react";
+import { ErrorDisplay } from '@/components/common/ui/ErrorDisplay';
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import api from "@/api"; // Asegúrate de importar tu instancia de API
+
+const CURP_REGEX = /^[A-Z]{1}[AEIOU]{1}[A-Z]{2}[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])[HM]{1}(AS|BC|BS|CC|CH|CL|CM|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS|NE)[B-DF-HJ-NP-TV-Z]{3}[0-9A-Z]{1}[0-9]{1}$/;
+
+const validationSchema = Yup.object({
+ nombre: Yup.string()
+ .required('Campo requerido'),
+ curp: Yup.string()
+ .required("Campo requerido")
+ .matches(CURP_REGEX, "Campo requerido"),
+ email: Yup.string()
+ .email("El email no es válido")
+ .required("Campo requerido"),
+ password: Yup.string()
+ .required("Campo requerido"),
+ confirmar_password: Yup.string()
+ .required("Campo requerido")
+ .oneOf([Yup.ref('password'), null], 'Las contraseñas no coinciden')
+});
+
+export default function RegisterForm( {setSentEmail} ) {
+ const [registerErrorMessage, setRegisterErrorMessage] = useState('');
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: yupResolver(validationSchema),
+ });
+
+ const handleFormSubmission = async (data) => {
+ try {
+ const response = await api.usuarios.post(data);
+ console.log("Registration successful:", response.data);
+ setSentEmail(true);
+ } catch (error) {
+ console.error("Registration failed:", error);
+ console.log(error.response.data.detail);
+ setRegisterErrorMessage(error.response.data);
+ }
+ };
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Register/RegisterInput.jsx b/cosiap_frontend/src/components/users/Register/RegisterInput.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..49957513ef571cac975bed3548ce867a90b535b9
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Register/RegisterInput.jsx
@@ -0,0 +1,32 @@
+import {FormInput} from '@/components/common/base/FormInput.jsx';
+import PropTypes from 'prop-types';
+
+export const RegisterInput = ({ name, type, placeholder, className, register, errors }) => {
+ return (
+ <>
+