update

src/app/+login/data-access/model/login.model.ts

 export namespace Login {
     export type Response = {
-        user: {
-            username: string,
-            role: string,
-        },
-        accessToken: string,
+        token: string,
+        expirationTime: number,
+        role: string
     };
 
     export type Request = {

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

@@ -5,30 +5,36 @@
   >
     <form nz-form [formGroup]="signInFormGroup">
       <nz-form-item>
-        <nz-form-control>
-          <nz-input-group>
+        <nz-form-control nzErrorTip="Please input your username!">
+          <nz-input-group class="tw-h-12">
             <input
               type="text"
               nz-input
-              id="username_input"
               placeholder="Username"
-              class="tw-h-10 tw-text-sm tw-rounded-md"
+              class="tw-text-sm tw-rounded-md"
               formControlName="username"
             />
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-control>
-          <nz-input-group>
+        <nz-form-control nzErrorTip="Please input your password!">
+          <nz-input-group [nzSuffix]="suffixTemplate" class="tw-h-12">
             <input
               type="password"
               nz-input
-              id="password_input"
+              [type]="passwordVisible ? 'text' : 'password'"
               placeholder="Password"
-              class="tw-h-10 tw-text-sm tw-rounded-md"
+              class="tw-text-sm tw-rounded-md"
               formControlName="password"
             />
+            <ng-template #suffixTemplate>
+              <span
+                nz-icon
+                [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
+                (click)="passwordVisible = !passwordVisible"
+              ></span>
+            </ng-template>
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>
@@ -37,9 +43,7 @@
       </div>
       <nz-form-item>
         <nz-form-control>
-          <label nz-checkbox
-            >Remember me</label
-          >
+          <label nz-checkbox>Remember me</label>
         </nz-form-control>
       </nz-form-item>
       <div></div>

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

@@ -36,51 +36,59 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
-  errorMsg?: string;
+  passwordVisible: boolean = false;
+  errorMsg: string = "";
   signInFormGroup!: FormGroup;
-
+  // isEdit: boolean = false;
   constructor(
-    private _formBuilder: FormBuilder,
+    private _fb: FormBuilder,
     private _authService: AuthService,
     private _changeDetectorRef: ChangeDetectorRef,
     private _router: Router
-  ) {}
+  ) {
+    this.signInFormGroup = this._fb.group({
+      username: ['', [Validators.required, validateUsername]],
+      password: ['', Validators.required],
+    });
+  }
 
   ngOnInit(): void {
-    this.signInFormGroup = this._formBuilder.group({
-      username: [null, [Validators.required, validateUsername]],
-      password: [null, Validators.required],
-    });
+
   }
 
   onLogin() {
     const data = this.signInFormGroup.value;
+    if (!this.signInFormGroup.valid) {
+      Object.values(this.signInFormGroup.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+      return;
+    }
     this.signInFormGroup.markAllAsTouched();
     this._authService.loginPost(data)
-    .pipe(
-      tap((response: ResponseResult<Login.Response>) => {
-        this.onSuccess(response);
-      }),
-      catchError((error: ResponseResult<any>) => {
-        this.onError(error);
-        return of(null);
-      })
-    )
-    .subscribe();
+      .pipe(
+        tap((response: ResponseResult<Login.Response>) => {
+          this.onSuccess(response);
+        }),
+        catchError((error: ResponseResult<any>) => {
+          this.onError(error);
+          return of(null);
+        })
+      )
+      .subscribe();
   }
 
   onSuccess(response: ResponseResult<Login.Response>) {
-    localStorage.setItem("token", JSON.stringify(response.responseData?.accessToken) ?? "");
-    localStorage.setItem("role", JSON.stringify(response.responseData?.user.role) ?? "");
+    localStorage.setItem("token", JSON.stringify(response.responseData?.token) ?? "");
+    localStorage.setItem("role", JSON.stringify(response.responseData?.role) ?? "");
     this._router.navigate(['/home']);
   }
 
   onError(error: ResponseResult<any>) {
-    if (error.status === 401) {
-      this.errorMsg = "Invalid username or password!";
-    } else {
-      this.errorMsg = "An error has occurred! Please try later.";
-    }
+    this.errorMsg = "Invalid username or password!";
     this._changeDetectorRef.markForCheck();
   }
 }