115 lines
3.7 KiB
HTML
115 lines
3.7 KiB
HTML
|
|
|
|
<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" routerLink="/landing" 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>
|