iti-technology/apps/private/src/app/pages/auth/register.html

<h1>Crea un account</h1>

@if (done(); as message) {
  <p class="alert alert--success" role="status">{{ message }}</p>
  @if (accountType() === 'installer') {
    <p>
      Dopo la conferma dell'email potrai accedere e completare il profilo aziendale. Il listino riservato e la
      documentazione tecnica saranno disponibili quando avremo approvato la tua richiesta.
    </p>
  }
  <a routerLink="/login" [queryParams]="{ redirect: redirect() || null }" class="btn btn--primary">Vai al login</a>
} @else {
  @if (error(); as message) {
    <p class="alert alert--error" role="alert">{{ message }}</p>
  }

  <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
    <fieldset>
      <legend>Tipo di account</legend>
      <div class="types">
        @for (type of types; track type.value) {
          <label class="check type">
            <input type="radio" formControlName="accountType" [value]="type.value" name="accountType" />
            <span>
              <strong>{{ type.label }}</strong>
              <small>{{ type.hint }}</small>
            </span>
          </label>
        }
      </div>
    </fieldset>

    <fieldset>
      <legend>I tuoi dati</legend>
      <div class="form-grid">
        <app-form-field [control]="form.controls.firstName" label="Nome" autocomplete="given-name" [submitted]="submitted()" />
        <app-form-field [control]="form.controls.lastName" label="Cognome" autocomplete="family-name" [submitted]="submitted()" />
        @if (accountType() !== 'customer') {
          <app-form-field
            class="span-2"
            [control]="form.controls.companyName"
            label="Ragione sociale"
            autocomplete="organization"
            [submitted]="submitted()"
          />
          <app-form-field
            [control]="form.controls.vatNumber"
            label="Partita IVA"
            [required]="accountType() === 'company'"
            [submitted]="submitted()"
            [messages]="{ minlength: 'Partita IVA troppo corta' }"
          />
        }
        <app-form-field
          [control]="form.controls.phone"
          label="Telefono"
          type="tel"
          autocomplete="tel"
          inputmode="tel"
          [required]="false"
          [submitted]="submitted()"
        />
      </div>
    </fieldset>

    <fieldset>
      <legend>Accesso</legend>
      <div class="form-grid">
        <app-form-field
          class="span-2"
          [control]="form.controls.email"
          label="Email"
          type="email"
          autocomplete="email"
          [submitted]="submitted()"
        />
        <app-form-field
          [control]="form.controls.password"
          label="Password"
          type="password"
          autocomplete="new-password"
          hint="Almeno 10 caratteri."
          [submitted]="submitted()"
        />
        <app-form-field
          [control]="form.controls.confirm"
          label="Ripeti la password"
          type="password"
          autocomplete="new-password"
          [submitted]="submitted()"
          [messages]="{ mismatch: 'Le due password non coincidono' }"
        />
      </div>
    </fieldset>

    <div class="consents">
      <label class="check">
        <input
          type="checkbox"
          formControlName="acceptPrivacy"
          [attr.aria-invalid]="submitted() && form.controls.acceptPrivacy.invalid ? 'true' : null"
          aria-describedby="privacy-error"
        />
        <span>
          Ho letto l'<a [href]="siteUrl + '/privacy'" target="_blank" rel="noopener">informativa privacy</a> e acconsento
          al trattamento dei dati per gestire il mio account.
        </span>
      </label>
      @if (submitted() && form.controls.acceptPrivacy.invalid) {
        <p class="field-error" id="privacy-error">Il consenso è necessario per creare l'account.</p>
      }
      <label class="check">
        <input type="checkbox" formControlName="acceptMarketing" />
        <span>Voglio ricevere novità e offerte via email (facoltativo, revocabile in qualsiasi momento).</span>
      </label>
    </div>

    <button type="submit" class="btn btn--primary btn--block" [disabled]="busy()">
      {{ busy() ? 'Registrazione in corso…' : 'Crea l’account' }}
    </button>
  </form>

  <p class="switch">
    Hai già un account? <a routerLink="/login" [queryParams]="{ redirect: redirect() || null }">Accedi</a>
  </p>
}