From 181220ffa9af56b95da6cb9ab11bae57d2e20427 Mon Sep 17 00:00:00 2001
From: Fabien Forestier <fforestier@MacBookAir.local>
Date: Tue, 15 Sep 2020 15:50:43 +0200
Subject: [PATCH] Add button for oidc
---
.../auth/login/login.component.html | 151 +++++++++++++-----
.../auth/login/login.component.scss | 14 +-
.../components/auth/login/login.component.ts | 44 ++---
...emplate.json => config.template copy.json} | 0
4 files changed, 146 insertions(+), 63 deletions(-)
rename src/assets/config/{config.template.json => config.template copy.json} (100%)
diff --git a/src/app/user/components/auth/login/login.component.html b/src/app/user/components/auth/login/login.component.html
index eb09a19b..7284aee0 100644
--- a/src/app/user/components/auth/login/login.component.html
+++ b/src/app/user/components/auth/login/login.component.html
@@ -1,10 +1,9 @@
<div class="login-container">
<div class="header-section">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
- </div>
+ </div>
<div class="login-page">
<div class="login-page-login">
-
<div class="wrapper">
<form [formGroup]="form" (ngSubmit)="login()">
<div class="column-title">
@@ -13,34 +12,58 @@
<div class="errors-container">
<ng-container [ngSwitch]="accountValidatationStatus">
- <p *ngSwitchCase="'pending'" class="is-warning" i18n="@@accountValidation.pending">
+ <p
+ *ngSwitchCase="'pending'"
+ class="is-warning"
+ i18n="@@accountValidation.pending"
+ >
Please wait while we are validating your account.
</p>
- <p *ngSwitchCase="'validated'" i18n="@@accountValidation.validated" class="is-success">
- Your account has been successfully validated. You can now log in with your credentials.
+ <p
+ *ngSwitchCase="'validated'"
+ i18n="@@accountValidation.validated"
+ class="is-success"
+ >
+ Your account has been successfully validated. You can now log in
+ with your credentials.
</p>
<ng-container *ngSwitchCase="'failed'">
<ng-container [ngSwitch]="errorType">
- <p *ngSwitchCase="'noTokenProvided'" i18n="@@accountValidation.failed" class="is-warning">
- The parameters provided are invalid, please use a valid link or go through the sign up process.
+ <p
+ *ngSwitchCase="'noTokenProvided'"
+ i18n="@@accountValidation.failed"
+ class="is-warning"
+ >
+ The parameters provided are invalid, please use a valid link
+ or go through the sign up process.
</p>
- <p *ngSwitchCase="'existingAccount'" i18n="@@accountValidation.existingAccount" class="is-warning">
- An account already exist for this email, please use your credentials to log in or signup with
- another
- email.
+ <p
+ *ngSwitchCase="'existingAccount'"
+ i18n="@@accountValidation.existingAccount"
+ class="is-warning"
+ >
+ An account already exist for this email, please use your
+ credentials to log in or signup with another email.
</p>
- <p *ngSwitchDefault i18n="@@accountValidation.invalidOrExpired" class="is-warning">
- We couldn't validate your account, whether the link is invalid or has expired (24h validity). Please
- go
- through the sign up process again.
+ <p
+ *ngSwitchDefault
+ i18n="@@accountValidation.invalidOrExpired"
+ class="is-warning"
+ >
+ We couldn't validate your account, whether the link is
+ invalid or has expired (24h validity). Please go through the
+ sign up process again.
</p>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="errorStatus !== null">
- <p class="is-warning" *ngIf="errorStatus === 400; else genericErrorTemplate"
- i18n="@@login.incorrectCredentials">
+ <p
+ class="is-warning"
+ *ngIf="errorStatus === 400; else genericErrorTemplate"
+ i18n="@@login.incorrectCredentials"
+ >
Your credentials are not correct.
</p>
<ng-template #genericErrorTemplate>
@@ -58,58 +81,112 @@
placeholder="Enter your email address" i18n-placeholder="@@login.emailPlaceholder"
[ngClass]="{'has-error': fieldIsInvalid('username'), 'is-valid': fieldIsValid('username')}">
</p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('username')">
- <div *ngIf="username.errors['required']" i18n="@@login.emailRequired">
+ <div
+ class="form-incorrect-field-message"
+ *ngIf="fieldIsInvalid('username')"
+ >
+ <div
+ *ngIf="username.errors['required']"
+ i18n="@@login.emailRequired"
+ >
Email is required.
</div>
- <div *ngIf="username.errors['email']" i18n="@@login.incorrectEmail">
+ <div
+ *ngIf="username.errors['email']"
+ i18n="@@login.incorrectEmail"
+ >
You need to provide a valid email.
</div>
</div>
</div>
<div class="field">
- <label class="label" for="password" i18n="@@login.password">Password</label>
- <span class="password-info">Votre mot de passe doit contenir au minimum :</span><span class="password-info has-text-weight-bold"> 6 caractères, un caractère spécial, un caractère en majuscule et un chiffre.</span>
+ <label class="label" for="password" i18n="@@login.password"
+ >Password</label
+ >
+ <span class="password-info"
+ >Votre mot de passe doit contenir au minimum :</span
+ ><span class="password-info has-text-weight-bold">
+ 6 caractères, un caractère spécial, un caractère en majuscule et
+ un chiffre.</span
+ >
<div class="password-input-wrapper">
<div class="control password-control">
- <input id="password" class="input" type="password" formControlName="password"
- type="{{ showPassword ? 'text' : 'password' }}" placeholder="Enter your password"
+ <input
+ id="password"
+ class="input"
+ type="password"
+ formControlName="password"
+ type="{{ showPassword ? 'text' : 'password' }}"
+ placeholder="Enter your password"
i18n-placeholder="@@login.passwordPlaceholder"
- [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
+ [ngClass]="{
+ 'has-error': fieldIsInvalid('password'),
+ 'is-valid': fieldIsValid('password')
+ }"
+ />
<p class="field show-password">
- <input class="is-checkradio is-small" id="exampleCheckbox" type="checkbox" name="exampleCheckbox"
- [value]="showPassword" (change)="showPassword = !showPassword">
- <label i18n="@@login.showPassword" for="exampleCheckbox">Display password</label>
+ <input
+ class="is-checkradio is-small"
+ id="exampleCheckbox"
+ type="checkbox"
+ name="exampleCheckbox"
+ [value]="showPassword"
+ (change)="showPassword = !showPassword"
+ />
+ <label i18n="@@login.showPassword" for="exampleCheckbox"
+ >Display password</label
+ >
</p>
</div>
- <div *ngIf="fieldIsInvalid('password')" class="form-incorrect-field-message">
- <div *ngIf="password.errors['required']" i18n="@@login.passwordRequired">
+ <div
+ *ngIf="fieldIsInvalid('password')"
+ class="form-incorrect-field-message"
+ >
+ <div
+ *ngIf="password.errors['required']"
+ i18n="@@login.passwordRequired"
+ >
Password is required.
</div>
</div>
</div>
</div>
<div class="button-wrapper">
- <a class="button btn-blue-text" [routerLink]="['/', AppRoutes.passwordForgotten.uri]">
+ <a
+ class="button btn-blue-text"
+ [routerLink]="['/', AppRoutes.passwordForgotten.uri]"
+ >
<span i18n="@@login.passwordForgotten">Password forgotten?</span>
</a>
- <button class="button button-gl" type="submit" [ngClass]="{'is-loading': formDisabled}"
- [disabled]="form.invalid || formDisabled" i18n="@@login.signInBtn">Sign In</button>
+ <button
+ class="button button-gl"
+ type="submit"
+ [ngClass]="{ 'is-loading': formDisabled }"
+ [disabled]="form.invalid || formDisabled"
+ i18n="@@login.signInBtn"
+ >
+ Sign In
+ </button>
+ <a class="button button-gl" [href]="oidcLoginUrl">OIDC</a>
</div>
</form>
</div>
-
</div>
<div class="login-page-signup">
<div>
- <img src="./assets/img/connexion_illu.svg" alt="">
+ <img src="./assets/img/connexion_illu.svg" alt="" />
</div>
<div class="has-text-centered column-title">
- <span i18n="@@login.noAccount" class="no-account">Don't have an account yet?</span>
+ <span i18n="@@login.noAccount" class="no-account"
+ >Don't have an account yet?</span
+ >
</div>
<div class="sign-up-link-container">
- <a class="button button-signup btn-blue-text" [routerLink]="['/', AppRoutes.signup.uri]">
+ <a
+ class="button button-signup btn-blue-text"
+ [routerLink]="['/', AppRoutes.signup.uri]"
+ >
<span i18n="@@header.signUp">Sign Up</span>
</a>
</div>
diff --git a/src/app/user/components/auth/login/login.component.scss b/src/app/user/components/auth/login/login.component.scss
index a0b88881..14225ba8 100644
--- a/src/app/user/components/auth/login/login.component.scss
+++ b/src/app/user/components/auth/login/login.component.scss
@@ -1,5 +1,5 @@
-@import '../../../../../scss/variables.scss';
-@import '../../../../../../node_modules/bulma/sass/utilities/_all.sass';
+@import "../../../../../scss/variables.scss";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all.sass";
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: $grey-dark-color;
@@ -22,7 +22,7 @@
.login-page-login {
grid-column: 1 / 4;
- background-color:$grey-background-color;
+ background-color: $grey-background-color;
display: flex;
.wrapper {
@@ -49,12 +49,12 @@
.password-control {
display: flex;
}
- .password-info{
+ .password-info {
font-style: italic;
- font-size:0.85rem;
+ font-size: 0.85rem;
}
.password-input-wrapper {
- margin-top:0.8rem;
+ margin-top: 0.8rem;
}
.show-password {
display: flex;
@@ -139,7 +139,7 @@
align-items: center;
margin-bottom: 1rem;
- .button:first-child {
+ .button:not(:last-child) {
margin-right: 1rem;
}
}
diff --git a/src/app/user/components/auth/login/login.component.ts b/src/app/user/components/auth/login/login.component.ts
index 8384ed47..24a4838c 100644
--- a/src/app/user/components/auth/login/login.component.ts
+++ b/src/app/user/components/auth/login/login.component.ts
@@ -7,14 +7,15 @@ import { AppRoutes } from '../../../../routes';
import { IPageHeaderInfo } from '../../../../shared/models';
import { pageTitles } from '../../../../../i18n/traductions';
import { NavigationHistoryService } from '../../../../core/services';
+import { APP_CONFIG } from "../../../../core/services/app-config.service";
@Component({
- selector: 'app-login',
- templateUrl: './login.component.html',
- styleUrls: ['./login.component.scss'],
+ selector: "app-login",
+ templateUrl: "./login.component.html",
+ styleUrls: ["./login.component.scss"],
})
export class LoginComponent implements OnInit {
-
+ oidcLoginUrl = `${APP_CONFIG.backendUrls.auth}login/oidc`;
form: FormGroup;
errorStatus: number = null;
AppRoutes = AppRoutes;
@@ -27,7 +28,7 @@ export class LoginComponent implements OnInit {
// Account validation
token: string; // uuid4 allowing to identify the account that needs to be validated
- accountValidatationStatus = 'pending'; // pending, validated, failed
+ accountValidatationStatus = "pending"; // pending, validated, failed
errorType = null;
constructor(
@@ -37,10 +38,9 @@ export class LoginComponent implements OnInit {
private _activatedRoute: ActivatedRoute,
private _navigationHistoryService: NavigationHistoryService,
) {
-
this.form = this._fb.group({
- username: ['', [Validators.required, Validators.email]],
- password: ['', Validators.required],
+ username: ["", [Validators.required, Validators.email]],
+ password: ["", Validators.required],
});
this.returnUrl = this._navigationHistoryService.getFromLast(0);
@@ -54,22 +54,25 @@ export class LoginComponent implements OnInit {
this._activatedRoute.queryParams.subscribe((params) => {
this.token = params.token;
+ /* TODO */
+ // On peut rajouter ici de la logique pour faire la connexion a Auth si reception d'un paramètre indiquant que l'on vient d'être connecté à provider OIDC
+
if (this.token) {
this._userService.validateAccount(this.token).subscribe(
(res) => {
- this.accountValidatationStatus = 'validated';
+ this.accountValidatationStatus = "validated";
},
(err) => {
- this.accountValidatationStatus = 'failed';
+ this.accountValidatationStatus = "failed";
if (err.error && err.error.message) {
this.errorType = err.error.message;
} else {
- this.errorType = 'default';
+ this.errorType = "default";
}
- },
+ }
);
} else {
- this.accountValidatationStatus = 'noTokenProvided';
+ this.accountValidatationStatus = "noTokenProvided";
}
});
}
@@ -90,7 +93,7 @@ export class LoginComponent implements OnInit {
this.errorStatus = 500;
}
this.form.enable();
- },
+ }
);
} else {
this.errorStatus = 400;
@@ -98,18 +101,21 @@ export class LoginComponent implements OnInit {
}
fieldIsValid(field: string) {
- return (this.form.get(field).touched) && this.form.get(field).valid;
+ return this.form.get(field).touched && this.form.get(field).valid;
}
fieldIsInvalid(field: string) {
- return (this.form.get(field).touched) && this.form.get(field).invalid;
+ return this.form.get(field).touched && this.form.get(field).invalid;
}
- get username() { return this.form.get('username'); }
- get password() { return this.form.get('password'); }
+ get username() {
+ return this.form.get("username");
+ }
+ get password() {
+ return this.form.get("password");
+ }
get formDisabled() {
return this.form.disabled;
}
-
}
diff --git a/src/assets/config/config.template.json b/src/assets/config/config.template copy.json
similarity index 100%
rename from src/assets/config/config.template.json
rename to src/assets/config/config.template copy.json
--
GitLab