sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Style sur le login

Browse Source
This commit is contained in:
Sébastien André
2020-04-01 09:57:27 +02:00
parent f9bf316a36
commit 2034552256
5 changed files with 123 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
Front/skydivelogs-app/src/app/login-user/login-user.component.html
View File

@@ -1,26 +1,34 @@
<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
<div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
<div *ngIf="formCtrls.username.errors.required">Username is required</div>
<div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
<div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
<div *ngIf="formCtrls.password.errors.required">Password is required</div>
<div *ngIf="formCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
{{ '{' }}8,15{{ '}' }})</div>
</div>
</div>
<p>
<mat-form-field>
<mat-label>Username</mat-label>
<input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
<mat-error *ngIf="formCtrls.username.hasError('required')">
Username is required
</mat-error>
<mat-error *ngIf="formCtrls.username.hasError('minlength')">
Username must have min 3 characters
</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Password</mat-label>
<input type="password" matInput formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
<mat-error *ngIf="formCtrls.password.hasError('required')">
Password is required
</mat-error>
<mat-error *ngIf="formCtrls.password.hasError('pattern')">
The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})
</mat-error>
</mat-form-field>
</p>
<button [disabled]="loading" mat-button>
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Login
</button>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
</form>