navigate user after successful registration.

- data is passed via state

src/app/features/auth/components/login/login.html

@@ -1,4 +1,11 @@
-<section class="my-10 sm:my-20 flex justify-center items-center">
+@if (successMessage) {
+<div
+  class="px-4 py-3 mb-8 bg-teal-100 rounded-lg text-teal-800 text-sm mt-10 max-w-11/12 sm:max-w-8/12 mx-auto"
+>
+  <p>{{successMessage}}</p>
+</div>
+}
+<section class="my-5 sm:my-10 flex justify-center items-center">
   <article class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
     <div class="md:col-span-1 lg:col-span-2">
       <img
@@ -27,7 +34,9 @@
 
         <button type="submit" class="btn btn-black py-2">Login</button>
       </form>
-      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
+      <a
+        routerLink="/register"
+        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >New User ? Sign Up</a
       >
     </article>

src/app/features/auth/components/login/login.ts

@@ -1,9 +1,18 @@
 import { Component } from "@angular/core";
+import { Router, RouterLink } from "@angular/router";
 
 @Component({
   selector: "app-login",
-  imports: [],
+  imports: [RouterLink],
   templateUrl: "./login.html",
   styleUrl: "./login.css",
 })
-export class Login {}
+export class Login {
+  successMessage: string | undefined;
+
+  constructor(private router: Router) {
+    const navigator = this.router.currentNavigation();
+    const state = navigator?.extras.state as { message?: string };
+    this.successMessage = state?.message;
+  }
+}

src/app/features/auth/components/register/register.html

@@ -18,7 +18,7 @@
   >
     <fieldset class="fieldset">
       <legend class="fieldset-legend">Name*</legend>
-      <input type="text" class="input" formControlName="name" placeholder="Jhon Doe" />
+      <input type="text" name="name" class="input" formControlName="name" placeholder="Jhon Doe" />
       <app-error fieldName="name" [control]="registerForm.get('name')" />
     </fieldset>
 
@@ -26,6 +26,7 @@
       <legend class="fieldset-legend">Mobile Number*</legend>
       <input
         type="text"
+        name="mobile_number"
         class="input"
         formControlName="mobile_number"
         placeholder="+X1 XXXXXXXXXX"
@@ -42,7 +43,13 @@
 
     <fieldset class="fieldset">
       <legend class="fieldset-legend">City*</legend>
-      <input type="text" class="input" formControlName="city" placeholder="Your city name" />
+      <input
+        type="text"
+        name="city"
+        class="input"
+        formControlName="city"
+        placeholder="Your city name"
+      />
       <app-error fieldName="city" [control]="registerForm.get('city')" />
     </fieldset>
 
@@ -67,7 +74,9 @@
       <button type="submit" [disabled]="registerForm.invalid" class="btn btn-black py-2 w-full">
         Register
       </button>
-      <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
+      <a
+        routerLink="/login"
+        class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
         >Already have an account ? Login</a
       >
     </div>

src/app/features/auth/components/register/register.ts

@@ -3,15 +3,17 @@ import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angula
 import { AuthService } from "../../services/auth-service";
 import { RegisterUserRequest } from "../../../../core/models/user.model";
 import { Error } from "../../../../shared/components/error/error";
+import { Router, RouterLink } from "@angular/router";
 
 @Component({
   selector: "app-register",
-  imports: [ReactiveFormsModule, Error],
+  imports: [ReactiveFormsModule, Error, RouterLink],
   templateUrl: "./register.html",
   styleUrl: "./register.css",
 })
 export class Register {
   authService = inject(AuthService);
+  router = inject(Router);
   errors = signal<string[]>([]);
 
   registerForm = new FormGroup({
@@ -31,7 +33,8 @@ export class Register {
     }
 
     this.authService.register(this.registerForm.value as RegisterUserRequest).subscribe({
-      next: () => console.log("success"),
+      next: () =>
+        this.router.navigate(["/login"], { state: { message: "Registration successful!" } }),
       error: (error) => {
         const errors: Record<number, string[]> = error?.error?.errors || {};
         const errorMessages: string[] = Object.values(errors).flat();