Registration

import { Component, signal } from '@angular/core';
import { FormField, FormRoot, form, required, email, minLength } from '@angular/forms/signals';
import { NgOatInput, NgOatCheckbox, NgOatFormError, NgOatButton, NgOatSeparator } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-registration',
  imports: [FormField, FormRoot, NgOatInput, NgOatCheckbox, NgOatFormError, NgOatButton, NgOatSeparator],
  template: `
    <form [formRoot]="regForm" (ngSubmit)="onSubmit()" class="card max-w-md w-100">
      <header class="mb-4">
        <h3 class="mb-0">Create an account</h3>
        <p class="text-light text-xs">Enter your details to get started</p>
      </header>
      <div class="vstack gap-3">
        <div class="grid cols-2">
          <div>
            <ng-oat-input label="First name" placeholder="John" [formField]="regForm.firstName" />
            <ng-oat-form-error [control]="regForm.firstName" />
          </div>
          <div>
            <ng-oat-input label="Last name" placeholder="Doe" [formField]="regForm.lastName" />
            <ng-oat-form-error [control]="regForm.lastName" />
          </div>
        </div>
        <div>
          <ng-oat-input label="Email" type="email" [formField]="regForm.email" />
          <ng-oat-form-error [control]="regForm.email" />
        </div>
        <div>
          <ng-oat-input label="Password" type="password" [formField]="regForm.password" />
          <ng-oat-form-error [control]="regForm.password" />
        </div>
        <div>
          <ng-oat-input label="Confirm Password" type="password" [formField]="regForm.confirmPassword" />
          <ng-oat-form-error [control]="regForm.confirmPassword" />
        </div>
        <ng-oat-checkbox label="I agree to the Terms of Service" [formField]="regForm.terms" />
        <button type="submit" class="btn">Create Account</button>
        <ng-oat-separator label="or" />
        <ng-oat-button variant="secondary" btnStyle="outline">Sign up with GitHub</ng-oat-button>
      </div>
      <footer class="text-center text-small text-light mt-2">
        Already have an account? <a href="#">Sign in</a>
      </footer>
    </form>
  `,
})
export class RegistrationComponent {
  private model = signal({
    firstName: '', lastName: '', email: '',
    password: '', confirmPassword: '', terms: false,
  });

  regForm = form(this.model, ($) => {
    required($.firstName, { message: 'First name is required' });
    required($.lastName, { message: 'Last name is required' });
    required($.email, { message: 'Email is required' });
    email($.email, { message: 'Invalid email format' });
    required($.password, { message: 'Password is required' });
    minLength($.password, 8, { message: 'Min. 8 characters' });
    required($.confirmPassword, { message: 'Confirm password is required' });
    minLength($.confirmPassword, 8, { message: 'Min. 8 characters' });
  });

  onSubmit() {
    if (this.regForm().valid()) alert('Submitted!');
    else alert('Fix errors first.');
  }
}