75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
export default function ChangePassword() {
|
|
const [pass, setPass] = useState("");
|
|
const [newPass, setNewPass] = useState("");
|
|
const [confirmNewPass, setconfirmNewPass] = useState("");
|
|
|
|
const handleChangePass = (e: React.FormEvent) => {
|
|
e.preventDefault;
|
|
const data = { pass, newPass, confirmNewPass };
|
|
console.log(data);
|
|
};
|
|
|
|
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={pass}
|
|
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={newPass}
|
|
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}
|
|
onChange={(e) => {
|
|
setconfirmNewPass(e.target.value);
|
|
}}
|
|
/>
|
|
<span />
|
|
</div>
|
|
|
|
<div className="containerButton">
|
|
<button
|
|
className="button buttonSearch"
|
|
style={{ maxWidth: "100%", width: "100%" }}
|
|
type="submit"
|
|
>
|
|
Confirmar
|
|
</button>
|
|
|
|
<button
|
|
className="button buttonCancel"
|
|
style={{ maxWidth: "100%", width: "100%" }}
|
|
type="submit"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|