cambios en vista cambiar contrasena
This commit is contained in:
jls846
@@ -4,80 +4,124 @@ import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import toast from "react-hot-toast";
|
||||
import "../../styles/layout/ForgotPasswordPage.scss";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Page() {
|
||||
export default function UpdateUserPage() {
|
||||
const [id_User, setId_User] = useState("");
|
||||
const [nombre, setNombre] = useState("");
|
||||
const [contraseña, setContraseña] = useState("");
|
||||
const [contrasena, setContrasena] = useState("");
|
||||
const [tipoUsuario, setTipoUsuario] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
|
||||
ev.preventDefault();
|
||||
const userIdList = [1, 2, 3, 10, 11, 12, 100, 101, 150];
|
||||
|
||||
if (nombre.trim().length < 3) {
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!id_User || isNaN(Number(id_User))) {
|
||||
toast.error("El ID de usuario es obligatorio y debe ser un número.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (nombre && nombre.trim().length < 3) {
|
||||
toast.error("El nombre debe tener al menos 3 caracteres.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (contraseña.trim().length < 6) {
|
||||
if (contrasena && contrasena.length < 6) {
|
||||
toast.error("La contraseña debe tener al menos 6 caracteres.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/admin/change-password", {
|
||||
nombre,
|
||||
contraseña,
|
||||
});
|
||||
if (tipoUsuario && isNaN(Number(tipoUsuario))) {
|
||||
toast.error("El tipo de usuario debe ser un número.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.success("Contraseña actualizada correctamente.");
|
||||
setNombre("");
|
||||
setContraseña("");
|
||||
} else {
|
||||
toast.error("No se pudo cambiar la contraseña.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Ocurrió un error al cambiar la contraseña.");
|
||||
// 🔒 Tu backend (dejado comentado)
|
||||
/*
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const body = { id_User: Number(id_User) };
|
||||
if (nombre) body.nombre = nombre;
|
||||
if (contrasena) body.contrasena = contrasena;
|
||||
if (tipoUsuario) body.tipoUsuario = Number(tipoUsuario);
|
||||
|
||||
await axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/rauth/update`,
|
||||
body
|
||||
);
|
||||
|
||||
toast.success("Usuario actualizado correctamente.");
|
||||
setId_User("");
|
||||
setNombre("");
|
||||
setContrasena("");
|
||||
setTipoUsuario("");
|
||||
} catch (err) {
|
||||
...
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
*/
|
||||
|
||||
toast.success("✅ Listo para enviar. Backend aún en desarrollo.");
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="forgot-password-page">
|
||||
<div>
|
||||
|
||||
<h1>Cambiar contraseña de operador</h1>
|
||||
<p>Ingresa el nombre del usuario y su nueva contraseña.</p>
|
||||
<div className="forgot-form-container">
|
||||
<h1>Actualizar contraseña</h1>
|
||||
<p>Ingresa el ID y los campos que deseas modificar.</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="forgot-form">
|
||||
<label htmlFor="nombre">Nombre de usuario</label>
|
||||
<input
|
||||
id="nombre"
|
||||
type="text"
|
||||
value={nombre}
|
||||
onChange={(e) => setNombre(e.target.value)}
|
||||
placeholder="Nombre de usuario"
|
||||
required
|
||||
/>
|
||||
{/* Input con autocompletar */}
|
||||
<div>
|
||||
<label>ID de usuario *</label>
|
||||
<input
|
||||
type="text"
|
||||
list="id_suggestions"
|
||||
placeholder="ID del usuario"
|
||||
value={id_User}
|
||||
onChange={(e) => setId_User(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label htmlFor="contraseña">Nueva contraseña</label>
|
||||
<input
|
||||
id="contraseña"
|
||||
type="password"
|
||||
value={contraseña}
|
||||
onChange={(e) => setContraseña(e.target.value)}
|
||||
placeholder="Nueva contraseña"
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label>Nombre (opcional)</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nuevo nombre"
|
||||
value={nombre}
|
||||
onChange={(e) => setNombre(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Nueva contraseña (opcional)</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Nueva contraseña"
|
||||
value={contrasena}
|
||||
onChange={(e) => setContrasena(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Tipo de usuario (opcional)</label>
|
||||
<select
|
||||
value={tipoUsuario}
|
||||
onChange={(e) => setTipoUsuario(e.target.value)}
|
||||
>
|
||||
<option value="">Seleccionar tipo</option>
|
||||
<option value="1">1 - Administrador</option>
|
||||
<option value="2">2 - Operador</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? "Actualizando..." : "Cambiar contraseña"}
|
||||
{loading ? "Actualizando..." : "Actualizar contraseña"}
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,106 +1,132 @@
|
||||
// =====================================
|
||||
// Forgot Password Page Styles (Responsive)
|
||||
// Forgot Password / Update User Page
|
||||
// Estilo igual al LOGIN (bordes azules,
|
||||
// contenedor blanco, título amarillo)
|
||||
// =====================================
|
||||
|
||||
.forgot-password-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
color: #222;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
.forgot-form-container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #bd8c01; // Amarillo tipo login
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
padding: 1rem 0.8rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
p {
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: #1a73e8;
|
||||
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
color: #444;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #1a73e8;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
.forgot-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #155fc0;
|
||||
transform: translateY(-2px);
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 0.4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #b3d0ff;
|
||||
cursor: not-allowed;
|
||||
// === INPUTS Y SELECT (mismo estilo)
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 1.2rem 1.5rem;
|
||||
border: 2px solid #003e79; // borde azul login
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
appearance: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #004aad;
|
||||
box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
color: #1a73e8;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background-color: #004aad;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.25s ease, transform 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #003e79;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #9fbce8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
color: #004aad;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Modo oscuro
|
||||
// MODO OSCURO
|
||||
// =====================================
|
||||
|
||||
[data-theme="dark"] .forgot-password-page {
|
||||
background: #1e1e1e;
|
||||
color: #eee;
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
.forgot-form-container {
|
||||
background: #2a2a2a;
|
||||
border-color: #444;
|
||||
color: #f3f3f3;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
// === INPUTS Y SELECT en modo oscuro ===
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
select {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
color: #fff;
|
||||
|
||||
&:focus {
|
||||
border-color: #4a90e2;
|
||||
@@ -122,73 +148,52 @@
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Responsividad
|
||||
// RESPONSIVE
|
||||
// =====================================
|
||||
|
||||
// --- Teléfonos pequeños ---
|
||||
// Teléfonos
|
||||
@media (max-width: 480px) {
|
||||
.forgot-password-page {
|
||||
padding: 1.5rem;
|
||||
width: 92%;
|
||||
padding: 1.2rem;
|
||||
|
||||
.forgot-form-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1.2rem;
|
||||
.forgot-form input {
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 0.9rem;
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
button {
|
||||
padding: 0.9rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Tablets (iPad y similares) ---
|
||||
// Tablets
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.forgot-password-page {
|
||||
padding: 3rem 2.5rem;
|
||||
font-size: 1.05rem;
|
||||
padding: 2.5rem;
|
||||
|
||||
.forgot-form-container {
|
||||
max-width: 470px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.forgot-form input {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
gap: 1.2rem;
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: 1.05rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Escritorio grande ---
|
||||
@media (min-width: 1280px) {
|
||||
.forgot-password-page {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user