Settings & Profile Pages Checklist | Development Standards

1. Page Structure

Settings divided into clear sections: Profile, Security, Notifications, Integrations, Danger Zone
Each section is visually distinct with separator, card, or panel
If many sections, use sidebar or tabs instead of one long page
Active section highlighted in navigation
Page title clearly labeled: Settings or Account Settings
Breadcrumb or back navigation available
Personal settings and workspace settings separated clearly
Settings changes do not affect other users unless explicitly team/workspace setting

2. General Settings Fields

First name and last name follow registration validation: min 1, max 100
Email change requires current password confirmation
Email change sends verification email to new address before taking effect
Email change sends confirmation email to old address
Username is unique if applicable
Username validated as alphanumeric plus hyphens only
Timezone uses selector, not freetext field
Language/locale uses dropdown with supported languages
All fields pre-filled with current values — never blank
All fields validated using same rules as registration

3. Save Behavior

Explicit Save button per section, or auto-save with visible Saved indicator
Auto-save never happens silently without feedback
Auto-save shows Saving... while saving and Saved ✓ after completion
Per-section save submits only that section, not the entire settings page
Save button shows loading state while saving
Save button disabled during loading
On success, show success toast or inline Saved ✓
On error, show error inline or banner
On error, do not silently reset field to old value
Unsaved changes warning appears before navigating away
After save, fields stay populated with new values

4. Password Change Section

Password section separate from profile details
Fields include current password, new password, confirm new password
All three fields are password inputs with show/hide toggles
Current password validated on backend
New password complexity rules shown clearly
Confirm new password validates in real time once both new password fields have values
New password equal to current password is blocked on backend
Submitting password form does not submit profile form
On success, clear all password fields and show Password updated toast
Wrong current password shows inline error on current password field
After successful password change, optionally prompt logout other sessions

5. Avatar & Profile Photo

Upload button triggers file input
Drag-and-drop supported if useful, but not drag-and-drop only
Accepted file types: JPEG, PNG, WebP
MIME type validated, not just extension
Maximum file size 5MB enforced with clear error
Minimum dimensions 100×100px recommended
Server-side image resizing enforced
Preview shown before confirming upload
Upload has loading/progress indicator
Avatar updates immediately in UI after success
Header/nav avatar updates after success
Fallback shows user initials if no avatar
Remove photo option reverts to initials fallback
Backend strips EXIF data from uploaded images

6. Notification Preferences

Toggles or checkboxes for each notification type
Notification categories clearly labeled
Each toggle saves immediately on change
Toggle save shows brief Saved confirmation near the toggle
Toggle save does not use disruptive toast for every switch
Unsubscribing from all emails includes confirmation
Users can re-subscribe from same settings page
Email unsubscribe link routes to this section
Critical security emails cannot be disabled

7. Connected Accounts & Integrations

Connected accounts show provider logo
Connected email/username shown
Connection date shown
Disconnect button exists for each connected account
Disconnecting last login method warns user to set password first
OAuth token shown only as Connected — never raw token
Reconnect option exists if token expired or revoked
Third-party integrations show connection status, scopes, and last used date
Revoking third-party integration confirms before proceeding
Disconnect follows destructive actions checklist

8. Danger Zone

Danger Zone visually separated with red border or distinct background
Section clearly labeled Danger Zone or Account Deletion
Only irreversible or high-impact actions placed here
Delete account, leave workspace, transfer ownership, cancel subscription placed here
Every action follows destructive actions checklist
Delete account requires type-to-confirm: Type DELETE to confirm
Delete account explains what will be deleted
Workspace owner must transfer ownership before account deletion
Successful account deletion logs out and redirects to homepage