From 55e30f65bf695ac8843384f3e59cc763660caeb3 Mon Sep 17 00:00:00 2001
From: FORESTIER Fabien <fabien.forestier@soprasteria.com>
Date: Tue, 23 Apr 2019 13:28:06 +0200
Subject: [PATCH] Use app-page-header component in signup page + update style
of the page
---
.../auth/sign-up/sign-up.component.html | 485 +++++++++---------
.../auth/sign-up/sign-up.component.scss | 8 +-
.../auth/sign-up/sign-up.component.ts | 6 +-
src/app/user/user.module.ts | 2 +
src/i18n/messages.en.xlf | 5 -
src/i18n/messages.fr.xlf | 5 -
src/i18n/traductions.fr.ts | 1 +
src/i18n/traductions.ts | 1 +
src/styles.scss | 20 +-
9 files changed, 271 insertions(+), 262 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 2a1c4b0a..23c7e5b5 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
@@ -1,301 +1,308 @@
-<h1 class="has-text-centered" i18n="@@signup.title">Sign up</h1>
+<div class="page-container has-padding has-white-background">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
-<div class="signup-form-container">
- <form [formGroup]="form" (ngSubmit)="send()">
- <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>
- <p class="control has-icons-right">
- <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>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="signup-form-container">
+ <form [formGroup]="form" (ngSubmit)="send()">
+ <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>
+ <p class="control has-icons-right">
+ <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>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('firstName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstName')">
- <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
- You must enter your first name.
- </div>
- <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstName')">
+ <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
+ You must enter your first name.
+ </div>
+ <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <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>
- <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')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('lastName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <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>
+ <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')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('lastName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastName')">
- <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
- You must enter your last name.
- </div>
- <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastName')">
+ <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
+ You must enter your last name.
+ </div>
+ <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <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>
- <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')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('email')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <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>
+ <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')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('email')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
- <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
- You must enter your email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
+ <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
+ You must enter your email address.
+ </div>
- <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
- You must enter a valid email address.
+ <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="emailConfirmation"><span i18n="@@signup.emailConfirmation">Email confirmation
- </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"
- *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')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="emailConfirmation"><span i18n="@@signup.emailConfirmation">Email confirmation
+ </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"
+ *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')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
- <div *ngIf="emailConfirmation.errors['required']" i18n="@@signup.errors.missingConfirmationEmail">
- You must confirm your email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
+ <div *ngIf="emailConfirmation.errors['required']" i18n="@@signup.errors.missingConfirmationEmail">
+ You must confirm your email address.
+ </div>
- <div *ngIf="emailConfirmation.errors['email']" i18n="@@form.errors.invalidEmail">
- You must enter a valid email address.
+ <div *ngIf="emailConfirmation.errors['email']" i18n="@@form.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
- <div i18n="@@signup.errors.emailConfirmationError">
- You must enter the same email address.
+ <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
+ <div i18n="@@signup.errors.emailConfirmationError">
+ You must enter the same email address.
+ </div>
</div>
</div>
</div>
- </div>
- <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>
- <p class="control has-icons-right">
- <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>
- <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('password')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <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>
+ <p class="control has-icons-right">
+ <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>
+ <span class="icon is-small is-right has-text-danger" *ngIf="fieldIsInvalid('password')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('password')">
- <div *ngIf="password.errors['required']" i18n="@@form.errors.missingpassword">
- You must enter a password.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('password')">
+ <div *ngIf="password.errors['required']" i18n="@@form.errors.missingpassword">
+ You must enter a password.
+ </div>
- <div *ngIf="password.errors['minlength']" i18n="@@form.errors.minLength">
- Your password must at least contain {{ passwordMinLength }} characters.
- </div>
+ <div *ngIf="password.errors['minlength']" i18n="@@form.errors.minLength">
+ Your password must at least contain {{ passwordMinLength }} characters.
+ </div>
- <div *ngIf="password.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
- Your password contains invalid characters.
- </div>
+ <div *ngIf="password.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
+ Your password contains invalid characters.
+ </div>
- <div *ngIf="password.errors['missingSpecialCharacters']" i18n="@@form.errors.missingSpecialCharacters">
- Your password must contain at least one special character.
- </div>
+ <div *ngIf="password.errors['missingSpecialCharacters']" i18n="@@form.errors.missingSpecialCharacters">
+ Your password must contain at least one special character.
+ </div>
- <div *ngIf="password.errors['missingUppercasedLetter']" i18n="@@form.errors.missingUppercasedLetter">
- Your password must contain at least one uppercased character.
- </div>
+ <div *ngIf="password.errors['missingUppercasedLetter']" i18n="@@form.errors.missingUppercasedLetter">
+ Your password must contain at least one uppercased character.
+ </div>
- <div *ngIf="password.errors['missingLowercasedLetter']" i18n="@@form.errors.missingLowercasedLetter">
- Your password must contain at least one lowercased character.
- </div>
+ <div *ngIf="password.errors['missingLowercasedLetter']" i18n="@@form.errors.missingLowercasedLetter">
+ Your password must contain at least one lowercased character.
+ </div>
- <div *ngIf="password.errors['missingNumber']" i18n="@@form.errors.missingNumber">
- Your password must contain at least one number.
- </div>
+ <div *ngIf="password.errors['missingNumber']" i18n="@@form.errors.missingNumber">
+ Your password must contain at least one number.
+ </div>
- <div *ngIf="password.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
- Your password must not contain obvious words.
+ <div *ngIf="password.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
+ Your password must not contain obvious words.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="passwordConfirmation"><span i18n="@@signup.passwordConfirmation">Password
- confirmation </span><span class="required-field">*</span></label>
- <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')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right has-text-danger"
- *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="passwordConfirmation"><span i18n="@@signup.passwordConfirmation">Password
+ confirmation </span><span class="required-field">*</span></label>
+ <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')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right has-text-danger"
+ *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('passwordConfirmation')">
- <div *ngIf="passwordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword">
- You must confirm your password.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('passwordConfirmation')">
+ <div *ngIf="passwordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword">
+ You must confirm your password.
+ </div>
</div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="passwordConfirmationError">
- <div i18n="@@form.errors.passwordConfirmationError">
- The password confirmation doesn't match with the password.
+ <div class="form-incorrect-field-message" *ngIf="passwordConfirmationError">
+ <div i18n="@@form.errors.passwordConfirmationError">
+ The password confirmation doesn't match with the password.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
- <p class="control">
- <input id="entreprise" class="input" type="text" formControlName="entreprise">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
+ <p class="control">
+ <input id="entreprise" class="input" type="text" formControlName="entreprise">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="address" i18n="@@form.address">Address</label>
- <p class="control">
- <input id="address" class="input" type="text" formControlName="address">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="address" i18n="@@form.address">Address</label>
+ <p class="control">
+ <input id="address" class="input" type="text" formControlName="address">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
- <p class="control">
- <input id="zipcode" class="input" type="text" formControlName="zipcode">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
+ <p class="control">
+ <input id="zipcode" class="input" type="text" formControlName="zipcode">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="city" i18n="@@form.city">City</label>
- <p class="control">
- <input id="city" class="input" type="text" formControlName="city">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="city" i18n="@@form.city">City</label>
+ <p class="control">
+ <input id="city" class="input" type="text" formControlName="city">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="country" i18n="@@form.country">Country</label>
- <p class="control">
- <input id="country" class="input" type="text" formControlName="country">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="country" i18n="@@form.country">Country</label>
+ <p class="control">
+ <input id="country" class="input" type="text" formControlName="country">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="acceptMessages" class="is-checkradio is-success" type="checkbox" formControlName="acceptMessages">
- <label for="acceptMessages" class="label accept-messages-label" i18n="@@form.messagesAgreement">I agree to
- receive information</label>
- <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
- Check this box if you agree to receive information emails from Data about the operation of services, model
- changes, new formats, maintenance operations. Your data will not be sent to partners.
- </p>
+ <div class="column is-12">
+ <div class="field">
+ <input id="acceptMessages" class="is-checkradio is-success" type="checkbox"
+ formControlName="acceptMessages">
+ <label for="acceptMessages" class="label input-text-label accept-messages-label"
+ i18n="@@form.messagesAgreement">I agree to
+ receive information</label>
+ <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
+ Check this box if you agree to receive information emails from Data about the operation of services, model
+ changes, new formats, maintenance operations. Your data will not be sent to partners.
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="consent" class="is-checkradio is-success" 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"
- [routerLink]="['/', AppRoutes.cgu.uri]"> general terms of use </a>
- <span i18n="@@consent.partThree">and the processing of the information entered in this form to respond to
- my request.</span><span class="required-field">*</span>
+ <div class="column is-12">
+ <div class="field">
+ <input id="consent" class="is-checkradio is-success" type="checkbox" formControlName="consent">
+ <label for="consent" class="label input-text-label consent-label">
+ <p>
+ <span i18n="@@consent.partOne">By checking this box, I accept the</span><a i18n="@@consent.partTwo"
+ [routerLink]="['/', AppRoutes.cgu.uri]"> general terms of use </a>
+ <span i18n="@@consent.partThree">and the processing of the information entered in this form to respond
+ to
+ my request.</span><span class="required-field">*</span>
+ </p>
+ </label>
+ <p class="consent-text" i18n="@@consent.text">
+ Fields with an asterisk (*) are mandatory. Information in these fields will be
+ processed to respond to your request. Recipients of this information
+ are the metropolitan departments in charge of processing your
+ request. In compliance with the “Digital Technology and Freedom” law dated
+ January 6, 1978, you have the right to access and rectify information that
+ concerns you. To exercise this right and be transfered the information concerning
+ you, please contact: Lyon Métropole - Direction des
+ Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
+ mail
+ or using the appropriate form on this portal. You may also oppose processing of
+ your personal data for a legitimate reason. In this case, we will not be able to
+ process the request submitted using this form.
</p>
- </label>
- <p class="consent-text" i18n="@@consent.text">
- Fields with an asterisk (*) are mandatory. Information in these fields will be
- processed to respond to your request. Recipients of this information
- are the metropolitan departments in charge of processing your
- request. In compliance with the “Digital Technology and Freedom” law dated
- January 6, 1978, you have the right to access and rectify information that
- concerns you. To exercise this right and be transfered the information concerning
- you, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal mail
- or using the appropriate form on this portal. You may also oppose processing of
- your personal data for a legitimate reason. In this case, we will not be able to
- process the request submitted using this form.
- </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
- <div *ngIf="consent.errors['required']" i18n="@@consent.error">
- You must accept the general terms of use and the processing of the information entered in this form to
- respond to your request.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
+ <div *ngIf="consent.errors['required']" i18n="@@consent.error">
+ You must accept the general terms of use and the processing of the information entered in this form to
+ respond to your request.
+ </div>
</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>
+ <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>
+ </div>
</div>
</div>
</div>
- </div>
- </form>
-</div>
+ </form>
+ </div>
+</div>
\ No newline at end of file
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 9be6607f..47c505b2 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
@@ -1,10 +1,6 @@
@import '../../../../../scss/variables.scss';
-.signup-form-container {
- background-color: white;
- padding: 0 1rem 0 1rem;
- margin: 1.5rem;
-
+.signup-form-container {
.columns:first-of-type {
margin-top: 0;
}
@@ -33,8 +29,10 @@ h1 {
.acceptMessagesInfo, .consent-text {
font-size: $size-8;
+ padding-left: 1.75rem;
}
.consent-text {
margin-bottom: 0.75rem;
+ padding-left: 1.75rem;
}
\ No newline at end of file
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 541498b3..68f0ef32 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
@@ -7,9 +7,10 @@ import { Router } from '@angular/router';
import { environment } from '../../../../../environments/environment';
import { ValidatePassword } from '../../../validators/password.validator';
import { LegacyAccount } from '../../../models';
-import { notificationMessages } from '../../../../../i18n/traductions';
+import { notificationMessages, pageTitles } from '../../../../../i18n/traductions';
import { AppRoutes } from '../../../../routes';
import { HttpErrorResponse } from '@angular/common/http';
+import { IPageHeaderInfo } from '../../../../shared/models';
@Component({
selector: 'app-sign-up',
@@ -20,6 +21,9 @@ export class SignUpComponent implements OnInit {
form: FormGroup;
AppRoutes = AppRoutes;
+ pageHeaderInfo: IPageHeaderInfo = {
+ title: pageTitles.signup,
+ };
constructor(
private _fb: FormBuilder,
diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts
index 7ea52171..9d98bd96 100644
--- a/src/app/user/user.module.ts
+++ b/src/app/user/user.module.ts
@@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/auth-interceptor';
import { UserGuards } from './guards';
+import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
@@ -14,6 +15,7 @@ import { UserGuards } from './guards';
UserRoutingModule,
FormsModule,
ReactiveFormsModule,
+ SharedModule,
],
providers: [
...UserGuards,
diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf
index b0f41a54..374cd417 100644
--- a/src/i18n/messages.en.xlf
+++ b/src/i18n/messages.en.xlf
@@ -738,11 +738,6 @@
</trans-unit>
<!-- Form translations -->
-
- <trans-unit id="signup.title" datatype="html">
- <source>Sign up</source>
- <target>Sign up</target>
- </trans-unit>
<trans-unit id="form.lastname" datatype="html">
<source>Last Name</source>
<target>Last Name</target>
diff --git a/src/i18n/messages.fr.xlf b/src/i18n/messages.fr.xlf
index 404eeca1..6376e47b 100644
--- a/src/i18n/messages.fr.xlf
+++ b/src/i18n/messages.fr.xlf
@@ -745,11 +745,6 @@ La création d'un compte est gratuite et sans engagement. La désinscription est
</trans-unit>
<!-- Sign up translation -->
-
- <trans-unit id="signup.title" datatype="html">
- <source>Sign up</source>
- <target>Inscription</target>
- </trans-unit>
<trans-unit id="form.lastname" datatype="html">
<source>Last Name</source>
<target>Nom de famille</target>
diff --git a/src/i18n/traductions.fr.ts b/src/i18n/traductions.fr.ts
index dd38a7d8..0e2a0040 100644
--- a/src/i18n/traductions.fr.ts
+++ b/src/i18n/traductions.fr.ts
@@ -232,6 +232,7 @@ export const subjects = [
export const pageTitles = {
siteMap: 'Plan du site',
actors: 'Les acteurs',
+ signup: 'Inscription',
};
export const datatsetDataRepresentationType = {
diff --git a/src/i18n/traductions.ts b/src/i18n/traductions.ts
index 4cb50cac..64a2a561 100644
--- a/src/i18n/traductions.ts
+++ b/src/i18n/traductions.ts
@@ -231,6 +231,7 @@ export const subjects = [
export const pageTitles = {
siteMap: 'Site map',
actors: 'Actors',
+ signup: 'Sign up',
};
export const datatsetDataRepresentationType = {
diff --git a/src/styles.scss b/src/styles.scss
index 00c62974..266e6f07 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -83,8 +83,7 @@ p,
select,
input,
ul,
-tbody,
-label {
+tbody {
font-family: $family-sans-serif;
font-size: $size-6;
color: $brand-color;
@@ -225,7 +224,6 @@ a:not(.button).link-without-decoration,
border-width: 0;
font-size: $size-6;
color: white;
- text-transform: capitalize;
line-height: unset;
&:hover,
@@ -279,8 +277,10 @@ a:not(.button).link-without-decoration,
// Forms
-label {
- font-size: 1rem;
+label, .label, label span {
+ font-size: 0.875rem;
+ color: $grey-light-color;
+ text-transform: uppercase;
font-weight: normal;
font-style: normal;
@@ -289,7 +289,13 @@ label {
}
}
-label .required-field {
+.label.input-text-label, .label.input-text-label span, .label.input-text-label p {
+ text-transform: none;
+ color: $grey-dark-color;
+ font-weight: 600;
+}
+
+.label span.required-field {
color: $tomato-color;
padding-left: 0.25rem;
}
@@ -308,7 +314,7 @@ label .required-field {
height: calc(100% - 2rem);
&.has-padding {
- padding: 0 1.25rem 0 1.25rem;
+ padding: 0 1.25rem 1.25rem 1.25rem;
}
&.has-white-background {
--
GitLab