auth

src/app/authentication/auth-sign-in/auth-sign-in-theme.scss

@@ -94,6 +94,7 @@
         margin-top: 30px;
         margin-bottom: 10px;
         cursor: pointer;
+        position: relative;
         transition: all 0.5s;
         &:hover {
           background-color: $white-blue;

src/app/authentication/auth-sign-in/forget-password/forget-password.component.html

@@ -32,7 +32,7 @@
     [control]="form.get('email')!"
   ></app-error-form>
 
-  <button type="submit">
+  <button type="submit" [disabled]="loading" [class.spinner]="loading">
     {{ "SEND_VERFICATION_EMAIL" | translate }}
   </button>
 </form>

src/app/authentication/auth-sign-in/forget-password/forget-password.component.ts

@@ -45,14 +45,20 @@ export class ForgetPasswordComponent
 
   onSubmit(): void {
     if (super.submitValidity(this.form)) {
+      this.loading = true;
       this.authService
-        .ForgetPassword(this.form.value)
+        .ForgetPassword({ email: this.form.get('email')?.value })
         .pipe(takeUntil(this.destroy$))
-        .subscribe((response) => {
-          console.log(response);
-          this.toastr.success('Successfully !');
-          this.router.navigate(['../verify']);
-        });
+        .subscribe(
+          (response) => {
+            this.toastr.success('Successfully !');
+            this.router.navigate(['../verify']);
+          },
+          (error) => {
+            console.log(error);
+            this.loading = false;
+          }
+        );
     }
   }
 }

src/app/authentication/auth-sign-up/signup-contractor/signup-contractor.component.html

@@ -1,7 +1,7 @@
 <section>
   <app-type-header> </app-type-header>
   <div class="form-container">
-    <form>
+    <form [formGroup]="form" (submit)="onSubmit()">
       <p class="bold">Basic Information</p>
       <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
         <div
@@ -15,7 +15,12 @@
             <img src="assets/images/authorized_name.svg" alt="" title="" />
             <span>First Name <span class="red">*</span></span>
           </label>
-          <input type="text" id="first_name" placeholder="Enter your Name" />
+          <input
+            type="text"
+            id="first_name"
+            placeholder="Enter your Name"
+            formControlName="firstName"
+          />
         </div>
         <div
           class="form-input"
@@ -32,7 +37,12 @@
             />
             <span>Birth Date<span class="red">*</span></span>
           </label>
-          <input type="text" id="birth_date" placeholder="Select Date" />
+          <input
+            type="date"
+            id="birth_date"
+            placeholder="Select Date"
+            formControlName="dateOfBirth"
+          />
         </div>
         <div
           class="form-input"
@@ -45,7 +55,12 @@
             <img src="assets/images/id-card-svgrepo-com.svg" alt="" title="" />
             <span>ID Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="tax_no" placeholder="ID Number" />
+          <input
+            type="text"
+            id="tax_no"
+            placeholder="ID Number"
+            formControlName="idNumber"
+          />
         </div>
       </div>
       <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
@@ -64,6 +79,7 @@
             type="text"
             placeholder="Enter your last name"
             id="last_name"
+            formControlName="lastName"
           />
         </div>
         <div
@@ -74,10 +90,19 @@
           fxFlex.gt-sm="31"
         >
           <label for="email">
-            <img src="assets/images/email-9-svgrepo-com" alt="" title="" />
+            <img
+              src="assets/images/email-9-svgrepo-com (2).svg"
+              alt=""
+              title=""
+            />
             <span>Email<span class="red">*</span></span>
           </label>
-          <input type="email" id="email" placeholder="Enter your email" />
+          <input
+            type="email"
+            id="email"
+            placeholder="Enter your email"
+            formControlName="email"
+          />
         </div>
         <div
           class="form-input"
@@ -87,14 +112,15 @@
           fxFlex.gt-sm="31"
         >
           <label for="passprt">
-            <img
-              src="../../../../assets/images/passport-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/passport-svgrepo-com.svg" alt="" title="" />
             <span>Passport Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="postal" placeholder="Passport Number" />
+          <input
+            type="text"
+            id="postal"
+            placeholder="Passport Number"
+            formControlName="passportNumber"
+          />
         </div>
       </div>
 
@@ -114,6 +140,7 @@
             type="text"
             placeholder="Enter your Favorite Name"
             id="favourite_name"
+            formControlName="favoriteName"
           />
         </div>
         <div
@@ -131,7 +158,12 @@
             />
             <span>Mobile Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="mobile_number" placeholder="Mobile Number" />
+          <input
+            type="text"
+            id="mobile_number"
+            placeholder="Mobile Number"
+            formControlName="phoneNumber"
+          />
         </div>
         <div
           class="form-input"
@@ -141,11 +173,7 @@
           fxFlex.gt-sm="31"
         >
           <label for="tax_decoration">
-            <img
-              src="../../../../assets/images/tax-fee-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/tax-fee-svgrepo-com.svg" alt="" title="" />
             <span>Tax Decoration <span class="red">*</span></span>
           </label>
           <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
@@ -154,18 +182,77 @@
               id="tax_decoration_number"
               placeholder="number"
               class="decoration"
+              formControlName="taxNumber"
             />
             <input
               type="text"
               id="tax_decoration_value"
               placeholder="value"
               class="decoration"
+              formControlName="incomeTaxValue"
             />
             <input type="text" class="calc" placeholder="0.0" />
           </div>
         </div>
       </div>
 
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>User Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your user name"
+            id="user_name"
+            formControlName="userName"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="password">
+            <img src="../../../../assets/images/password.jpg" alt="" title="" />
+            <span>Password<span class="red">*</span></span>
+          </label>
+          <input
+            type="password"
+            id="password"
+            placeholder="Enter your password"
+            formControlName="password"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="linkedInLink">
+            <img src="assets/images/passport-svgrepo-com.svg" alt="" title="" />
+            <span>LinkedIn Url <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="linkedInLink"
+            placeholder="Enter Linkedin url"
+            formControlName="linkedInLink"
+          />
+        </div>
+      </div>
+
       <p class="bold mt-3">Education & Qualifications</p>
       <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
         <div
@@ -176,15 +263,32 @@
           fxFlex.gt-sm="31"
         >
           <label for="qualification">
-            <img
-              src="../../../../assets/images/speaker-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/speaker-svgrepo-com.svg" alt="" title="" />
             <span>Qualification <span class="red">*</span></span>
           </label>
-          <select id="qualification">
-            <!-- <option disabled selected>Select your country</option> -->
+          <select id="qualification" formControlName="qualificationId">
+            <option selected value="null" disabled>Select Qulification</option>
+            <option *ngFor="let item of qualificationList" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="industry">
+            <img src="assets/images/speaker-svgrepo-com.svg" alt="" title="" />
+            <span>Industry <span class="red">*</span></span>
+          </label>
+          <select id="industry" formControlName="industryId">
+            <option selected value="null" disabled>Select Industry</option>
+            <option *ngFor="let item of industriesList" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
           </select>
         </div>
         <div
@@ -202,11 +306,14 @@
             />
             <span>University <span class="red">*</span></span>
           </label>
-          <input
-            type="text"
-            id="university"
-            placeholder="Enter your university name"
-          />
+          <select id="university" formControlName="universityId">
+            <option [value]="null" disabled selected>
+              Select your university
+            </option>
+            <option *ngFor="let item of univerisites" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
+          </select>
         </div>
         <div
           class="form-input"
@@ -219,12 +326,22 @@
             <img src="assets/images/work-svgrepo-com.svg" alt="" title="" />
             <span>Job Title <span class="red">*</span></span>
           </label>
-          <input type="text" id="job_title" placeholder="Job Title" />
+          <select id="job_title" formControlName="jobTitleId">
+            <option selected value="null" disabled>Select job title</option>
+            <option *ngFor="let jobTitle of jobTitles" [value]="jobTitle.id">
+              {{ jobTitle.nameEn }}
+            </option>
+          </select>
         </div>
       </div>
 
       <p class="bold mt-3">Address</p>
-      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+      <div
+        class="gap-36"
+        fxLayout="row wrap"
+        fxLayoutAlign="start start"
+        formGroupName="userAddress"
+      >
         <div
           class="form-input"
           fxLayout="column"
@@ -233,11 +350,16 @@
           fxFlex.gt-sm="31"
         >
           <label for="country">
-            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <img src="assets/images/country.svg" alt="" title="" />
             <span>Country <span class="red">*</span></span>
           </label>
-          <select id="country">
-            <!-- <option disabled selected>Select your country</option> -->
+          <select id="country" formControlName="countryId">
+            <option disabled selected [value]="null">
+              Select your country
+            </option>
+            <option *ngFor="let country of countries" [value]="country.id">
+              {{ country.nameEn }}>
+            </option>
           </select>
         </div>
         <div
@@ -248,10 +370,12 @@
           fxFlex.gt-sm="31"
         >
           <label for="city">
-            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <img src="assets/images/city.svg" alt="" title="" />
             <span>City<span class="red">*</span></span>
           </label>
-          <input type="text" id="city" placeholder="Enter your city" />
+          <select id="city" formControlName="cityId">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
         </div>
         <div
           class="form-input"
@@ -261,23 +385,37 @@
           fxFlex.gt-sm="31"
         >
           <label for="postal">
-            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <img src="assets/images/postal.svg" alt="" title="" />
             <span>Postal Code <span class="red">*</span></span>
           </label>
-          <input type="text" id="postal" placeholder="Postal code" />
+          <input
+            type="text"
+            id="postal"
+            placeholder="Postal code"
+            formControlName="postalCode"
+          />
         </div>
-      </div>
-      <div class="mt-2">
-        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
-          <label for="address">
-            <img
-              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
-              alt=""
-              title=""
+        <div class="mt-2" fxFlex.lt-md="100" fxFlex.gt-sm="100">
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+          >
+            <label for="address">
+              <img
+                src="assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>Address<span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="address"
+              placeholder="Address"
+              formControlName="addressDesc"
             />
-            <span>Address<span class="red">*</span></span>
-          </label>
-          <input type="text" id="address" placeholder="Address" />
+          </div>
         </div>
       </div>
 
@@ -305,23 +443,38 @@
       >
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">CV</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="cvAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Passport</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="passportAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Educational Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="eduCertificateAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Experience Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="experienceCertificateAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Professional Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="profCertificateAttach"
+          />
         </div>
       </div>
 
@@ -332,7 +485,7 @@
             <span><a>the terms and conditions for use.</a></span>
           </span></mat-checkbox
         >
-        <button type="submit" [routerLink]="['/']">Sign Up</button>
+        <button type="submit">Sign Up</button>
       </div>
     </form>
   </div>

src/app/authentication/auth-sign-up/signup-contractor/signup-contractor.component.ts

@@ -1,10 +1,213 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {
+  FormGroup,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { BaseForm } from '@core/base/base-form';
+import { ComponentBase } from '@core/base/common-base';
+import { AuthService } from '@core/services/authentication/auth.service';
+
+import {
+  COUNTRY,
+  INDUSTRY,
+  JOB_TITLE,
+  QUALIFICATION,
+  UNIVERISTY,
+} from '@core/models/authenticcation.model';
+import { takeUntil } from 'rxjs';
+import { ActivatedRoute, Params } from '@angular/router';
 
 @Component({
   selector: 'app-signup-contractor',
   templateUrl: './signup-contractor.component.html',
-  styleUrls: ['./signup-contractor.component.scss']
+  styleUrls: ['./signup-contractor.component.scss'],
 })
-export class SignupContractorComponent {
+export class SignupContractorComponent
+  extends ComponentBase
+  implements OnInit, BaseForm
+{
+  form!: FormGroup;
+  multiPartForm = new FormData();
+  jobTitles: JOB_TITLE[] = [];
+  qualificationList: QUALIFICATION[] = [];
+  univerisites: UNIVERISTY[] = [];
+  countries: COUNTRY[] = [];
+  industriesList: INDUSTRY[] = [];
+  constructor(
+    private readonly authService: AuthService,
+    private readonly route: ActivatedRoute
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.initForm();
+    this.getJobTitles();
+    this.getQualifications();
+    this.getUniversities();
+    this.getContries();
+    this.getIndustries();
+    this.route.queryParams
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((params: Params) => {
+        this.form.patchValue({
+          userType: +params['type'],
+        });
+      });
+  }
+
+  initForm(): void {
+    this.form = new UntypedFormGroup({
+      firstName: new UntypedFormControl(null, [Validators.required]),
+      lastName: new UntypedFormControl(null, [Validators.required]),
+      dateOfBirth: new UntypedFormControl(null, [Validators.required]),
+      email: new UntypedFormControl(null, [
+        Validators.required,
+        Validators.email,
+      ]),
+      idNumber: new UntypedFormControl(null, [Validators.required]),
+      phoneNumber: new UntypedFormControl(null, [Validators.required]),
+      userType: new UntypedFormControl(null, [Validators.required]),
+      linkedInLink: new UntypedFormControl(null, [Validators.required]),
+      userName: new UntypedFormControl(null, [Validators.required]),
+      password: new UntypedFormControl(null, [Validators.required]),
+      favoriteName: new UntypedFormControl(null, [Validators.required]),
+      passportNumber: new UntypedFormControl(null, [Validators.required]),
+      qualificationId: new UntypedFormControl(null, [Validators.required]),
+      universityId: new UntypedFormControl(null, [Validators.required]),
+      jobTitleId: new UntypedFormControl(null, [Validators.required]),
+      industryId: new UntypedFormControl(null, [Validators.required]),
+      taxNumber: new UntypedFormControl(null, [Validators.required]),
+      incomeTaxValue: new UntypedFormControl(null, Validators.required),
+      userAddress: new UntypedFormGroup({
+        countryId: new UntypedFormControl(null, [Validators.required]),
+        cityId: new UntypedFormControl(null, [Validators.required]),
+        postalCode: new UntypedFormControl(null, [Validators.required]),
+        addressDesc: new UntypedFormControl(null, [Validators.required]),
+      }),
+    });
+  }
+
+  getJobTitles(): void {
+    this.authService
+      .getJobtitles()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.jobTitles = res;
+      });
+  }
+
+  getQualifications(): void {
+    this.authService
+      .getQualifications()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.qualificationList = res;
+      });
+  }
+
+  getUniversities(): void {
+    this.authService
+      .getUniversity()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.univerisites = res;
+      });
+  }
+
+  getIndustries(): void {
+    this.authService
+      .getIndustries()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.industriesList = res;
+      });
+  }
+
+  getContries(): void {
+    this.authService
+      .getCountries()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.countries = res;
+      });
+  }
+
+  onUploadFile(event: any): void {
+    if (event.file) {
+      this.multiPartForm.append(event.type, event.file);
+    } else {
+      this.multiPartForm.delete(event.type);
+    }
+  }
+
+  onSubmit(): void {
+    this.multiPartForm.append('firstName', this.form.get('firstName')?.value);
+    this.multiPartForm.append('lastName', this.form.get('lastName')?.value);
+    this.multiPartForm.append(
+      'dateOfBirth',
+      this.form.get('dateOfBirth')?.value
+    );
+    this.multiPartForm.append('email', this.form.get('email')?.value);
+    this.multiPartForm.append('idNumber', this.form.get('idNumber')?.value);
+    this.multiPartForm.append(
+      'phoneNumber',
+      this.form.get('phoneNumber')?.value
+    );
+
+    this.multiPartForm.append('userType', this.form.get('userType')?.value);
+    this.multiPartForm.append(
+      'favoriteName',
+      this.form.get('favoriteName')?.value
+    );
+    this.multiPartForm.append(
+      'passportNumber',
+      this.form.get('passportNumber')?.value
+    );
+    this.multiPartForm.append(
+      'qualificationId',
+      this.form.get('qualificationId')?.value
+    );
+    this.multiPartForm.append(
+      'universityId',
+      this.form.get('universityId')?.value
+    );
+    this.multiPartForm.append('jobTitleId', this.form.get('jobTitleId')?.value);
+    this.multiPartForm.append('industryId', this.form.get('industryId')?.value);
+    this.multiPartForm.append('taxNumber', this.form.get('taxNumber')?.value);
+    this.multiPartForm.append(
+      'incomeTaxValue',
+      this.form.get('incomeTaxValue')?.value
+    );
+    this.multiPartForm.append('userName', this.form.get('userName')?.value);
+    this.multiPartForm.append('password', this.form.get('password')?.value);
+    this.multiPartForm.append(
+      'linkedInLink',
+      this.form.get('linkedInLink')?.value
+    );
+
+    this.multiPartForm.append(
+      'userAddress',
+      JSON.stringify({
+        countryId: this.form.get('countryId')?.value,
+        cityId: 1,
+        postalCode: this.form.get('postalCode')?.value,
+        addressDesc: this.form.get('addressDesc')?.value,
+      })
+    );
 
+    this.authService
+      .addEmployee(this.multiPartForm)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(
+        (res) => {
+          console.log(res);
+        },
+        (err) => {
+          console.log(err);
+        }
+      );
+  }
 }

src/app/authentication/auth-sign-up/signup-employee/signup-employee.component.html

@@ -1,7 +1,7 @@
 <section>
   <app-type-header> </app-type-header>
   <div class="form-container">
-    <form>
+    <form [formGroup]="form" (submit)="onSubmit()">
       <p class="bold">Basic Information</p>
       <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
         <div
@@ -15,7 +15,12 @@
             <img src="assets/images/authorized_name.svg" alt="" title="" />
             <span>First Name <span class="red">*</span></span>
           </label>
-          <input type="text" id="first_name" placeholder="Enter your Name" />
+          <input
+            type="text"
+            id="first_name"
+            placeholder="Enter your Name"
+            formControlName="firstName"
+          />
         </div>
         <div
           class="form-input"
@@ -32,7 +37,12 @@
             />
             <span>Birth Date<span class="red">*</span></span>
           </label>
-          <input type="date" id="birth_date" placeholder="Select Date" />
+          <input
+            type="date"
+            id="birth_date"
+            placeholder="Select Date"
+            formControlName="dateOfBirth"
+          />
         </div>
         <div
           class="form-input"
@@ -45,7 +55,12 @@
             <img src="assets/images/id-card-svgrepo-com.svg" alt="" title="" />
             <span>ID Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="tax_no" placeholder="ID Number" />
+          <input
+            type="text"
+            id="tax_no"
+            placeholder="ID Number"
+            formControlName="idNumber"
+          />
         </div>
       </div>
       <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
@@ -64,6 +79,7 @@
             type="text"
             placeholder="Enter your last name"
             id="last_name"
+            formControlName="lastName"
           />
         </div>
         <div
@@ -74,10 +90,19 @@
           fxFlex.gt-sm="31"
         >
           <label for="email">
-            <img src="assets/images/email-9-svgrepo-com" alt="" title="" />
+            <img
+              src="assets/images/email-9-svgrepo-com (2).svg"
+              alt=""
+              title=""
+            />
             <span>Email<span class="red">*</span></span>
           </label>
-          <input type="email" id="email" placeholder="Enter your email" />
+          <input
+            type="email"
+            id="email"
+            placeholder="Enter your email"
+            formControlName="email"
+          />
         </div>
         <div
           class="form-input"
@@ -87,14 +112,15 @@
           fxFlex.gt-sm="31"
         >
           <label for="passprt">
-            <img
-              src="../../../../assets/images/passport-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/passport-svgrepo-com.svg" alt="" title="" />
             <span>Passport Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="postal" placeholder="Passport Number" />
+          <input
+            type="text"
+            id="postal"
+            placeholder="Passport Number"
+            formControlName="passportNumber"
+          />
         </div>
       </div>
 
@@ -114,6 +140,7 @@
             type="text"
             placeholder="Enter your Favorite Name"
             id="favourite_name"
+            formControlName="favoriteName"
           />
         </div>
         <div
@@ -131,7 +158,12 @@
             />
             <span>Mobile Number <span class="red">*</span></span>
           </label>
-          <input type="text" id="mobile_number" placeholder="Mobile Number" />
+          <input
+            type="text"
+            id="mobile_number"
+            placeholder="Mobile Number"
+            formControlName="phoneNumber"
+          />
         </div>
         <div
           class="form-input"
@@ -141,11 +173,7 @@
           fxFlex.gt-sm="31"
         >
           <label for="tax_decoration">
-            <img
-              src="../../../../assets/images/tax-fee-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/tax-fee-svgrepo-com.svg" alt="" title="" />
             <span>Tax Decoration <span class="red">*</span></span>
           </label>
           <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
@@ -154,18 +182,77 @@
               id="tax_decoration_number"
               placeholder="number"
               class="decoration"
+              formControlName="taxNumber"
             />
             <input
               type="text"
               id="tax_decoration_value"
               placeholder="value"
               class="decoration"
+              formControlName="incomeTaxValue"
             />
             <input type="text" class="calc" placeholder="0.0" />
           </div>
         </div>
       </div>
 
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>User Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your user name"
+            id="user_name"
+            formControlName="userName"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="password">
+            <img src="../../../../assets/images/password.jpg" alt="" title="" />
+            <span>Password<span class="red">*</span></span>
+          </label>
+          <input
+            type="password"
+            id="password"
+            placeholder="Enter your password"
+            formControlName="password"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="linkedInLink">
+            <img src="assets/images/passport-svgrepo-com.svg" alt="" title="" />
+            <span>LinkedIn Url <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="linkedInLink"
+            placeholder="Enter Linkedin url"
+            formControlName="linkedInLink"
+          />
+        </div>
+      </div>
+
       <p class="bold mt-3">Education & Qualifications</p>
       <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
         <div
@@ -176,15 +263,32 @@
           fxFlex.gt-sm="31"
         >
           <label for="qualification">
-            <img
-              src="../../../../assets/images/speaker-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/speaker-svgrepo-com.svg" alt="" title="" />
             <span>Qualification <span class="red">*</span></span>
           </label>
-          <select id="qualification">
-            <!-- <option disabled selected>Select your country</option> -->
+          <select id="qualification" formControlName="qualificationId">
+            <option selected value="null" disabled>Select Qulification</option>
+            <option *ngFor="let item of qualificationList" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="industry">
+            <img src="assets/images/speaker-svgrepo-com.svg" alt="" title="" />
+            <span>Industry <span class="red">*</span></span>
+          </label>
+          <select id="industry" formControlName="industryId">
+            <option selected value="null" disabled>Select Industry</option>
+            <option *ngFor="let item of industriesList" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
           </select>
         </div>
         <div
@@ -202,11 +306,14 @@
             />
             <span>University <span class="red">*</span></span>
           </label>
-          <input
-            type="text"
-            id="university"
-            placeholder="Enter your university name"
-          />
+          <select id="university" formControlName="universityId">
+            <option [value]="null" disabled selected>
+              Select your university
+            </option>
+            <option *ngFor="let item of univerisites" [value]="item.id">
+              {{ item.nameEn }}
+            </option>
+          </select>
         </div>
         <div
           class="form-input"
@@ -219,12 +326,22 @@
             <img src="assets/images/work-svgrepo-com.svg" alt="" title="" />
             <span>Job Title <span class="red">*</span></span>
           </label>
-          <input type="text" id="job_title" placeholder="Job Title" />
+          <select id="job_title" formControlName="jobTitleId">
+            <option selected value="null" disabled>Select job title</option>
+            <option *ngFor="let jobTitle of jobTitles" [value]="jobTitle.id">
+              {{ jobTitle.nameEn }}
+            </option>
+          </select>
         </div>
       </div>
 
       <p class="bold mt-3">Address</p>
-      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+      <div
+        class="gap-36"
+        fxLayout="row wrap"
+        fxLayoutAlign="start start"
+        formGroupName="userAddress"
+      >
         <div
           class="form-input"
           fxLayout="column"
@@ -233,11 +350,16 @@
           fxFlex.gt-sm="31"
         >
           <label for="country">
-            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <img src="assets/images/country.svg" alt="" title="" />
             <span>Country <span class="red">*</span></span>
           </label>
-          <select id="country">
-            <!-- <option disabled selected>Select your country</option> -->
+          <select id="country" formControlName="countryId">
+            <option disabled selected [value]="null">
+              Select your country
+            </option>
+            <option *ngFor="let country of countries" [value]="country.id">
+              {{ country.nameEn }}>
+            </option>
           </select>
         </div>
         <div
@@ -248,10 +370,12 @@
           fxFlex.gt-sm="31"
         >
           <label for="city">
-            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <img src="assets/images/city.svg" alt="" title="" />
             <span>City<span class="red">*</span></span>
           </label>
-          <input type="text" id="city" placeholder="Enter your city" />
+          <select id="city" formControlName="cityId">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
         </div>
         <div
           class="form-input"
@@ -261,23 +385,37 @@
           fxFlex.gt-sm="31"
         >
           <label for="postal">
-            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <img src="assets/images/postal.svg" alt="" title="" />
             <span>Postal Code <span class="red">*</span></span>
           </label>
-          <input type="text" id="postal" placeholder="Postal code" />
+          <input
+            type="text"
+            id="postal"
+            placeholder="Postal code"
+            formControlName="postalCode"
+          />
         </div>
-      </div>
-      <div class="mt-2">
-        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
-          <label for="address">
-            <img
-              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
-              alt=""
-              title=""
+        <div class="mt-2" fxFlex.lt-md="100" fxFlex.gt-sm="100">
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+          >
+            <label for="address">
+              <img
+                src="assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>Address<span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="address"
+              placeholder="Address"
+              formControlName="addressDesc"
             />
-            <span>Address<span class="red">*</span></span>
-          </label>
-          <input type="text" id="address" placeholder="Address" />
+          </div>
         </div>
       </div>
 
@@ -305,23 +443,38 @@
       >
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">CV</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="cvAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Passport</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="passportAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Educational Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="eduCertificateAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Experience Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="experienceCertificateAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Professional Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="profCertificateAttach"
+          />
         </div>
       </div>
 
@@ -332,7 +485,7 @@
             <span><a>the terms and conditions for use.</a></span>
           </span></mat-checkbox
         >
-        <button type="submit" [routerLink]="['/']">Sign Up</button>
+        <button type="submit">Sign Up</button>
       </div>
     </form>
   </div>

src/app/authentication/auth-sign-up/signup-employee/signup-employee.component.ts

@@ -1,14 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { ComponentBase } from '@core/base/common-base';
-import { takeUntil } from 'rxjs';
+import { take, takeUntil } from 'rxjs';
 import { BaseForm } from '@core/base/base-form';
+import { AuthService } from '@core/services/authentication/auth.service';
+
 import {
   FormGroup,
   UntypedFormControl,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
+import {
+  JOB_TITLE,
+  QUALIFICATION,
+  UNIVERISTY,
+  COUNTRY,
+  INDUSTRY,
+} from '@core/models/authenticcation.model';
 
 @Component({
   selector: 'app-signup-employee',
@@ -20,29 +29,49 @@ export class SignupEmployeeComponent
   implements OnInit, BaseForm
 {
   form!: FormGroup;
+  multiPartForm = new FormData();
+  jobTitles: JOB_TITLE[] = [];
+  qualificationList: QUALIFICATION[] = [];
+  univerisites: UNIVERISTY[] = [];
+  countries: COUNTRY[] = [];
+  industriesList: INDUSTRY[] = [];
 
-  constructor(private readonly route: ActivatedRoute) {
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly authService: AuthService
+  ) {
     super();
   }
 
   ngOnInit(): void {
     this.initForm();
-    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((res) => {
-      console.log(res);
-    });
+    this.getJobTitles();
+    this.getQualifications();
+    this.getUniversities();
+    this.getContries();
+    this.getIndustries();
+    this.route.queryParams
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((params: Params) => {
+        this.form.patchValue({
+          userType: +params['type'],
+        });
+      });
   }
 
   initForm(): void {
     this.form = new UntypedFormGroup({
       firstName: new UntypedFormControl(null, [Validators.required]),
       lastName: new UntypedFormControl(null, [Validators.required]),
+      dateOfBirth: new UntypedFormControl(null, [Validators.required]),
       email: new UntypedFormControl(null, [
         Validators.required,
         Validators.email,
       ]),
+      idNumber: new UntypedFormControl(null, [Validators.required]),
       phoneNumber: new UntypedFormControl(null, [Validators.required]),
-      linkedInLink: new UntypedFormControl(null, [Validators.required]),
       userType: new UntypedFormControl(null, [Validators.required]),
+      linkedInLink: new UntypedFormControl(null, [Validators.required]),
       userName: new UntypedFormControl(null, [Validators.required]),
       password: new UntypedFormControl(null, [Validators.required]),
       favoriteName: new UntypedFormControl(null, [Validators.required]),
@@ -51,11 +80,135 @@ export class SignupEmployeeComponent
       universityId: new UntypedFormControl(null, [Validators.required]),
       jobTitleId: new UntypedFormControl(null, [Validators.required]),
       industryId: new UntypedFormControl(null, [Validators.required]),
-      countryId: new UntypedFormControl(null, [Validators.required]),
       taxNumber: new UntypedFormControl(null, [Validators.required]),
       incomeTaxValue: new UntypedFormControl(null, Validators.required),
+      userAddress: new UntypedFormGroup({
+        countryId: new UntypedFormControl(null, [Validators.required]),
+        cityId: new UntypedFormControl(null, [Validators.required]),
+        postalCode: new UntypedFormControl(null, [Validators.required]),
+        addressDesc: new UntypedFormControl(null, [Validators.required]),
+      }),
     });
   }
 
-  onSubmit(): void {}
+  getJobTitles(): void {
+    this.authService
+      .getJobtitles()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.jobTitles = res;
+      });
+  }
+
+  getQualifications(): void {
+    this.authService
+      .getQualifications()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.qualificationList = res;
+      });
+  }
+
+  getUniversities(): void {
+    this.authService
+      .getUniversity()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.univerisites = res;
+      });
+  }
+
+  getIndustries(): void {
+    this.authService
+      .getIndustries()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.industriesList = res;
+      });
+  }
+
+  getContries(): void {
+    this.authService
+      .getCountries()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.countries = res;
+      });
+  }
+
+  onUploadFile(event: any): void {
+    if (event.file) {
+      this.multiPartForm.append(event.type, event.file);
+    } else {
+      this.multiPartForm.delete(event.type);
+    }
+  }
+
+  onSubmit(): void {
+    this.multiPartForm.append('firstName', this.form.get('firstName')?.value);
+    this.multiPartForm.append('lastName', this.form.get('lastName')?.value);
+    this.multiPartForm.append(
+      'dateOfBirth',
+      this.form.get('dateOfBirth')?.value
+    );
+    this.multiPartForm.append('email', this.form.get('email')?.value);
+    this.multiPartForm.append('idNumber', this.form.get('idNumber')?.value);
+    this.multiPartForm.append(
+      'phoneNumber',
+      this.form.get('phoneNumber')?.value
+    );
+
+    this.multiPartForm.append('userType', this.form.get('userType')?.value);
+    this.multiPartForm.append(
+      'favoriteName',
+      this.form.get('favoriteName')?.value
+    );
+    this.multiPartForm.append(
+      'passportNumber',
+      this.form.get('passportNumber')?.value
+    );
+    this.multiPartForm.append(
+      'qualificationId',
+      this.form.get('qualificationId')?.value
+    );
+    this.multiPartForm.append(
+      'universityId',
+      this.form.get('universityId')?.value
+    );
+    this.multiPartForm.append('jobTitleId', this.form.get('jobTitleId')?.value);
+    this.multiPartForm.append('industryId', this.form.get('industryId')?.value);
+    this.multiPartForm.append('taxNumber', this.form.get('taxNumber')?.value);
+    this.multiPartForm.append(
+      'incomeTaxValue',
+      this.form.get('incomeTaxValue')?.value
+    );
+    this.multiPartForm.append('userName', this.form.get('userName')?.value);
+    this.multiPartForm.append('password', this.form.get('password')?.value);
+    this.multiPartForm.append(
+      'linkedInLink',
+      this.form.get('linkedInLink')?.value
+    );
+
+    this.multiPartForm.append(
+      'userAddress',
+      JSON.stringify({
+        countryId: this.form.get('countryId')?.value,
+        cityId: 1,
+        postalCode: this.form.get('postalCode')?.value,
+        addressDesc: this.form.get('addressDesc')?.value,
+      })
+    );
+
+    this.authService
+      .addEmployee(this.multiPartForm)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(
+        (res) => {
+          console.log(res);
+        },
+        (err) => {
+          console.log(err);
+        }
+      );
+  }
 }

src/app/authentication/auth-sign-up/signup-type/signup-type.component.html

@@ -7,7 +7,7 @@
       <h1>Nice to meet you !</h1>
       <p>Choose your category to have the best help</p>
       <div class="types" fxLayout="wrap row" fxLayoutAlign="center center">
-        <div (click)="onClickType(2)" [ngClass]="{ active: active === 2 }">
+        <div (click)="onClickType(3)" [ngClass]="{ active: active === 3 }">
           <img
             src="../../../../assets/images/business_img.svg"
             alt=""
@@ -15,7 +15,7 @@
           />
           <p class="m-0 bold">Business</p>
         </div>
-        <div (click)="onClickType(3)" [ngClass]="{ active: active === 3 }">
+        <div (click)="onClickType(2)" [ngClass]="{ active: active === 2 }">
           <img src="../../../../assets/images/contractor.jpg" alt="" title="" />
           <p class="m-0 bold">Contractor</p>
         </div>

src/app/authentication/auth-sign-up/type-header/type-header.component.ts

@@ -20,9 +20,9 @@ export class TypeHeaderComponent {
 
   ngOnInit(): void {
     this.route.queryParams.pipe().subscribe((res) => {
-      if (+res['type'] === 2) {
+      if (+res['type'] === 3) {
         this.typeName = 'Business';
-      } else if (+res['type'] === 3) {
+      } else if (+res['type'] === 2) {
         this.typeName = 'Contractor';
       } else {
         this.typeName = 'Employee';

src/app/core/models/authenticcation.model.ts

@@ -88,3 +88,40 @@ export interface Role {
   roleId: string;
   roleName: string;
 }
+
+export interface JOB_TITLE {
+  id: number;
+  readOnly: boolean;
+  nameAr: string;
+  nameEn: string;
+}
+
+export interface QUALIFICATION {
+  id: number;
+  readOnly: boolean;
+  nameAr: string;
+  nameEn: string;
+}
+
+export interface UNIVERISTY {
+  id: number;
+  readOnly: boolean;
+  nameAr: string;
+  nameEn: string;
+}
+
+export interface COUNTRY {
+  id: number;
+  readOnly: boolean;
+  nameAr: string;
+  nameEn: string;
+  code: string;
+  countryId: number;
+}
+
+export interface INDUSTRY {
+  id: number;
+  readOnly: boolean;
+  nameAr: string;
+  nameEn: string;
+}

src/app/core/services/authentication/auth.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ApiService } from '../api.service';
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
+
 import {
   CHANGE_PASSWORD,
   CHANGE_PASSWORD_RESPONSE,
@@ -11,6 +12,11 @@ import {
   OTP,
   OTP_RESPONSE,
   Profile,
+  QUALIFICATION,
+  JOB_TITLE,
+  UNIVERISTY,
+  COUNTRY,
+  INDUSTRY,
 } from '@core/models/authenticcation.model';
 
 @Injectable({
@@ -29,11 +35,8 @@ export class AuthService {
     });
   }
 
-  ForgetPassword(data: FORGET_PASSWORD): Observable<FORGET_PASSWORD_RESPONSE> {
-    return this.apiService.post<FORGET_PASSWORD, FORGET_PASSWORD_RESPONSE>(
-      '',
-      data
-    );
+  ForgetPassword(params: FORGET_PASSWORD): Observable<boolean> {
+    return this.apiService.get<boolean>('Auth/forgetPasswordMail', params);
   }
 
   SendCode(data: OTP): Observable<OTP_RESPONSE> {
@@ -47,7 +50,31 @@ export class AuthService {
     );
   }
 
+  getJobtitles(): Observable<JOB_TITLE[]> {
+    return this.apiService.get<JOB_TITLE[]>('Lookup/GetAllJobTitles');
+  }
+
+  getQualifications(): Observable<QUALIFICATION[]> {
+    return this.apiService.get<QUALIFICATION[]>('Lookup/GetAllQualifications');
+  }
+
+  getUniversity(): Observable<UNIVERISTY[]> {
+    return this.apiService.get<UNIVERISTY[]>('Lookup/GetAllUniversities');
+  }
+
+  getCountries(): Observable<COUNTRY[]> {
+    return this.apiService.get<COUNTRY[]>('Lookup/GetAllCountries');
+  }
+
+  addEmployee(data: any): Observable<any> {
+    return this.apiService.post<any, any>('Auth/register', data);
+  }
+
+  getIndustries(): Observable<INDUSTRY[]> {
+    return this.apiService.get<INDUSTRY[]>('Lookup/GetAllIndustries');
+  }
+
   isAuthenticated(): boolean {
-    return !!localStorage.getItem('token');
+    return !!(localStorage.getItem('token') && localStorage.getItem('id'));
   }
 }

src/app/shared/components/file-upload/file-upload.component.html

@@ -3,12 +3,23 @@
   class="custom-file-upload gap-10"
   fxLayout="row"
   fxLayoutAlign="center center"
+  *ngIf="!isUploaded.isLoad; else loadedFile"
 >
-  <img
-    src="../../../../assets/images/upload-svgrepo-com (1).svg"
-    alt=""
-    title=""
-  />
-  <span> Upload File </span>
+  <ng-container>
+    <img src="assets/images/upload-svgrepo-com (1).svg" alt="" title="" />
+    <span> Upload File </span>
+    <input id="file-upload" type="file" (change)="onChangeFile($event)" />
+  </ng-container>
 </label>
-<input id="file-upload" type="file" />
+
+<ng-template #loadedFile>
+  <main class="loaded">
+    <span>
+      <span class="loadedText">Uploaded</span>
+      <span class="fileName">FileName.pdf</span>
+    </span>
+    <button class="rmv-btn" (click)="onRemoveFile()">
+      <img src="assets/images/trash.svg" alt="" title="" />
+    </button>
+  </main>
+</ng-template>

src/app/shared/components/file-upload/file-upload.component.scss

@@ -3,8 +3,47 @@ input[type="file"] {
 }
 
 .custom-file-upload {
-  display: inline-block;
+  display: flex;
   padding: 6px 12px;
   cursor: pointer;
   padding: 10px 0;
+  position: relative;
+}
+
+.loaded {
+  width: inherit !important;
+  height: 100%;
+  border: none;
+  background-color: #b1e1b1 !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 10px 20px !important;
+  border-radius: 0 !important;
+  .loadedText {
+    color: #2f2c83;
+    font-size: 13px;
+    margin-bottom: 5px;
+  }
+
+  .fileName {
+    font-size: 13px;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+span {
+  display: block;
+}
+
+.rmv-btn {
+  display: block;
+  z-index: 99999999999;
+  background-color: transparent;
+  border: none;
 }

src/app/shared/components/file-upload/file-upload.component.ts

@@ -1,10 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output, Input } from '@angular/core';
 
 @Component({
   selector: 'app-file-upload',
   templateUrl: './file-upload.component.html',
-  styleUrls: ['./file-upload.component.scss']
+  styleUrls: ['./file-upload.component.scss'],
 })
 export class FileUploadComponent {
+  @Output() uploadFile = new EventEmitter<{
+    type: string;
+    file: File | null;
+  }>();
+  @Input() name: string = '';
+  isUploaded: { isLoad: boolean; type: string } = {
+    isLoad: false,
+    type: this.name,
+  };
 
+  onChangeFile(event: any): void {
+    this.uploadFile.emit({ file: event.target.files[0], type: this.name });
+    this.isUploaded = {
+      isLoad: true,
+      type: this.name,
+    };
+  }
+
+  onRemoveFile(): void {
+    this.uploadFile.emit({ file: null, type: this.name });
+    this.isUploaded = {
+      isLoad: false,
+      type: this.name,
+    };
+  }
 }

src/app/shared/components/payment/payment.component.html

@@ -0,0 +1 @@
+<p>payment works!</p>

src/app/shared/components/payment/payment.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymentComponent } from './payment.component';
+
+describe('PaymentComponent', () => {
+  let component: PaymentComponent;
+  let fixture: ComponentFixture<PaymentComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PaymentComponent]
+    });
+    fixture = TestBed.createComponent(PaymentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/payment/payment.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-payment',
+  templateUrl: './payment.component.html',
+  styleUrls: ['./payment.component.scss']
+})
+export class PaymentComponent {
+
+}

src/app/shared/shared.module.ts

@@ -31,6 +31,7 @@ import { CarouselModule } from 'ngx-owl-carousel-o';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { PagenationComponent } from './components/pagenation/pagenation.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { PaymentComponent } from './components/payment/payment.component';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -68,7 +69,7 @@ const COMPONENTS = [
 ];
 const MODULES = [TranslateModule];
 @NgModule({
-  declarations: [WarningComponent, ...COMPONENTS, FileUploadComponent],
+  declarations: [WarningComponent, ...COMPONENTS, FileUploadComponent, PaymentComponent],
   imports: [
     FormsModule,
     ReactiveFormsModule,

src/assets/i18n/ar.json

@@ -19,5 +19,6 @@
   "NEW_PASSWORD": "كلمة مرور جديدة",
   "CONFIRM_PASSWORD": "تأكيد كلمة المرور",
   "PASSWORD": "كلمة المرور",
-  "REQUIRED": "مطلوب"
+  "REQUIRED": "مطلوب",
+  "VALID_EMAIL": "أدخل إيميل صحيح !"
 }

src/assets/i18n/en.json

@@ -19,5 +19,6 @@
   "NEW_PASSWORD": "New Password",
   "CONFIRM_PASSWORD": "Confirm password",
   "PASSWORD": "Password",
-  "REQUIRED": "Required"
+  "REQUIRED": "Required",
+  "VALID_EMAIL": "Enter valid email !"
 }

src/assets/images/trash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.999" height="25.178" viewBox="0 0 20.999 25.178">
+  <path id="delete-2-svgrepo-com" d="M6.393,8.571V23.892a2.786,2.786,0,0,0,2.786,2.786H20.321a2.786,2.786,0,0,0,2.786-2.786V8.571m-16.714,0H5m1.393,0H9.178m13.928,0H24.5m-1.393,0H20.321m-8.357,5.571v6.964m5.571-6.964v6.964M9.178,8.571V5.786A2.786,2.786,0,0,1,11.964,3h5.571a2.786,2.786,0,0,1,2.786,2.786V8.571m-11.142,0H20.321" transform="translate(-4.25 -2.25)" fill="none" stroke="#e73232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+</svg>