fix: prevent password fields from being pre-filled in profile page
All checks were successful
CI/CD Pipeline / Backend - Build, Test & Push (push) Successful in 2m42s
CI/CD Pipeline / Frontend - Build, Test & Push (push) Successful in 27m20s
CI/CD Pipeline / Integration Tests (push) Has been skipped
CI/CD Pipeline / Deployment Summary (push) Successful in 1s
CI/CD Pipeline / Deploy to Portainer (push) Successful in 12s
CI/CD Pipeline / Discord Notification (Failure) (push) Has been skipped
CI/CD Pipeline / Discord Notification (Success) (push) Successful in 2s

Fixed issue where password form fields (especially "New Password")
were being pre-filled with values, either from browser autocomplete
or residual form state.

Changes:
1. Added explicit empty defaultValues to password form
   - currentPassword: ''
   - newPassword: ''
   - confirmPassword: ''

2. Added autoComplete attributes to prevent browser pre-fill:
   - currentPassword: autoComplete="current-password"
   - newPassword: autoComplete="new-password"
   - confirmPassword: autoComplete="new-password"

3. Added useEffect to reset password form when switching tabs:
   - Ensures clean state when navigating to "Change Password" tab
   - Prevents stale values from persisting

4. Explicit reset values on successful password change:
   - Previously used passwordForm.reset() without values
   - Now explicitly sets all fields to empty strings

This ensures password fields are always empty and never pre-filled
by the browser or by residual form state.

Refs: apps/frontend/app/dashboard/profile/page.tsx:64-70,85-95

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
David 2026-01-12 18:24:13 +01:00
parent 2054e73e78
commit d9868dd49f

View File

@ -63,6 +63,11 @@ export default function ProfilePage() {
// Password form
const passwordForm = useForm<PasswordFormData>({
resolver: zodResolver(passwordSchema),
defaultValues: {
currentPassword: '',
newPassword: '',
confirmPassword: '',
},
});
// Update form values when user data loads
@ -77,6 +82,18 @@ export default function ProfilePage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user]);
// Reset password form when switching to password tab
useEffect(() => {
if (activeTab === 'password') {
passwordForm.reset({
currentPassword: '',
newPassword: '',
confirmPassword: '',
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeTab]);
// Update profile mutation
const updateProfileMutation = useMutation({
mutationFn: (data: ProfileFormData) => {
@ -107,7 +124,11 @@ export default function ProfilePage() {
onSuccess: () => {
setSuccessMessage('Password updated successfully!');
setErrorMessage('');
passwordForm.reset();
passwordForm.reset({
currentPassword: '',
newPassword: '',
confirmPassword: '',
});
setTimeout(() => setSuccessMessage(''), 3000);
},
onError: (error: any) => {
@ -330,6 +351,7 @@ export default function ProfilePage() {
{...passwordForm.register('currentPassword')}
type="password"
id="currentPassword"
autoComplete="current-password"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
{passwordForm.formState.errors.currentPassword && (
@ -351,6 +373,7 @@ export default function ProfilePage() {
{...passwordForm.register('newPassword')}
type="password"
id="newPassword"
autoComplete="new-password"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
{passwordForm.formState.errors.newPassword && (
@ -376,6 +399,7 @@ export default function ProfilePage() {
{...passwordForm.register('confirmPassword')}
type="password"
id="confirmPassword"
autoComplete="new-password"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
{passwordForm.formState.errors.confirmPassword && (