added new style

This commit is contained in:
2025-09-24 14:05:51 -06:00
parent ab0a3030ae
commit 0b537d1e83
8 changed files with 150 additions and 147 deletions
@@ -1,84 +1,74 @@
"use client";
import { useState } from "react";
function ChangePassword() {
return (
<section className='centerGrid containerSection'>
export default function ChangePassword() {
const [pass, setPass] = useState("");
const [newPass, setNewPass] = useState("");
const [confirmNewPass, setconfirmNewPass] = useState("");
<form
className='login'
//onSubmit={(e) => {
//e.preventDefault();
//handleLogin();
//</section>}}
>
const handleChangePass = (e: React.FormEvent) => {
e.preventDefault;
const data = { pass, newPass, confirmNewPass };
console.log(data);
};
<div className='containerInput relative'>
<label className='label'>Contraseña actual</label>
<input
//type={showPassword ? 'text' : 'password'}
//value={password}
//onChange={(e) => setPassword(e.target.value)}
placeholder='Coloca tu contraseña...'
/>
<span
//onClick={() => setShowPassword(!showPassword)}
//className={showPassword ? 'eyeOpen' : 'eyeClose'}
/>
</div>
return (
<section className="centerGrid containerSection">
<form onSubmit={handleChangePass}>
<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
//type={showPassword ? 'text' : 'password'}
//value={password}
//onChange={(e) => setPassword(e.target.value)}
placeholder='Coloca tu contraseña...'
/>
<span
//onClick={() => setShowPassword(!showPassword)}
//className={showPassword ? 'eyeOpen' : 'eyeClose'}
/>
</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
//type={showPassword ? 'text' : 'password'}
//value={password}
//onChange={(e) => setPassword(e.target.value)}
placeholder='Coloca tu contraseña...'
/>
<span
//onClick={() => setShowPassword(!showPassword)}
//className={showPassword ? 'eyeOpen' : 'eyeClose'}
/>
</div>
<div className="containerInput relative">
<label className="label">Confirmar la contraña</label>
<input
placeholder="Coloca tu 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>
<div className="containerButton">
<button
className="button buttonSearch"
style={{ maxWidth: "100%", width: "100%" }}
type="submit"
>
Confirmar
</button>
<button
className='button buttonSearch'
style={{ maxWidth: '100%', width: '100%' }}
type='submit'
>Cancelar
</button>
</div>
</form>
{/*message &&
<div
className={`messageBox ${message.includes('exitoso') ? 'success' : 'error'}`}
style={{ marginTop: '10px' }}
>
{message}
</div>
*/}
</section>
)
<button
className="button buttonSearch"
style={{ maxWidth: "100%", width: "100%" }}
type="submit"
>
Cancelar
</button>
</div>
</form>
</section>
);
}
export default ChangePassword