From 5089207a08f293c8c2b56cb852dd41c253d0cf64 Mon Sep 17 00:00:00 2001
From: FORESTIER Fabien <fabien.forestier@soprasteria.com>
Date: Wed, 27 Mar 2019 15:52:30 +0100
Subject: [PATCH] Add consent input on user signup
---
.../auth/sign-up/sign-up.component.html | 71 ++++++++++++++-----
.../auth/sign-up/sign-up.component.scss | 18 ++++-
.../auth/sign-up/sign-up.component.ts | 1 +
src/app/user/models/user.model.ts | 1 +
4 files changed, 72 insertions(+), 19 deletions(-)
diff --git a/src/app/user/components/auth/sign-up/sign-up.component.html b/src/app/user/components/auth/sign-up/sign-up.component.html
index 4c46b314..74eabbe3 100644
--- a/src/app/user/components/auth/sign-up/sign-up.component.html
+++ b/src/app/user/components/auth/sign-up/sign-up.component.html
@@ -5,9 +5,11 @@
<div class="columns is-multiline">
<div class="column is-12-mobile is-6-tablet">
<div class="field">
- <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span class="required-field">*</span></label>
+ <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span
+ class="required-field">*</span></label>
<p class="control has-icons-right">
- <input id="firstname" class="input" type="text" formControlName="firstName" (keyup)="toUppercase('firstName')"
+ <input id="firstname" class="input" type="text" formControlName="firstName"
+ (keyup)="toUppercase('firstName')"
[ngClass]="{'is-danger': fieldIsInvalid('firstName'), 'is-success': fieldIsValid('firstName')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstName')">
<i class="fas fa-check-circle"></i>
@@ -30,7 +32,8 @@
<div class="column is-12-mobile is-6-tablet">
<div class="field">
- <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span class="required-field">*</span></label>
+ <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span
+ class="required-field">*</span></label>
<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')}">
@@ -55,9 +58,11 @@
<div class="column is-12-mobile is-6-tablet">
<div class="field">
- <label class="label" for="email"><span i18n="@@form.email">Email </span><span class="required-field">*</span></label>
+ <label class="label" for="email"><span i18n="@@form.email">Email </span><span
+ 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')}">
+ <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')">
<i class="fas fa-check-circle"></i>
</span>
@@ -85,10 +90,12 @@
<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" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
+ <span class="icon is-small is-right has-text-success"
+ *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
<i class="fas fa-check-circle"></i>
</span>
- <span class="icon is-small is-right has-text-danger" *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
+ <span class="icon is-small is-right has-text-danger"
+ *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
@@ -112,9 +119,11 @@
<div class="column is-12-mobile is-6-tablet">
<div class="field">
- <label class="label" for="password"><span i18n="@@signup.password">Password </span><span class="required-field">*</span></label>
+ <label class="label" for="password"><span i18n="@@signup.password">Password </span><span
+ class="required-field">*</span></label>
<p class="control has-icons-right">
- <input id="password" class="input" type="password" formControlName="password" [ngClass]="{'is-danger': fieldIsInvalid('password'), 'is-success': fieldIsValid('password')}">
+ <input id="password" class="input" type="password" formControlName="password"
+ [ngClass]="{'is-danger': fieldIsInvalid('password'), 'is-success': fieldIsValid('password')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('password')">
<i class="fas fa-check-circle"></i>
</span>
@@ -166,10 +175,12 @@
<p class="control has-icons-right">
<input id="passwordConfirmation" class="input" type="password" formControlName="passwordConfirmation"
[ngClass]="{'is-danger': passwordConfirmationError || fieldIsInvalid('passwordConfirmation'), 'is-success': !passwordConfirmationError && fieldIsValid('passwordConfirmation')}">
- <span class="icon is-small is-right has-text-success" *ngIf="!passwordConfirmationError && fieldIsValid('passwordConfirmation')">
+ <span class="icon is-small is-right has-text-success"
+ *ngIf="!passwordConfirmationError && fieldIsValid('passwordConfirmation')">
<i class="fas fa-check-circle"></i>
</span>
- <span class="icon is-small is-right has-text-danger" *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
+ <span class="icon is-small is-right has-text-danger"
+ *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
<i class="fas fa-exclamation-circle"></i>
</span>
</p>
@@ -247,8 +258,8 @@
<div class="column is-12">
<div class="field">
<input id="cgu" class="is-checkradio is-success" type="checkbox" formControlName="cgu">
- <label for="cgu" class="label cguLabel"><span i18n="@@signup.cgu">I agree to the general terms of use</span><span
- class="required-field">*</span></label>
+ <label for="cgu" class="label cguLabel"><span i18n="@@signup.cgu">I agree to the general terms of
+ use</span><span class="required-field">*</span></label>
<div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('cgu')">
<div *ngIf="cgu.errors['required']" i18n="@@signup.errors.mustAcceptCGU">
@@ -258,15 +269,43 @@
</div>
</div>
+ <div class="column is-12">
+ <p class="consent-text">
+ Les champs suivi d'un astérisque (*) sont obligatoires. Les informations contenues dans ces champs font
+ l’objet d’un traitement informatisé destiné à répondre à votre demande. Les destinataires des informations
+ sont les services communaux et métropolitains en charge du traitement de votre demande. Conformément à la
+ loi "informatique et libertés" du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès et de
+ rectification aux informations qui vous concernent. Si vous souhaitez exercer ce droit et obtenir
+ communication des informations vous concernant, veuillez-vous adresser à : Métropole de Lyon - Direction des
+ Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 : par
+ courrier ou au moyen du formulaire approprié sur ce guichet. Vous pouvez également, pour des motifs
+ légitimes, vous opposer au traitement des données vous concernant. Dans ce cas, nous ne pourrons pas traiter
+ la demande soumise via ce formulaire.
+ </p>
+ <div class="field">
+ <input id="consent" class="is-checkradio is-success" type="checkbox" formControlName="consent">
+ <label for="consent" class="label consentLabel">
+ <span i18n="@@signup.consent">En cochant cette case j'accepte que les informations saisies dans ce
+ formulaire soient traitées pour répondre à ma demande.</span><span class="required-field">*</span>
+ </label>
+
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('cgu')">
+ <div *ngIf="cgu.errors['required']" i18n="@@signup.errors.mustConsent">
+ You must give your consent
+ </div>
+ </div>
+ </div>
+ </div>
+
<div class="column is-12 has-text-right">
<div class="field">
<div>
- <button type="submit" class="button button-gl" [ngClass]="{'is-loading': formDisabled}" [disabled]="formIsInvalid || formDisabled"
- i18n="@@signup.createAccount">Create an account</button>
+ <button type="submit" class="button button-gl" [ngClass]="{'is-loading': formDisabled}"
+ [disabled]="formIsInvalid || formDisabled" i18n="@@signup.createAccount">Create an account</button>
</div>
</div>
</div>
</div>
</form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/user/components/auth/sign-up/sign-up.component.scss b/src/app/user/components/auth/sign-up/sign-up.component.scss
index 6e835ea8..df0b9eaf 100644
--- a/src/app/user/components/auth/sign-up/sign-up.component.scss
+++ b/src/app/user/components/auth/sign-up/sign-up.component.scss
@@ -17,12 +17,24 @@ h1 {
background-color: white;
}
-.is-checkradio[type="checkbox"] + label.acceptMessagesLabel, .is-checkradio[type="checkbox"] + label.cguLabel {
+.is-checkradio[type="checkbox"] + label.acceptMessagesLabel, .is-checkradio[type="checkbox"] + label.cguLabel, .is-checkradio[type="checkbox"] + label.consentLabel {
margin-left: 0;
}
-.acceptMessagesInfo {
- font-size: $size-8
+.is-checkradio[type="checkbox"] + label::before {
+ top: unset;
+}
+
+.is-checkradio[type="checkbox"] + label::after {
+ top: 0.5rem;
+}
+
+.acceptMessagesInfo, .consent-text {
+ font-size: $size-8;
+}
+
+.consent-text {
+ margin-bottom: 0.75rem;
}
.required-field {
diff --git a/src/app/user/components/auth/sign-up/sign-up.component.ts b/src/app/user/components/auth/sign-up/sign-up.component.ts
index a40fca45..90704099 100644
--- a/src/app/user/components/auth/sign-up/sign-up.component.ts
+++ b/src/app/user/components/auth/sign-up/sign-up.component.ts
@@ -50,6 +50,7 @@ export class SignUpComponent implements OnInit {
city: [''],
country: [''],
cgu: [false, Validators.requiredTrue],
+ consent: [false, Validators.requiredTrue],
});
}
diff --git a/src/app/user/models/user.model.ts b/src/app/user/models/user.model.ts
index e8e64f82..41f55614 100644
--- a/src/app/user/models/user.model.ts
+++ b/src/app/user/models/user.model.ts
@@ -35,6 +35,7 @@ export interface ICreateAccountForm {
city: string;
country: string;
cgu: boolean;
+ consent: boolean;
}
export class LegacyAccount {
--
GitLab