sign-in-page and forget password

src/app/app-routing.module.ts

@@ -14,6 +14,13 @@ const routes: Routes = [
             (m) => m.LandingPageModule
           ),
       },
+      {
+        path: 'auth',
+        loadChildren: () =>
+          import('./authentication/authentication.module').then(
+            (m) => m.AuthenticationModule
+          ),
+      },
     ],
   },
 ];

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

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SignInComponent } from './sign-in/sign-in.component';
+import { AuthSignInComponent } from './auth-sign-in.component';
+import { ForgetPasswordComponent } from './forget-password/forget-password.component';
+import { VerifyOtpComponent } from './verify-otp/verify-otp.component';
+import { ChangePasswordComponent } from './change-password/change-password.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AuthSignInComponent,
+    children: [
+      {
+        path: '',
+        component: SignInComponent,
+      },
+      {
+        path: 'forget-password',
+        component: ForgetPasswordComponent,
+      },
+      {
+        path: 'verify',
+        component: VerifyOtpComponent,
+      },
+      {
+        path: 'change-password',
+        component: ChangePasswordComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AuthSignInRoutingModule {}

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

@@ -0,0 +1,103 @@
+@mixin auth-sign-in-theme() {
+  app-auth-sign-in {
+    .signIn {
+      width: 100%;
+      height: 100%;
+      padding: 40px 0;
+      background-color: $off-white;
+    }
+
+    form {
+      width: 30%;
+      background: $white-color 0% 0% no-repeat padding-box;
+      border-radius: 12px;
+      padding: 40px;
+      margin: 0 auto;
+      margin-top: 10%;
+      @media (max-width: 767px) {
+        width: 95%;
+      }
+      main {
+        text-align: center;
+        margin-bottom: 2rem;
+        h1 {
+          color: $main-color;
+          font-size: 25px;
+        }
+        span {
+          font-size: 17px;
+          color: $main-color;
+          font-weight: 200;
+          font-family: "Roboto";
+        }
+      }
+
+      p {
+        font-size: 15px;
+        font-family: "Roboto";
+        color: #009fe3;
+        cursor: pointer;
+        margin-top: 10px;
+        transition: all 0.5s;
+        &:hover {
+          color: $main-color;
+        }
+        a {
+          text-decoration: underline;
+        }
+      }
+
+      .label {
+        font-size: 10px;
+        font-weight: 200;
+        font-family: "Roboto";
+        font-size: 17px;
+        color: $main-color;
+        margin-bottom: 0.4rem;
+      }
+
+      input {
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid $main-color;
+        background-color: $white-color;
+        box-shadow: 0px 5px 6px #2f2c8324;
+        background-color: $white-color;
+        outline: none;
+        font-size: 15px;
+      }
+      button[type="submit"] {
+        background-color: $light-blue;
+        border: 1px solid $light-blue;
+        font-size: 16px;
+        color: $white-color;
+        border-radius: 10px;
+        padding: 10px 20px;
+        margin-top: 30px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        transition: all 0.5s;
+        &:hover {
+          background-color: $white-blue;
+        }
+      }
+
+      h5 {
+        text-align: center;
+        font-family: "Roboto";
+        font-size: 14px;
+        color: $white-blue;
+        font-weight: 400;
+        span {
+          color: $main-color;
+          transition: all 0.5s;
+          font-weight: bold;
+          cursor: pointer;
+          &:hover {
+            color: $white-blue;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<section class="signIn">
+  <router-outlet></router-outlet>
+</section>

src/app/authentication/auth-sign-in/auth-sign-in.component.spec.ts

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

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

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

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuthSignInRoutingModule } from './auth-sign-in-routing.module';
+import { AuthSignInComponent } from './auth-sign-in.component';
+import { SignInComponent } from './sign-in/sign-in.component';
+import { ForgetPasswordComponent } from './forget-password/forget-password.component';
+import { VerifyOtpComponent } from './verify-otp/verify-otp.component';
+import { ChangePasswordComponent } from './change-password/change-password.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [
+    AuthSignInComponent,
+    SignInComponent,
+    ForgetPasswordComponent,
+    VerifyOtpComponent,
+    ChangePasswordComponent,
+  ],
+  imports: [CommonModule, AuthSignInRoutingModule, SharedModule],
+})
+export class AuthSignInModule {}

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+<form fxLayout="column" fxLayoutAlign="start stretch">
+  <main>
+    <h1>Forget Password</h1>
+    <span
+      >The verification E-mail will be sent to <br />
+      the mailbox. please check it.</span
+    >
+  </main>
+
+  <label class="label">Email</label>
+  <input type="email" placeholder="Enter your email address" />
+
+  <button type="submit">Send verification E-mail</button>
+</form>

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

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

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

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

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

@@ -0,0 +1,22 @@
+<form fxLayout="column" fxLayoutAlign="start stretch">
+  <main>
+    <h1>Welcome Back!</h1>
+    <span>Sign in to continue</span>
+  </main>
+
+  <label class="label">Email</label>
+  <input type="email" placeholder="Enter your email address" />
+  <!-- <mat-form-field appearance="outline" class="custom-input">
+    <input type="email" placeholder="Enter your email address" />
+  </mat-form-field> -->
+
+  <label class="label mt-1">Enter your password</label>
+  <input type="password" placeholder="Enter password" />
+
+  <p fxLayout="row" fxLayoutAlign="end center">
+    <a [routerLink]="['./forget-password']">Forget Password?</a>
+  </p>
+
+  <button type="submit">Sign in</button>
+  <h5>Don't have an account yet ? <span>Sign Up</span></h5>
+</form>

src/app/authentication/auth-sign-in/sign-in/sign-in.component.spec.ts

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sign-in',
+  templateUrl: './sign-in.component.html',
+  styleUrls: ['./sign-in.component.scss'],
+})
+export class SignInComponent {
+  hide: boolean = true;
+}

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

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

src/app/authentication/auth-sign-in/verify-otp/verify-otp.component.spec.ts

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

src/app/authentication/auth-sign-in/verify-otp/verify-otp.component.ts

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

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthenticationComponent } from './authentication.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AuthenticationComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: () =>
+          import('./auth-sign-in/auth-sign-in.module').then(
+            (m) => m.AuthSignInModule
+          ),
+      },
+      { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AuthenticationRoutingModule {}

src/app/authentication/authentication.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/authentication/authentication.component.spec.ts

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

src/app/authentication/authentication.component.ts

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

src/app/authentication/authentication.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuthenticationRoutingModule } from './authentication-routing.module';
+import { AuthenticationComponent } from './authentication.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [AuthenticationComponent],
+  imports: [CommonModule, AuthenticationRoutingModule, SharedModule],
+})
+export class AuthenticationModule {}

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

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

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

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-landing-header',
   templateUrl: './landing-header.component.html',
-  styleUrls: ['./landing-header.component.scss']
+  styleUrls: ['./landing-header.component.scss'],
 })
 export class LandingHeaderComponent {
-
+  constructor(private readonly router: Router) {}
+  onSignIn(): void {
+    this.router.navigate(['auth']);
+  }
 }

src/app/shared/shared.module.ts

@@ -2,11 +2,23 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
-
-const MATERIAL_MODULES = [FlexLayoutModule, MatButtonModule];
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+// import { ErrorStateMatcher } from '@angular/material/core';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+const MATERIAL_MODULES = [
+  FlexLayoutModule,
+  MatButtonModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  // ErrorStateMatcher,
+];
 @NgModule({
   declarations: [],
-  exports: [...MATERIAL_MODULES],
-  imports: [...MATERIAL_MODULES, CommonModule],
+  imports: [FormsModule, ReactiveFormsModule, CommonModule],
+  ...MATERIAL_MODULES,
+  exports: [FormsModule, ReactiveFormsModule, ...MATERIAL_MODULES],
 })
 export class SharedModule {}

src/assets/scss/variables.scss

@@ -78,11 +78,13 @@ $move-color: #7024c4;
 
 @import "../../app/landing-page/landing-page-theme.scss";
 @import "../../app/landing-page/landing-header/landing-header.component.scss";
+@import "../../app/authentication/auth-sign-in/auth-sign-in-theme.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
   @include landing-page-theme();
   @include header-theme();
+  @include auth-sign-in-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -51,3 +51,24 @@ body {
   padding-right: 20px;
   padding-top: 20px;
 }
+
+.ptr {
+  cursor: pointer;
+}
+
+/* Border */
+.mat-form-field-appearance-outline .mat-form-field-outline {
+  color: white;
+}
+/* Font color */
+input.mat-input-element {
+  color: white;
+}
+
+.mt-1 {
+  margin-top: 1rem;
+}
+
+::placeholder {
+  color: #c5c5c5;
+}