From e867010d0a7cf648149405cc419105c2a02d6d67 Mon Sep 17 00:00:00 2001 From: FORESTIER Fabien <fabien.forestier@soprasteria.com> Date: Fri, 4 Jan 2019 14:36:06 +0100 Subject: [PATCH] Add style + translation + links + Error handling --- .../main/side-menu/side-menu.component.html | 46 +++++---- .../components/sign-up/sign-up.component.html | 80 ++++++++-------- .../components/home/home.component.html | 4 +- .../user-account/user-account.component.html | 84 +++++++++-------- .../user-account/user-account.component.scss | 17 ++++ .../user-account/user-account.component.ts | 14 ++- src/i18n/messages.en.xlf | 94 +++++++++++++------ src/i18n/messages.fr.xlf | 90 +++++++++++++----- .../notification-messages.fr.ts | 1 + .../notification-messages.ts | 1 + 10 files changed, 277 insertions(+), 154 deletions(-) diff --git a/src/app/core/components/main/side-menu/side-menu.component.html b/src/app/core/components/main/side-menu/side-menu.component.html index d456e846..22f17bc9 100644 --- a/src/app/core/components/main/side-menu/side-menu.component.html +++ b/src/app/core/components/main/side-menu/side-menu.component.html @@ -17,40 +17,40 @@ <li> <a [routerLink]="['/', AppRoutes.research.uri]" routerLinkActive="active-link"> <span class="icon"> - <i class="fas fa-database"></i> - </span> + <i class="fas fa-database"></i> + </span> <span i18n="@@header.data" class="label-menu">Data</span> </a> </li> <li> <a [routerLink]="['/', AppRoutes.approach.uri]" routerLinkActive="active-link"> <span class="icon"> - <i class="fas fa-landmark"></i> - </span> + <i class="fas fa-landmark"></i> + </span> <span i18n="@@header.approach" class="label-menu">Approach</span> </a> </li> <li> <a [routerLink]="['/', AppRoutes.documentation.uri]" routerLinkActive="active-link"> <span class="icon"> - <i class="fas fa-book"></i> - </span> + <i class="fas fa-book"></i> + </span> <span i18n="@@header.documentation" class="label-menu">Documentation</span> </a> </li> <li> <a [routerLink]="['/', AppRoutes.credits.uri]" routerLinkActive="active-link"> <span class="icon"> - <i class="fas fa-heart"></i> - </span> + <i class="fas fa-heart"></i> + </span> <span i18n="@@header.credits" class="label-menu">Credits</span> </a> </li> <li class="actors-menu"> <a [routerLink]="['/', AppRoutes.actors.uri]" routerLinkActive="active-link"> <span class="icon"> - <i class="fas fa-users"></i> - </span> + <i class="fas fa-users"></i> + </span> <span i18n="@@header.actors" class="label-menu">Actors</span> </a> </li> @@ -61,14 +61,26 @@ </a> </li> <li *ngIf="!userIsSignedIn"> - <a [routerLink]="['/', AppRoutes.signup.uri]" routerLinkActive="active-link"> - <span i18n="@@header.signUp">Sign Up</span> - </a> - </li> + <a [routerLink]="['/', AppRoutes.signup.uri]" routerLinkActive="active-link"> + <span i18n="@@header.signUp">Sign Up</span> + </a> + </li> <li *ngIf="userIsSignedIn"> - <a href preventDefault [routerLink]="['/', AppRoutes.userServices.uri]"> - <span class="username" *ngIf="userIsSignedIn">{{ username }}</span> + <a href preventDefault [routerLink]="['/', AppRoutes.userAccount.uri]"> + <span class="username">{{ username }}</span> </a> + </li> + <li *ngIf="userIsSignedIn"> + <a href preventDefault [routerLink]="['/', AppRoutes.userServices.uri]" routerLinkActive="active-link"> + <span i18n="@@header.userServices">My services</span> + </a> + </li> + <li *ngIf="userIsSignedIn"> + <a href preventDefault [routerLink]="['/', AppRoutes.userAccount.uri]" routerLinkActive="active-link"> + <span i18n="@@header.userAccount">My account</span> + </a> + </li> + <li *ngIf="userIsSignedIn"> <a href preventDefault (click)="signOut()"> <span i18n="@@header.signOut">Sign Out</span> </a> @@ -81,4 +93,4 @@ </a> </li> </ul> -</aside> +</aside> \ No newline at end of file diff --git a/src/app/core/components/sign-up/sign-up.component.html b/src/app/core/components/sign-up/sign-up.component.html index 086799c0..dde2889c 100644 --- a/src/app/core/components/sign-up/sign-up.component.html +++ b/src/app/core/components/sign-up/sign-up.component.html @@ -5,23 +5,23 @@ <div class="columns is-multiline"> <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="lastname"><span i18n="@@signup.lastname">Last 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="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')"> + <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('lastName')"> + <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('lastName')"> - <div *ngIf="lastName.errors['required']" i18n="@@signup.errors.invalidLastname"> - You must enter your last name. + <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="lastName.errors['pattern']" i18n="@@signup.errors.forbiddenCharacters"> + <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters"> Special characters are forbidden. </div> </div> @@ -30,23 +30,23 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="firstname"><span i18n="@@signup.firstname">First 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="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')"> + <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('firstName')"> + <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('firstName')"> - <div *ngIf="firstName.errors['required']" i18n="@@signup.errors.invalidFirstname"> - You must enter your first name. + <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="firstName.errors['pattern']" i18n="@@signup.errors.forbiddenCharacters"> + <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters"> Special characters are forbidden. </div> </div> @@ -55,7 +55,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="email"><span i18n="@@signup.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')}"> <span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('email')"> @@ -67,11 +67,11 @@ </p> <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')"> - <div *ngIf="email.errors['required']" i18n="@@signup.errors.missingEmail"> + <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail"> You must enter your email address. </div> - <div *ngIf="email.errors['email']" i18n="@@signup.errors.invalidEmail"> + <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail"> You must enter a valid email address. </div> </div> @@ -98,12 +98,12 @@ You must confirm your email address. </div> - <div *ngIf="emailConfirmation.errors['email']" i18n="@@signup.errors.invalidEmail"> + <div *ngIf="emailConfirmation.errors['email']" i18n="@@form.errors.invalidEmail"> You must enter a valid email address. </div> </div> <div class="form-incorrect-field-message" *ngIf="emailConfirmationError"> - <div> + <div i18n="@@signup.errors.emailConfirmationError"> You must enter the same email address. </div> </div> @@ -124,31 +124,31 @@ </p> <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('password')"> - <div *ngIf="password.errors['required']" i18n="@@signup.errors.missingpassword"> - You must enter an password. + <div *ngIf="password.errors['required']" i18n="@@form.errors.missingpassword"> + You must enter a password. </div> - <div *ngIf="password.errors['minlength']" i18n="@@signup.errors.minLength"> + <div *ngIf="password.errors['minlength']" i18n="@@form.errors.minLength"> Your password must at least contain {{ passwordMinLength }} characters. </div> - <div *ngIf="password.errors['missingSpecialCharacters']" i18n="@@signup.errors.missingSpecialCharacters"> + <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="@@signup.errors.missingUppercasedLetter"> + <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="@@signup.errors.missingLowercasedLetter"> + <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="@@signup.errors.missingNumber"> + <div *ngIf="password.errors['missingNumber']" i18n="@@form.errors.missingNumber"> Your password must contain at least one number. </div> - <div *ngIf="password.errors['forbiddenWord']" i18n="@@signup.errors.forbiddenWord"> + <div *ngIf="password.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord"> Your password must not contain obvious words. </div> </div> @@ -171,12 +171,12 @@ </p> <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('passwordConfirmation')"> - <div *ngIf="passwordConfirmation.errors['required']" i18n="@@signup.errors.missingConfirmationPassword"> + <div *ngIf="passwordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword"> You must confirm your password. </div> </div> <div class="form-incorrect-field-message" *ngIf="passwordConfirmationError"> - <div i18n="signup.errors.passwordConfirmationError"> + <div i18n="@@form.errors.passwordConfirmationError"> The password confirmation doesn't match with the password. </div> </div> @@ -185,7 +185,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="entreprise" i18n="@@signup.entreprise">Company</label> + <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label> <p class="control"> <input id="entreprise" class="input" type="text" formControlName="entreprise"> </p> @@ -194,7 +194,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="address" i18n="@@signup.address">Address</label> + <label class="label" for="address" i18n="@@form.address">Address</label> <p class="control"> <input id="address" class="input" type="text" formControlName="address"> </p> @@ -203,7 +203,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="zipcode" i18n="@@signup.zipcode">Zipcode</label> + <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label> <p class="control"> <input id="zipcode" class="input" type="text" formControlName="zipcode"> </p> @@ -212,7 +212,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="city" i18n="@@signup.city">City</label> + <label class="label" for="city" i18n="@@form.city">City</label> <p class="control"> <input id="city" class="input" type="text" formControlName="city"> </p> @@ -221,7 +221,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="country" i18n="@@signup.country">Country</label> + <label class="label" for="country" i18n="@@form.country">Country</label> <p class="control"> <input id="country" class="input" type="text" formControlName="country"> </p> @@ -231,9 +231,9 @@ <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 acceptMessagesLabel" i18n="@@signup.messagesAgreement">I agree to + <label for="acceptMessages" class="label acceptMessagesLabel" i18n="@@form.messagesAgreement">I agree to receive information</label> - <p class="acceptMessagesInfo" i18n="@@signup.acceptMessagesInfo"> + <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> diff --git a/src/app/editorialisation/components/home/home.component.html b/src/app/editorialisation/components/home/home.component.html index 5570cbe3..783a723e 100644 --- a/src/app/editorialisation/components/home/home.component.html +++ b/src/app/editorialisation/components/home/home.component.html @@ -6,7 +6,7 @@ <div id="postsErrorTemplate" class="tile is-ancestor error-tile"> <div class="tile is-12 is-parent"> <div class="tile is-child box"> - <p i18n="home.errorLoadingArticles">Couldn't load the newest articles</p> + <p i18n="@@home.errorLoadingArticles">Couldn't load the newest articles</p> </div> </div> </div> @@ -21,7 +21,7 @@ <div class="tile is-ancestor error-tile" id="videoPostErrorTemplate"> <div class="tile is-12 is-parent"> <div class="tile is-child box"> - <p i18n="home.errorLoadingVideoPost">Couldn't load the post</p> + <p i18n="@@home.errorLoadingVideoPost">Couldn't load the post</p> </div> </div> </div> diff --git a/src/app/user/components/user-account/user-account.component.html b/src/app/user/components/user-account/user-account.component.html index 3198978d..135a7f36 100644 --- a/src/app/user/components/user-account/user-account.component.html +++ b/src/app/user/components/user-account/user-account.component.html @@ -1,11 +1,11 @@ -<section class="section"> - <h2 i18n="@@userAccount.modifyAccount">Modify your account</h2> +<h1 class="has-text-centered" i18n="@@userAccount.updateProfil">Update your profil</h1> +<div class="user-account-forms-container"> <form [formGroup]="userInfoUpdateForm" (ngSubmit)="updateUserInfo()"> <div class="columns is-multiline"> <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="firstname"><span i18n="@@userAccount.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(userInfoUpdateForm, 'firstName')" [ngClass]="{'is-danger': fieldIsInvalid(userInfoUpdateForm, 'firstName'), 'is-success': fieldIsValid(userInfoUpdateForm, 'firstName')}"> @@ -18,10 +18,10 @@ </p> <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'firstName')"> - <div *ngIf="firstName.errors['required']" i18n="@@userAccount.errors.invalidFirstname"> + <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname"> You must enter your first name. </div> - <div *ngIf="firstName.errors['pattern']" i18n="@@userAccount.errors.forbiddenCharacters"> + <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters"> Special characters are forbidden. </div> </div> @@ -30,7 +30,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="lastname"><span i18n="@@userAccount.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(userInfoUpdateForm,'lastName')" [ngClass]="{'is-danger': fieldIsInvalid(userInfoUpdateForm, 'lastName'), 'is-success': fieldIsValid(userInfoUpdateForm, 'lastName')}"> @@ -43,10 +43,10 @@ </p> <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'lastName')"> - <div *ngIf="lastName.errors['required']" i18n="@@userAccount.errors.invalidLastname"> + <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname"> You must enter your last name. </div> - <div *ngIf="lastName.errors['pattern']" i18n="@@userAccount.errors.forbiddenCharacters"> + <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters"> Special characters are forbidden. </div> </div> @@ -55,7 +55,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="email"><span i18n="@@userAccount.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" [value]="email.value" disabled> </p> @@ -63,21 +63,21 @@ </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 acceptMessagesLabel" i18n="@@userAccount.messagesAgreement">I agree - to - receive information</label> - <p class="acceptMessagesInfo" i18n="@@userAccount.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 class="field"> + <input id="acceptMessages" class="is-checkradio is-success" type="checkbox" formControlName="acceptMessages"> + <label for="acceptMessages" class="label acceptMessagesLabel" 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 class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="entreprise" i18n="@@userAccount.entreprise">Company</label> + <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label> <p class="control"> <input id="entreprise" class="input" type="text" formControlName="entreprise"> </p> @@ -88,7 +88,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="address" i18n="@@userAccount.address">Address</label> + <label class="label" for="address" i18n="@@form.address">Address</label> <p class="control"> <input id="address" class="input" type="text" formControlName="address"> </p> @@ -97,7 +97,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="zipcode" i18n="@@userAccount.zipcode">Zipcode</label> + <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label> <p class="control"> <input id="zipcode" class="input" type="text" formControlName="zipcode"> </p> @@ -106,7 +106,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="city" i18n="@@userAccount.city">City</label> + <label class="label" for="city" i18n="@@form.city">City</label> <p class="control"> <input id="city" class="input" type="text" formControlName="city"> </p> @@ -115,7 +115,7 @@ <div class="column is-12-mobile is-6-tablet"> <div class="field"> - <label class="label" for="country" i18n="@@userAccount.country">Country</label> + <label class="label" for="country" i18n="@@form.country">Country</label> <p class="control"> <input id="country" class="input" type="text" formControlName="country"> </p> @@ -125,8 +125,8 @@ <div class="column is-12 has-text-right"> <div class="field"> <div> - <button type="submit" class="button button-gl" [ngClass]="{'is-loading': userInfoUpdateForm.disabled}" i18n="@@signup.updateProfil" - [disabled]="userInfoUpdateFormIsInvalid || userInfoUpdateFormDisabled || !userInfoUpdateForm.dirty">Update + <button type="submit" class="button button-gl" [ngClass]="{'is-loading': userInfoUpdateForm.disabled}" i18n="@@userAccount.updateProfil" + [disabled]="userInfoUpdateFormIsInvalid || userInfoUpdateFormDisabled || !userInfoUpdateForm.dirty">Update your profil</button> </div> </div> @@ -152,31 +152,31 @@ </p> <div class="form-incorrect-field-message" *ngIf="passwordFormFieldIsInvalid('newPassword')"> - <div *ngIf="newPassword.errors['required']" i18n="@@userAccount.errors.missingpassword"> - You must enter an password. + <div *ngIf="newPassword.errors['required']" i18n="@@form.errors.missingpassword"> + You must enter a password. </div> - <div *ngIf="newPassword.errors['minlength']" i18n="@@userAccount.errors.minLength"> + <div *ngIf="newPassword.errors['minlength']" i18n="@@form.errors.minLength"> Your password must at least contain {{ passwordMinLength }} characters. </div> - <div *ngIf="newPassword.errors['missingSpecialCharacters']" i18n="@@userAccount.errors.missingSpecialCharacters"> + <div *ngIf="newPassword.errors['missingSpecialCharacters']" i18n="@@form.errors.missingSpecialCharacters"> Your password must contain at least one special character. </div> - <div *ngIf="newPassword.errors['missingUppercasedLetter']" i18n="@@userAccount.errors.missingUppercasedLetter"> + <div *ngIf="newPassword.errors['missingUppercasedLetter']" i18n="@@form.errors.missingUppercasedLetter"> Your password must contain at least one uppercased character. </div> - <div *ngIf="newPassword.errors['missingLowercasedLetter']" i18n="@@userAccount.errors.missingLowercasedLetter"> + <div *ngIf="newPassword.errors['missingLowercasedLetter']" i18n="@@form.errors.missingLowercasedLetter"> Your password must contain at least one lowercased character. </div> - <div *ngIf="newPassword.errors['missingNumber']" i18n="@@userAccount.errors.missingNumber"> + <div *ngIf="newPassword.errors['missingNumber']" i18n="@@form.errors.missingNumber"> Your password must contain at least one number. </div> - <div *ngIf="newPassword.errors['forbiddenWord']" i18n="@@userAccount.errors.forbiddenWord"> + <div *ngIf="newPassword.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord"> Your password must not contain obvious words. </div> </div> @@ -199,12 +199,12 @@ </p> <div class="form-incorrect-field-message" *ngIf="passwordFormFieldIsInvalid('newPasswordConfirmation')"> - <div *ngIf="newPasswordConfirmation.errors['required']" i18n="@@userAccount.errors.missingConfirmationPassword"> + <div *ngIf="newPasswordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword"> You must confirm your password. </div> </div> <div class="form-incorrect-field-message" *ngIf="newPasswordConfirmationError"> - <div i18n="signup.errors.passwordConfirmationError"> + <div i18n="@@form.errors.passwordConfirmationError"> The password confirmation doesn't match with the password. </div> </div> @@ -229,17 +229,23 @@ <div *ngIf="oldPassword.errors['required']" i18n="@@userAccount.errors.missingOldPassword"> You must enter your old password. </div> + + <div *ngIf="oldPassword.errors['wrongPassword']" i18n="@@userAccount.errors.wrongPassword"> + Make sure to enter the right password. + </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': passwordUpdateForm.disabled}" [disabled]="passwordUpdateFormIsInvalid || passwordUpdateFormDisabled" - i18n="@@signup.updatePassword">Update your password</button> + <button type="submit" class="button button-gl" [ngClass]="{'is-loading': passwordUpdateForm.disabled}" + [disabled]="passwordUpdateFormIsInvalid || passwordUpdateFormDisabled" i18n="@@userAccount.updatePassword"> + Update your password + </button> </div> </div> </div> </div> </form> -</section> \ No newline at end of file +</div> \ No newline at end of file diff --git a/src/app/user/components/user-account/user-account.component.scss b/src/app/user/components/user-account/user-account.component.scss index 4a020099..aa0aa228 100644 --- a/src/app/user/components/user-account/user-account.component.scss +++ b/src/app/user/components/user-account/user-account.component.scss @@ -1,5 +1,22 @@ @import '../../../../scss/variables.scss'; +.user-account-forms-container { + background-color: white; + padding: 0 1rem 0 1rem; + margin: 1.5rem; + + .columns:first-of-type { + margin-top: 0; + } +} + +h1 { + font-size: 2rem; + margin: 0; + padding: 1.25rem; + background-color: white; +} + .required-field { color: $red; padding-left: 0.25rem; diff --git a/src/app/user/components/user-account/user-account.component.ts b/src/app/user/components/user-account/user-account.component.ts index 721b179c..1b4f4a68 100644 --- a/src/app/user/components/user-account/user-account.component.ts +++ b/src/app/user/components/user-account/user-account.component.ts @@ -121,11 +121,11 @@ export class UserAccountComponent implements OnInit { // Validity for the form field depends on dirty because the fields prefilled so it makes more sense // to display errors or validity only when the field has been changed fieldIsValid(form: FormGroup, field: string) { - return (form.get(field).dirty) && form.get(field).valid; + return (form.get(field).dirty && form.get(field).touched) && form.get(field).valid; } fieldIsInvalid(form: FormGroup, field: string) { - return (form.get(field).dirty) && form.get(field).invalid; + return (form.get(field).dirty && form.get(field).touched) && form.get(field).invalid; } // Validity for the password field depends on touched because the fields are not prefilled @@ -147,7 +147,6 @@ export class UserAccountComponent implements OnInit { if (!this.passwordUpdateFormIsInvalid && !this.passwordUpdateFormDisabled) { const form = new PasswordUpdateForm(this.newPassword.value, this.oldPassword.value); this.passwordUpdateForm.disable(); - console.log(form); this._userService.updateUserPassword(form).subscribe( (res) => { this.passwordUpdateForm.enable(); @@ -161,6 +160,8 @@ export class UserAccountComponent implements OnInit { // Relog the user with the new credentials const loginForm = { username: this._authService.user.username, password: this.newPassword.value }; this._authService.login(loginForm).subscribe( + // If loggedin with success reset the form + // Else redirect the user to the login page (res) => { this.passwordUpdateForm.reset(); }, @@ -173,10 +174,15 @@ export class UserAccountComponent implements OnInit { }, (err) => { this.passwordUpdateForm.enable(); + let message = messages.userInfo.failedToUpdateUserPassword; + if (err.error.message = 'unidentifiedUser') { + message = messages.userInfo.wrongOldPassword; + this.oldPassword.setErrors({ wrongPassword: true }); + } this._notificationService.notify( { + message, type: 'error', - message: messages.userInfo.failedToUpdateUserPassword, }, ); }, diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf index dc0b84c1..b223c6d7 100644 --- a/src/i18n/messages.en.xlf +++ b/src/i18n/messages.en.xlf @@ -38,6 +38,14 @@ <source>Sign Out</source> <target>Sign Out</target> </trans-unit> + <trans-unit id="header.userServices" datatype="html"> + <source>My services</source> + <target>My services</target> + </trans-unit> + <trans-unit id="header.userAccount" datatype="html"> + <source>My account</source> + <target>My account</target> + </trans-unit> <trans-unit id="footer.rss" datatype="html"> <source>RSS Feed (new window)</source> <target>RSS Feed (new window)</target> @@ -431,41 +439,41 @@ <target>Sign In</target> </trans-unit> - <!-- Sign up translations --> + <!-- Form translations --> <trans-unit id="signup.title" datatype="html"> <source>Sign up</source> <target>Sign up</target> </trans-unit> - <trans-unit id="signup.lastname" datatype="html"> + <trans-unit id="form.lastname" datatype="html"> <source>Last Name</source> <target>Last Name</target> </trans-unit> - <trans-unit id="signup.errors.invalidLastname" datatype="html"> + <trans-unit id="form.errors.invalidLastname" datatype="html"> <source>You must enter your last name.</source> <target>You must enter your last name.</target> </trans-unit> - <trans-unit id="signup.errors.forbiddenCharacters" datatype="html"> + <trans-unit id="form.errors.forbiddenCharacters" datatype="html"> <source>Special characters are forbidden.</source> <target>Special characters are forbidden.</target> </trans-unit> - <trans-unit id="signup.firstname" datatype="html"> + <trans-unit id="form.firstname" datatype="html"> <source>First Name</source> <target>First Name</target> </trans-unit> - <trans-unit id="signup.errors.invalidFirstname" datatype="html"> + <trans-unit id="form.errors.invalidFirstname" datatype="html"> <source>You must enter your first name.</source> <target>You must enter your first name.</target> </trans-unit> - <trans-unit id="signup.email" datatype="html"> + <trans-unit id="form.email" datatype="html"> <source>Email</source> <target>Email</target> </trans-unit> - <trans-unit id="signup.errors.missingEmail" datatype="html"> + <trans-unit id="form.errors.missingEmail" datatype="html"> <source>You must enter your email address.</source> <target>You must enter your email address.</target> </trans-unit> - <trans-unit id="signup.errors.invalidEmail" datatype="html"> + <trans-unit id="form.errors.invalidEmail" datatype="html"> <source>You must enter a valid email address.</source> <target>You must enter a valid email address.</target> </trans-unit> @@ -481,11 +489,11 @@ <source>You must enter the same email address.</source> <target>You must enter the same email address.</target> </trans-unit> - <trans-unit id="signup.messagesAgreement" datatype="html"> + <trans-unit id="form.messagesAgreement" datatype="html"> <source>I agree to receive information</source> <target>I agree to receive information</target> </trans-unit> - <trans-unit id="signup.acceptMessagesInfo" datatype="html"> + <trans-unit id="form.acceptMessagesInfo" datatype="html"> <source>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.</source> <target>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.</target> </trans-unit> @@ -493,31 +501,31 @@ <source>Password</source> <target>Password</target> </trans-unit> - <trans-unit id="signup.errors.missingpassword" datatype="html"> - <source>You must enter an password.</source> - <target>You must enter an password.</target> + <trans-unit id="form.errors.missingpassword" datatype="html"> + <source>You must enter a password.</source> + <target>You must enter a password.</target> </trans-unit> - <trans-unit id="signup.errors.minLength" datatype="html"> + <trans-unit id="form.errors.minLength" datatype="html"> <source>Your password must at least contain <x id="INTERPOLATION"/> characters</source> <target>Your password must at least contain <x id="INTERPOLATION"/> characters</target> </trans-unit> - <trans-unit id="signup.errors.missingSpecialCharacters" datatype="html"> + <trans-unit id="form.errors.missingSpecialCharacters" datatype="html"> <source>Your password must contain at least one special character.</source> <target>Your password must contain at least one special character.</target> </trans-unit> - <trans-unit id="signup.errors.missingUppercasedLetter" datatype="html"> + <trans-unit id="form.errors.missingUppercasedLetter" datatype="html"> <source>Your password must contain at least one uppercased character.</source> <target>Your password must contain at least one uppercased character.</target> </trans-unit> - <trans-unit id="signup.errors.missingLowercasedLetter" datatype="html"> + <trans-unit id="form.errors.missingLowercasedLetter" datatype="html"> <source>Your password must contain at least one lowercased character.</source> <target>Your password must contain at least one lowercased character.</target> </trans-unit> - <trans-unit id="signup.errors.missingNumber" datatype="html"> + <trans-unit id="form.errors.missingNumber" datatype="html"> <source>Your password must contain at least one number.</source> <target>Your password must contain at least one number.</target> </trans-unit> - <trans-unit id="signup.errors.forbiddenWord" datatype="html"> + <trans-unit id="form.errors.forbiddenWord" datatype="html"> <source>Your password must not contain obvious words.</source> <target>Your password must not contain obvious words.</target> </trans-unit> @@ -525,31 +533,31 @@ <source>Password confirmation</source> <target>Password confirmation</target> </trans-unit> - <trans-unit id="signup.errors.missingConfirmationPassword" datatype="html"> + <trans-unit id="form.errors.missingConfirmationPassword" datatype="html"> <source>You must confirm your password.</source> <target>You must confirm your password.</target> </trans-unit> - <trans-unit id="signup.errors.passwordConfirmationError" datatype="html"> + <trans-unit id="form.errors.passwordConfirmationError" datatype="html"> <source>The password confirmation doesn't match with the password.</source> <target>The password confirmation doesn't match with the password.</target> </trans-unit> - <trans-unit id="signup.entreprise" datatype="html"> + <trans-unit id="form.entreprise" datatype="html"> <source>Company</source> <target>Company</target> </trans-unit> - <trans-unit id="signup.address" datatype="html"> + <trans-unit id="form.address" datatype="html"> <source>Address</source> <target>Address</target> </trans-unit> - <trans-unit id="signup.zipcode" datatype="html"> + <trans-unit id="form.zipcode" datatype="html"> <source>Zipcode</source> <target>Zipcode</target> </trans-unit> - <trans-unit id="signup.city" datatype="html"> + <trans-unit id="form.city" datatype="html"> <source>City</source> <target>City</target> </trans-unit> - <trans-unit id="signup.country" datatype="html"> + <trans-unit id="form.country" datatype="html"> <source>Country</source> <target>Country</target> </trans-unit> @@ -597,6 +605,38 @@ <source>Send my request</source> <target>Send my request</target> </trans-unit> + <trans-unit id="userService.removeButton" datatype="html"> + <source>Remove access</source> + <target>Remove access</target> + </trans-unit> + <trans-unit id="userAccount.updateProfil" datatype="html"> + <source>Update your profil</source> + <target>Update your profil</target> + </trans-unit> + <trans-unit id="userAccount.newPassword" datatype="html"> + <source>New password</source> + <target>New password</target> + </trans-unit> + <trans-unit id="userAccount.newPasswordConfirmation" datatype="html"> + <source>New password confirmation</source> + <target>New password confirmation</target> + </trans-unit> + <trans-unit id="userAccount.oldPassword" datatype="html"> + <source>Old password</source> + <target>Old password</target> + </trans-unit> + <trans-unit id="userAccount.errors.missingOldPassword" datatype="html"> + <source>You must enter your old password.</source> + <target>You must enter your old password.</target> + </trans-unit> + <trans-unit id="userAccount.errors.wrongPassword" datatype="html"> + <source>Make sure to enter the right password.</source> + <target>Make sure to enter the right password.</target> + </trans-unit> + <trans-unit id="userAccount.updatePassword" datatype="html"> + <source>Update your password</source> + <target>Update your password</target> + </trans-unit> </body> </file> </xliff> diff --git a/src/i18n/messages.fr.xlf b/src/i18n/messages.fr.xlf index 8d82f485..e5b9f33b 100644 --- a/src/i18n/messages.fr.xlf +++ b/src/i18n/messages.fr.xlf @@ -38,6 +38,14 @@ <source>Sign Out</source> <target>Déconnexion</target> </trans-unit> + <trans-unit id="header.userServices" datatype="html"> + <source>My services</source> + <target>Mes services</target> + </trans-unit> + <trans-unit id="header.userAccount" datatype="html"> + <source>My account</source> + <target>Mon compte</target> + </trans-unit> <trans-unit id="footer.rss" datatype="html"> <source>RSS Feed (new window)</source> <target>Flux RSS (nouvelle fenêtre)</target> @@ -445,35 +453,35 @@ <source>Sign up</source> <target>Inscription</target> </trans-unit> - <trans-unit id="signup.lastname" datatype="html"> + <trans-unit id="form.lastname" datatype="html"> <source>Last Name</source> <target>Nom de famille</target> </trans-unit> - <trans-unit id="signup.errors.invalidLastname" datatype="html"> + <trans-unit id="form.errors.invalidLastname" datatype="html"> <source>You must enter your last name.</source> <target>Veuillez saisir votre nom de famille.</target> </trans-unit> - <trans-unit id="signup.errors.forbiddenCharacters" datatype="html"> + <trans-unit id="form.errors.forbiddenCharacters" datatype="html"> <source>Special characters are forbidden.</source> <target>Les caractères spéciaux sont interdits.</target> </trans-unit> - <trans-unit id="signup.firstname" datatype="html"> + <trans-unit id="form.firstname" datatype="html"> <source>First Name</source> <target>Prénom</target> </trans-unit> - <trans-unit id="signup.errors.invalidFirstname" datatype="html"> + <trans-unit id="form.errors.invalidFirstname" datatype="html"> <source>You must enter your first name.</source> <target>Veuillez saisir votre prénom.</target> </trans-unit> - <trans-unit id="signup.email" datatype="html"> + <trans-unit id="form.email" datatype="html"> <source>Email</source> <target>Email</target> </trans-unit> - <trans-unit id="signup.errors.missingEmail" datatype="html"> + <trans-unit id="form.errors.missingEmail" datatype="html"> <source>You must enter your email address.</source> <target>Veuillez saisir votre adresse email.</target> </trans-unit> - <trans-unit id="signup.errors.invalidEmail" datatype="html"> + <trans-unit id="form.errors.invalidEmail" datatype="html"> <source>You must enter a valid email address.</source> <target>Veuillez saisir une adresse email valide.</target> </trans-unit> @@ -489,11 +497,11 @@ <source>You must enter the same email address.</source> <target>Veuillez saisir une adresse email identique à l'email saisie précédemment.</target> </trans-unit> - <trans-unit id="signup.messagesAgreement" datatype="html"> + <trans-unit id="form.messagesAgreement" datatype="html"> <source>I agree to receive information</source> <target>J'accepte de recevoir des informations</target> </trans-unit> - <trans-unit id="signup.acceptMessagesInfo" datatype="html"> + <trans-unit id="form.acceptMessagesInfo" datatype="html"> <source>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.</source> <target>Cochez cette case si vous acceptez que Data vous envoie par mail des informations sur le fonctionnement des services, les modifications de modèles, les nouveaux formats, les opérations de maintenance. Vos données ne seront pas transmises aux partenaires.</target> </trans-unit> @@ -501,31 +509,31 @@ <source>Password</source> <target>Mot de passe</target> </trans-unit> - <trans-unit id="signup.errors.missingpassword" datatype="html"> - <source>You must enter an password.</source> + <trans-unit id="form.errors.missingpassword" datatype="html"> + <source>You must enter a password.</source> <target>Veuillez saisir un mot de passe.</target> </trans-unit> - <trans-unit id="signup.errors.minLength" datatype="html"> + <trans-unit id="form.errors.minLength" datatype="html"> <source>Your password must at least contain <x id="INTERPOLATION"/> characters</source> <target>Votre mot de passe doit contenir au minimum <x id="INTERPOLATION"/> caractères.</target> </trans-unit> - <trans-unit id="signup.errors.missingSpecialCharacters" datatype="html"> + <trans-unit id="form.errors.missingSpecialCharacters" datatype="html"> <source>Your password must contain at least one special character.</source> <target>Votre mot de passe doit contenir au minimum un caractère spécial.</target> </trans-unit> - <trans-unit id="signup.errors.missingUppercasedLetter" datatype="html"> + <trans-unit id="form.errors.missingUppercasedLetter" datatype="html"> <source>Your password must contain at least one uppercased character.</source> <target>Votre mot de passe doit contenir au minimum un caractère en majuscule.</target> </trans-unit> - <trans-unit id="signup.errors.missingLowercasedLetter" datatype="html"> + <trans-unit id="form.errors.missingLowercasedLetter" datatype="html"> <source>Your password must contain at least one lowercased character.</source> <target>Votre mot de passe doit contenir au minimum un caractère en minuscule.</target> </trans-unit> - <trans-unit id="signup.errors.missingNumber" datatype="html"> + <trans-unit id="form.errors.missingNumber" datatype="html"> <source>Your password must contain at least one number.</source> <target>Votre mot de passe doit contenir au minimum un chiffre.</target> </trans-unit> - <trans-unit id="signup.errors.forbiddenWord" datatype="html"> + <trans-unit id="form.errors.forbiddenWord" datatype="html"> <source>Your password must not contain obvious words.</source> <target>Votre mot de passe ne doit pas contenir de mots évidents.</target> </trans-unit> @@ -533,31 +541,31 @@ <source>Password confirmation</source> <target>Confirmer le mot de passe</target> </trans-unit> - <trans-unit id="signup.errors.missingConfirmationPassword" datatype="html"> + <trans-unit id="form.errors.missingConfirmationPassword" datatype="html"> <source>You must confirm your password.</source> <target>Veuillez confirmer votre mot de passe.</target> </trans-unit> - <trans-unit id="signup.errors.passwordConfirmationError" datatype="html"> + <trans-unit id="form.errors.passwordConfirmationError" datatype="html"> <source>The password confirmation doesn't match with the password.</source> <target>Le confirmation du mot de passe ne correspond pas avec le mot de passe saisi.</target> </trans-unit> - <trans-unit id="signup.entreprise" datatype="html"> + <trans-unit id="form.entreprise" datatype="html"> <source>Company</source> <target>Entreprise</target> </trans-unit> - <trans-unit id="signup.address" datatype="html"> + <trans-unit id="form.address" datatype="html"> <source>Address</source> <target>Adresse</target> </trans-unit> - <trans-unit id="signup.zipcode" datatype="html"> + <trans-unit id="form.zipcode" datatype="html"> <source>Zipcode</source> <target>Code postal</target> </trans-unit> - <trans-unit id="signup.city" datatype="html"> + <trans-unit id="form.city" datatype="html"> <source>City</source> <target>Ville</target> </trans-unit> - <trans-unit id="signup.country" datatype="html"> + <trans-unit id="form.country" datatype="html"> <source>Country</source> <target>Pays</target> </trans-unit> @@ -604,6 +612,38 @@ <trans-unit id="userService.sendRequest" datatype="html"> <source>Send my request</source> <target>Envoyer ma demande</target> + </trans-unit> + <trans-unit id="userService.removeButton" datatype="html"> + <source>Remove access</source> + <target>Supprimer les accès</target> + </trans-unit> + <trans-unit id="userAccount.updateProfil" datatype="html"> + <source>Update your profil</source> + <target>Modifier son profil</target> + </trans-unit> + <trans-unit id="userAccount.newPassword" datatype="html"> + <source>New password</source> + <target>Nouveau mot de passe</target> + </trans-unit> + <trans-unit id="userAccount.newPasswordConfirmation" datatype="html"> + <source>New password confirmation</source> + <target>Confirmation du nouveau mot de passe</target> + </trans-unit> + <trans-unit id="userAccount.oldPassword" datatype="html"> + <source>Old password</source> + <target>Ancien mot de passe</target> + </trans-unit> + <trans-unit id="userAccount.errors.missingOldPassword" datatype="html"> + <source>You must enter your old password.</source> + <target>Veuillez saisir votre ancien mot de passe.</target> + </trans-unit> + <trans-unit id="userAccount.errors.wrongPassword" datatype="html"> + <source>Make sure to enter the right password.</source> + <target>Assurez vous d'avoir saisi le bon mot de passe.</target> + </trans-unit> + <trans-unit id="userAccount.updatePassword" datatype="html"> + <source>Update your password</source> + <target>Modifier son mot de passe</target> </trans-unit> </body> </file> diff --git a/src/i18n/notification-messages/notification-messages.fr.ts b/src/i18n/notification-messages/notification-messages.fr.ts index 358e2e08..13f79a89 100644 --- a/src/i18n/notification-messages/notification-messages.fr.ts +++ b/src/i18n/notification-messages/notification-messages.fr.ts @@ -45,5 +45,6 @@ export const messages = { userInfoUpdated: 'Vos informations ont bien été enregistrées.', failedToUpdateUserPassword: 'Une erreur est survenue lors de la mise à jour de votre mot de passe.', userPasswordUpdated: 'Votre mot de passe a été mis à jour.', + wrongOldPassword: 'Il semblerait que l\'ancien mot de passe saisi soit incorrect.', }, }; diff --git a/src/i18n/notification-messages/notification-messages.ts b/src/i18n/notification-messages/notification-messages.ts index c9dd3e3a..ecc81cba 100644 --- a/src/i18n/notification-messages/notification-messages.ts +++ b/src/i18n/notification-messages/notification-messages.ts @@ -44,5 +44,6 @@ export const messages = { userInfoUpdated: 'Your information have been saved.', userPasswordUpdated: 'Your password has been updated.', failedToUpdateUserPassword: 'An error occured while updating your password.', + wrongOldPassword: 'Looks like the old password entered is incorrect.', }, }; -- GitLab