Change Password - Copy this React, Tailwind Component to your project

khi otp đúng chuyển quang giao diện này // src/ChangePassword.js import React, { useState } from 'react'; const ChangePassword = () => { const [oldPassword, setOldPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [confirmNewPassword, setConfirmNewPassword] = useState(''); const [errorMessage, setErrorMessage] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (newPassword !== confirmNewPassword) { setErrorMessage('Mật khẩu xác nhận không khớp.'); return; } if (newPassword.length < 8) { setErrorMessage('Mật khẩu mới phải có ít nhất 8 ký tự.'); return; } // Logic xử lý đổi mật khẩu (giả sử thành công) alert('Đổi mật khẩu thành công!'); setErrorMessage(''); }; return ( <div className="mt-20 ml-10"> <div className="p-6 rounded-lg"> <h2 className="text-2xl font-semibold mb-4">Đổi Mật Khẩu</h2> {errorMessage && ( <div className="text-red-500 text-sm mb-4">{errorMessage}</div> )} <div className='flex'> <form onSubmit={handleSubmit} > <div className="mb-4 w-96"> <label htmlFor="new-password" className="block text-sm font-medium text-gray-700">Mật khẩu mới</label> <input type="password" id="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nhập mật khẩu mới" required /> </div> <div className="mb-6"> <label htmlFor="confirm-password" className="block text-sm font-medium text-gray-700">Xác nhận mật khẩu mới</label> <input type="password" id="confirm-password" value={confirmNewPassword} onChange={(e) => setConfirmNewPassword(e.target.value)} className="w-full px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nhập lại mật khẩu mới" required /> </div> <button type="submit" className="w-full py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500" > Thay đổi </button> </form> <div className="w-80 bg-slate-100 text-gray-400 ml-8 mt-9"> <div className='w-72'> <div className='w-72text-gray-500'>Gợi ý:</div> Dùng ít nhất 8 ký tự.<br /> Kết hợp các ký tự a-z, số 0-9 và một số ký tự đặc biệt. <br /> Không nên sử dụng những chuỗi dễ đoàn như ngày sinh trong mật khẩu. </div> </div> </div> </div > </div > ); }; export default ChangePassword;