🚀 Registration Component - Quick Reference Card

Date: October 30, 2025
Status: 🎯 Quick Reference
Purpose: Fast copy-paste examples for developers

⚡ Quick Start (30 seconds)

// 1. Import the component
import { RegisterComponent, type User } from '@auth-ui';

// 2. Add to your page
@Component({
  standalone: true,
  imports: [RegisterComponent],
  template: `<lib-register (registerSuccess)="onSuccess($event)" />`
})
export class RegisterPage {
  onSuccess(user: User) {
    console.log('User registered:', user);
  }
}

Done! 🎉

🎨 Three Variants - Copy & Paste

Cosmic Glassmorphism (Default)

<lib-register [variant]="'cosmic-glass'" />

Use for: Premium apps, SaaS platforms, modern tools

Stellar Minimalist

<lib-register [variant]="'stellar-minimal'" />

Use for: Enterprise software, professional dashboards

Nebula Immersive

<lib-register [variant]="'nebula-immersive'" />

Use for: Gaming platforms, creative tools, showcases

📋 Complete Example (Copy-Paste Ready)

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { RegisterComponent, type User } from '@auth-ui';

@Component({
  selector: 'app-register-page',
  standalone: true,
  imports: [RegisterComponent],
  template: `
    <lib-register
      [variant]="'cosmic-glass'"
      [config]="{
        requireEmail: true,
        requireUsername: true,
        minPasswordLength: 8,
        showLoginLink: true,
        termsUrl: '/terms',
        privacyUrl: '/privacy',
        redirectAfterRegister: '/dashboard'
      }"
      (registerSuccess)="onSuccess($event)"
      (registerError)="onError($event)"
      (loginClick)="onLoginClick()"
    />
  `
})
export class RegisterPage {
  constructor(private router: Router) {}

  onSuccess(user: User): void {
    console.log('✅ User registered:', user.email);
    // Navigation handled by component
  }

  onError(error: string): void {
    console.error('❌ Registration failed:', error);
    // Show notification, etc.
  }

  onLoginClick(): void {
    this.router.navigate(['/auth/login']);
  }
}

⚙️ Configuration Cheat Sheet

[config]="{
  // Validation
  requireEmail: true,           // Require email field
  requireUsername: true,        // Require username field
  minPasswordLength: 8,         // Min password length (8-16)

  // UI
  showLoginLink: true,          // Show 'Sign in' link

  // URLs
  termsUrl: '/terms',           // Terms of Service URL
  privacyUrl: '/privacy',       // Privacy Policy URL
  redirectAfterRegister: '/dashboard', // Where to go after success

  // Theme
  theme: 'auto'                 // 'auto' | 'light' | 'dark'
}"

🎯 Common Use Cases

1. Simple Registration (Minimal Config)

<lib-register />

2. Custom Redirect

<lib-register
  [config]="{ redirectAfterRegister: '/onboarding' }"
/>

3. Stronger Password Requirements

<lib-register
  [config]="{ minPasswordLength: 12 }"
/>

4. No Login Link

<lib-register
  [config]="{ showLoginLink: false }"
/>

5. Custom Terms URLs

<lib-register
  [config]="{
    termsUrl: '/legal/terms-of-service',
    privacyUrl: '/legal/privacy-policy'
  }"
/>

🔄 Dynamic Variant Switching

import { signal } from '@angular/core';

export class RegisterPage {
  variant = signal<'cosmic-glass' | 'stellar-minimal' | 'nebula-immersive'>('cosmic-glass');
}

// In template
<lib-register [variant]="variant()" />

// Switch variant
this.variant.set('stellar-minimal');

📤 Event Handlers

Success Handler

onSuccess(user: User): void {
  // user.id - User ID
  // user.email - User email
  // user.name - User name
  
  // Example: Show success message
  this.showNotification('Welcome to GoGrab Space!');
  
  // Example: Track analytics
  this.analytics.track('user_registered', { email: user.email });
  
  // Navigation is automatic, but you can override:
  // this.router.navigate(['/custom-path']);
}

Error Handler

onError(error: string): void {
  // error - Error message string
  
  // Example: Show error notification
  this.showErrorNotification(error);
  
  // Example: Log to error tracking
  this.errorTracking.log('registration_failed', { error });
}

Login Click Handler

onLoginClick(): void {
  // Navigate to login page
  this.router.navigate(['/auth/login']);
  
  // Or use query params
  this.router.navigate(['/auth/login'], {
    queryParams: { returnUrl: '/dashboard' }
  });
}

🎨 Quick Style Overrides

// In your component styles
:host ::ng-deep {
  // Make card wider
  .register-card {
    max-width: 600px;
  }
  
  // Larger title
  .title-gradient {
    font-size: 3rem;
  }
  
  // Custom button color
  .submit-btn .btn-background {
    background: linear-gradient(135deg, #your-color-1, #your-color-2);
  }
}

🐛 Troubleshooting

Component not showing?

// ✅ Make sure you imported it
imports: [RegisterComponent]

// ✅ Check that @auth-ui is in tsconfig paths
"@auth-ui": ["libs/auth-ui/src/index.ts"]

Variant not applying?

// ❌ Wrong
[variant]="cosmic-glass"

// ✅ Correct (needs quotes)
[variant]="'cosmic-glass'"

Form not submitting?

// Check browser console for validation errors
// Ensure all required fields are filled
// Ensure terms checkbox is checked

Styles look broken?

// Ensure theme-system is imported in global styles
@use 'libs/theme-system/theme-styles/src/lib/styles/global.scss';

📱 Responsive Breakpoints

// Component automatically handles these breakpoints:
// Desktop: > 640px (full features)
// Mobile: ≤ 640px (optimized layout)

// No additional code needed!

♿ Accessibility Checklist

• ✅ Keyboard navigation works
• ✅ Screen reader compatible
• ✅ Focus indicators visible
• ✅ Error messages announced
• ✅ Color contrast meets WCAG AA
• ✅ Reduced motion supported

No additional code needed - all built-in!

🚀 Performance Tips

// 1. Use OnPush change detection (already done)
changeDetection: ChangeDetectionStrategy.OnPush

// 2. Lazy load the auth module
const routes = [
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.routes')
  }
];

// 3. Preload if needed
// Add to route config:
data: { preload: true }

📚 Related Quick References

• Login Component Quick Reference
• Auth Service Quick Reference
• Theme System Quick Reference

🎉 That's It!

You now have everything you need to implement the registration component in 30 seconds. Choose your variant, configure it, and you're done! 🚀

Pro Tip: Start with the default cosmic-glass variant and switch later if needed. All variants have identical functionality!

Last Updated: October 30, 2025
Version: 1.0.0
Maintained By: GoGrab Space Team