Skip to content

GitLab

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

Update form style + login page style

parent 55e30f65
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 1c797cb1
{
"name": "webapp",
"version": "2.1.1",
"version": "2.1.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
src/app/core/components/contact/contact.component.html
View file @ 1c797cb1
......@@ -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"
......
src/app/core/components/contact/contact.component.scss
View file @ 1c797cb1
......@@ -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;
}
}
src/app/editorialisation/components/organizations/organizations.component.scss
View file @ 1c797cb1
......@@ -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
src/app/geosource/components/dataset-detail/dataset-data/dataset-data.component.html
View file @ 1c797cb1
......@@ -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>
......
src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
View file @ 1c797cb1
......@@ -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>
......
src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
View file @ 1c797cb1
......@@ -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 {
......
src/app/routes.ts
View file @ 1c797cb1
......@@ -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: {
......
src/app/user/components/auth/account-validation/account-validation.component.html deleted 100644 → 0
View file @ 55e30f65
<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
src/app/user/components/auth/account-validation/account-validation.component.scss deleted 100644 → 0
View file @ 55e30f65
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
src/app/user/components/auth/account-validation/account-validation.component.spec.ts deleted 100644 → 0
View file @ 55e30f65
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();
});
});
src/app/user/components/auth/account-validation/account-validation.component.ts deleted 100644 → 0
View file @ 55e30f65
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';
}
});
}
}
src/app/user/components/auth/login/login.component.html
View file @ 1c797cb1
<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
src/app/user/components/auth/login/login.component.scss
View file @ 1c797cb1
@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;
}
}