refactor: split tenant and lease page modules

frontend/src/app/components/guarantor-form/guarantor-form.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+.form-grid {
+  display: grid;
+  gap: 2px;
+}
+.form-grid mat-form-field {
+  width: 100%;
+}
+.add-guarantor.mat-mdc-outlined-button {
+  --mdc-outlined-button-label-text-color: var(--accent);
+  --mdc-outlined-button-outline-color: var(--border-strong);
+  width: 100%;
+}
+@media (min-width: 700px) {
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+  }
+  .full-field {
+    grid-column: span 2;
+  }
+  .add-guarantor.mat-mdc-outlined-button {
+    width: auto;
+  }
+}

frontend/src/app/components/guarantor-form/guarantor-form.html

@@ -0,0 +1,58 @@
+<form
+  class="guarantor-form"
+  #guarantorForm="ngForm"
+  ngNativeValidate
+  (ngSubmit)="save(guarantorForm)"
+>
+  <div class="form-grid guarantor-fields">
+    <mat-form-field appearance="outline"
+      ><mat-label>Prénom du garant</mat-label
+      ><input
+        matInput
+        name="guarantorFirstName"
+        [ngModel]="firstName()"
+        (ngModelChange)="firstName.set($event)"
+        required
+    /></mat-form-field>
+    <mat-form-field appearance="outline"
+      ><mat-label>Nom du garant</mat-label
+      ><input
+        matInput
+        name="guarantorLastName"
+        [ngModel]="lastName()"
+        (ngModelChange)="lastName.set($event)"
+        required
+    /></mat-form-field>
+    <mat-form-field appearance="outline"
+      ><mat-label>E-mail du garant</mat-label
+      ><input
+        matInput
+        type="email"
+        name="guarantorEmail"
+        [ngModel]="email()"
+        (ngModelChange)="email.set($event)"
+        required
+        autocomplete="email"
+    /></mat-form-field>
+    <mat-form-field appearance="outline"
+      ><mat-label>Téléphone du garant</mat-label
+      ><input
+        matInput
+        type="tel"
+        name="guarantorPhone"
+        [ngModel]="phone()"
+        (ngModelChange)="phone.set($event)"
+        pattern="^(?:(?:0\d(?:[ .-]?\d){8})|(?:(?:\+|00)\d(?:[ .()-]?\d){7,14}))$"
+        autocomplete="tel"
+    /></mat-form-field>
+    <mat-form-field appearance="outline" class="full-field"
+      ><mat-label>Adresse du garant</mat-label
+      ><input
+        matInput
+        name="guarantorAddress"
+        [ngModel]="address()"
+        (ngModelChange)="address.set($event)"
+    /></mat-form-field>
+  </div>
+  <button mat-stroked-button type="submit" class="add-guarantor">Ajouter le garant</button>
+</form>

frontend/src/app/components/guarantor-form/guarantor-form.ts

@@ -0,0 +1,41 @@
+import { Component, output, signal } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Guarantor } from '../../services/lease.service';
+
+@Component({
+  selector: 'app-guarantor-form',
+  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  templateUrl: './guarantor-form.html',
+  styleUrl: './guarantor-form.css',
+})
+export class GuarantorForm {
+  readonly submitted = output<Guarantor>();
+  readonly firstName = signal('');
+  readonly lastName = signal('');
+  readonly email = signal('');
+  readonly phone = signal('');
+  readonly address = signal('');
+
+  save(form: NgForm): void {
+    if (form.invalid) {
+      form.control.markAllAsTouched();
+      return;
+    }
+    this.submitted.emit({
+      firstName: this.firstName().trim(),
+      lastName: this.lastName().trim(),
+      email: this.email().trim(),
+      phone: this.phone().trim(),
+      address: this.address().trim(),
+    });
+    this.firstName.set('');
+    this.lastName.set('');
+    this.email.set('');
+    this.phone.set('');
+    this.address.set('');
+    form.resetForm();
+  }
+}