Feature: Create Community Profile Settings page (Profile, Owner Details, Security, Active Sessions, Appearance, Account Controls)

Start by locating the settings entry point and the API endpoints listed for profile, password, 2FA, sessions, appearance, and account deactivation. Map how the SettingsLayout and six requested sections fit the existing application before attempting implementation. Done means every listed module and acceptance criterion is implemented, integrated, accessible, responsive, and security-reviewed.

Build a production-grade Settings system, not a simple profile form.

This should be a scalable settings architecture similar to:

• GitHub Settings
• Stripe Account Settings
• Discord User Settings

Must support security, scalability, accessibility, validation, session management, and future extensibility.

---

Scope

Build settings page with these modules:

Profile
Owner Details
Security
Sessions
Appearance
Danger Zone

---

1. Profile Module

Community Identity

Fields:

CommunityName
Bio
Slug
Website
Country
City
OfficialEmail
ContactPhone
LogoUrl

Requirements:

Slug

Must support:

• uniqueness validation

• real-time availability check

• slug normalization

Example:

My Dev Community
↓
my-dev-community

Prevent:

• reserved slugs

• invalid characters

• duplicates

---

Logo Management

Support:

• upload

• replace

• remove

• drag/drop

• preview

Production requirements:

• image validation

• file size limits

• mime-type validation

• client-side crop

• signed upload support (S3/Cloudinary compatible)

• rollback on failed upload

---

Social Links

Support:

github
discord
twitter
linkedin
youtube
instagram

Requirements:

• URL validation

• normalize URLs

• platform-specific validation

---

2. Owner Details Module

Fields:

firstName
lastName
imageUrl
publicProfileUrl
email
primaryRole
location
skills[]
areaOfInterest[]

Requirements:

• tag input

• searchable multi-select

• owner avatar upload

• dirty state tracking

---

3. Security Module

Password Management

Fields:

oldPassword
newPassword
confirmPassword

Production requirements:

• re-auth verification

• password strength meter

• breach password check (optional future)

• session rotation after password change

• force re-login if required

---

Two-Factor Authentication

Support:

• enable 2FA

• disable 2FA

• QR setup

• recovery codes

• backup methods

• verification challenge

---

4. Session Management Module

Critical production feature.

Display:

deviceName
browser
os
userAgent
location
lastActiveAt
isCurrentDevice

Actions:

• revoke session

• logout current device

• logout all devices

• view all sessions

Security requirements:

• revoke refresh tokens

• invalidate server sessions

• suspicious session detection

• current device badge

Should resemble:

• Google device activity

• GitHub active sessions

---

5. Appearance Module

Support persisted preferences:

Theme

Light
Dark
System

---

Density

Comfortable
Compact

---

Base Font Size

Small
Medium
Large

Persist server-side or user preferences store.

---

6. Danger Zone

Deactivate Account

Requirements:

• confirmation modal

• re-auth required

• irreversible action warning

• typed confirmation (optional)

Example:

Type DEACTIVATE to continue

Future-ready for:

• delete account

• ownership transfer

---

Architecture Requirements

Use modular settings architecture:

SettingsLayout

ProfileSettingsSection
OwnerSettingsSection
SecuritySettingsSection
SessionSettingsSection
AppearanceSettingsSection
DangerZoneSection

Not one giant component.

---

Frontend Production Requirements

Must include:

State Management

Support:

• optimistic updates

• rollback on failure

• dirty tracking

• field-level error states

---

UX

Must include:

• Save Changes flow

• unsaved changes warning

• skeleton loading

• loading states

• success/error toasts

• retry handling

---

Accessibility

Must support:

• keyboard navigation

• proper labels

• focus states

• screen reader support

• ARIA compliance

---

Responsive

Support:

• desktop

• tablet

• mobile

Settings navigation should collapse on smaller screens.

---

API Requirements

GET    /settings/profile
PATCH  /settings/profile

PATCH  /settings/password

POST   /settings/2fa/enable
POST   /settings/2fa/disable

GET    /sessions
DELETE /sessions/:id
DELETE /sessions/logout-all

PATCH  /settings/appearance

POST   /account/deactivate

---

Validation Requirements

Need:

• client validation

• server validation

• schema validation (Zod)

• sanitization

• rate limits for security endpoints

---

Security Requirements

Critical:

• CSRF protection

• secure file uploads

• re-auth for sensitive changes

• session invalidation

• token rotation

• audit logging (recommended)

---

Future Extensibility

Architecture must support adding:

• Notifications settings

• Privacy settings

• Billing settings

• Audit logs

• API tokens

• Webhooks

without redesigning settings architecture.

Acceptance Criteria

• Production-grade settings architecture created

• All modules implemented

• Secure session management integrated

• 2FA support included

• Appearance preferences persisted

• Danger zone implemented

• Responsive and accessible

• Scalable for future settings modules

• Security review completed