98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
"use client";
|
|
import apiClient from "@/app/lib/apiClient";
|
|
import { useState } from "react";
|
|
import Swal from "sweetalert2";
|
|
|
|
export default function ChangePassword() {
|
|
const [password, setPass] = useState("");
|
|
const [newPassword, setNewPass] = useState("");
|
|
const [confirmNewPass, setconfirmNewPass] = useState("");
|
|
|
|
const handleChangePass = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const data = { password, newPassword };
|
|
|
|
try {
|
|
const response = await apiClient.post("/user/changePassword", data);
|
|
Swal.fire({
|
|
title: response.data.message,
|
|
icon: "success",
|
|
draggable: true,
|
|
});
|
|
setPass('');
|
|
setNewPass('');
|
|
setconfirmNewPass('');
|
|
} catch {
|
|
|
|
Swal.fire({
|
|
title: "No es tu contraseña actual!",
|
|
icon: "error",
|
|
draggable: true,
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
return (
|
|
<section className="centerGrid containerSection">
|
|
<form onSubmit={handleChangePass} className="pass">
|
|
<div className="containerInput relative">
|
|
<label className="label">Contraseña actual</label>
|
|
<input
|
|
placeholder="Coloca tu contraseña..."
|
|
value={password}
|
|
type="password"
|
|
onChange={(e) => {
|
|
setPass(e.target.value);
|
|
}}
|
|
/>
|
|
<span />
|
|
</div>
|
|
|
|
<div className="containerInput relative">
|
|
<label className="label">Nueva contraseña</label>
|
|
<input
|
|
placeholder="Coloca tu nueva contraseña..."
|
|
value={newPassword}
|
|
type="password"
|
|
onChange={(e) => {
|
|
setNewPass(e.target.value);
|
|
}}
|
|
/>
|
|
<span />
|
|
</div>
|
|
|
|
<div className="containerInput relative">
|
|
<label className="label">Confirmar la contraña</label>
|
|
<input
|
|
placeholder="Coloca tu nueva contraseña..."
|
|
value={confirmNewPass}
|
|
type="password"
|
|
onChange={(e) => {
|
|
setconfirmNewPass(e.target.value);
|
|
}}
|
|
/>
|
|
<span />
|
|
</div>
|
|
|
|
<div className="containerButton">
|
|
<button
|
|
className="button buttonSearch"
|
|
style={{ maxWidth: "100%", width: "100%" }}
|
|
>
|
|
Confirmar
|
|
</button>
|
|
|
|
<button
|
|
className="button buttonCancel"
|
|
style={{ maxWidth: "100%", width: "100%" }}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|