Adding code
This commit is contained in:
+196
-70
@@ -9,6 +9,7 @@ import './ProfileForm.css';
|
||||
const ProfileForm = () => {
|
||||
const navigate = useNavigate();
|
||||
const [activeView, setActiveView] = useState('profile');
|
||||
const [subView, setSubView] = useState('details'); // Add this state for toggling
|
||||
const [formData, setFormData] = useState({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
@@ -17,6 +18,13 @@ const ProfileForm = () => {
|
||||
createdDate: new Date().toISOString().split('T')[0],
|
||||
lastLoginDate: new Date().toISOString().split('T')[0],
|
||||
});
|
||||
|
||||
// Add password state
|
||||
const [passwordData, setPasswordData] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmNewPassword: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -47,6 +55,15 @@ const ProfileForm = () => {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
|
||||
// Add password change handler
|
||||
const handlePasswordChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setPasswordData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleNavClick = (view) => {
|
||||
if (view === 'profile') {
|
||||
navigate('/user/profile');
|
||||
@@ -55,6 +72,183 @@ const ProfileForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
|
||||
// Password validation
|
||||
if (!passwordData.currentPassword) {
|
||||
newErrors.currentPassword = 'Current Password is required';
|
||||
}
|
||||
|
||||
// Confirm password validation
|
||||
if (passwordData.newPassword !== passwordData.confirmNewPassword) {
|
||||
newErrors.confirmNewPassword = 'Passwords do not match';
|
||||
}
|
||||
|
||||
return newErrors;
|
||||
};
|
||||
|
||||
// Add password submit handler
|
||||
const handlePasswordSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
// You can add your password update logic here
|
||||
console.log('Password update requested:', passwordData);
|
||||
|
||||
const validationErrors = validateForm();
|
||||
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
setErrors(validationErrors);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userId = tokenService.getUserId();
|
||||
const currentPassword = passwordData.currentPassword;
|
||||
const newPassword = passwordData.newPassword;
|
||||
const confirmNewPassword = passwordData.confirmNewPassword;
|
||||
|
||||
const response = await userApi.update_password(userId, currentPassword, newPassword, confirmNewPassword);
|
||||
if (response) {
|
||||
console.log('Successfully updated password');
|
||||
} else {
|
||||
console.error('Error updating password');
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
// Render password change form
|
||||
const renderPasswordForm = () => (
|
||||
<div className="profile-form">
|
||||
<h2>Change Password</h2>
|
||||
<form onSubmit={handlePasswordSubmit}>
|
||||
<div>
|
||||
<label htmlFor="currentPassword">Current Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
value={passwordData.currentPassword}
|
||||
onChange={handlePasswordChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="newPassword">New Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
value={passwordData.newPassword}
|
||||
onChange={handlePasswordChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="confirmNewPassword">Confirm New Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmNewPassword"
|
||||
name="confirmNewPassword"
|
||||
value={passwordData.confirmNewPassword}
|
||||
onChange={handlePasswordChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Update Password</button>
|
||||
<button type="button" onClick={() => setSubView('details')}>
|
||||
Back to Profile
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Render profile details form
|
||||
const renderProfileForm = () => (
|
||||
<div className="profile-form">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<h2>User Profile</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('password')}
|
||||
style={{ marginBottom: '15px' }}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
</div>
|
||||
<form>
|
||||
<div>
|
||||
<label htmlFor="firstname">First Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
name="firstname"
|
||||
value={formData.firstname}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastname">Last Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
name="lastname"
|
||||
value={formData.lastname}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone">Phone:</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="username">Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="createdDate">Created Date:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="createdDate"
|
||||
name="createdDate"
|
||||
value={formData.createdDate}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastLoginDate">Last Login Date:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastLoginDate"
|
||||
name="lastLoginDate"
|
||||
value={formData.lastLoginDate}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="dashboard-container">
|
||||
{/* Navbar */}
|
||||
@@ -84,76 +278,8 @@ const ProfileForm = () => {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="profile-form">
|
||||
<h2>User Profile</h2>
|
||||
<form>
|
||||
<div>
|
||||
<label htmlFor="firstname">First Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
name="firstname"
|
||||
value={formData.firstname}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastname">Last Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
name="lastname"
|
||||
value={formData.lastname}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone">Phone:</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="username">Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="createdDate">Created Date:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="createdDate"
|
||||
name="createdDate"
|
||||
value={formData.createdDate}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastLoginDate">Last Login Date:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastLoginDate"
|
||||
name="lastLoginDate"
|
||||
value={formData.lastLoginDate}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/* Main Content - Toggle between views */}
|
||||
{subView === 'details' ? renderProfileForm() : renderPasswordForm()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user