Add consent input on user signup

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>
+</div>
\ No newline at end of file

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 {

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],
     });
   }
 

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 {