时间戳

首页 > 解决方案 > 如何更改登录组件以使其使用用户名而不是电子邮件？

angular - 如何更改登录组件以使其使用用户名而不是电子邮件？

问题描述

我有一个在登录时使用用户名和密码的 spring boot api。那么如何更改 ngx 管理员以接受用户名而不是电子邮件作为凭据？

标签： angularngx-admin

解决方案

我有一个类似的问题。最终创建自定义身份验证组件，因为需要更正布局（其中包含与电子邮件相关的内容）。

登录组件.ts：

import { Component } from '@angular/core';
import { NbLoginComponent } from '@nebular/auth';

@Component({
 selector: 'ngx-login',
 styleUrls: ['./login.component.scss'],
 templateUrl: './login.component.html',
})
export class NgxLoginComponent extends NbLoginComponent {
}

简单的 HTML 模板：

<h1 class="title">Sign In</h1>

<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">

  <div class="form-control-group">
    <label class="label">Username</label>
    <input nbInput
       fullWidth
       [(ngModel)]="user.username"
       name="username"
       autofocus
       class="form-control">
  </div>

  <div class="form-control-group">
    <label class="label" for="input-password">Password:</label>
    <input nbInput
       fullWidth
       [(ngModel)]="user.password"
       #password="ngModel"
       name="password"
       type="password"
       id="input-password"
       placeholder="Password"
       [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
       [required]="getConfigValue('forms.validation.password.required')"
       [minlength]="getConfigValue('forms.validation.password.minLength')"
       [maxlength]="getConfigValue('forms.validation.password.maxLength')"
       [attr.aria-invalid]="password.invalid && password.touched ? true : null"
       class="form-control">
    <ng-container *ngIf="password.invalid && password.touched ">
      <p class="error-message" *ngIf="password.errors?.required">
        Password is required!
      </p>
      <p class="error-message" *ngIf="(password.errors?.minlength || password.errors?.maxlength)">
        Password should contains
        from {{ getConfigValue('forms.validation.password.minLength') }}
        to {{ getConfigValue('forms.validation.password.maxLength') }}
        characters
      </p>
    </ng-container>
  </div>

  <div class="form-control-group accept-group">
    <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" 
  *ngIf="rememberMe">Remember me</nb-checkbox>
  </div>

  <button nbButton
    fullWidth
    status="success"
    [class.btn-pulse]="submitted"
    class="btn btn-block btn-hero-success"
    style="cursor: pointer;">
    Sign In
  </button>
</form>

更多是这里文档

推荐阅读