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

Style de la page de login

Browse Source
This commit is contained in:
Sébastien André
2020-04-06 09:33:22 +02:00
parent 9455b543c1
commit 9c436ec001
5 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Firstname</mat-label> <mat-label>Firstname</mat-label>
<input matInput type="text" formControlName="firstname" <input matInput type="text" formControlName="firstname"
[ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" tabindex="0" />
<mat-error *ngIf="formCtrls.firstname.hasError('required')">Firstname is required</mat-error> <mat-error *ngIf="formCtrls.firstname.hasError('required')">Firstname is required</mat-error>
<mat-error *ngIf="formCtrls.firstname.hasError('minlength')">Firstname must have min 3 characters</mat-error> <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">Firstname must have min 3 characters</mat-error>
</mat-form-field> </mat-form-field>
@@ -12,7 +12,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Lastname</mat-label> <mat-label>Lastname</mat-label>
<input matInput type="text" formControlName="lastname" <input matInput type="text" formControlName="lastname"
[ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" tabindex="1" />
<mat-error *ngIf="formCtrls.lastname.hasError('required')">Lastname is required</mat-error> <mat-error *ngIf="formCtrls.lastname.hasError('required')">Lastname is required</mat-error>
<mat-error *ngIf="formCtrls.lastname.hasError('minlength')">Lastname must have min 3 characters</mat-error> <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">Lastname must have min 3 characters</mat-error>
</mat-form-field> </mat-form-field>
@@ -21,7 +21,7 @@
<mat-form-field> <mat-form-field>
<mat-label>E-mail</mat-label> <mat-label>E-mail</mat-label>
<input matInput type="email" formControlName="email" <input matInput type="email" formControlName="email"
[ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" tabindex="3" />
<mat-error *ngIf="formCtrls.email.hasError('required')">E-mail is required</mat-error> <mat-error *ngIf="formCtrls.email.hasError('required')">E-mail is required</mat-error>
<mat-error *ngIf="formCtrls.email.hasError('email')">It's not a e-mail</mat-error> <mat-error *ngIf="formCtrls.email.hasError('email')">It's not a e-mail</mat-error>
</mat-form-field> </mat-form-field>
@@ -30,7 +30,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Username</mat-label> <mat-label>Username</mat-label>
<input matInput type="text" formControlName="username" <input matInput type="text" formControlName="username"
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" tabindex="4" />
<mat-error *ngIf="formCtrls.username.hasError('required')">Username is required</mat-error> <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-error *ngIf="formCtrls.username.hasError('minlength')">Username must have min 3 characters</mat-error>
</mat-form-field> </mat-form-field>
@@ -39,7 +39,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" <input matInput type="password" formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="5" />
<mat-error *ngIf="formCtrls.password.hasError('required')">Password is required</mat-error> <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_-] <mat-error *ngIf="formCtrls.password.hasError('pattern')">The pattern of the password ([A-Za-z0-9_-]
{{ '{' }}8,15{{ '}' }})</mat-error> {{ '{' }}8,15{{ '}' }})</mat-error>

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

@@ -2,7 +2,8 @@
<p> <p>
<mat-form-field> <mat-form-field>
<mat-label>Username</mat-label> <mat-label>Username</mat-label>
<input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"> <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"
tabindex="0">
<mat-error *ngIf="formCtrls.username.hasError('required')"> <mat-error *ngIf="formCtrls.username.hasError('required')">
Username is required Username is required
</mat-error> </mat-error>
@@ -15,7 +16,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input type="password" matInput formControlName="password" <input type="password" matInput formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }"> [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="1">
<mat-error *ngIf="formCtrls.password.hasError('required')"> <mat-error *ngIf="formCtrls.password.hasError('required')">
Password is required Password is required
</mat-error> </mat-error>

10
Front/skydivelogs-app/src/app/login/login.component.css
View File

@@ -0,0 +1,10 @@
.main-div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mat-card-title {
margin: 0 !important;
}

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

@@ -1,16 +1,17 @@
<mat-card style="max-width: 500px;"> <div class="main-div">
<mat-card-header> <mat-card style="max-width: 500px;" flex="50">
<mat-card-title>Login to the Skydive log</mat-card-title> <mat-card-header style="padding:10px; background-color: rgba(0,0,0,.03);">
</mat-card-header> <mat-card-title>Login to the Skydive log</mat-card-title>
</mat-card-header>
<mat-card-content> <mat-card-content>
<mat-tab-group mat-align-tabs="center" animationDuration="0ms"> <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
<mat-tab label="Login with a user"> <mat-tab label="Login with a user">
<app-login-user></app-login-user> <app-login-user></app-login-user>
</mat-tab> </mat-tab>
<mat-tab label="Create and login a user"> <mat-tab label="Create and login a user">
<app-create-user></app-create-user> <app-create-user></app-create-user>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div>

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

@@ -10,19 +10,19 @@
// Fonts // Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), $fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), display-3: mat-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), display-2: mat-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), display-1: mat-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em), headline: mat-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em), title: mat-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em), subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em), subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em), body-2: mat-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), body-1: mat-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), button: mat-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), caption: mat-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)); input: mat-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
// Foreground Elements // Foreground Elements