tsk-6: Add feature to update password in profile #13
+7
-2
@@ -38,7 +38,12 @@ export const userApi = {
|
||||
}
|
||||
},
|
||||
|
||||
update_password: async (userId, currentPassword, updatedPassword, confirmedPassword) => {
|
||||
update_password: async (
|
||||
userId,
|
||||
currentPassword,
|
||||
updatedPassword,
|
||||
confirmedPassword
|
||||
) => {
|
||||
const request = {
|
||||
user_id: userId,
|
||||
current_password: currentPassword,
|
||||
@@ -51,7 +56,7 @@ export const userApi = {
|
||||
{
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(request)
|
||||
body: JSON.stringify(request),
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -1,41 +1,95 @@
|
||||
.profile-form {
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.profile-form h2 {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.profile-form form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.profile-form div {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-form label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.profile-form input[type='text'],
|
||||
.profile-form input[type='tel'] {
|
||||
.profile-form input[type='tel'],
|
||||
.profile-form input[type='password'] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-form input[type='text']:focus,
|
||||
.profile-form input[type='tel']:focus,
|
||||
.profile-form input[type='password']:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.profile-form input[readonly] {
|
||||
background-color: #f9f9f9;
|
||||
background-color: #f9fafb;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.profile-form button[type='submit'] {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.profile-form button[type='submit']:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.profile-form button[type='button'] {
|
||||
width: 100%;
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.profile-form button[type='button']:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
@@ -9,7 +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 [subView, setSubView] = useState('details');
|
||||
const [formData, setFormData] = useState({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
@@ -18,12 +18,11 @@ 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: ''
|
||||
confirmNewPassword: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -55,12 +54,11 @@ const ProfileForm = () => {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
};
|
||||
|
||||
// Add password change handler
|
||||
const handlePasswordChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setPasswordData(prev => ({
|
||||
setPasswordData((prev) => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -72,35 +70,8 @@ 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();
|
||||
@@ -108,24 +79,29 @@ const ProfileForm = () => {
|
||||
const newPassword = passwordData.newPassword;
|
||||
const confirmNewPassword = passwordData.confirmNewPassword;
|
||||
|
||||
const response = await userApi.update_password(userId, currentPassword, newPassword, 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) {
|
||||
console.error('Login error:', 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>
|
||||
<label htmlFor="currentPassword">Current Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
@@ -136,7 +112,7 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="newPassword">New Password:</label>
|
||||
<label htmlFor="newPassword">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
@@ -147,7 +123,7 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="confirmNewPassword">Confirm New Password:</label>
|
||||
<label htmlFor="confirmNewPassword">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmNewPassword"
|
||||
@@ -165,22 +141,12 @@ const ProfileForm = () => {
|
||||
</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>
|
||||
<h2>User Profile</h2>
|
||||
<form>
|
||||
<div>
|
||||
<label htmlFor="firstname">First Name:</label>
|
||||
<label htmlFor="firstname">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
@@ -191,7 +157,7 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastname">Last Name:</label>
|
||||
<label htmlFor="lastname">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
@@ -202,7 +168,7 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone">Phone:</label>
|
||||
<label htmlFor="phone">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
@@ -213,7 +179,7 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="username">Username:</label>
|
||||
<label htmlFor="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
@@ -224,28 +190,32 @@ const ProfileForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="createdDate">Created Date:</label>
|
||||
<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>
|
||||
<label htmlFor="lastLoginDate">Last Login Date</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastLoginDate"
|
||||
name="lastLoginDate"
|
||||
value={formData.lastLoginDate}
|
||||
onChange={handleChange}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<button type="button" onClick={() => setSubView('password')}>
|
||||
Change Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -278,7 +248,7 @@ const ProfileForm = () => {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Main Content - Toggle between views */}
|
||||
{/* Main Content */}
|
||||
{subView === 'details' ? renderProfileForm() : renderPasswordForm()}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user