update ng-zoro frmlogin

src/app/+login/feature/login.component.html

-<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="tw-max-w-md tw-mx-auto tw-bg-white tw-p-8 tw-shadow-md tw-rounded-lg">
-  <div class="tw-text-50px tw-font-bold tw-pb-10 tw-mx-auto tw-text-center">Login</div>
+<div class="tw-h-screen tw-bg-gradient-to-br tw-from-indigo-600 tw-to-purple-600 tw-flex tw-items-center tw-justify-center tw-p-6">
+  <form nz-form [formGroup]="loginForm" class="tw-w-full tw-max-w-md tw-bg-white tw-rounded-lg tw-shadow-xl tw-p-8 tw-space-y-6 tw-backdrop-blur-sm" (ngSubmit)="onSubmit()">
+    <!-- Form Header -->
+    <h2 class="tw-text-2xl tw-font-bold tw-text-center tw-text-gray-800">Welcome Back!</h2>
+    <p class="tw-text-center tw-text-gray-600">Please log in to your account</p>
 
-  <div class="tw-mb-4">
-    <label for="username" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Username</label>
-    <input id="username" type="text" formControlName="username" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
-    <div *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched"  class=" tw-text-xs tw-mt-2 text-error">
-      Username is required.
-    </div>
-  </div>
+    <!-- Username Field -->
+    <nz-form-item class="tw-mb-4">
+      <nz-form-label [nzFor]="'userName'" class="tw-text-gray-700 tw-font-medium">Username</nz-form-label>
+      <nz-form-control nzErrorTip="Please input your username!">
+        <nz-input-group class="tw-w-full">
+          <div class="tw-relative tw-w-full">
+            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3 tw-text-gray-400">
+              <i nz-icon nzType="user" class="tw-text-xl"></i>
+            </span>
+            <input
+              type="text"
+              nz-input
+              formControlName="userName"
+              placeholder="Username"
+              class="tw-w-full tw-py-2 tw-pl-10 tw-border tw-border-gray-300 tw-rounded-md tw-focus:border-indigo-500 tw-focus:ring-2 tw-focus:ring-indigo-200 tw-outline-none"
+            />
+          </div>
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
 
-  <div class="tw-mb-6">
-    <label for="password" class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2">Password</label>
-    <input id="password" type="password" formControlName="password" class="tw-shadow tw-appearance-none tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 leading-tight focus:tw-outline-none">
-    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched" class="tw-text-xs tw-mt-2 text-error">
-      Password must be at least 6 characters long.
-    </div>
-  </div>
+    <!-- Password Field -->
+    <nz-form-item class="tw-mb-4">
+      <nz-form-label [nzFor]="'password'" class="tw-text-gray-700 tw-font-medium">Password</nz-form-label>
+      <nz-form-control nzErrorTip="Please input your password!">
+        <nz-input-group class="tw-w-full">
+          <div class="tw-relative tw-w-full">
+            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3 tw-text-gray-400">
+              <i nz-icon nzType="lock" class="tw-text-xl"></i>
+            </span>
+            <input
+              type="password"
+              nz-input
+              formControlName="password"
+              placeholder="Password"
+              class="tw-w-full tw-py-2 tw-pl-10 tw-border tw-border-gray-300 tw-rounded-md tw-focus:border-indigo-500 tw-focus:ring-2 tw-focus:ring-indigo-200 tw-outline-none"
+            />
+          </div>
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
 
-  <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
-    <a routerLink="/#" class="tw-inline-block tw-align-baseline tw-font-bold tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">
-      Forgot password?
-    </a>
-  </div>
+    <!-- Submit Button -->
+    <button
+      nz-button
+      class=" button tw-w-full tw-bg-indigo-600 tw-text-white tw-font-semibold tw-py-2 tw-rounded-md tw-hover:bg-indigo-700 tw-transition-colors"
+      [nzType]="'primary'"
+    >
+      Log in
+    </button>
 
-  <div>
-    <button class="tw-bg-blue-500 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded focus:tw-outline-none focus:tw-shadow-outline tw-w-full" type="submit" [disabled]="loginForm.invalid">Login</button>
-  </div>
-  <div class="tw-text-center tw-mt-4">
-    <a routerLink="/#" class="tw-text-sm tw-text-blue-500 hover:tw-text-blue-800">Register now!</a>
-  </div>
-
-</form>
+    <!-- Register Link -->
+    <p class="tw-text-center tw-text-gray-600 tw-mt-4">
+      Or
+      <a class="tw-text-indigo-600 tw-font-semibold hover:tw-underline cursor-pointer">register now!</a>
+    </p>
+  </form>
+</div>

src/app/+login/feature/login.component.scss

-.form-container {
-  max-width: 400px;
-  margin: auto;
-  padding: 20px;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+.login-form {
+  max-width: 300px;
 }
 
-button {
-  background-color: #1D4ED8; /* Tailwind's blue-500 */
-  color: white;
-  padding: 10px 15px;
-  border: none;
-  border-radius: 4px;
+.login-form-margin {
+  margin-bottom: 16px;
+}
+
+.login-form-button {
   width: 100%;
-  cursor: pointer;
-  font-size: 16px;
 }
 .error-message{
   color: red;
 }
+.button {
+  background-color: #3700ff;
+}

src/app/+login/feature/login.component.ts

 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzInputModule } from 'ng-zorro-antd/input'
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { catchError, Observable } from 'rxjs';
+import { catchError, finalize, Observable, tap } from 'rxjs';
 import { AuthService } from '../data-access/Services/ApiService.service';
 import { response } from 'express';
 @Component({
@@ -10,7 +18,19 @@ import { response } from 'express';
   standalone: true,
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NzFormModule,
+    NzCardModule,
+    NzInputModule,
+    NzButtonModule,
+    NzIconModule,
+    NzCheckboxModule,
+    NzAlertModule,
+    NzFormModule,
+    ReactiveFormsModule,
+],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
@@ -31,10 +51,14 @@ export class LoginComponent implements OnInit {
     console.log(this.loginForm.value.username, this.loginForm.value.password);
 
     this.authService.login(this.loginForm.value.username, this.loginForm.value.password).pipe(
+      tap(() => {
+
+      }),
       catchError((error) => {
         console.log(error);
         throw error;
-      })
+      }),
+      finalize(() => {})
     ).subscribe(
       response => {
         alert(response.message);

src/environments/environment.development.ts

 export const environment = {
-  API_DOMAIN: 'http://localhost:5051/api/v1.0/', //custom
+  API_DOMAIN: 'http/', //custom
 };