add form builder for employee form

src/app/app.component.ts

@@ -21,7 +21,9 @@ export class AppComponent extends ComponentBase implements OnInit {
   }
 
   ngOnInit(): void {
-    this.getProfile();
+    if (this.authService.isAuthenticated()) {
+      this.getProfile();
+    }
   }
 
   getProfile(): void {

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

@@ -39,18 +39,20 @@
         margin-bottom: 2rem;
         h1 {
           color: $main-color;
-          font-size: 25px;
+          font-size: 20px;
           font-family: Montserrat-Bold;
         }
         span {
-          font-size: 17px;
+          font-size: 15px;
           color: $main-color;
           font-weight: 200;
+          margin-top: 5px;
+          display: block;
         }
       }
 
       p {
-        font-size: 15px;
+        font-size: 13px;
         color: #009fe3;
         cursor: pointer;
         margin-top: 10px;
@@ -60,13 +62,14 @@
         }
         a {
           text-decoration: underline;
+          color: #009fe3;
         }
       }
 
       .label {
         font-size: 10px;
         font-weight: 200;
-        font-size: 17px;
+        font-size: 14px;
         color: $main-color;
         margin-bottom: 0.4rem;
       }
@@ -107,6 +110,8 @@
           transition: all 0.5s;
           font-family: "Montserrat-Bold";
           cursor: pointer;
+          font-size: 13px;
+          text-decoration: underline;
           &:hover {
             color: $white-blue;
           }

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

@@ -5,7 +5,7 @@
       fxLayout="row"
       fxLayoutAlign="space-between center"
     >
-      <img src="../../../assets/images/logo.svg" alt="" title="" />
+      <img src="assets/images/logo.svg" alt="" title="" />
       <select
         (change)="onChangeLanguage($event)"
         [(ngModel)]="lang"

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

@@ -13,7 +13,15 @@
     >
   </main>
 
-  <label class="label">{{ "EMAIL" | translate }}</label>
+  <label class="label gap-5" fxLayout="row" fxLayoutAlign="start center">
+    <img
+      src="assets/images/email.jpg"
+      alt="email.jpg"
+      title="email"
+      style="width: 15px"
+    />
+    <span>{{ "EMAIL" | translate }}</span></label
+  >
   <input
     type="email"
     [placeholder]="'EMAIL' | translate"

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

@@ -12,7 +12,7 @@
 
   <label class="label gap-5" fxLayout="row" fxLayoutAlign="start center">
     <img
-      src="../../../../assets/images/email.jpg"
+      src="assets/images/email.jpg"
       alt="email.jpg"
       title="email"
       style="width: 15px"

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

@@ -1,10 +1,61 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ComponentBase } from '@core/base/common-base';
+import { takeUntil } from 'rxjs';
+import { BaseForm } from '@core/base/base-form';
+import {
+  FormGroup,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-signup-employee',
   templateUrl: './signup-employee.component.html',
-  styleUrls: ['./signup-employee.component.scss']
+  styleUrls: ['./signup-employee.component.scss'],
 })
-export class SignupEmployeeComponent {
+export class SignupEmployeeComponent
+  extends ComponentBase
+  implements OnInit, BaseForm
+{
+  form!: FormGroup;
 
+  constructor(private readonly route: ActivatedRoute) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.initForm();
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+      console.log(res);
+    });
+  }
+
+  initForm(): void {
+    this.form = new UntypedFormGroup({
+      firstName: new UntypedFormControl(null, [Validators.required]),
+      lastName: new UntypedFormControl(null, [Validators.required]),
+      email: new UntypedFormControl(null, [
+        Validators.required,
+        Validators.email,
+      ]),
+      phoneNumber: new UntypedFormControl(null, [Validators.required]),
+      linkedInLink: new UntypedFormControl(null, [Validators.required]),
+      userType: 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]),
+      countryId: new UntypedFormControl(null, [Validators.required]),
+      taxNumber: new UntypedFormControl(null, [Validators.required]),
+      incomeTaxValue: new UntypedFormControl(null, Validators.required),
+    });
+  }
+
+  onSubmit(): void {}
 }

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(0)" [ngClass]="{ active: active === 0 }">
+        <div (click)="onClickType(2)" [ngClass]="{ active: active === 2 }">
           <img
             src="../../../../assets/images/business_img.svg"
             alt=""
@@ -15,11 +15,11 @@
           />
           <p class="m-0 bold">Business</p>
         </div>
-        <div (click)="onClickType(1)" [ngClass]="{ active: active === 1 }">
+        <div (click)="onClickType(3)" [ngClass]="{ active: active === 3 }">
           <img src="../../../../assets/images/contractor.jpg" alt="" title="" />
           <p class="m-0 bold">Contractor</p>
         </div>
-        <div (click)="onClickType(2)" [ngClass]="{ active: active === 2 }">
+        <div (click)="onClickType(1)" [ngClass]="{ active: active === 1 }">
           <img src="../../../../assets/images/employee.jpg" alt="" title="" />
           <p class="m-0 bold">Employee</p>
         </div>

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

@@ -10,9 +10,9 @@ import { ToastrService } from 'ngx-toastr';
 export class SignupTypeComponent {
   active: number = -1;
   typeRoutingMap: { [key: number]: string } = {
-    0: 'business',
-    1: 'contractor',
-    2: 'employee',
+    3: 'business',
+    2: 'contractor',
+    1: 'employee',
   };
   constructor(
     private readonly router: Router,
@@ -21,7 +21,6 @@ export class SignupTypeComponent {
   ) {}
 
   onClickType(type: number): void {
-    console.log(type);
     this.active = type;
   }
 

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

@@ -1,22 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { BaseForm } from '@core/base/base-form';
+import {
+  FormGroup,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-type-header',
   templateUrl: './type-header.component.html',
   styleUrls: ['./type-header.component.scss'],
 })
-export class TypeHeaderComponent implements OnInit {
+export class TypeHeaderComponent {
   constructor(private readonly route: ActivatedRoute) {}
 
   typeName!: string;
 
   ngOnInit(): void {
     this.route.queryParams.pipe().subscribe((res) => {
-      console.log(res);
-      if (+res['type'] === 0) {
+      if (+res['type'] === 2) {
         this.typeName = 'Business';
-      } else if (+res['type'] === 1) {
+      } else if (+res['type'] === 3) {
         this.typeName = 'Contractor';
       } else {
         this.typeName = 'Employee';

src/assets/i18n/ar.json

@@ -18,5 +18,6 @@
   "CONFIRM": "تأكيد",
   "NEW_PASSWORD": "كلمة مرور جديدة",
   "CONFIRM_PASSWORD": "تأكيد كلمة المرور",
-  "PASSWORD": "كلمة المرور"
+  "PASSWORD": "كلمة المرور",
+  "REQUIRED": "مطلوب"
 }

src/assets/i18n/en.json

@@ -5,7 +5,7 @@
   "FORGET_PASSWORD": "Forget Password",
   "SIGN_IN": "Sign In",
   "SIGN_UP": "Sign Up",
-  "DONT_HAVE_ACCOUNT": "Don't Have Account ?",
+  "DONT_HAVE_ACCOUNT": "Don't have an account yet ?",
   "WELCOME_BACK": "Welcome Back",
   "SIGN_IN_TO_COUNTINUE": "Sign In To continue",
   "VERFICATION_TITLE_1": "The verification E-mail will be sent to",
@@ -18,5 +18,6 @@
   "CONFIRM": "Confirm",
   "NEW_PASSWORD": "New Password",
   "CONFIRM_PASSWORD": "Confirm password",
-  "PASSWORD": "Password"
+  "PASSWORD": "Password",
+  "REQUIRED": "Required"
 }