added forgot password component & design improvements

frontend/src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
-import { RegisterComponent } from './components/auth/register/register.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'login', component: HomeComponent },
   { path: 'register', component: HomeComponent },
+  { path: 'forgot-password', component: HomeComponent },
 ];

frontend/src/app/components/auth/forgot-password/forgot-password.component.html

@@ -0,0 +1,53 @@
+<section>
+  <div class="content">
+    <div class="headline">Forgot your password?</div>
+    @if (sendSuccess) {
+    <div class="note">
+      <p>
+        If the email you entered exists on our server, you will receive a
+        message with instructions on how to reset your password.
+      </p>
+      <a href="/login">To the login</a>
+    </div>
+    } @else {
+    <div class="note">
+      <p>We will send you an email with instructions to reset your password.</p>
+    </div>
+    <form
+      #taskForm="ngForm"
+      (ngSubmit)="onSubmit(taskForm, mail)"
+      onsubmit="return false"
+    >
+      <input
+        type="mail"
+        id="mail"
+        name="mail"
+        #mail="ngModel"
+        placeholder="Email Address"
+        class="custom-input"
+        autocomplete="email"
+        [(ngModel)]="authData.mail"
+        [class.error-border]="
+          (!mail.valid && mail.touched) ||
+          (mail.touched &&
+            !isUserEmailValid(authData.mail.toLowerCase()) &&
+            authData.mail.length > 0)
+        "
+        required
+      />
+      <div class="error-msg">
+        @if (!mail.valid && mail.touched) {
+        <p>Please enter your email</p>
+        } @else { @if (mail.touched && authData.mail.length > 0 &&
+        !isUserEmailValid(authData.mail.toLowerCase())) {
+        <p>This is not a valid email format</p>
+        }}
+      </div>
+      <app-btn-large
+        [value]="'Send Email'"
+        [disabled]="!isUserEmailValid(authData.mail)"
+      ></app-btn-large>
+    </form>
+    }
+  </div>
+</section>

frontend/src/app/components/auth/forgot-password/forgot-password.component.scss

@@ -0,0 +1,8 @@
+@import "./../../../../assets/style/colors.scss";
+@import "./../../../../assets/style/form.scss";
+@import "./../../../../assets/style/auth-layout.scss";
+
+section {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    url(./../../../../assets/img/backgrounds/forgot-password.png);
+}

frontend/src/app/components/auth/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForgotPasswordComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/auth/forgot-password/forgot-password.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { FormsModule, NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [CommonModule, BtnLargeComponent, FormsModule],
+  templateUrl: './forgot-password.component.html',
+  styleUrl: './forgot-password.component.scss',
+})
+export class ForgotPasswordComponent {
+  authData = {
+    mail: '',
+  };
+
+  sendSuccess: boolean = false;
+
+  isUserEmailValid(emailValue: string) {
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(emailValue);
+  }
+
+  onSubmit(ngForm: NgForm, mailInput: any) {
+    if (ngForm.submitted && ngForm.form.valid) {
+      console.log(this.authData);
+      ngForm.form.reset();
+      this.sendSuccess = true;
+    } else {
+      mailInput.control.markAsTouched();
+    }
+  }
+}

frontend/src/app/components/auth/login/login.component.scss

@@ -16,6 +16,7 @@ section {
   align-items: center;
   width: 90%;
   height: 24px;
+  margin-bottom: 24px;
   input {
     width: 16px;
     height: 16px;
@@ -30,10 +31,7 @@ section {
 }
 
 .footer {
-  position: absolute;
-  bottom: 43px;
-  left: 0;
-  right: 0;
+  margin-top: 36px;
   a {
     font-size: 18px;
     font-weight: 700;

frontend/src/app/components/auth/register/register.component.html

@@ -1,11 +1,8 @@
 <section>
-  <div
-    class="content"
-    [ngStyle]="{ height: registrationSuccess ? '200px' : '492px' }"
-  >
+  <div class="content">
     <div class="headline">Sign Up</div>
     @if (registrationSuccess) {
-    <div class="reg-success">
+    <div class="note">
       <p>
         Please check your email to confirm your email address and complete the
         registration process.

frontend/src/app/components/auth/register/register.component.scss

@@ -6,22 +6,3 @@ section {
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
     url(./../../../../assets/img/backgrounds/register.png);
 }
-
-.reg-success {
-  p {
-    color: $black;
-    font-size: 18px;
-    font-weight: 400;
-    margin: 36px 0 24px 0;
-  }
-  a {
-    font-size: 18px;
-    font-weight: 700;
-    color: $blue;
-    text-decoration: none;
-    cursor: pointer;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}

frontend/src/app/components/home/home.component.html

@@ -3,5 +3,8 @@
   <app-auth *ngIf="currentRoute === ''"></app-auth>
   <app-login *ngIf="currentRoute === 'login'"></app-login>
   <app-register *ngIf="currentRoute === 'register'"></app-register>
+  <app-forgot-password
+    *ngIf="currentRoute === 'forgot-password'"
+  ></app-forgot-password>
   <app-footer></app-footer>
 </section>

frontend/src/app/components/home/home.component.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute } from '@angular/router';
 import { RegisterComponent } from '../auth/register/register.component';
 import { CommonModule } from '@angular/common';
 import { LoginComponent } from '../auth/login/login.component';
+import { ForgotPasswordComponent } from '../auth/forgot-password/forgot-password.component';
 
 @Component({
   selector: 'app-home',
@@ -17,6 +18,7 @@ import { LoginComponent } from '../auth/login/login.component';
     AuthComponent,
     RegisterComponent,
     LoginComponent,
+    ForgotPasswordComponent,
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',

frontend/src/app/shared/components/btn-large/btn-large.component.scss

@@ -16,11 +16,11 @@
   &:not(:disabled):hover {
     color: $blue;
     background-color: $white;
-    border: 1px solid $white;
+    border: 1px solid $blue;
   }
   &:disabled {
-    background-color: $gray;
-    color: darken($gray, 20%);
+    background-color: $light-blue;
+    color: darken($white, 10%);
     border: 1px solid $gray;
     cursor: default;
   }

frontend/src/assets/style/auth-layout.scss

@@ -18,7 +18,7 @@ section {
 
 .content {
   width: 520px;
-  height: 492px;
+  height: fit-content;
   padding: 43px 56px;
   border-radius: 48px;
   background-color: $white;
@@ -28,7 +28,23 @@ section {
     color: $blue;
     margin-bottom: 24px;
   }
-  app-btn-large {
-    margin-top: 36px;
+}
+
+.note {
+  p {
+    color: $black;
+    font-size: 18px;
+    font-weight: 400;
+    margin: 36px 0 24px 0;
+  }
+  a {
+    font-size: 18px;
+    font-weight: 700;
+    color: $blue;
+    text-decoration: none;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }

frontend/src/assets/style/colors.scss

@@ -3,4 +3,5 @@ $white: #fff;
 $black: #000;
 $gray: #ababab;
 $blue: #2e3edf;
+$light-blue: #969eef;
 $red: #ff002e;