Fix/developer tools second batch

angular.json

@@ -211,6 +211,15 @@
                 }
               ]
             },
+            "local-with-proxy-localize-xx": {
+              "localize": ["xx"],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local-with-proxy.ts"
+                }
+              ]
+            },
             "production": {
               "budgets": [
                 {
@@ -342,6 +351,10 @@
               "browserTarget": "ng-orcid:build:local-with-proxy-localize-fr",
               "proxyConfig": "src/proxy.conf.qa.mjs"
             },
+            "local-qa-xx": {
+              "browserTarget": "ng-orcid:build:local-with-proxy-localize-xx",
+              "proxyConfig": "src/proxy.conf.qa.mjs"
+            },
             "local-sandbox": {
               "browserTarget": "ng-orcid:build:local-with-proxy",
               "proxyConfig": "src/proxy.conf.sandbox..mjs"

package.json

@@ -7,6 +7,7 @@
     "start-sandbox": "ng serve --configuration=local-sandbox --host 0.0.0.0",
     "start:en": "ng serve --configuration=local-qa-en --disable-host-check",
     "start:fr": "ng serve --configuration=local-qa-fr --disable-host-check",
+    "start:xx": "ng serve --configuration=local-qa-xx --disable-host-check",
     "test": "ng test",
     "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "echo 'temporally disable Angular linter to until eslint update'",

src/app/constants.ts

@@ -125,7 +125,7 @@ export const ApplicationRoutesLabels = {
   [ApplicationRoutes.trustedParties]: $localize`:@@share.trustedParties:Trusted parties - ORCID `,
   [ApplicationRoutes.resetPasswordEmail]: $localize`:@@share.resetPasswordEmail:Reset password - ORCID`,
   [ApplicationRoutes.selfService]: $localize`:@@share.selfService:Self Service - ORCID`,
-  [ApplicationRoutes.developerTools]: $localize`:@@share.selfService:Developer tools - ORCID`,
+  [ApplicationRoutes.developerTools]: $localize`:@@share.developerTools:Developer tools - ORCID`,
 }
 
 export const ApplicationDynamicRoutesLabels = {

src/app/developer-tools/components/client-secret/client-secret.component.html

@@ -6,7 +6,7 @@
   <div class="botton-line">
     <div>{{ clientSecret }}</div>
     <a
-      class="underline"
+      class="underline orc-font-body-small"
       (click)="clientSecretUpdated.next()"
       i18n="@@developerTools.generateNewClientSecret"
     >

src/app/developer-tools/components/code-panel/code-panel.component.html

@@ -5,12 +5,16 @@
       (click)="swapOpenState()"
       *ngIf="!openState"
       class="expand_more"
-      [attr.aria-label]="expandAriaLabel + ' ' + title"
+      [attr.aria-label]="
+        expandAriaLabel + ' ' + title + ' ' + exampleCodeAriaLabel
+      "
     >
       <mat-icon>expand_less</mat-icon>
     </button>
     <button
-      [attr.aria-label]="collapseAriaLabel + ' ' + title"
+      [attr.aria-label]="
+        collapseAriaLabel + ' ' + title + ' ' + exampleCodeAriaLabel
+      "
       mat-icon-button
       (click)="swapOpenState()"
       *ngIf="openState"

src/app/developer-tools/components/code-panel/code-panel.component.ts

@@ -11,6 +11,7 @@ import { Component, Input, OnInit } from '@angular/core'
 export class CodePanelComponent implements OnInit {
   collapseAriaLabel = $localize`:@@developerTools.collapse:Collapse`
   expandAriaLabel = $localize`:@@developerTools.expand:Expand`
+  exampleCodeAriaLabel = $localize`:@@developerTools.exampleCode:example code`
 
   openState = false
   @Input() title: string

src/app/developer-tools/developer-tools.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 
 import { DeveloperToolsRoutingModule } from './developer-tools-routing.module'
-import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools.component'
 import { TopBarMyPublicRecordPreviewModule } from '../cdk/top-bar-my-public-record-preview/top-bar-my-public-record-preview.module'
 import { SideBarModule } from '../cdk/side-bar/side-bar.module'
 import { MatCheckboxModule } from '@angular/material/checkbox'
@@ -22,6 +21,7 @@ import { ClientSecretModalComponent } from './components/client-secret-modal/cli
 import { ModalModule } from '../cdk/modal/modal.module'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
 import { TopBarVerificationEmailModule } from '../cdk/top-bar-verification-email/top-bar-verification-email.module'
+import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools.component'
 
 @NgModule({
   declarations: [

src/app/developer-tools/pages/developer-tools/developer-tools.component.html

@@ -10,7 +10,14 @@
         >
           Developer tools
         </h1>
-        <a routerLink="/my-orcid">Back to my record</a>
+        <a
+          routerLink="/my-orcid"
+          i18n="@@developerTools.backToMyRecod"
+          cdkFocusInitial
+          #firstInput
+          class="underline orc-font-body-small"
+          >Back to my record</a
+        >
       </div>
 
       <div class="loading-container">
@@ -66,6 +73,7 @@
 
           <div class="row">
             <label
+              for="displayName"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -78,7 +86,12 @@
               >
             </label>
             <mat-form-field appearance="outline" class="mat-form-field-min">
-              <input matInput formControlName="displayName" type="text" />
+              <input
+                matInput
+                formControlName="displayName"
+                type="text"
+                id="displayName"
+              />
               <mat-error
                 *ngIf="form.hasError('required', 'displayName')"
                 i18n="@@developerTools.applicationNameCannotBeEmpty"
@@ -99,6 +112,7 @@
           </div>
           <div class="row">
             <label
+              for="website"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -111,7 +125,12 @@
               >
             </label>
             <mat-form-field appearance="outline" class="mat-form-field-min">
-              <input matInput formControlName="website" type="text" />
+              <input
+                matInput
+                formControlName="website"
+                type="text"
+                id="website"
+              />
               <mat-error
                 *ngIf="form.hasError('required', 'website')"
                 i18n="@@developerTools.websiteNameCannotBeEmpty"
@@ -129,6 +148,7 @@
 
           <div class="row">
             <label
+              for="api-description"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -220,7 +240,7 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
                   >
 
                   <a
-                    class="undeline"
+                    class="underline"
                     i18n="@@developerTools.redirectUriFaq"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -249,7 +269,11 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
             <ng-container
               *ngFor="let redirectUri of redirectUris.controls; index as i"
             >
-              <mat-form-field appearance="outline" class="mat-form-field-min">
+              <mat-form-field
+                appearance="outline"
+                class="mat-form-field-min"
+                [id]="i + 'url'"
+              >
                 <input
                   #websiteInput
                   matInput
@@ -292,7 +316,7 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
           <div class="row">
             <a
               id="add-link"
-              class="col add-more no-gutters undeline-link"
+              class="col add-more no-gutters underline"
               (click)="addRedirectUri()"
             >
               <mat-icon class="large-material-icon"
@@ -319,7 +343,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               </p>
 
               <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
-              <p>https://sandbox.orcid.org/oauth/authorize</p>
+              <p>{{ baseURL }}/oauth/authorize</p>
 
               <strong i18n="@@developerTools.scope">Scope</strong>
               <p>/authenticate</p>
@@ -330,10 +354,12 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               <p i18n="@@developerTools.code">code</p>
 
               <code
-                >https://sandbox.orcid.org/oauth/authorize?client_id={{
+                >{{ baseURL }}/oauth/authorize?client_id={{
                   this.existingClient.clientId.value
-                }}&response_type=code&scope=/authenticate&redirect_uri=REPLACE
-                WITH REDIRECT URI
+                }}&response_type=code&scope=/authenticate&redirect_uri=<ng-container
+                  i18n="@@developerTools.replaceWithRedirect"
+                  >REPLACE WITH REDIRECT URI</ng-container
+                >
               </code>
             </app-code-panel>
             <app-code-panel [title]="labelTokenRequest">
@@ -343,7 +369,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               </p>
 
               <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
-              <p>https://sandbox.orcid.org/oauth/token</p>
+              <p>{{ baseURL }}/oauth/token</p>
 
               <strong i18n="@@developerTools.responseType"
                 >Response type</strong
@@ -358,9 +384,12 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                   this.existingClient.clientId.value
                 }}&client_secret={{
                   this.existingClient.clientSecret.value
-                }}&grant_type=authorization_code&redirect_uri=REPLACE WITH
-                REDIRECT URI&code=REPLACE WITH OAUTH CODE'
-                https://sandbox.orcid.org/oauth/token
+                }}&grant_type=authorization_code&redirect_uri=<ng-container
+                  i18n="@@developerTools.replaceWithRedirect"
+                  >REPLACE WITH REDIRECT URI</ng-container
+                >&code=<ng-container i18n="@@developerTools.replaceWithOauth"
+                  >REPLACE WITH OAUTH CODE</ng-container
+                >' {{ baseURL }}/oauth/token
               </code>
             </app-code-panel>
             <app-code-panel [title]="labelOpenIdImplicitRequest">
@@ -372,7 +401,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                 >
 
                 <a
-                  class="undeline"
+                  class="underline"
                   i18n="@@developerTools.moreInformation"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -382,7 +411,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               </p>
 
               <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
-              <p>https://sandbox.orcid.org/oauth/token</p>
+              <p>{{ baseURL }}/oauth/token</p>
 
               <strong i18n="@@developerTools.scope">Scope</strong>
               <p>openid</p>
@@ -393,62 +422,56 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
               <p>token</p>
 
               <code
-                >https://sandbox.orcid.org/oauth/authorize?client_id={{
+                >{{ baseURL }}/oauth/authorize?client_id={{
                   this.existingClient.clientId.value
-                }}&response_type=token&scope=openid&redirect_uri=REPLACE WITH
-                REDIRECT URI
-              </code>
+                }}&response_type=token&scope=openid&redirect_uri=<ng-container
+                  i18n="@@developerTools.replaceWithRedirect"
+                  >REPLACE WITH REDIRECT URI</ng-container
+                ></code
+              >
             </app-code-panel>
           </ng-container>
 
-          <ng-container *ngIf="sucessSave && form.pristine">
-            <p i18n="@@developerTools.changesHaveBeenSavedSuccessfully">
-              Changes have been saved successfully.
-            </p>
-          </ng-container>
-          <p>
-            <mat-error
-              *ngIf="
-                form.hasError('forbiddenLength', 'redirectUris') &&
-                formWasSummited
-              "
-              i18n="@@developerTools.youShouldProvideAtLeastOneRedirectUri"
-            >
-              You should provide at least one redirect URI
-            </mat-error>
-
-            <mat-error
-              *ngIf="
-                form.hasError('duplicate', 'redirectUris') && formWasSummited
-              "
-              i18n="@@developerTools.redirectUrisMustBeUnique"
+          <p class="save-message" *ngIf="sucessSave && form.pristine">
+            <ng-container
+              i18n="@@developerTools.changesHaveBeenSavedSuccessfully"
             >
+              Changes have been saved successfully.
+            </ng-container>
+          </p>
+          <p
+            class="save-message"
+            *ngIf="
+              form.hasError('duplicate', 'redirectUris') && formWasSummited
+            "
+          >
+            <mat-error i18n="@@developerTools.redirectUrisMustBeUnique">
               Redirect URIs must be unique
             </mat-error>
+          </p>
 
-            <button
-              mat-raised-button
-              color="primary"
-              id="cy-register-for-public-api"
-              (click)="save()"
-              [disabled]="form.pristine"
-              class="save-button"
+          <button
+            mat-raised-button
+            color="primary"
+            id="cy-register-for-public-api"
+            (click)="save()"
+            [disabled]="form.pristine"
+            class="save-button"
+          >
+            <ng-container
+              *ngIf="!existingClient?.clientId?.value"
+              i18n="@@developerTools.saveApplicationAndGenerate"
             >
-              <ng-container
-                *ngIf="!existingClient?.clientId?.value"
-                i18n="@@developerTools.saveApplicationAndGenerate"
-              >
-                Save application and generate my client ID and secret
-              </ng-container>
+              Save application and generate my client ID and secret
+            </ng-container>
 
-              <ng-container
-                *ngIf="existingClient?.clientId?.value"
-                i18n="@@developerTools.saveApplication"
-              >
-                Save application
-              </ng-container>
-            </button>
-          </p>
+            <ng-container
+              *ngIf="existingClient?.clientId?.value"
+              i18n="@@developerTools.saveApplication"
+            >
+              Save application
+            </ng-container>
+          </button>
         </ng-container>
       </ng-container>
 

src/app/developer-tools/pages/developer-tools/developer-tools.component.scss

@@ -7,7 +7,7 @@
 .warn {
   padding: 16px;
   margin-top: 0px;
-  margin-bottom: 16px;
+  margin-bottom: 32px;
   border: solid 2px;
   border-radius: 4px;
   display: flex;
@@ -151,3 +151,10 @@ app-client-secret {
 .save-button {
   margin-top: 32px;
 }
+
+.save-message {
+  display: block;
+  width: 100%;
+  margin-top: 32px;
+  margin-bottom: 0;
+}