Как я могу изменить компонент входа, чтобы он использовал имя пользователя, а не адрес электронной почты? - PullRequest
Новая
       24

Как я могу изменить компонент входа, чтобы он использовал имя пользователя, а не адрес электронной почты?

0 голосов
/ 04 мая 2019

У меня есть весенний загрузочный API, который использует имя пользователя и пароль при входе в систему. Так как же мне изменить администратора ngx, чтобы он принимал имя пользователя вместо адреса электронной почты для учетных данных?

1 Ответ

0 голосов
/ 04 мая 2019

У меня была похожая проблема. В конечном итоге создайте собственный компонент аутентификации из-за необходимости корректного размещения (в нем есть элементы, связанные с электронной почтой).

Вход в систему component.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>

Больше здесь Документы

...