WIP

src/app/registration/registration.component.html

@@ -0,0 +1,115 @@
+<div class="registration-container">
+  <h2 class="title">🚀 Spaceflight Candidate Registration</h2>
+
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form">
+    <!-- <div class="upload-section">
+      <input
+        type="file"
+        accept="image/*"
+        (change)="onFileSelected($event)"
+      />
+      <mat-label>Candidate Profile Picture</mat-label>
+      <div class="preview">
+        <img [src]="previewUrl" alt="Preview" />
+      </div>
+    </div> -->
+    <app-image-input></app-image-input>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <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>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email" />
+      @if (form.get('email')?.hasError('email')) {
+        <mat-error>
+          Invalid email
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Phone Number</mat-label>
+      <input matInput formControlName="phone" placeholder="+972-XXXXXXX"/>
+      @if (form.get('phone')?.hasError('required')) {
+        <mat-error>
+          Phone number is required
+        </mat-error>
+      }
+      @if (form.get('phone')?.hasError('pattern')){
+        <mat-error>
+          Invalid phone number
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Age</mat-label>
+      <input matInput type="number" formControlName="age" />
+      @if (form.get('age')?.hasError('min') || form.get('age')?.hasError('max')) {
+        <mat-error>
+          Only aplicants of age 18 - 70 allowed
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>City / Region</mat-label>
+      <input matInput formControlName="city" />
+      @if (form.get('city')?.hasError('required')) {
+        <mat-error>
+          Field is required
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <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>
+
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>Why I am the perfect candidate</mat-label>
+      <textarea matInput rows="4" formControlName="reason"></textarea>
+      @if (form.get('reason')?.hasError('required')) {
+        <mat-error>
+          Field is required
+        </mat-error>
+      }
+      @if (form.get('reason')?.hasError('maxLength')) {
+        <mat-error>
+          Maximum length is 300 characters
+        </mat-error>
+      }
+    </mat-form-field>
+
+   
+    <button
+      mat-raised-button
+      color="accent"
+      class="full-width"
+      type="submit"
+      [disabled]="form.invalid"
+    >
+      Submit Application
+    </button>
+
+    <button
+      mat-raised-button
+      (click)="onCheckErrors()">
+         check
+    </button>
+  </form>
+</div>