add type auth page

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

@@ -30,5 +30,8 @@
   </p>
 
   <button type="submit">Sign in</button>
-  <h5>Don't have an account yet ? <span>Sign Up</span></h5>
+  <h5>
+    Don't have an account yet ?
+    <span [routerLink]="['/auth/signUp']">Sign Up</span>
+  </h5>
 </form>

src/app/authentication/auth-sign-up/auth-sign-up-routing.module.ts

@@ -1,10 +1,35 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthSignUpComponent } from './auth-sign-up.component';
+import { SignupTypeComponent } from './signup-type/signup-type.component';
+import { SignupBusinessComponent } from './signup-business/signup-business.component';
+import { SignupContractorComponent } from './signup-contractor/signup-contractor.component';
+import { SignupEmployeeComponent } from './signup-employee/signup-employee.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: AuthSignUpComponent,
+    children: [
+      { path: '', component: SignupTypeComponent },
+      {
+        path: 'business',
+        component: SignupBusinessComponent,
+      },
+      {
+        path: 'contractor',
+        component: SignupContractorComponent,
+      },
+      {
+        path: 'employee',
+        component: SignupEmployeeComponent,
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AuthSignUpRoutingModule { }
+export class AuthSignUpRoutingModule {}

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

@@ -1 +1 @@
-<p>auth-sign-up works!</p>
+<router-outlet></router-outlet>

src/app/authentication/auth-sign-up/auth-sign-up.module.ts

@@ -3,15 +3,20 @@ import { CommonModule } from '@angular/common';
 
 import { AuthSignUpRoutingModule } from './auth-sign-up-routing.module';
 import { AuthSignUpComponent } from './auth-sign-up.component';
-
+import { SignupTypeComponent } from './signup-type/signup-type.component';
+import { SignupBusinessComponent } from './signup-business/signup-business.component';
+import { SignupContractorComponent } from './signup-contractor/signup-contractor.component';
+import { SignupEmployeeComponent } from './signup-employee/signup-employee.component';
+import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
   declarations: [
-    AuthSignUpComponent
+    AuthSignUpComponent,
+    SignupTypeComponent,
+    SignupBusinessComponent,
+    SignupContractorComponent,
+    SignupEmployeeComponent,
   ],
-  imports: [
-    CommonModule,
-    AuthSignUpRoutingModule
-  ]
+  imports: [CommonModule, AuthSignUpRoutingModule, SharedModule],
 })
-export class AuthSignUpModule { }
+export class AuthSignUpModule {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+<section class="auth-type">
+  <div class="overlay">
+    <header>
+      <img src="../../../../assets/images/logo.svg" alt="" title="" />
+    </header>
+    <form fxLayout="column" fxLayoutAlign="start stretch">
+      <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>
+          <img
+            src="../../../../assets/images/business_img.svg"
+            alt=""
+            title=""
+          />
+        </div>
+        <div>
+          <img src="../../../../assets/images/contractor.jpg" alt="" title="" />
+        </div>
+        <div>
+          <img src="../../../../assets/images/employee.jpg" alt="" title="" />
+        </div>
+      </div>
+      <div class="actions">
+        <button type="submit">Next</button>
+        <p>Already have an account?<a [routerLink]="['/auth']">Sign in </a></p>
+      </div>
+    </form>
+  </div>
+</section>

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

@@ -0,0 +1,88 @@
+.auth-type {
+  width: 100%;
+  height: 100%;
+  background: url("../../../../assets/images/auth-back.jpg") no-repeat center
+    center;
+  background-size: cover;
+  position: relative;
+
+  .overlay {
+    width: 100%;
+    height: 100%;
+    background: rgba($color: #2e368f, $alpha: 0.2);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+
+    header {
+      padding: 3rem 4rem;
+    }
+
+    form {
+      width: 551px;
+      background: #ffffff 0% 0% no-repeat padding-box;
+      border-radius: 12px;
+      margin: 0 auto;
+      text-align: center;
+      padding: 40px 0;
+      @media (max-width: 767px) {
+        width: 90%;
+      }
+      h1 {
+        color: #2e368f;
+        font-family: Montserrat-Bold;
+        margin-bottom: 5px;
+      }
+      p {
+        font-size: 16px;
+        color: #2e368f;
+        margin-bottom: 2rem;
+      }
+
+      .types {
+        padding: 20px 0;
+        gap: 20px;
+        div {
+          background-color: #009fe32e;
+          padding: 20px;
+          border-radius: 20px;
+          cursor: pointer;
+          img {
+            width: 102px;
+            height: 72px;
+            object-fit: cover;
+          }
+        }
+      }
+
+      .actions {
+        button {
+          background-color: #28abe3;
+          padding: 12px 50px;
+          border: 1px solid #28abe3;
+          border-radius: 15px;
+          color: #fff;
+          cursor: pointer;
+          transition: all 0.5s;
+          &:hover {
+            background-color: #2e368f;
+            border: 1px solid #2e368f;
+          }
+        }
+        p {
+          font-size: 15px;
+          color: #2e368f;
+          margin-top: 5px;
+          a {
+            text-decoration: underline;
+            color: #2e368f;
+            font-family: Montserrat-Bold;
+            padding: 0 5px;
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

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

src/app/authentication/authentication-routing.module.ts

@@ -14,6 +14,13 @@ const routes: Routes = [
             (m) => m.AuthSignInModule
           ),
       },
+      {
+        path: 'signUp',
+        loadChildren: () =>
+          import('./auth-sign-up/auth-sign-up.module').then(
+            (m) => m.AuthSignUpModule
+          ),
+      },
       { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
     ],
   },

src/app/landing-page/landing-header/landing-header.component.html

@@ -11,6 +11,6 @@
 
   <div class="actions" fxLayout="row" fxLayoutAlign="end center">
     <button class="actions__signin ptr" (click)="onSignIn()">Sign in</button>
-    <button class="actions__sign-up ptr">Sign Up</button>
+    <button class="actions__sign-up ptr" (click)="onSignUp()">Sign Up</button>
   </div>
 </header>

src/app/landing-page/landing-header/landing-header.component.ts

@@ -11,4 +11,8 @@ export class LandingHeaderComponent {
   onSignIn(): void {
     this.router.navigate(['auth']);
   }
+
+  onSignUp(): void {
+    this.router.navigate(['auth/signUp']);
+  }
 }