complate login

src/app/+admin/layout/feature/ui/layout.component.ts

@@ -16,6 +16,7 @@ import { CommonModule } from '@angular/common';
   ],
   template: ` <nz-content>
     <div>
+      admin
       <router-outlet></router-outlet>
     </div>
   </nz-content>`,

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

-<div>
-    <p class="tw-text-white tw-bg-black tw-p-5">Welcome to the home page!</p>
-</div>
\ No newline at end of file
+<nz-layout>
+  <nz-sider nzCollapsible nzWidth="200px">
+    <div class="logo"></div>
+    <ul nz-menu nzTheme="dark" nzMode="inline">
+      <li nz-menu-item>
+        <span nz-icon nzType="pie-chart"></span>
+        <span>Option 1</span>
+      </li>
+      <li nz-menu-item>
+        <span nz-icon nzType="desktop"></span>
+        <span>Option 2</span>
+      </li>
+      <li nz-submenu nzTitle="User" nzIcon="user">
+        <ul>
+          <li nz-menu-item>Tom</li>
+          <li nz-menu-item>Bill</li>
+          <li nz-menu-item>Alex</li>
+        </ul>
+      </li>
+      <li nz-submenu nzTitle="Team" nzIcon="team">
+        <ul>
+          <li nz-menu-item>Team 1</li>
+          <li nz-menu-item>Team 2</li>
+        </ul>
+      </li>
+      <li nz-menu-item>
+        <span nz-icon nzType="file"></span>
+        <span>File</span>
+      </li>
+    </ul>
+  </nz-sider>
+  <nz-layout>
+    <nz-header></nz-header>
+    <nz-content>
+      <nz-breadcrumb>
+        <nz-breadcrumb-item>User</nz-breadcrumb-item>
+        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <div class="inner-content">Bill is a cat.</div>
+    </nz-content>
+    <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
+  </nz-layout>
+</nz-layout>
+

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

+.logo {
+  height: 32px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+nz-header {
+  background: #fff;
+  padding: 0;
+}
+
+nz-content {
+  margin: 0 16px;
+}
+
+nz-breadcrumb {
+  margin: 16px 0;
+}
+
+.inner-content {
+  padding: 24px;
+  background: #fff;
+  min-height: 360px;
+}
+
+nz-footer {
+  text-align: center;
+}

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

+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NzCarouselModule } from 'ng-zorro-antd/carousel';
-
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 @Component({
   selector: 'meu-home',
   standalone: true,
-  imports: [NzCarouselModule],
+  imports: [
+    NzCarouselModule,
+    CommonModule,
+    NzLayoutModule,
+    NzBreadCrumbModule,
+    NzMenuModule,
+    NzIconModule
+  ],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.scss',
+  styleUrls: ['./home.component.scss'],
+  //styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {}

src/app/+login/data-access/Services/ApiService.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment.development';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
 
-  private apiUrl = 'http://localhost:3000/login';
+  private apiUrl = environment.API_DOMAIN + '/login';
 
   constructor(private http: HttpClient) {}
 

src/app/+login/data-access/guard/admin.guard.ts

 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+import { CanActivate, Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AdminGuard implements CanActivate {
-  constructor() {}
+  constructor(private router: Router) {}
   canActivate(): boolean {
+    const role = localStorage.getItem('role');
+    if (role === 'admin') {
       return true;
+    } else {
+      this.router.navigate(['/login']); // chuyển đến trang lỗi không có quyền. cho bắt đăng nhập với quyên admin
+      return false;
+    }
   }
 }

src/app/+login/data-access/guard/auth.guard.ts

 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+import { CanActivate, Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  constructor() {}
+  constructor(private router: Router) {}
+
   canActivate(): boolean {
+    const token = localStorage.getItem('token');
+    if (token) {
+      this.router.navigate(['/home']);
+      return false;
+    } else {
       return true;
     }
+  }
 }
+

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

 <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>
+    <h2 class="tw-text-3xl tw-font-bold tw-text-center tw-text-gray-800">Welcome Back!</h2>
+    <p class="tw-text-center tw-text-1xl tw-text-gray-600">Please log in to your account</p>
 
-    <!-- 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-label [nzFor]="'userName'" class="tw-text-gray-700 tw-font-bold">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">
@@ -25,9 +23,9 @@
       </nz-form-control>
     </nz-form-item>
 
-    <!-- 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-label [nzFor]="'password'" class="tw-text-gray-700 tw-font-bold ">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">
@@ -45,17 +43,15 @@
         </nz-input-group>
       </nz-form-control>
     </nz-form-item>
-
-    <!-- Submit Button -->
+    <p *ngIf="MgsError" class="text-error tw-mb-4">{{ MgsError }}</p>
     <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"
+      class="  tw-w-full tw-bg-indigo-600 tw-text-white tw-font-semibold tw-py-2 tw-rounded-md hover:bg-submit tw-transition-colors button-login"
       [nzType]="'primary'"
     >
       Log in
     </button>
 
-    <!-- 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>

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

@@ -12,6 +12,6 @@
 .error-message{
   color: red;
 }
-.button {
-  background-color: #3700ff;
+.button-login {
+  background-color: #714afd;
 }

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

@@ -10,7 +10,7 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { catchError, finalize, Observable, tap } from 'rxjs';
+import { catchError, finalize, Observable, of, tap } from 'rxjs';
 import { AuthService } from '../data-access/Services/ApiService.service';
 import { response } from 'express';
 @Component({
@@ -34,35 +34,42 @@ import { response } from 'express';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
+  MgsError: string = '';
+
   loginForm: FormGroup;
   constructor(private fb: FormBuilder, private authService: AuthService) {
     this.loginForm = this.fb.group({
-      username: ['', [Validators.required]],
+      userName: ['', [Validators.required]],
       password: ['', [Validators.required]],
     });
   }
   ngOnInit() {}
+  saveInfo(res: any) {
+    localStorage.setItem('token', res.responseData.token);
+    localStorage.setItem('expirationTime', res.responseData.expirationTime);
+    localStorage.setItem('role', res.responseData.role);
+  }
   onSubmit() {
-    const headers  = new HttpHeaders()
     if (!this.loginForm.valid) {
-      alert('vui lòng nhập đầy đủ thông tin');
+      this.MgsError = "Vui lòng nhập thống tin đăng nhập";
       return;
     }
-    console.log(this.loginForm.value.username, this.loginForm.value.password);
-
-    this.authService.login(this.loginForm.value.username, this.loginForm.value.password).pipe(
-      tap(() => {
+    console.log(this.loginForm.value.userName, this.loginForm.value.password);
 
+    this.authService.login(this.loginForm.value.userName, this.loginForm.value.password).pipe(
+      tap((res) => { // không ảnh hưởng đến data trên observable
+          this.saveInfo(res);
+          window.location.href = '/admin';
       }),
-      catchError((error) => {
-        console.log(error);
-        throw error;
+      catchError((err) => {
+        this.MgsError = err.message;
+        console.log(this.MgsError);
+        console.log(err);
+        return of(null);
       }),
-      finalize(() => {})
-    ).subscribe(
-      response => {
-        alert(response.message);
-      }
-    );
+      finalize(() => { // gọi ra khi observable hoàn tất
+        console.log('Login request completed');
+      })
+    ).subscribe();
   }
 }

src/custom/tailwind/_utilities.scss

@@ -13,4 +13,7 @@
     color: white;
     border: rgb(218, 141, 0);
   }
+  .bg-submit {
+    background-color: #3700ff;
+  }
 }

src/environments/environment.development.ts

 export const environment = {
-  API_DOMAIN: 'http/', //custom
+  API_DOMAIN: 'http://localhost:3000', //custom
 };