fix: Improve UI and fix username validation issues

[codeunia-dev]

• Replace 'CU' logo with proper CodeUnia logo component
• Fix username validation to use direct database queries instead of RPC
• Remove problematic regex pattern attribute causing console errors
• Implement client-side random username generation
• Add comprehensive username validation with visual feedback
• Improve form styling with modern glassmorphism design
• Add username preview and real-time validation indicators
• Fix TypeScript errors and improve error handling

Resolves console errors and improves user experience

Summary by CodeRabbit

• New Features

  • Live username validation with availability check, status icons, and preview.
  • Random username generator with availability verification.
  • “Username Requirements” panel with visual indicators.
  • Pre-fills name and username from existing/incomplete profiles and OAuth data.
  • Success and error toasts, with handling for partial failures.
  • Redirects to dashboard when profile is complete.

• UI/UX

  • Redesigned Complete Profile page with new header/logo, gradient background, and translucent card.
  • Enhanced form styling, improved disabled states, and loader/status icons.
  • Updated footer with hover transitions and refined typography.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Ready	Preview	Comment	Sep 15, 2025 4:33am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Refactors the complete profile page to use profileService, adds client-side username validation and availability checks, introduces a local random username generator, pre-fills data from existing profiles or OAuth metadata, updates submit flow to separately persist profile and completion flags, and overhauls the UI with new status indicators, toasts, and layout.

Changes

Cohort / File(s)

Summary of Edits

Profile completion page refactor and UX overhaul app/complete-profile/page.tsx

Replaced direct Supabase calls with profileService; added InputValidator-based username validation and direct DB availability checks; implemented local random username generator; pre-fill from existing profile or OAuth metadata; revised submit to update profile then completion flags; added toasts and redirect handling; comprehensive UI updates (icons, preview, requirements panel, headers/footers, styling).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant P as CompleteProfile Page
  participant S as profileService
  participant DB as Database

  %% Initial load
  U->>P: Open /complete-profile
  P->>S: getProfile(user.id)
  alt Profile exists and complete
    S-->>P: Profile (complete)
    P-->>U: Redirect to dashboard
  else Profile exists but incomplete
    S-->>P: Profile (incomplete data)
    P-->>U: Prefill firstName/lastName/username
  else Error / no profile
    S-->>P: Error or null
    P-->>U: Show empty form
  end

  %% Username input flow
  U->>P: Type username
  P->>P: Validate with InputValidator
  alt Invalid
    P-->>U: Show validation error & X icon
  else Valid
    P->>DB: Check availability (query)
    alt Available
      DB-->>P: None found
      P-->>U: Show available & ✓ icon
    else Taken
      DB-->>P: Match found
      P-->>U: Show taken & X icon
    end
  end

  %% Random username
  U->>P: Click Sparkles (generate)
  P->>P: Generate candidate locally
  P->>DB: Availability check
  DB-->>P: Result
  P-->>U: Autofill if available or retry prompt

  %% Submit flow
  U->>P: Submit form
  P->>S: updateProfile(user.id, data)
  alt Update ok
    S-->>P: Success
    P->>DB: Update flags (profile_complete, username_set, username_editable)
    alt Flags ok
      DB-->>P: Success
      P-->>U: Success toast + Redirect to dashboard
    else Flags failed
      DB-->>P: Error
      P-->>U: Partial failure toast (profile saved)
    end
  else Update failed
    S-->>P: Error
    P-->>U: Error toast (stay on page)
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: Add OAuth profile completion flow #241 — Prior iteration of complete-profile flow using RPC-based checks and generator; this PR replaces those with profileService, direct queries, and local generation.

Poem

I nudge my whiskers at the form so bright,
A name to claim beneath the lunar light.
I hop through checks—validate, compare—
A sparkle taps, a username to wear.
Profile saved, flags set just right—
Now off I bound to dashboard’s height! 🐇✨

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/oauth-profile-completion

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cac0dd5 and 1a7aa46.

📒 Files selected for processing (1)

• app/complete-profile/page.tsx (7 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}