Commit 1385b305 authored by ncastejon's avatar ncastejon
Browse files

us-390_Improve connect page

parent 5a29d183
<div class="page-container has-padding has-white-background">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
<div class="login-container">
<div class="errors-container">
<ng-container [ngSwitch]="accountValidatationStatus">
......@@ -38,69 +37,88 @@
</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="login-page">
<div class="login-page-login">
<div class="field">
<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">
Email is required.
</div>
<div *ngIf="username.errors['email']" i18n="@@login.incorrectEmail">
You need to provide a valid email.
<div class="wrapper">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
<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">
<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">
Email is required.
</div>
<div *ngIf="username.errors['email']" i18n="@@login.incorrectEmail">
You need to provide a valid email.
</div>
</div>
</div>
</div>
<div class="field">
<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" i18n-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">
Password is required.
<div class="field">
<label class="label" for="password" i18n="@@login.password">Password</label>
<div class="control password-control">
<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')}">
<p class="field show-password">
<input class="is-checkradio is-small" id="exampleCheckbox" type="checkbox" name="exampleCheckbox"
[value] = "showPassword"
(change)="showPassword = !showPassword">
<label for="exampleCheckbox">Afficher le mot de passe</label>
</p>
</div>
<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]">
<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 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>
<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 class="login-page-signup">
<div>
<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>
</div>
<div class="sign-up-link-container">
<a class="button button-signup btn-blue-text" [routerLink]="['/', AppRoutes.signup.uri]">
<span i18n="@@header.signUp">Sign Up</span>
</a>
</div>
<span class="has-text-weight-bold" i18n="@@login.noAccountInfo.1">
Why create an account ?
</span>
<span i18n="@@login.noAccountInfo.2">
Your account allows you to access restricted data.
</span>
<span i18n="@@login.noAccountInfo.3">
Creating an account is free and without obligation.
</span>
<span i18n="@@login.noAccountInfo.4">
Unsubscription is possible at any time on request.
</span>
</div>
</div>
</div>
\ No newline at end of file
@import '../../../../../scss/variables.scss';
@import '../../../../../../node_modules/bulma/sass/utilities/_all.sass';
.login-container {
height: 100%;
}
.login-page {
height: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.login-page-login {
grid-column: 1 / 4;
background-color: white;
padding-top: 2rem;
.wrapper {
max-width: 500px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: auto;
}
.wrapper form {
width: 100%;
margin-top: 1rem;
}
.password-control {
display: flex;
}
.show-password {
display: flex;
margin-left: 1.5rem;
label {
line-height: 1;
text-transform: unset;
}
}
.is-checkradio[type="radio"] + label,
.is-checkradio[type="checkbox"] + label {
margin: 0;
}
.is-checkradio[type="checkbox"] + label::before {
width: 1rem;
height: 1rem;
top: 0.3rem;
}
.is-checkradio[type="checkbox"].is-small + label::after {
width: 0.3069375rem;
height: 0.4911rem;
top: 0.5rem;
left: 0.4rem;
}
}
.login-page-signup {
grid-column: 4 / 6;
padding: 1.25rem;
background-color: $grey-background-color;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 4.5rem;
img {
margin-bottom: 2rem;
}
}
@media screen and (max-width: $desktop) {
.login-page-login {
grid-column: 1 / 6;
padding: 1rem;
padding-top: 0;
}
.login-page-signup {
grid-column: 1 / 6;
}
}
.login-page-signup .no-account {
font-size: 1.375rem;
font-weight: 700;
}
.column-title {
margin-bottom: 1.5rem;
......@@ -18,7 +110,7 @@
margin-top: 1.4rem;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 1rem;
.button:first-child {
margin-right: 1rem;
......@@ -34,9 +126,13 @@
background-color: white;
}
.right-container {
padding: 1.25rem;
background-color: $grey-background-color;
.btn-blue-text.button-signup {
background-color: $blue-color;
font-weight: 600;
span {
color: white;
}
}
.sign-up-link-container {
......@@ -44,11 +140,6 @@
margin-bottom: 1.5rem;
}
.no-account-info {
margin-bottom: 1rem;
display: block;
}
p.is-warning {
color: $warning-color;
}
......
......@@ -21,6 +21,8 @@ export class LoginComponent implements OnInit {
title: pageTitles.login,
};
showPassword: boolean;
// Account validation
token: string; // uuid4 allowing to identify the account that needs to be validated
accountValidatationStatus = 'pending'; // pending, validated, failed
......@@ -40,6 +42,7 @@ export class LoginComponent implements OnInit {
}
ngOnInit() {
this.showPassword = false;
this._activatedRoute.queryParams.subscribe((params) => {
this.token = params.token;
......
This diff is collapsed.
......@@ -669,15 +669,21 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<source>Cancel</source>
<target>Cancel</target>
</trans-unit>
<trans-unit id="login.noAccountInfo" datatype="html">
<source>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.</source>
<target>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.</target>
<trans-unit id="login.noAccountInfo.1" datatype="html">
<source>Why create an account ?</source>
<target>Why create an account ?</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.2" datatype="html">
<source>Your account allows you to access restricted data.</source>
<target>Your account allows you to access restricted data.</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.3" datatype="html">
<source>Creating an account is free and without obligation.</source>
<target>Creating an account is free and without obligation.</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.4" datatype="html">
<source>Unsubscription is possible at any time on request.</source>
<target>Unsubscription is possible at any time on request.</target>
</trans-unit>
<trans-unit id="login.noAccount" datatype="html">
<source>Don't have an account yet?</source>
......
......@@ -49,7 +49,7 @@
</trans-unit>
<trans-unit id="header.signUp" datatype="html">
<source>Sign Up</source>
<target>Inscription</target>
<target>Inscrivez-vous</target>
</trans-unit>
<trans-unit id="header.signOut" datatype="html">
<source>Sign Out</source>
......@@ -544,7 +544,7 @@ données sont en accès restreint. Pour consulter ou utiliser l’intégralité
<target>La Métropole de Lyon a ouvert son portail à tous les acteurs du territoire qui souhaitent diffuser leurs données,
en open data ou en accès restreint. Si vous souhaitez mettre à disposition vos données sur cette plateforme mutualisée, n’hésitez pas à </target>
</trans-unit>
<trans-unit id="changelog.description" datatype="html">
<trans-unit id="changelog.description" datatype="html">
<source>Your recommendations to improve this portal are regularly integrated.
Here is the list of the last evolutions of the portal. If you wish to contribute to the optimization of the portal, do not hesitate to </source>
<target>Vos recommandations afin d’améliorer ce portail sont régulièrement intégrées.
......@@ -678,13 +678,21 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Cancel</source>
<target>Annuler</target>
</trans-unit>
<trans-unit id="login.noAccountInfo" datatype="html">
<source>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.</source>
<target>Créer un compte c'est vous permettre d'accéder aux données dont l'accès est limité, et, si vous le souhaitez, engager un dialogue avec vous afin de nous améliorer en continu et vous prévenir des évolutions pouvant vous intéresser.
La création d'un compte est gratuite et sans engagement. La désinscription est possible à tout moment sur demande.</target>
<trans-unit id="login.noAccountInfo.1" datatype="html">
<source>Why create an account ?</source>
<target>Pourquoi créer un compte ?</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.2" datatype="html">
<source>Your account allows you to access restricted data.</source>
<target>Votre compte vous permet d'accéder aux données dont l'accès est limité.</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.3" datatype="html">
<source>Creating an account is free and without obligation.</source>
<target>La création d'un compte est gratuite et sans engagement.</target>
</trans-unit>
<trans-unit id="login.noAccountInfo.4" datatype="html">
<source>Unsubscription is possible at any time on request.</source>
<target>La désinscription est possible à tout moment sur demande.</target>
</trans-unit>
<trans-unit id="login.noAccount" datatype="html">
<source>Don't have an account yet?</source>
......@@ -1099,7 +1107,7 @@ La création d'un compte est gratuite et sans engagement. La désinscription est
<source>Your opinion of this website:</source>
<target>Votre sentiment sur ce site :</target>
</trans-unit>
<trans-unit id="feedback.bof" datatype="html">
<trans-unit id="feedback.bof" datatype="html">
<source>Meh...</source>
<target>Bof...</target>
</trans-unit>
......
......@@ -9,6 +9,7 @@ $grey-super-light-color: #b4b4b4;
$menu-selected-color: #c8c8d0;
$link-color: #0057a8;
$yellow-dd-color: #ffdc26;
$blue-color: #4668ab;
// Add a serif family
$family-sans-serif: 'Titillium Web',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment