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

Ajout de style

Browse Source
This commit is contained in:
Sébastien André
2020-03-26 15:03:40 +01:00
parent 50785a4914
commit 9d0c5fbfb1
7 changed files with 81 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Front/skydivelogs-app/src/app/app.component.html
View File

@@ -1,15 +1,23 @@
<div> <div>
<header *ngIf="this.show()"> <header *ngIf="this.show()">
<svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32"> <div style="display: flex; flex-wrap: nowrap; flex-direction: row; align-items: baseline;">
<rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2" <div>
transform="translate(31.5 58)"></rect> <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
<rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2" <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
transform="translate(31.5 44)"></rect> transform="translate(31.5 58)"></rect>
<rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2" <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
transform="translate(31.5 30)"></rect> transform="translate(31.5 44)"></rect>
</svg> <rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
transform="translate(31.5 30)"></rect>
<h2 style="display: inline;">{{ title }}</h2> </svg>
<h2>{{ title }}</h2>
</div>
<div style="text-align: right;">
<h2 *ngIf="currentUser">{{ this.currentUser.firstName }}
{{ this.currentUser.lastName }}</h2>
<a *ngIf="currentUser" (click)="logout()" style="cursor: pointer;">Logout</a>
</div>
</div>
<nav class="navigation" [ngClass]="{'side-menu-active': showMenu}"> <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
<ul> <ul>
@@ -27,7 +35,6 @@
gears</a></li> gears</a></li>
<li><a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new <li><a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new
jump</a></li> jump</a></li>
<li *ngIf="currentUser"><a class="nav-item nav-link" (click)="logout()">Logout</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

6
Front/skydivelogs-app/src/app/app.component.ts
View File

@@ -12,9 +12,9 @@ import { ServiceComm } from "../services/service-comm.service";
styleUrls: ["./app.component.css"] styleUrls: ["./app.component.css"]
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
title = "app"; public title = "app";
showMenu = false; public showMenu = false;
currentUser: User; public currentUser: User;
constructor( constructor(
private router: Router, private router: Router,

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

@@ -2,47 +2,47 @@
<div class="form-group"> <div class="form-group">
<label for="firstname">Firstname</label> <label for="firstname">Firstname</label>
<input type="text" formControlName="firstname" class="form-control" <input type="text" formControlName="firstname" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.firstname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
<div *ngIf="submitted && createCtrls.firstname.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.firstname.errors" class="invalid-feedback">
<div *ngIf="createCtrls.firstname.errors.required">Firstname is required</div> <div *ngIf="formCtrls.firstname.errors.required">Firstname is required</div>
<div *ngIf="createCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div> <div *ngIf="formCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="lastname">Lastname</label> <label for="lastname">Lastname</label>
<input type="text" formControlName="lastname" class="form-control" <input type="text" formControlName="lastname" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.lastname.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
<div *ngIf="submitted && createCtrls.lastname.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.lastname.errors" class="invalid-feedback">
<div *ngIf="createCtrls.lastname.errors.required">Lastname is required</div> <div *ngIf="formCtrls.lastname.errors.required">Lastname is required</div>
<div *ngIf="createCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div> <div *ngIf="formCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email">E-mail</label> <label for="email">E-mail</label>
<input type="text" formControlName="email" class="form-control" <input type="text" formControlName="email" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.email.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
<div *ngIf="submitted && createCtrls.email.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.email.errors" class="invalid-feedback">
<div *ngIf="createCtrls.email.errors.required">E-mail is required</div> <div *ngIf="formCtrls.email.errors.required">E-mail is required</div>
<div *ngIf="createCtrls.email.errors.email">It's not a e-mail</div> <div *ngIf="formCtrls.email.errors.email">It's not a e-mail</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" <input type="text" formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
<div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
<div *ngIf="createCtrls.username.errors.required">Username is required</div> <div *ngIf="formCtrls.username.errors.required">Username is required</div>
<div *ngIf="createCtrls.username.errors.minlength">Username must have min 3 characters</div> <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" <input type="password" formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
<div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
<div *ngIf="createCtrls.password.errors.required">Password is required</div> <div *ngIf="formCtrls.password.errors.required">Password is required</div>
<div *ngIf="createCtrls.password.errors.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{{ '}' }})</div> {{ '{' }}8,15{{ '}' }})</div>
</div> </div>
</div> </div>

35
Front/skydivelogs-app/src/app/create-user/create-user.component.ts
View File

@@ -32,22 +32,25 @@ export class CreateUserComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.createForm = this.formBuilder.group({ this.createForm = this.formBuilder.group(
username: ["", [Validators.required, Validators.minLength(3)]], {
password: [ username: ["", [Validators.required, Validators.minLength(3)]],
"", password: [
[Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")] "",
], [Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
firstname: ["", [Validators.required, Validators.minLength(3)]], ],
lastname: ["", [Validators.required, Validators.minLength(3)]], firstname: ["", [Validators.required, Validators.minLength(3)]],
email: ["", [Validators.required, Validators.email]] lastname: ["", [Validators.required, Validators.minLength(3)]],
}); email: ["", [Validators.required, Validators.email]]
},
{ updateOn: "submit" }
);
// get return url from route parameters or default to '/' // get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
} }
get createCtrls() { get formCtrls() {
return this.createForm.controls; return this.createForm.controls;
} }
@@ -62,11 +65,11 @@ export class CreateUserComponent implements OnInit {
} }
let createUser = new User(); let createUser = new User();
createUser.login = this.createCtrls.username.value; createUser.login = this.formCtrls.username.value;
createUser.password = this.createCtrls.password.value; createUser.password = this.formCtrls.password.value;
createUser.firstName = this.createCtrls.firstname.value; createUser.firstName = this.formCtrls.firstname.value;
createUser.lastName = this.createCtrls.lastname.value; createUser.lastName = this.formCtrls.lastname.value;
createUser.email = this.createCtrls.email.value; createUser.email = this.formCtrls.email.value;
this.authenticationService this.authenticationService
.create(createUser) .create(createUser)

14
Front/skydivelogs-app/src/app/default/default.component.ts
View File

@@ -1,15 +1,15 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { ServiceComm } from "../../services/service-comm.service";
@Component({ @Component({
selector: 'app-default', selector: "app-default",
templateUrl: './default.component.html', templateUrl: "./default.component.html",
styleUrls: ['./default.component.css'] styleUrls: ["./default.component.css"]
}) })
export class DefaultComponent implements OnInit { export class DefaultComponent implements OnInit {
constructor(private serviceComm: ServiceComm) {}
constructor() { }
ngOnInit() { ngOnInit() {
this.serviceComm.UpdatedComponentTitle("Home");
} }
} }

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

@@ -2,19 +2,19 @@
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" <input type="text" formControlName="username" class="form-control"
[ngClass]="{ 'is-invalid': submitted && loginCtrls.username.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
<div *ngIf="submitted && loginCtrls.username.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
<div *ngIf="loginCtrls.username.errors.required">Username is required</div> <div *ngIf="formCtrls.username.errors.required">Username is required</div>
<div *ngIf="createCtrls.username.errors.minlength">Username must have min 3 characters</div> <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" <input type="password" formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && loginCtrls.password.errors }" /> [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
<div *ngIf="submitted && loginCtrls.password.errors" class="invalid-feedback"> <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
<div *ngIf="createCtrls.password.errors.required">Password is required</div> <div *ngIf="formCtrls.password.errors.required">Password is required</div>
<div *ngIf="createCtrls.password.errors.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{{ '}' }})</div> {{ '{' }}8,15{{ '}' }})</div>
</div> </div>
</div> </div>

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

@@ -36,17 +36,19 @@ export class LoginUserComponent implements OnInit {
username: ["", [Validators.required, Validators.minLength(3)]], username: ["", [Validators.required, Validators.minLength(3)]],
password: [ password: [
"", "",
[Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")] [
Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/
]
] ]
}, },
{ updateOn: "blur" } { updateOn: "submit" }
); );
// get return url from route parameters or default to '/' // get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
} }
get loginCtrls() { get formCtrls() {
return this.loginForm.controls; return this.loginForm.controls;
} }
@@ -60,7 +62,7 @@ export class LoginUserComponent implements OnInit {
this.loading = true; this.loading = true;
this.authenticationService this.authenticationService
.login(this.loginCtrls.username.value, this.loginCtrls.password.value) .login(this.formCtrls.username.value, this.formCtrls.password.value)
.pipe(first()) .pipe(first())
.subscribe( .subscribe(
data => { data => {