Skip to content

Commit

Permalink
Merge pull request #60 from 4GeeksAcademy/devZeqe
Browse files Browse the repository at this point in the history 
PR devZeqe to Dev
  • Loading branch information
@ezebellino
ezebellino authored Dec 5, 2024
2 parents e580e29 + 23a4b68 commit d2503f1
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 54 deletions.
10 changes: 6 additions & 4 deletions src/front/js/component/LoginForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const LoginForm = () => {
<Col xs={12} md={6} lg={4} className="mx-auto">
<h2 className="text-center mb-4"><strong>Iniciar Sesión</strong></h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit} className={`${styles.formLog} p-4 border shadow rounded-pill`}>
<Form onSubmit={handleSubmit} className={`${styles.formLog} p-4 border shadow`}>
<Form.Group controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
Expand All @@ -73,21 +73,23 @@ const LoginForm = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className='rounded-pill'
/>
</Form.Group>
<Form.Group controlId="password" className="mt-3 rounded-pill">
<Form.Group controlId="password" className="mt-3">
<Form.Label>Contraseña</Form.Label>
<Form.Control
type="password"
placeholder="Ingrese su contraseña"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className='rounded-pill'
/>
</Form.Group>
<Button variant="primary" type="submit" className="w-100 mt-4">
<button type="submit" className="btn-outline-register w-100 mt-4 rounded-pill">
Iniciar Sesión
</Button>
</button>
<Button
variant="link"
onClick={() => navigate('/register')}
Expand Down
6 changes: 3 additions & 3 deletions src/front/js/component/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Context } from "../store/appContext";
const NavBar = () => {
const { store, actions } = useContext(Context);
const navigate = useNavigate();
const { token, userAvatar, isChatVisible, role } = store;
const { token, isChatVisible, role, personalInfo } = store;
// const [hasNotification, setHasNotification] = useState(false);

// useEffect(() => {
Expand Down Expand Up @@ -47,7 +47,7 @@ const NavBar = () => {
<Navbar.Toggle aria-controls="basic-navbar-nav" className={`${styles["navbar-toggler"]}`} />
<Navbar.Collapse id="basic-navbar-nav" className={`${styles.collapseCustom}`}>
{token ? (
<Nav className="ms-auto text-center">
<Nav className="ms-auto text-center align-items-center">
<Nav.Link >
<i className={`${styles.campana} fas fa-bell`}></i>
</Nav.Link>
Expand All @@ -60,7 +60,7 @@ const NavBar = () => {
<Dropdown align="end">
<Dropdown.Toggle as="div" className={`${styles.Toggle}`}>
<Avatar
src={userAvatar || defaultAvatar}
src={personalInfo?.foto || defaultAvatar}
alt="User Avatar"
size={40}
className={`${styles["navbar-avatar"]}`}
Expand Down
67 changes: 40 additions & 27 deletions src/front/js/component/RegistrationForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
import React, { useState, useContext } from 'react';
import { Form, Container } from 'react-bootstrap';
import React, { useState, useContext, useEffect } from 'react';
import { Form, Container, Modal, Button } from 'react-bootstrap';
import styles from "../../styles/RegistrationForm.module.css";
// import styles from "../../styles/LoginForm.module.css";
import { Context } from '../store/appContext';
import { useNavigate } from 'react-router-dom';

const RegistrationForm = () => {
const { store, actions } = useContext(Context)
const navigate = useNavigate()
const [error, setError] = useState('')
const { store, actions } = useContext(Context);
const navigate = useNavigate();
const [error, setError] = useState('');
const [showSuccessModal, setShowSuccessModal] = useState(false);
const [formData, setFormData] = useState({
nombre: '',
apellido: '',
email: '',
direccion: '',
telefono: '',
password: ''
// motivo: ''
});

useEffect(() => {
if (store.successMessage) {
setShowSuccessModal(true);
}
}, [store.successMessage]);

const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
Expand All @@ -27,22 +32,28 @@ const RegistrationForm = () => {
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
const response = await actions.handleRegister(formData)
const response = await actions.handleRegister(formData);

if (response != true) {
setError(response)
return
if (response !== true) {
setError(response);
return;
}

setShowSuccessModal(true);
};

const handleModalClose = () => {
setShowSuccessModal(false);
actions.clearMessages();
navigate('/login');
};

return (
<div className={`${styles.ContainerF}`}>
<Container className="mt-4">
<h2 className="text-center mb-4"><strong>Formulario de Inscripción</strong></h2>
{error != ''?<div className='alert alert-danger text-center'>{error}</div>:''}
{error && <div className='alert alert-danger text-center'>{error}</div>}
<Form onSubmit={handleSubmit} className={`${styles.ContainerForm} border`}>

<Form.Group controlId="nombre">
<Form.Label><strong>Nombre</strong></Form.Label>
<Form.Control
Expand Down Expand Up @@ -103,26 +114,14 @@ const RegistrationForm = () => {
<Form.Group controlId="password">
<Form.Label><strong>Password</strong></Form.Label>
<Form.Control
type="pass"
type="password"
placeholder="******"
name="password"
value={formData.password}
onChange={handleChange}
/>
</Form.Group>

{/* <Form.Group controlId="motivo">
<Form.Label id='textarea'><strong>¿Por qué inscribe a su hijo en la institución?</strong></Form.Label>
<Form.Control
as="textarea"
rows={3}
placeholder="Escribe el motivo de inscripción"
name="motivo"
value={formData.motivo}
onChange={handleChange}
/>
</Form.Group> */}

<div className="d-flex justify-content-center mt-3">
<button
type="submit"
Expand All @@ -132,9 +131,23 @@ const RegistrationForm = () => {
</button>
</div>
</Form>

<Modal show={showSuccessModal} onHide={handleModalClose} centered>
<Modal.Header closeButton>
<Modal.Title>¡Registro Exitoso!</Modal.Title>
</Modal.Header>
<Modal.Body>
¡Su usuario se ha registrado correctamente! Bienvenido a SchoolHub.
</Modal.Body>
<Modal.Footer>
<Button variant="success" onClick={handleModalClose}>
Continuar
</Button>
</Modal.Footer>
</Modal>
</Container>
</div>
);
};

export default RegistrationForm;
export default RegistrationForm;
10 changes: 9 additions & 1 deletion src/front/js/store/flux.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const getState = ({ getStore, getActions, setStore }) => {
userAvatar: null,
mensajes: [],
isChatVisible: false,
successMessage: '',
errorMessage: '',
},
actions: {
// Use getActions to call a function within a fuction
Expand Down Expand Up @@ -177,13 +179,19 @@ const getState = ({ getStore, getActions, setStore }) => {
return data
}, handleRegister: async (body) => {
try {
const actions = getActions()
const data = await actions.fetchRoute('signup', { method: 'POST', body });
setStore({ successMessage: "¡Su usuario ha sido creado corectamente! Bienvenido a SchoolHub!" });
return true;
} catch (error) {
console.error("Error en handleRegister:", error);
setStore({ errorMessage: "Ocurrió un error al intentar registrarse" });
return 'Ocurrió un error al intentar registrarse';
}
}, handleLogin: async (body) => {
}, clearMessages: () => {
setStore({ successMessage: '', errorMessage: '' });
},
handleLogin: async (body) => {
try {
const data = await getActions().fetchRoute("login", {
method: "POST",
Expand Down
30 changes: 24 additions & 6 deletions src/front/styles/LoginForm.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,36 @@
color: white;
}


.formLog .form-control,
.formLog .form-select {
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
transition: all 0.2s ease;
}
}

.formLog .formLog-control:focus,
.formLog .formLog-select:focus {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2), inset 0px 2px 4px rgba(0, 0, 0, 0.1);
border-color: #0a3d62;
transform: scale(1.03);
z-index: 1;
}
}

h2 {
margin-top: 50px;
}
.spanLog{
color:white;

.spanLog {
color: white;
text-decoration: none;
}

.spanLog:hover {
text-decoration: underline white;
}

.LoginForm {
background: linear-gradient(180deg, #0a3d62, #3c6382);
background: linear-gradient(45deg, #0a3d62, #3c6382, #3cfa);
min-height: 94vh;
display: flex;
flex-direction: column;
Expand All @@ -46,4 +48,20 @@ h2 {
padding: 20px;
margin: 0;
color: white;
animation: linearGradient 5s ease infinite;
background-size: 200% 200%;
}

@keyframes linearGradient {
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0% 50%;
}
}
14 changes: 1 addition & 13 deletions src/front/styles/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.allSection {
background: linear-gradient(180deg, #0a3d62, #3c6382);
background: linear-gradient(45deg, #0a3d62, #3c6382);
min-height: 100vh;
display: flex;
flex-direction: column;
Expand All @@ -37,18 +37,6 @@
margin-top: 3%;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.section {
display: flex;
align-items: center;
Expand Down

0 comments on commit d2503f1

Please sign in to comment.