Skip to content

🔐 Authentication Components

This section documents the authentication UI components used for login, registration, and password management.

Card Components (Not Modals)

These components were renamed from *Modal to *Card (Feb 2026) because they are card-style forms displayed inline on the login page, not modal overlays. They do not extend ModalBase.

Uses PasswordInput and PasswordStrength from the UI Base components.

Login Page

🔑 LoginCard

The LoginCard handles user authentication via username/email and password.

⚡ Features

  • Input: Username or Email field (autofocus).
  • Password: Password field with visibility toggle (via PasswordInput).
  • State: Uses $lib/stores/auth to manage loading state and errors.
  • Navigation: Emits events to switch to Register or Forgot Password views.

💻 Usage

<script>
  import LoginCard from '$lib/components/auth/LoginCard.svelte';
</script>

<LoginCard
  redirectTo="/dashboard"
  on:gotoRegister={() => showRegister = true}
  on:gotoForgot={() => showForgot = true}
/>

📝 RegisterCard

The RegisterCard handles new user registration with client-side validation.

Registration with Password Strength

⚡ Features

  • Validation: Real-time validation for:
    • Username (min length)
    • Email (format)
    • Password (strength rules)
    • Confirm Password (match)
  • Strength Meter: Integrated PasswordStrength component.
  • Error Handling: Maps backend errors (e.g., "username taken") to user-friendly messages.

💻 Usage

<script>
  import RegisterCard from '$lib/components/auth/RegisterCard.svelte';
</script>

<RegisterCard
  on:gotoLogin={(e) => {
     showLogin = true;
     successMessage = e.detail.message;
  }}
/>

🔒 PasswordStrength

A visual indicator of password strength using zxcvbn-ts.

⚡ Features

  • Score: Calculates a score from 0 (Very Weak) to 4 (Very Strong).
  • Visual Bar: Color-coded progress bar (Red -> Orange -> Yellow -> Lime -> Green).
  • Rules Checklist: Shows specific requirements:
    • Min 8 characters
    • Uppercase & Lowercase
    • Number
    • Special character

💻 Usage

<script>
  import PasswordStrength from '$lib/components/ui/input/PasswordStrength.svelte';
  let password = '';
</script>

<input type="password" bind:value={password} />
<PasswordStrength {password} showRules={true} />

🔑 PasswordInput

A reusable input component for passwords.

⚡ Features

  • Toggle Visibility: Eye icon to show/hide password.
  • Styling: Consistent styling with error state support.
  • Events: Forwards input, blur, focus events.

💻 Usage

<script>
  import PasswordInput from '$lib/components/ui/input/PasswordInput.svelte';
  let password = '';
</script>

<PasswordInput
  bind:value={password}
  placeholder="Enter password"
  hasError={false}
/>