我有一个在登录时使用用户名和密码的 spring boot api。那么如何更改 ngx 管理员以接受用户名而不是电子邮件作为凭据?
问问题
1248 次
1 回答
1
我有一个类似的问题。最终创建自定义身份验证组件,因为需要更正布局(其中包含与电子邮件相关的内容)。
登录组件.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>
更多是这里文档
于 2019-05-04T19:39:25.187 回答