334 Login UI

步骤

1、login-user.ts

运行如下命令

ng g class models\LoginUser

生成的login-user.ts更新后显示如下

export class LoginUser {
  email: string | null = null;
  password: string | null = null;
}

2、account.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { LoginUser } from '../models/login-user';
import { RegisterUser } from '../models/register-user';
const API_BASE_URL: string = "https://localhost:7173/api/v1/account/";
@Injectable({
  providedIn: 'root'
})
export class AccountService {
  public currentUserName: string | null = null;
  constructor(private httpClient: HttpClient) {
  }
  public postRegister(registerUser: RegisterUser): Observable<RegisterUser> {
    return this.httpClient.post<RegisterUser>(`${API_BASE_URL}register`, registerUser);
  }
  public postLogin(loginUser: LoginUser): Observable<LoginUser> {
    return this.httpClient.post<LoginUser>(`${API_BASE_URL}login`, loginUser);
  }
  public getLogout(): Observable<string> {
    return this.httpClient.get<string>(`${API_BASE_URL}logout`);
  }
}

3、login.component.ts

运行如下命令

ng g component Login

生成的login.component.ts更新后显示如下

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { LoginUser } from '../models/login-user';
import { AccountService } from '../services/account.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  loginForm: FormGroup;
  isLoginFormSubmitted: boolean = false;


  constructor(private accountService: AccountService, private router: Router) {
    this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required]),
    });
  }


  get login_emailControl(): any {
    return this.loginForm.controls["email"];
  }

  get login_passwordControl(): any {
    return this.loginForm.controls["password"];
  }


  loginSubmitted() {
    this.isLoginFormSubmitted = true;

    if (this.loginForm.valid) {

      this.accountService.postLogin(this.loginForm.value).subscribe({
        next: (response: LoginUser) => {
          console.log(response);

          this.isLoginFormSubmitted = false;
          this.accountService.currentUserName = response.email;

          this.router.navigate(['/cities']);

          this.loginForm.reset();
        },

        error: (error) => {
          console.log(error);
        },

        complete: () => { },
      });
    }
  }
}

4、login.component.html

<div class="w-75 margin-auto">
  <div class="form-container">

    <h2>Login</h2>

    <form [formGroup]="loginForm" (ngSubmit)="loginSubmitted()">


      <!-- email -->
      <div class="form-field flex">
        <div class="w-25">
          <label for="email" class="form-label pt">Email</label>
        </div>

        <div class="flex-1">
          <input type="text" id="email" class="form-input" formControlName="email" />
          <span class="text-red" *ngIf="(login_emailControl.touched || isLoginFormSubmitted) && (login_emailControl.errors?.['required'])">Email can't be blank</span>
        </div>
      </div>



      <!-- password -->
      <div class="form-field flex">
        <div class="w-25">
          <label for="password" class="form-label pt">Password</label>
        </div>

        <div class="flex-1">
          <input type="password" id="password" class="form-input" formControlName="password" />
          <span class="text-red" *ngIf="(login_passwordControl.touched || isLoginFormSubmitted) && (login_passwordControl.errors?.['required'])">Password can't be blank</span>
        </div>
      </div>



      <!-- submit -->
      <div class="form-field flex">
        <div class="w-25">
        </div>

        <div class="flex-1">
          <button type="submit" class="button button-green-back">Login</button>
        </div>
      </div>

    </form>

  </div>
</div>

5、app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CitiesComponent } from './cities/cities.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
  { path: "cities", component: CitiesComponent },
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

6、app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AccountService } from './services/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(public accountService: AccountService, private router: Router) { }

  onLogOutClicked() {
    this.accountService.getLogout().subscribe({
      next: (response: string) => {
        this.accountService.currentUserName = null;

        this.router.navigate([ '/login' ]);
      },

      error: (error) => {
        console.log(error);
      },

      complete: () => { },
    });
  }
}

7、app.component.html

<div class="container">
  <div class="page-content">

    <div class="margin-bottom">
      <div class="flex">

        <div class="flex-1" id="top-bar-div">
          <h2 class="app-title">
            Cities Manager
          </h2>
        </div>

        <div class="flex-1" id="search-box-div">
          <div class="navbar account-links">

            <ul *ngIf="accountService.currentUserName === '' || accountService.currentUserName === null || accountService.currentUserName === undefined">
              <li>
                <a [routerLink]="[ '/login' ]">Login</a>
              </li>

              <li>
                <a [routerLink]="[ '/register' ]">Register</a>
              </li>
            </ul>

            <ul *ngIf="accountService.currentUserName !== '' && accountService.currentUserName !== null && accountService.currentUserName !== undefined">
              <li>
                <a href="#" onclick="return false" (click)="onLogOutClicked()">Logout</a>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>


    <div class="navbar mb">
      <ul>
        <li>
          <a [routerLink]="[ '/cities']" [routerLinkActive]="[ 'nav-active']">Cities</a>
        </li>
      </ul>
    </div>


    <div class="body">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

结果

程序运行后，可以Login/Logout。

Gitee获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git