optimized registration process

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

@@ -1,6 +1,7 @@
 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';
 
 @Component({
   selector: 'app-auth',
@@ -14,6 +15,8 @@ export class AuthComponent {
     mail: '',
   };
 
+  constructor(private router: Router) {}
+
   isUserEmailValid(emailValue: string) {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
     return emailRegex.test(emailValue);
@@ -21,8 +24,9 @@ export class AuthComponent {
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      console.log(this.authData.mail);
+      const queryParams = { mail: this.authData.mail };
-      this.authData.mail = '';
+      this.router.navigate(['/register'], { queryParams });
+      ngForm.form.reset();
     }
   }
 }

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

@@ -16,13 +16,21 @@
         placeholder="Email Address"
         autocomplete="email"
         [(ngModel)]="authData.mail"
-        disabled
+        [class.error-border]="
+          (!mail.valid && mail.touched) ||
+          (mail.touched &&
+            !isUserEmailValid(authData.mail.toLowerCase()) &&
+            authData.mail.length > 0)
+        "
         required
       />
       <div class="error-msg">
-        @if (!authData.params) {
+        @if (!mail.valid && mail.touched) {
-        <p>Click <a routerLink="">here</a> to resend the registration email.</p>
+        <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>
       <input
         type="password"
@@ -37,7 +45,6 @@
         [class.error-border]="
           password.invalid && password.touched && authData.password.length < 6
         "
-        [disabled]="!authData.params"
         required
       />
       <div class="error-msg">
@@ -63,7 +70,6 @@
           authData.password !== authData.passwordConfirm &&
           passwordConfirm.touched
         "
-        [disabled]="!authData.params"
         required
       />
       <div class="error-msg">
@@ -75,8 +81,9 @@
       <app-btn-large
         [value]="'Get Started'"
         [disabled]="
-          (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
+          (!isUserEmailValid(authData.mail) &&
-          !authData.params ||
+            authData.mail &&
+            authData.mail.length > 0) ||
           authData.password !== authData.passwordConfirm ||
           !authData.password ||
           !authData.passwordConfirm

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

@@ -13,7 +13,6 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 export class RegisterComponent {
   authData = {
     mail: '',
-    params: false,
     password: '',
     passwordConfirm: '',
   };
@@ -23,9 +22,6 @@ export class RegisterComponent {
   ngOnInit(): void {
     this.route.queryParams.subscribe((params) => {
       this.authData.mail = params['mail'] || '';
-      this.authData.mail
-        ? (this.authData.params = true)
-        : (this.authData.params = false);
     });
   }
 
@@ -36,10 +32,8 @@ export class RegisterComponent {
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      let mail = this.authData.mail;
       console.log(this.authData);
       ngForm.form.reset();
-      ngForm.form.patchValue({ mail: mail });
     }
   }
 }

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

@@ -1,8 +1,8 @@
 <header>
-  <div class="logo">
+  <div class="logo" routerLink="/">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
   <div class="btn">
-    <app-btn-large [value]="'Log in'"></app-btn-large>
+    <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
   </div>
 </header>

frontend/src/app/components/home/header/header.component.scss

@@ -14,6 +14,7 @@ header {
 }
 
 .logo {
+  cursor: pointer;
   img {
     filter: drop-shadow(1px 1px 3px $black);
     width: 200px;

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

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [BtnLargeComponent],
+  imports: [BtnLargeComponent, RouterLink],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })