8955-qa-registration-style-layout-and-content-issues

documentation.json

@@ -41344,7 +41344,7 @@
       },
       "extends": "BaseForm",
       "implements": ["OnInit", "AfterViewInit"],
-      "templateData": "<ng-container [formGroup]=\"form\">\n  <div class=\"input-container\">\n    <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n      <mat-label i18n=\"@@register.firstName\">First name</mat-label>\n      <input\n        id=\"given-names-input\"\n        formControlName=\"givenNames\"\n        matInput\n        #firstInput\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'givenNames')\"\n        i18n=\"@@register.firstNamePassword\"\n      >\n        Please enter your first/given name\n      </mat-error>\n      <mat-error\n        *ngIf=\"form.hasError('illegalName', 'givenNames')\"\n        i18n=\"@@register.invalidName\"\n      >\n        Invalid name characters or format\n      </mat-error>\n      <mat-error *ngIf=\"form.hasError('backendError', 'givenNames')\">\n        <div *ngFor=\"let error of form.getError('backendError', 'givenNames')\">\n          <app-backend-error [errorCode]=\"error\"></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n\n    <button\n      mat-icon-button\n      [attr.aria-label]=\"labelInfoAboutName\"\n      type=\"button\"\n      [mdePopoverTriggerFor]=\"namesPopover\"\n      mdePopoverTriggerOn=\"click\"\n      #namesPopoverTrigger=\"mdePopoverTrigger\"\n    >\n      <mat-icon class=\"material-icons-outlined large-material-icon\"\n        >help_outline</mat-icon\n      >\n    </button>\n  </div>\n  <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n    <mat-label\n      ><ng-container i18n=\"@@register.lastName\">Last name</ng-container>\n      <ng-container i18n=\"@@register.optional\"\n        >(Optional)</ng-container\n      ></mat-label\n    >\n    <input id=\"family-names-input\" formControlName=\"familyNames\" matInput />\n    <mat-error\n      *ngIf=\"form.hasError('illegalName', 'familyNames')\"\n      i18n=\"@@register.invalidName\"\n    >\n      Invalid name characters or format\n    </mat-error>\n    <mat-error *ngIf=\"form.hasError('backendError', 'familyNames')\">\n      <div *ngFor=\"let error of form.getError('backendError', 'familyNames')\">\n        <app-backend-error [errorCode]=\"error\"></app-backend-error>\n      </div>\n    </mat-error>\n  </mat-form-field>\n\n  <ng-container formGroupName=\"emails\">\n    <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n      <mat-label i18n=\"@@register.primaryEmail\">Primary email</mat-label>\n      <input\n        id=\"email-input\"\n        formControlName=\"email\"\n        matInput\n        appTrim\n        type=\"email\"\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'emails.email')\"\n        i18n=\"@@register.primaryEmailRequired\"\n      >\n        An email is required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          this.emails.hasError('email', 'email') ||\n          this.emails.hasError('pattern', 'email')\n        \"\n        i18n=\"@@register.invalidEmail\"\n      >\n        Invalid email format\n      </mat-error>\n\n      <mat-error *ngIf=\"this.emails.hasError('backendError', 'email')\">\n        <div\n          *ngFor=\"let error of this.emails.getError('backendError', 'email')\"\n        >\n          <app-backend-error\n            [errorCode]=\"error\"\n            [value]=\"emails.get('email').value\"\n          ></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field\n      appearance=\"outline\"\n      *ngIf=\"!reactivation?.isReactivation\"\n      [hideRequiredMarker]=\"true\"\n    >\n      <mat-label i18n=\"@@register.confirmEmail\"\n        >Confirm primary email</mat-label\n      >\n      <input\n        formControlName=\"confirmEmail\"\n        matInput\n        (paste)=\"(false)\"\n        appTrim\n        autocomplete=\"off\"\n        type=\"email\"\n        id=\"confirm-email-input\"\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'emails.confirmEmail')\"\n        i18n=\"@@register.confirmEmailRequired\"\n      >\n        Please confirm your email\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          this.emails.hasError('email', 'confirmEmail') ||\n          this.emails.hasError('pattern', 'confirmEmail')\n        \"\n        i18n=\"@@register.invalidEmail\"\n      >\n        Invalid email format\n      </mat-error>\n      <mat-error\n        *ngIf=\"this.emails.hasError('mismatch', 'confirmEmail')\"\n        i18n=\"@@register.confirmationEmailNotMatch\"\n      >\n        Email confirmation does not match\n      </mat-error>\n      <mat-error\n        *ngIf=\"this.emails.hasError('backendError', 'emails.confirmEmail')\"\n      >\n        <div\n          *ngFor=\"\n            let error of form.getError('backendError', 'emails.confirmEmail')\n          \"\n        >\n          <app-backend-error [errorCode]=\"error\"></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n\n    <!-- ADDITIONAL EMAILS -->\n    <app-form-personal-additional-emails\n      [additionalEmails]=\"additionalEmails\"\n    ></app-form-personal-additional-emails>\n  </ng-container>\n</ng-container>\n\n<mde-popover\n  #namesPopover=\"mdePopover\"\n  [mdePopoverOverlapTrigger]=\"false\"\n  [mdePopoverCloseOnClick]=\"true\"\n>\n  <mat-card class=\"mat-elevation-z3 orcid-popover\">\n    <p i18n=\"@@register.firstNameDetail\">\n      First name is your given name or the name you most commonly go by.\n    </p>\n    <p i18n=\"@@register.lastNameDetail\">Last name is your family name.</p>\n    <p i18n=\"@@register.youWillHaveAChance\">\n      You will have a chance to add additional names after you have created your\n      account.\n    </p>\n    <a\n      href=\"https://support.orcid.org/hc/articles/360006973853\"\n      target=\"orcid.frontend.register.help.more_info.link.text\"\n      i18n=\"@@register.moreInfoOnNames\"\n      >More information on names</a\n    >\n  </mat-card>\n</mde-popover>\n"
+      "templateData": "<ng-container [formGroup]=\"form\">\n  <div class=\"input-container\">\n    <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n      <mat-label i18n=\"@@register.firstName\">First name</mat-label>\n      <input\n        id=\"given-names-input\"\n        formControlName=\"givenNames\"\n        matInput\n        #firstInput\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'givenNames')\"\n        i18n=\"@@register.firstNamePassword\"\n      >\n        Please enter your first/given name\n      </mat-error>\n      <mat-error\n        *ngIf=\"form.hasError('illegalName', 'givenNames')\"\n        i18n=\"@@register.invalidName\"\n      >\n        Invalid name characters or format\n      </mat-error>\n      <mat-error *ngIf=\"form.hasError('backendError', 'givenNames')\">\n        <div *ngFor=\"let error of form.getError('backendError', 'givenNames')\">\n          <app-backend-error [errorCode]=\"error\"></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n\n    <button\n      mat-icon-button\n      [attr.aria-label]=\"labelInfoAboutName\"\n      type=\"button\"\n      [mdePopoverTriggerFor]=\"namesPopover\"\n      mdePopoverTriggerOn=\"click\"\n      #namesPopoverTrigger=\"mdePopoverTrigger\"\n    >\n      <mat-icon class=\"material-icons-outlined large-material-icon\"\n        >help_outline</mat-icon\n      >\n    </button>\n  </div>\n  <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n    <mat-label\n      ><ng-container i18n=\"@@register.lastName\">Last name</ng-container>\n      <ng-container i18n=\"@@register.optional\"\n        >(Optional)</ng-container\n      ></mat-label\n    >\n    <input id=\"family-names-input\" formControlName=\"familyNames\" matInput />\n    <mat-error\n      *ngIf=\"form.hasError('illegalName', 'familyNames')\"\n      i18n=\"@@register.invalidName\"\n    >\n      Invalid name characters or format\n    </mat-error>\n    <mat-error *ngIf=\"form.hasError('backendError', 'familyNames')\">\n      <div *ngFor=\"let error of form.getError('backendError', 'familyNames')\">\n        <app-backend-error [errorCode]=\"error\"></app-backend-error>\n      </div>\n    </mat-error>\n  </mat-form-field>\n\n  <ng-container formGroupName=\"emails\">\n    <mat-form-field appearance=\"outline\" [hideRequiredMarker]=\"true\">\n      <mat-label i18n=\"@@register.primaryEmail\">Primary email</mat-label>\n      <input\n        id=\"email-input\"\n        formControlName=\"email\"\n        matInput\n        appTrim\n        type=\"email\"\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'emails.email')\"\n        i18n=\"@@register.primaryEmailRequired\"\n      >\n        An email is required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          this.emails.hasError('email', 'email') ||\n          this.emails.hasError('pattern', 'email')\n        \"\n        i18n=\"@@register.invalidEmail\"\n      >\n        Invalid email format\n      </mat-error>\n\n      <mat-error *ngIf=\"this.emails.hasError('backendError', 'email')\">\n        <div\n          *ngFor=\"let error of this.emails.getError('backendError', 'email')\"\n        >\n          <app-backend-error\n            [errorCode]=\"error\"\n            [value]=\"emails.get('email').value\"\n          ></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field\n      appearance=\"outline\"\n      *ngIf=\"!reactivation?.isReactivation\"\n      [hideRequiredMarker]=\"true\"\n    >\n      <mat-label i18n=\"@@register.confirmEmail\"\n        >Confirm primary email</mat-label\n      >\n      <input\n        formControlName=\"confirmEmail\"\n        matInput\n        (paste)=\"(false)\"\n        appTrim\n        autocomplete=\"off\"\n        type=\"email\"\n        id=\"confirm-email-input\"\n      />\n      <mat-error\n        *ngIf=\"form.hasError('required', 'emails.confirmEmail')\"\n        i18n=\"@@register.confirmEmailRequired\"\n      >\n        Please confirm your email\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          this.emails.hasError('email', 'confirmEmail') ||\n          this.emails.hasError('pattern', 'confirmEmail')\n        \"\n        i18n=\"@@register.invalidEmail\"\n      >\n        Invalid email format\n      </mat-error>\n      <mat-error\n        *ngIf=\"this.emails.hasError('mismatch', 'confirmEmail')\"\n        i18n=\"@@register.confirmationEmailNotMatch\"\n      >\n        Email confirmation does not match\n      </mat-error>\n      <mat-error\n        *ngIf=\"this.emails.hasError('backendError', 'emails.confirmEmail')\"\n      >\n        <div\n          *ngFor=\"\n            let error of form.getError('backendError', 'emails.confirmEmail')\n          \"\n        >\n          <app-backend-error [errorCode]=\"error\"></app-backend-error>\n        </div>\n      </mat-error>\n    </mat-form-field>\n\n    <!-- ADDITIONAL EMAILS -->\n    <app-form-personal-additional-emails\n      [additionalEmails]=\"additionalEmails\"\n    ></app-form-personal-additional-emails>\n  </ng-container>\n</ng-container>\n\n<mde-popover\n  #namesPopover=\"mdePopover\"\n  [mdePopoverOverlapTrigger]=\"false\"\n  [mdePopoverCloseOnClick]=\"true\"\n>\n  <mat-card class=\"mat-elevation-z3 orcid-popover\">\n    <p i18n=\"@@register.firstNameDetail\">\n      First name is your given name or The names you most commonly go by.\n    </p>\n    <p i18n=\"@@register.lastNameDetail\">Last name is your family name.</p>\n    <p i18n=\"@@register.youWillHaveAChance\">\n      You will have a chance to add additional names after you have created your\n      account.\n    </p>\n    <a\n      href=\"https://support.orcid.org/hc/articles/360006973853\"\n      target=\"orcid.frontend.register.help.more_info.link.text\"\n      i18n=\"@@register.moreInfoOnNames\"\n      >More information on names</a\n    >\n  </mat-card>\n</mde-popover>\n"
     },
     {
       "name": "FormSignInComponent",

src/app/register/components/form-personal/form-personal.component.html

@@ -163,7 +163,7 @@
 >
   <mat-card class="mat-elevation-z3 orcid-popover">
     <p i18n="@@register.firstNameDetail">
-      First name is your given name or the name you most commonly go by.
+      First name is your given name or The names you most commonly go by.
     </p>
     <p i18n="@@register.lastNameDetail">Last name is your family name.</p>
     <p i18n="@@register.youWillHaveAChance">

src/app/register2/components/form-password/form-password.component.ts

@@ -42,7 +42,7 @@ import { environment } from 'src/environments/environment'
 export class FormPasswordComponent extends BaseForm implements OnInit {
   labelInfo = $localize`:@@register.ariaLabelInfoPassword:info about password`
   labelClose = $localize`:@@register.ariaLabelClose:close`
-  labelConfirmPassword = $localize`:@@register.confirmPassword:Confirm password`
+  labelConfirmPassword = $localize`:@@register.confirmYourPassword:Confirm your password`
   @ViewChild(`#passwordPopover`) passwordPopover
   @ViewChild(`#passwordPopoverTrigger`) passwordPopoverTrigger
   hasNumberPattern = HAS_NUMBER

src/app/register2/components/form-personal/form-personal.component.html

@@ -95,8 +95,8 @@ <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
           error: emailFormTouched && emails.controls.email.errors
         }"
         id="email-input-label"
-        i18n="@@register.Email"
-        >Email</mat-label
+        i18n="@@register.primaryEmail"
+        >Primary email</mat-label
       >
 
       <mat-form-field
@@ -114,6 +114,7 @@ <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
           matInput
           appTrim
           type="email"
+          [placeholder]="emailPlaceholder"
         />
       </mat-form-field>
       <mat-error
@@ -270,8 +271,8 @@ <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
             </h3>
           </div>
           <div>
-            <ng-container i18n="@@register.addA"> Add a </ng-container
-            ><strong i18n="@@register.professionalEmail"
+            <ng-container i18n="@@register.addA">Add a</ng-container>
+            <strong i18n="@@register.professionalEmail"
               >professional email</strong
             >
             <ng-container i18n="@@register.asBackupSoWeCanBetter">
@@ -299,7 +300,7 @@ <h3 class="orc-font-body" i18n="@@register.addAnotherEmailToSecure">
           </div>
           <div i18n="@@register.addingAnAddiotionalEmailAsBackup">
             Adding an additional email as backup helps secure your account and
-            make sure you can always sign in.
+            makes sure you can always sign in.
           </div>
         </div>
       </div>

src/app/register2/components/form-personal/form-personal.component.ts

@@ -80,12 +80,12 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
   @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective
-
+  emailPlaceholder = $localize`:@@register.emailPlaceholder:The email address you use most`
   arialabelConfirmEmail = $localize`:@@register.labelConfirmEmail:Confirm your email address`
   labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
   labelClose = $localize`:@@register.ariaLabelClose:close`
   labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
-  labelNameYouMostCommonly = $localize`:@@register.labelNameYouMostMost:The name you most commonly go by`
+  labelNameYouMostCommonly = $localize`:@@register.labelNameYouMostMost:The names you most commonly go by`
   labelFamilyNamePlaceholder = $localize`:@@register.familyNamePlaceholder:Your family name or surname
   `
   professionalEmail: boolean

src/app/register2/components/form-visibility/form-visibility.component.html

@@ -72,8 +72,8 @@
           />
           <div class="inlined">
             <div>
-              <strong i18n="@@register.VisibilityTrusted"
-                >Trusted Organizations</strong
+              <strong i18n="@@register.VisibilityParties"
+                >Trusted parties</strong
               >
               <ng-container i18n="@@register.VisibilityTrusted2"
                 >(5% of users choose this)</ng-container

src/app/register2/components/form-visibility/form-visibility.component.scss

@@ -8,3 +8,6 @@
     margin-left: 4px;
   }
 }
+mat-error {
+  font-size: 14px !important;
+}

src/app/register2/components/register2.style.scss

@@ -20,7 +20,7 @@ h3.margin-top-12,
 
 legend {
   margin-top: 32px;
-  margin-bottom: 14px;
+  margin-bottom: 2px;
   font-weight: bold;
   h3 {
     margin-block-start: 0;
@@ -41,7 +41,7 @@ fieldset {
 }
 
 mat-card-title img {
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 }
 
 .input-container {
@@ -65,10 +65,35 @@ mat-label.orc-font-small-print {
     font-style: italic;
   }
 }
+.columns-12 {
+  :host ::ng-deep {
+    .mat-card-title {
+      margin-top: 64px;
+    }
+    .mat-card.orcid-wizard {
+      margin-top: 32px !important;
+      mat-card-content {
+        margin-left: 64px;
+        margin-right: 64px;
+        margin-bottom: 64px;
+      }
+    }
+  }
+}
 
 :host ::ng-deep {
   mat-card {
     margin-top: 32px !important;
+    .mat-stepper-next {
+      height: 40px;
+      font-size: 16px;
+    }
+    button.mat-stepper-previous {
+      height: 40px;
+    }
+    p {
+      line-height: 21px;
+    }
   }
 
   mat-error {

src/app/register2/components/step-c-t/step-c.component.scss

@@ -2,3 +2,7 @@
   display: flex;
   flex-direction: column;
 }
+
+mat-error {
+  font-size: 14px;
+}

src/app/register2/components/step-d/step-d.component.html

@@ -28,7 +28,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
-      <h2 class="orc-font-body-small" i18n="@@register.step2.3">
+      <h2 class="orc-font-body-small" i18n="@@register.step2.4">
         Step 4 of 4 - Terms and conditions
       </h2>
     </mat-card-subtitle>