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 4c46b31429c1b51ed9c4481ed041f4835d7d126c..74eabbe3267066615285b0745631c4fde3a31266 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 6e835ea8459f032f4d6999481826bf95c0eaeb92..df0b9eafd8c20dfb296826fce94963865479933d 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 a40fca458d0dd90efb3463e25f42049aed654cc1..907040998f77056455e22b6d96a532fc64b9d55a 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 e8e64f82effcf37f119c76b805ffcb037a607808..41f556149b923d3cb487fbc12934e92a0fad5568 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 {