update registration process

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

@@ -8,7 +8,7 @@
     id="form"
     class="register-form"
     #taskForm="ngForm"
-    (ngSubmit)="onSubmit(taskForm)"
+    (ngSubmit)="onSubmit(taskForm, mail)"
     onsubmit="return false"
   >
     <input
@@ -20,8 +20,17 @@
       class="custom-input"
       autocomplete="email"
       [(ngModel)]="authData.mail"
+      [ngClass]="{ 'error-border': mail.invalid && mail.touched }"
       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]="'Sign Up'"
       [disabled]="!isUserEmailValid(authData.mail) && authData.mail.length > 0"

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

@@ -42,6 +42,7 @@ section {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
   width: 500px;
   padding: 24px;
   input {
@@ -64,4 +65,27 @@ section {
       background-color: rgba($white, 0.1);
     }
   }
+  .error-border {
+    border: 2px solid $red;
+    color: $red;
+    &::placeholder {
+      color: $red;
+    }
+  }
+}
+
+.error-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 0;
+  height: 24px;
+  padding: 6px;
+  width: 62%;
+  p {
+    color: $red;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
 }

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

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { BtnLargeComponent } from '../../shared/components/btn-large/btn-large.component';
 import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-auth',
   standalone: true,
-  imports: [BtnLargeComponent, FormsModule],
+  imports: [CommonModule, BtnLargeComponent, FormsModule],
   templateUrl: './auth.component.html',
   styleUrl: './auth.component.scss',
 })
@@ -22,11 +23,13 @@ export class AuthComponent {
     return emailRegex.test(emailValue);
   }
 
-  onSubmit(ngForm: NgForm) {
+  onSubmit(ngForm: NgForm, mailInput: any) {
     if (ngForm.submitted && ngForm.form.valid) {
       const queryParams = { mail: this.authData.mail };
       this.router.navigate(['/register'], { queryParams });
       ngForm.form.reset();
+    } else {
+      mailInput.control.markAsTouched();
     }
   }
 }

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

@@ -14,7 +14,7 @@ section {
   height: 100vh;
   text-align: center;
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-    url(./../../../../assets/img/backgrounds/register.png);
+    url(./../../../../assets/img/backgrounds/login.png);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,6 +1,18 @@
 <section>
-  <div class="content">
+  <div
+    class="content"
+    [ngStyle]="{ height: registrationSuccess ? '200px' : '492px' }"
+  >
     <div class="headline">Sign Up</div>
+    @if (registrationSuccess) {
+    <div class="reg-success">
+      <p>
+        Please check your email to confirm your email address and complete the
+        registration process.
+      </p>
+      <a href="/login">To the login</a>
+    </div>
+    } @else {
     <form
       id="form"
       class="register-form"
@@ -90,5 +102,6 @@
         "
       ></app-btn-large>
     </form>
+    }
   </div>
 </section>

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

@@ -37,6 +37,25 @@ section {
   }
 }
 
+.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;
+    }
+  }
+}
+
 .error-msg {
   display: flex;
   align-items: center;
@@ -49,14 +68,6 @@ section {
     font-size: 12px !important;
     font-weight: 400 !important;
   }
-  a {
-    color: $red;
-    text-decoration: underline;
-    cursor: pointer;
-    &:hover {
-      text-decoration: none;
-    }
-  }
 }
 
 .register-form {

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

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [BtnLargeComponent, FormsModule, RouterLink],
+  imports: [CommonModule, BtnLargeComponent, FormsModule, RouterLink],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
 })
@@ -17,6 +18,8 @@ export class RegisterComponent {
     passwordConfirm: '',
   };
 
+  registrationSuccess: boolean = false;
+
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit(): void {
@@ -34,6 +37,7 @@ export class RegisterComponent {
     if (ngForm.submitted && ngForm.form.valid) {
       console.log(this.authData);
       ngForm.form.reset();
+      this.registrationSuccess = true;
     }
   }
 }

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

@@ -3,7 +3,7 @@
 .btn {
   padding: 12px 24px;
   width: fit-content;
-  box-shadow: 1px 1px 3px $black;
+  box-shadow: 1px 1px 3px rgba($black, 0.5);
   border-radius: 24px;
   color: $white;
   background-color: $blue;