large update wip

src/app/components/registration/registration.component.html

@@ -0,0 +1,114 @@
+
+
+<div class="container">
+   <div class="registration-header">
+    @if(editMode()){
+       <button mat-button type="button" routerLink="/application-list" class="button">
+        Cancel Editing
+      </button>
+    }@else {
+      <button mat-button type="button" (click)="goBack()" class="button">
+        Go Back
+      </button>
+    }
+      @if(editMode()){
+           <h2>Spaceflight Candidate Registration Update</h2>
+      }
+      @else {
+   <h2>Spaceflight Candidate Registration</h2>
+      }
+    </div>
+ 
+  <form class="registration-form" [formGroup]="form" (ngSubmit)="onSubmit()">
+
+    <!-- Profile Image Upload -->
+    <div class="image-upload">
+      <app-image-input formControlName="profileImage"></app-image-input>
+    </div>
+
+    <!-- Full Name -->
+    <mat-form-field appearance="outline">
+      <mat-label>Full Name</mat-label>
+      <input matInput formControlName="fullName" />
+      @if (form.get('fullName')?.hasError('required')) {
+        <mat-error>Name is required</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- Email -->
+    <mat-form-field appearance="outline">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email" />
+      @if (form.get('email')?.hasError('email')) {
+        <mat-error>Invalid email</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- Phone Number -->
+    <mat-form-field appearance="outline">
+      <mat-label>Phone Number</mat-label>
+      <input matInput formControlName="phoneNumber" placeholder="+972-XXXXXXX" />
+      @if (form.get('phoneNumber')?.hasError('required')) {
+        <mat-error>Phone number is required</mat-error>
+      }
+      @if (form.get('phoneNumber')?.hasError('pattern')) {
+        <mat-error>Invalid phone number</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- Age -->
+    <mat-form-field appearance="outline">
+      <mat-label>Age</mat-label>
+      <input matInput type="number" formControlName="age" min="0" />
+      @if (form.get('age')?.hasError('min') || form.get('age')?.hasError('max')) {
+        <mat-error>Only applicants of age 18 - 70 allowed</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- City -->
+
+    <app-leaflet-map
+    formControlName="cityOrRegion"
+    class="app-leaflet-map">
+    </app-leaflet-map>
+
+    @if (form.get('cityOrRegion')?.invalid && (form.get('cityOrRegion')?.touched || form.get('cityOrRegion')?.dirty)) {
+    @if (form.get('cityOrRegion')?.hasError('required')) {
+    <mat-error style="margin-bottom: 8px; padding: 0 16px;">City selection is required</mat-error>
+    }
+    @if (form.get('cityOrRegion')?.hasError('invalidCity')) {
+    <mat-error style="margin-bottom: 8px; padding: 0 16px;">Please select a valid city from the list</mat-error>
+    }
+}
+    
+    <!-- Hobbies -->
+    <mat-form-field appearance="outline">
+      <mat-label>Hobbies</mat-label>
+      <textarea matInput rows="2" formControlName="hobbies"></textarea>
+      @if (form.get('hobbies')?.hasError('maxLength')) {
+        <mat-error>Maximum length is 300 characters</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- Justification -->
+    <mat-form-field appearance="outline">
+      <mat-label>Why I am the perfect candidate</mat-label>
+      <textarea matInput rows="4" formControlName="justification"></textarea>
+      @if (form.get('justification')?.hasError('required')) {
+        <mat-error>Field is required</mat-error>
+      }
+      @if (form.get('justification')?.hasError('maxLength')) {
+        <mat-error>Maximum length is 300 characters</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- Submit -->
+   <button mat-raised-button color="accent" type="submit">
+  {{ editMode() ? 'Update Application' : 'Submit Application' }}
+  </button>
+  </form>
+
+  <div class="footer">
+    🚀 Powered by <a href="#">Israeli Imaginary Space Agency</a> | © 2025
+  </div>
+</div>