Commit 1c797cb1 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Update form style + login page style

parent 55e30f65
{
"name": "webapp",
"version": "2.1.1",
"version": "2.1.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
......@@ -21,11 +21,11 @@
<p class="control has-icons-right">
<input id="lastname" class="input" type="text" formControlName="lastname"
(keyup)="toUppercase('lastname')"
[ngClass]="{'is-danger': fieldIsInvalid('lastname'), 'is-success': fieldIsValid('lastname')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('lastname')">
[ngClass]="{'has-error': fieldIsInvalid('lastname'), 'is-valid': fieldIsValid('lastname')}">
<span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('lastname')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('lastname')">
<span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('lastname')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
......@@ -46,11 +46,11 @@
<p class="control has-icons-right">
<input id="firstname" class="input" type="text" (keyup)="toUppercase('firstname')"
formControlName="firstname"
[ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstname')">
[ngClass]="{'has-error': fieldIsInvalid('firstname'), 'is-valid': fieldIsValid('firstname')}">
<span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('firstname')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstname')">
<span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('firstname')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
......@@ -70,11 +70,11 @@
class="required-field">*</span></label>
<p class="control has-icons-right">
<input id="email" class="input" type="email" formControlName="email"
[ngClass]="{'is-danger': fieldIsInvalid('email'), 'is-success': fieldIsValid('email')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('email')">
[ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
<span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('email')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('email')">
<span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('email')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
......@@ -95,12 +95,12 @@
address</span><span class="required-field">*</span></label>
<p class="control has-icons-right">
<input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
[ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
<span class="icon is-small is-right has-text-success"
[ngClass]="{'has-error': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-valid': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
<span class="icon is-small is-right is-icon-success"
*ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger"
<span class="icon is-small is-right is-icon-warning"
*ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
<i class="fas fa-exclamation-circle"></i>
</span>
......@@ -155,11 +155,11 @@
</div>
<p class="control has-icons-right subject-input-control" *ngIf="displaySubjectInput === true">
<input id="subjectInput" class="input" type="text" formControlName="subject"
[ngClass]="{'is-danger': fieldIsInvalid('subject'), 'is-success': fieldIsValid('subject')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('subject')">
[ngClass]="{'has-error': fieldIsInvalid('subject'), 'is-valid': fieldIsValid('subject')}">
<span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('subject')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('subject')">
<span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('subject')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
......@@ -176,11 +176,11 @@
class="required-field">*</span></label>
<p class="control has-icons-right">
<textarea id="text" class="textarea has-fixed-size" type="textarea" formControlName="text"
[ngClass]="{'is-danger': fieldIsInvalid('text'), 'is-success': fieldIsValid('text')}" rows=6></textarea>
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('text')">
[ngClass]="{'has-error': fieldIsInvalid('text'), 'is-valid': fieldIsValid('text')}" rows=6></textarea>
<span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('text')">
<i class="fas fa-check-circle"></i>
</span>
<span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('text')">
<span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('text')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
......@@ -194,7 +194,7 @@
<div class="field">
<input id="consent" class="is-checkradio is-success" type="checkbox" formControlName="consent">
<input id="consent" class="is-checkradio is-valid" type="checkbox" formControlName="consent">
<label for="consent" class="label consent-label">
<p>
<span i18n="@@consent.partOne">By checking this box, I accept the</span><a i18n="@@consent.partTwo"
......
......@@ -69,18 +69,8 @@ h3 {
}
.button-gl {
width: 8rem;
&:first-of-type {
margin-right: 1.25rem;
}
}
}
.title-label.is-danger {
&:hover,
&:focus {
background-color: white;
color: $tomato-color;
}
}
......@@ -24,8 +24,11 @@ img {
column-width: 20rem;
}
.item {
.button {
width: 60%;
}
.item {
/* Masonry bricks or child elements */
.organization {
background-color: white;
......@@ -33,11 +36,11 @@ img {
padding: 0.75rem 2rem;
.column {
padding: 0rem 0.75rem 0.75rem 0.75rem;
padding: 0 0.75rem 0.75rem 0.75rem;
}
&:hover {
box-shadow: inset 0px 0px 3px 0px grey;
box-shadow: inset 0 0 3px 0 grey;
}
.button {
......@@ -58,17 +61,13 @@ img {
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
p {
text-align: left;
word-break: break-word;
}
.logo-content {
min-height: 100px;
max-height: 100px;
......@@ -89,9 +88,4 @@ p {
border: none;
border-radius: 0;
}
}
.button {
width: 60%;
}
\ No newline at end of file
......@@ -38,7 +38,7 @@
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content has-text-left">
<div class="field dropdown-item" *ngFor="let prop of properties">
<input class="is-checkradio is-danger is-small" [id]="prop" type="checkbox" name="selectedColumns"
<input class="is-checkradio has-error is-small" [id]="prop" type="checkbox" name="selectedColumns"
[checked]="columnIsSelected(prop) !== -1" (click)="toogleColumn(prop)">
<label [for]="prop">{{ prop }}</label>
</div>
......
......@@ -184,7 +184,7 @@
<p *ngFor="let constraint of metadata.legalConstraints">
{{ constraint }}
</p>
<a [href]="licenceUrl" target="_blank" class="button btn-blue-text" *ngIf="licenceUrl"
<a [href]="licenceUrl" target="_blank" class="button btn-blue-text btn-consult-license" *ngIf="licenceUrl"
i18n="@@dataset.info.consultLicense">
Consult the license
</a>
......
......@@ -75,9 +75,8 @@ p {
}
}
.btn-blue-text {
width: 9.5rem;
height: 2.75rem;
.btn-blue-text.btn-consult-license {
margin-top: 0.4rem;
}
.summary {
......
......@@ -21,13 +21,6 @@ export const AppRoutes = {
en: 'Sign up',
},
},
accountValidation: {
uri: 'valider-mon-compte',
title: {
fr: 'Valider mon compte',
en: 'Account validation',
},
},
passwordForgotten: {
uri: 'mot-de-passe-oublie',
title: {
......
<h1 class="has-text-centered" i18n="@@accountValidation">Account validation</h1>
<div class="account-validation-container" [ngSwitch]="accountValidatationStatus">
<div class="columns">
<div class="column has-text-centered">
<div *ngSwitchCase="'pending'" i18n="@@accountValidation.pending">
Please wait while we are validating your account.
</div>
<div *ngSwitchCase="'validated'">
<p i18n="@@accountValidation.validated">Your account has been successfully validated. You can now log in with
your credentials.</p>
<p class="redirection-link">
<a [routerLink]="['/', AppRoutes.signin.uri]" i18n="@@accountValidation.goToSignIn">Go to sign in page</a>
</p>
</div>
<div *ngSwitchCase="'failed'">
<div [ngSwitch]="errorType">
<div *ngSwitchCase="'noTokenProvided'">
<p i18n="@@accountValidation.failed">
The parameters provided are invalid, please use a valid link or go through the sign up process.
</p>
<p class="redirection-link">
<a [routerLink]="['/', AppRoutes.signup.uri]" i18n="@@accountValidation.goToSignUp">Go to sign up page</a>
</p>
</div>
<div *ngSwitchCase="'existingAccount'">
<p i18n="@@accountValidation.existingAccount">
An account already exist for this email, please use your credentials to log in or signup with another
email.
</p>
<p class="redirection-link has-many-links">
<a [routerLink]="['/', AppRoutes.signup.uri]" i18n="@@accountValidation.goToSignUp">Go to sign up page</a>
<a [routerLink]="['/', AppRoutes.signin.uri]" i18n="@@accountValidation.goToSignIn">Go to sign in page</a>
</p>
</div>
<div *ngSwitchDefault>
<p i18n="@@accountValidation.invalidOrExpired">
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>
<p class="redirection-link">
<a [routerLink]="['/', AppRoutes.signup.uri]" i18n="@@accountValidation.goToSignUp">Go to sign up page</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
h1 {
font-size: 2rem;
margin: 0;
padding: 1.25rem;
background-color: white;
}
.account-validation-container {
background-color: white;
padding: 0 1rem 1rem 1rem;
margin: 1.5rem;
.columns:first-of-type {
margin-top: 0;
}
.redirection-link {
margin-top: 1rem;
}
.has-many-links {
a {
margin: 0 1rem;
}
}
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AccountValidationComponent } from './account-validation.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { UserService } from '../../../services';
export class UserServiceMock {
constructor() { }
validateAccount() {
return of();
}
}
describe('AccountValidationComponent', () => {
let component: AccountValidationComponent;
let fixture: ComponentFixture<AccountValidationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
ReactiveFormsModule,
RouterTestingModule,
],
providers: [
{
provide: UserService,
useClass: UserServiceMock,
},
],
declarations: [AccountValidationComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountValidationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../../../services';
import { AppRoutes } from '../../../../routes';
@Component({
selector: 'app-account-validation',
templateUrl: './account-validation.component.html',
styleUrls: ['./account-validation.component.scss'],
})
export class AccountValidationComponent implements OnInit {
AppRoutes = AppRoutes;
token: string; // uuid4 allowing to identify the account that needs to be validated
accountValidatationStatus = 'pending'; // pending, validated, failed
errorType = null;
constructor(
private _activatedRoute: ActivatedRoute,
private _userService: UserService,
) { }
ngOnInit() {
this._activatedRoute.queryParams.subscribe((params) => {
this.token = params.token;
if (this.token) {
this._userService.validateAccount(this.token).subscribe(
(res) => {
this.accountValidatationStatus = 'validated';
},
(err) => {
this.accountValidatationStatus = 'failed';
if (err.error && err.error.message) {
this.errorType = err.error.message;
} else {
this.errorType = 'default';
}
},
);
} else {
this.accountValidatationStatus = 'failed';
this.errorType = 'noTokenProvided';
}
});
}
}
<h1 class="has-text-centered" i18n="@@login.signIn">Sign In</h1>
<div class="page-container has-padding has-white-background">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
<div class="login-form-container">
<form [formGroup]="form" (ngSubmit)="login()">
<div class="columns">
<div class="column is-8-touch is-offset-2-touch is-6 is-offset-3">
<div class="notification is-danger" *ngIf="errorStatus !== null">
<button class="delete" (click)="closeErrorMessage()"></button>
<span *ngIf="errorStatus === 400; else genericErrorTemplate" i18n="@@login.incorrectCredentials">Your
credentials are not correct.</span>
<ng-template #genericErrorTemplate><span i18n="@@login.internalError">Something went wrong, please try again
later.</span></ng-template>
<div class="errors-container">
<ng-container [ngSwitch]="accountValidatationStatus">
<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>
<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>
<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>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="errorStatus !== null">
<p class="is-warning" *ngIf="errorStatus === 400; else genericErrorTemplate" i18n="@@login.incorrectCredentials">
Your credentials are not correct.
</p>
<ng-template #genericErrorTemplate>
<p class="is-warning" i18n="@@login.internalError">
Something went wrong, please try again later.
</p>
</ng-template>
</ng-container>
</div>
<div class="columns">
<div class="column is-6">
<form [formGroup]="form" (ngSubmit)="login()">
<div class="column-title">
<span i18n="@@login.login">Log in</span>
</div>
<div class="field">
<label class="label" for="username">Email:</label>
<p class="control has-icons-left">
<input id="username" class="input" type="email" formControlName="username" [ngClass]="{'is-danger': fieldIsInvalid('username'), 'is-success': fieldIsValid('username')}">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<label class="label" for="username">Email</label>
<p class="control">
<input id="username" class="input" type="email" formControlName="username"
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">
......@@ -31,12 +63,11 @@
</div>
<div class="field">
<label class="label" for="password" i18n="@@login.password">Password:</label>
<p class="control has-icons-left">
<input id="password" class="input" type="password" formControlName="password" [ngClass]="{'is-danger': fieldIsInvalid('password'), 'is-success': fieldIsValid('password')}">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
<label class="label" for="password" i18n="@@login.password">Password</label>
<p class="control">
<input id="password" class="input" type="password" formControlName="password"
placeholder="Enter your password" i18-placeholder="@@login.passwordPlaceholder"
[ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
</p>
<div *ngIf="fieldIsInvalid('password')" class="form-incorrect-field-message">
<div *ngIf="password.errors['required']" i18n="@@login.passwordRequired">
......@@ -44,29 +75,32 @@
</div>
</div>
</div>
<div class="has-text-centered button-wrapper">
<button class="button button-gl sign-in-btn" type="submit" [ngClass]="{'is-loading': formDisabled}" [disabled]="form.invalid || formDisabled"
i18n="@@login.signInBtn">Sign In</button>
<a href preventDefault [routerLink]="['/', AppRoutes.passwordForgotten.uri]">
<span i18n="@@login.passwordForgotten">Password forgotten?</span>
</a>
<div class="button-wrapper">
<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>
</div>
</form>
</div>
<div class="column is-6">
<div class="right-container">
<div i18n="@@login.noAccount" class="has-text-centered column-title">
<span>Don't have an account yet?</span>
</div>
<div class="sign-up-link-container">
<a class="button btn-blue-text" [routerLink]="['/', AppRoutes.signup.uri]">
<span i18n="@@header.signUp">Sign Up</span>
</a>
</div>
<span i18n="@@login.noAccountInfo" class="no-account-info">Creating an account allows you to access restricted
data and, if you wish,
to engage in a dialogue
with us in order to continuously improve our services and inform you of developments that may be of your
interest.
Creating an account is free and without obligation. Unsubscription is possible at any time on request.</span>
</div>
</div>
</form>
<hr>
<div class="has-text-centered">
<div i18n="@@login.noAccount">Don't have an account yet?</div>
<span i18n="@@login.noAccountInfo" class="no-account-info">Creating an account allows you to access restricted data and, if you wish,
to engage in a dialogue
with us in order to continuously improve our services and inform you of developments that may be of your interest.
Creating an account is free and without obligation. Unsubscription is possible at any time on request.</span>
<a class="button button-gl is-outlined" [routerLink]="['/', AppRoutes.signup.uri]" routerLinkActive="active-link">
<span i18n="@@header.signUp">Sign Up</span>
</a>
</div>
</div>
</div>
\ No newline at end of file
@import '../../../../../scss/variables.scss';
h1 {
font-size: 2rem;
margin: 0;
padding: 1.25rem;
background-color: white;
}
.login-form-container {
background-color: white;
padding: 0 1rem 1rem 1rem;
margin: 1.5rem;
.column-title {
margin-bottom: 1.5rem;
.columns:first-of-type {
margin-top: 0;
span {
font-weight: bold;
font-size: 1.125rem;
color: $brand-color;
}
}