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

1
Front/skydivelogs-app/angular.json
View File

@@ -76,7 +76,6 @@
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"scripts": [], "scripts": [],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.css" "src/styles.css"
], ],
"assets": [ "assets": [

85
Front/skydivelogs-app/src/app/create-user/create-user.component.html
View File

@@ -1,53 +1,52 @@
<form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()"> <form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()">
<div class="form-group"> <p>
<label for="firstname">Firstname</label> <mat-form-field>
<input type="text" formControlName="firstname" class="form-control" <mat-label>Firstname</mat-label>
<input matInput type="text" formControlName="firstname"
[ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
<div *ngIf="submitted && formCtrls.firstname.errors" class="invalid-feedback"> <mat-error *ngIf="formCtrls.firstname.hasError('required')">Firstname is required</mat-error>
<div *ngIf="formCtrls.firstname.errors.required">Firstname is required</div> <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">Firstname must have min 3 characters</mat-error>
<div *ngIf="formCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div> </mat-form-field>
</div> </p>
</div> <p>
<div class="form-group"> <mat-form-field>
<label for="lastname">Lastname</label> <mat-label>Lastname</mat-label>
<input type="text" formControlName="lastname" class="form-control" <input matInput type="text" formControlName="lastname"
[ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
<div *ngIf="submitted && formCtrls.lastname.errors" class="invalid-feedback"> <mat-error *ngIf="formCtrls.lastname.hasError('required')">Lastname is required</mat-error>
<div *ngIf="formCtrls.lastname.errors.required">Lastname is required</div> <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">Lastname must have min 3 characters</mat-error>
<div *ngIf="formCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div> </mat-form-field>
</div> </p>
</div> <p>
<div class="form-group"> <mat-form-field>
<label for="email">E-mail</label> <mat-label>E-mail</mat-label>
<input type="text" formControlName="email" class="form-control" <input matInput type="email" formControlName="email"
[ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
<div *ngIf="submitted && formCtrls.email.errors" class="invalid-feedback"> <mat-error *ngIf="formCtrls.email.hasError('required')">E-mail is required</mat-error>
<div *ngIf="formCtrls.email.errors.required">E-mail is required</div> <mat-error *ngIf="formCtrls.email.hasError('email')">It's not a e-mail</mat-error>
<div *ngIf="formCtrls.email.errors.email">It's not a e-mail</div> </mat-form-field>
</div> </p>
</div> <p>
<mat-form-field>
<div class="form-group"> <mat-label>Username</mat-label>
<label for="username">Username</label> <input matInput type="text" formControlName="username"
<input type="text" formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
<div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback"> <mat-error *ngIf="formCtrls.username.hasError('required')">Username is required</mat-error>
<div *ngIf="formCtrls.username.errors.required">Username is required</div> <mat-error *ngIf="formCtrls.username.hasError('minlength')">Username must have min 3 characters</mat-error>
<div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div> </mat-form-field>
</div> </p>
</div> <p>
<div class="form-group"> <mat-form-field>
<label for="password">Password</label> <mat-label>Password</mat-label>
<input type="password" formControlName="password" class="form-control" <input matInput type="password" formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
<div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback"> <mat-error *ngIf="formCtrls.password.hasError('required')">Password is required</mat-error>
<div *ngIf="formCtrls.password.errors.required">Password is required</div> <mat-error *ngIf="formCtrls.password.hasError('pattern')">The pattern of the password ([A-Za-z0-9_-]
<div *ngIf="formCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})</mat-error>
{{ '{' }}8,15{{ '}' }})</div> </mat-form-field>
</div> </p>
</div>
<button [disabled]="loading" class="btn btn-primary"> <button [disabled]="loading" mat-button>
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span> <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Create user and login Create user and login
</button> </button>

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

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

2
Front/skydivelogs-app/src/app/login-user/login-user.component.ts
View File

@@ -41,7 +41,7 @@ export class LoginUserComponent implements OnInit {
] ]
] ]
}, },
{ updateOn: "submit" } { updateOn: "blur" }
); );
// get return url from route parameters or default to '/' // get return url from route parameters or default to '/'

55
Front/skydivelogs-app/src/assets/css/custom-theme.scss
View File

@@ -1,10 +1,51 @@
@import '~@angular/material/theming'; @import "~@angular/material/theming";
@include mat-core(); @include mat-core();
$custom-theme-primary: mat-palette($mat-grey, 900); /* ======== Angular material custom themes ======== */
$custom-theme-accent:mat-palette($mat-pink, A200, A100, A400); $my-custom-primary: mat-palette($mat-deep-purple);
$custom-theme-warn: mat-palette($mat-red); $my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); $my-custom-warn: mat-palette($mat-lime);
@include angular-material-theme($custom-theme); $my-custom-theme: mat-light-theme(
$my-custom-primary,
$my-custom-accent,
$my-custom-warn
);
@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background
);
}
@mixin angular-material-theme($theme) {
@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
@include mat-button-theme($theme);
@include mat-button-toggle-theme($theme);
@include mat-card-theme($theme);
@include mat-checkbox-theme($theme);
@include mat-chips-theme($theme);
@include mat-datepicker-theme($theme);
@include mat-dialog-theme($theme);
@include mat-grid-list-theme($theme);
@include mat-icon-theme($theme);
@include mat-input-theme($theme);
@include mat-list-theme($theme);
@include mat-menu-theme($theme);
@include mat-progress-bar-theme($theme);
@include mat-progress-spinner-theme($theme);
@include mat-radio-theme($theme);
@include mat-select-theme($theme);
@include mat-sidenav-theme($theme);
@include mat-slide-toggle-theme($theme);
@include mat-slider-theme($theme);
@include mat-tabs-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-tooltip-theme($theme);
}