From 0e1cbb8dbcfdbfe966100e9996b3a0e1b80cec6c Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 07:50:58 -0600
Subject: [PATCH 1/8] fix page title

---
 src/app/constants.ts                                            | 2 +-
 .../properties/developer-tools/developer-tools.en.properties    | 2 +-
 src/locale/properties/shared/shared.en.properties               | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/constants.ts b/src/app/constants.ts
index fc87d16a43..8ffefee339 100644
--- a/src/app/constants.ts
+++ b/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 = {
diff --git a/src/locale/properties/developer-tools/developer-tools.en.properties b/src/locale/properties/developer-tools/developer-tools.en.properties
index 3f23bc6e51..131b7331ca 100644
--- a/src/locale/properties/developer-tools/developer-tools.en.properties
+++ b/src/locale/properties/developer-tools/developer-tools.en.properties
@@ -73,4 +73,4 @@ developerTools.applicationNameMaxLength=Application name cannot exceed 255 chara
 developerTools.descriptionNameMaxLength=Application description cannot exceed 1000 characters.
 developerTools.onceTheUserHasAuthorized=Once the user has authorized your application, they will be returned to a URI that you specify. You must provide these URIs in advance or your integration users will experience an error.
 developerTools.collapse=Collapse
-developerTools.expand=Expand
\ No newline at end of file
+developerTools.expand=Expand
diff --git a/src/locale/properties/shared/shared.en.properties b/src/locale/properties/shared/shared.en.properties
index 8a2691cb9e..57f29bdf98 100644
--- a/src/locale/properties/shared/shared.en.properties
+++ b/src/locale/properties/shared/shared.en.properties
@@ -597,3 +597,4 @@ share.resetPasswordEmail=Reset password - ORCID
 share.selfService=Self Service - ORCID
 share.orcidTitle=- ORCID
 share.myOrcidTitle=- My ORCID
+share.developerTools=Developer tools - ORCID
\ No newline at end of file

From 8c9e345d7c9e36ef490e4c7491f98c514e92a50f Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 08:17:23 -0600
Subject: [PATCH 2/8] fix a11y

---
 .../developer-tools.component.html            | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index fa8f7c2c59..729f7b2a91 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -66,6 +66,7 @@
 
           <div class="row">
             <label
+              for="displayName"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -78,7 +79,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 +105,7 @@
           </div>
           <div class="row">
             <label
+              for="website"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -111,7 +118,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 +141,7 @@
 
           <div class="row">
             <label
+              for="api-description"
               class="row mat-caption"
               [ngClass]="{
                 error:
@@ -249,7 +262,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

From 20d4eaf7bba7638914e328a802166974336b41e7 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 08:55:29 -0600
Subject: [PATCH 3/8] Add back to my record i18n

---
 angular.json                                  | 13 +++++++
 package.json                                  |  1 +
 .../developer-tools.component.html            | 35 +++++++++++--------
 .../developer-tools.component.spec.ts         |  2 ++
 .../developer-tools.component.ts              | 16 +++++----
 .../developer-tools.en.properties             |  6 ++--
 .../developer-tools.lr.properties             |  8 +++++
 .../developer-tools.rl.properties             |  8 +++++
 .../developer-tools.xx.properties             |  8 +++++
 .../properties/shared/shared.en.properties    |  2 +-
 .../properties/shared/shared.lr.properties    |  1 +
 .../properties/shared/shared.rl.properties    |  1 +
 .../properties/shared/shared.xx.properties    |  1 +
 13 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/angular.json b/angular.json
index f805071d6c..841dc3d090 100644
--- a/angular.json
+++ b/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"
diff --git a/package.json b/package.json
index 5f3a90e356..2d817d08f4 100644
--- a/package.json
+++ b/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'",
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index 729f7b2a91..e6d9031a72 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -10,7 +10,7 @@
         >
           Developer tools
         </h1>
-        <a routerLink="/my-orcid">Back to my record</a>
+        <a routerLink="/my-orcid" i18n="@@developerTools.backToMyRecod">Back to my record</a>
       </div>
 
       <div class="loading-container">
@@ -336,7 +336,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>
@@ -347,10 +347,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">
@@ -360,7 +362,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
@@ -375,9 +377,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">
@@ -399,7 +404,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>
@@ -410,11 +415,13 @@ <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>
 
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
index 3e07d4b541..adb05bec39 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
@@ -8,6 +8,7 @@ import { RecordService } from 'src/app/core/record/record.service'
 import { ChangeDetectorRef } from '@angular/core'
 import { UserInfoService } from 'src/app/core/user-info/user-info.service'
 import { of } from 'rxjs'
+import { WINDOW_PROVIDERS } from 'src/app/cdk/window'
 
 describe('DeveloperToolsComponent', () => {
   let component: DeveloperToolsComponent
@@ -17,6 +18,7 @@ describe('DeveloperToolsComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [DeveloperToolsComponent],
       providers: [
+        WINDOW_PROVIDERS,
         {
           provide: FormBuilder,
           useValue: {},
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
index bed1ca985e..72cb622320 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
@@ -1,6 +1,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  Inject,
   OnDestroy,
   OnInit,
   QueryList,
@@ -14,26 +15,23 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms'
-import { MatDialog, MatDialogModule } from '@angular/material/dialog'
+import { MatDialog } from '@angular/material/dialog'
 import {
   MAX_LENGTH_LESS_THAN_ONE_THOUSAND,
   MAX_LENGTH_LESS_THAN_TWO_HUNDRED_FIFTY_FIVE,
   URL_REGEXP,
 } from 'src/app/constants'
 import { URL_REGEXP_BACKEND } from 'src/app/constants'
-import { UserService } from 'src/app/core'
 import { DeveloperToolsService } from 'src/app/core/developer-tools/developer-tools.service'
 import { UserInfoService } from 'src/app/core/user-info/user-info.service'
-import { UserInfo } from 'src/app/types'
 import { Client } from 'src/app/types/developer-tools'
 import { ClientSecretModalComponent } from '../../components/client-secret-modal/client-secret-modal.component'
 import { filter, map, switchMap, takeUntil, tap } from 'rxjs/operators'
 import { Observable, Subject, of } from 'rxjs'
-import { Empty } from '@angular-devkit/core/src/virtual-fs/host'
 import { RecordService } from 'src/app/core/record/record.service'
-import { MatSelect } from '@angular/material/select'
 import { MatInput } from '@angular/material/input'
-import { URL } from 'url'
+import { environment } from 'src/environments/environment'
+import { WINDOW } from 'src/app/cdk/window'
 
 @Component({
   selector: 'app-developer-tools',
@@ -62,13 +60,16 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
   existingClient: Client
   sucessSave: boolean
   loadingUserDevTolsState: boolean
+  baseURL: string
+
   constructor(
     private fb: FormBuilder,
     private userInfo: UserInfoService,
     private developerToolsService: DeveloperToolsService,
     private matDialog: MatDialog,
     private recordService: RecordService,
-    private _changeDetectorRef: ChangeDetectorRef
+    private _changeDetectorRef: ChangeDetectorRef,
+    @Inject(WINDOW) private window: Window,
   ) {}
   ngOnDestroy(): void {
     this.destroy$.next(true)
@@ -76,6 +77,7 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.baseURL = this.window.location.origin
     this.getDeveloperToolsEnableState()
       .pipe(
         switchMap((developerToolsEnableState) => {
diff --git a/src/locale/properties/developer-tools/developer-tools.en.properties b/src/locale/properties/developer-tools/developer-tools.en.properties
index 131b7331ca..5c62433146 100644
--- a/src/locale/properties/developer-tools/developer-tools.en.properties
+++ b/src/locale/properties/developer-tools/developer-tools.en.properties
@@ -31,7 +31,7 @@ developerTools.nameShownToUsers=The name shown to users on the OAuth authorizati
 developerTools.applicationUrl=Application URL
 developerTools.websiteNameCannotBeEmpty=Website name cannot be empty
 developerTools.invalidWebsite=Invalid website
-developerTools.applicationDescription=Application description cannot be empty
+developerTools.applicationDescription=Application description
 developerTools.theDescriptionShown=The description shown to users on the OAuth authorization screen. Maximum 1000 characters.
 developerTools.redirectUris=Redirect URIs
 developerTools.pleaseNote=Please note
@@ -68,9 +68,11 @@ developerTools.labelAuthorizeRequest=Authorize request
 developerTools.labelTokenRequest=Token request
 developerTools.labelOpenIdImplicitRequest=OpenID/Implicit request
 developerTools.redirectUrisMustBeUnique=Redirect URIs must be unique
-developerTools.applicationDescription=Application description
 developerTools.applicationNameMaxLength=Application name cannot exceed 255 characters.
 developerTools.descriptionNameMaxLength=Application description cannot exceed 1000 characters.
 developerTools.onceTheUserHasAuthorized=Once the user has authorized your application, they will be returned to a URI that you specify. You must provide these URIs in advance or your integration users will experience an error.
 developerTools.collapse=Collapse
 developerTools.expand=Expand
+developerTools.replaceWithRedirect=REPLACE WITH REDIRECT URI
+developerTools.replaceWithOauth=REPLACE WITH OAUTH CODE
+developerTools.backToMyRecod=Back to my record
diff --git a/src/locale/properties/developer-tools/developer-tools.lr.properties b/src/locale/properties/developer-tools/developer-tools.lr.properties
index b76c1d8231..f353ea5884 100644
--- a/src/locale/properties/developer-tools/developer-tools.lr.properties
+++ b/src/locale/properties/developer-tools/developer-tools.lr.properties
@@ -68,3 +68,11 @@ developerTools.labelAuthorizeRequest=LR
 developerTools.labelTokenRequest=LR
 developerTools.labelOpenIdImplicitRequest=LR
 developerTools.redirectUrisMustBeUnique=LR
+developerTools.applicationNameMaxLength=LR
+developerTools.descriptionNameMaxLength=LR
+developerTools.onceTheUserHasAuthorized=LR
+developerTools.collapse=LR
+developerTools.expand=LR
+developerTools.replaceWithRedirect=LR
+developerTools.replaceWithOauth=LR
+developerTools.backToMyRecod=LR
diff --git a/src/locale/properties/developer-tools/developer-tools.rl.properties b/src/locale/properties/developer-tools/developer-tools.rl.properties
index 660f02494f..aad0e23ed2 100644
--- a/src/locale/properties/developer-tools/developer-tools.rl.properties
+++ b/src/locale/properties/developer-tools/developer-tools.rl.properties
@@ -68,3 +68,11 @@ developerTools.labelAuthorizeRequest=RL
 developerTools.labelTokenRequest=RL
 developerTools.labelOpenIdImplicitRequest=RL
 developerTools.redirectUrisMustBeUnique=RL
+developerTools.applicationNameMaxLength=RL
+developerTools.descriptionNameMaxLength=RL
+developerTools.onceTheUserHasAuthorized=RL
+developerTools.collapse=RL
+developerTools.expand=RL
+developerTools.replaceWithRedirect=RL
+developerTools.replaceWithOauth=RL
+developerTools.backToMyRecod=RL
diff --git a/src/locale/properties/developer-tools/developer-tools.xx.properties b/src/locale/properties/developer-tools/developer-tools.xx.properties
index 3079640097..f9179e8dfd 100644
--- a/src/locale/properties/developer-tools/developer-tools.xx.properties
+++ b/src/locale/properties/developer-tools/developer-tools.xx.properties
@@ -68,3 +68,11 @@ developerTools.labelAuthorizeRequest=X
 developerTools.labelTokenRequest=X
 developerTools.labelOpenIdImplicitRequest=X
 developerTools.redirectUrisMustBeUnique=X
+developerTools.applicationNameMaxLength=X
+developerTools.descriptionNameMaxLength=X
+developerTools.onceTheUserHasAuthorized=X
+developerTools.collapse=X
+developerTools.expand=X
+developerTools.replaceWithRedirect=X
+developerTools.replaceWithOauth=X
+developerTools.backToMyRecod=X
diff --git a/src/locale/properties/shared/shared.en.properties b/src/locale/properties/shared/shared.en.properties
index 57f29bdf98..613988d3f0 100644
--- a/src/locale/properties/shared/shared.en.properties
+++ b/src/locale/properties/shared/shared.en.properties
@@ -597,4 +597,4 @@ share.resetPasswordEmail=Reset password - ORCID
 share.selfService=Self Service - ORCID
 share.orcidTitle=- ORCID
 share.myOrcidTitle=- My ORCID
-share.developerTools=Developer tools - ORCID
\ No newline at end of file
+share.developerTools=Developer tools - ORCID
diff --git a/src/locale/properties/shared/shared.lr.properties b/src/locale/properties/shared/shared.lr.properties
index 276d17589d..d99d549c26 100644
--- a/src/locale/properties/shared/shared.lr.properties
+++ b/src/locale/properties/shared/shared.lr.properties
@@ -610,3 +610,4 @@ share.resetPasswordEmail=LR
 share.selfService=LR
 share.orcidTitle=LR
 share.myOrcidTitle=LR
+share.developerTools=LR
diff --git a/src/locale/properties/shared/shared.rl.properties b/src/locale/properties/shared/shared.rl.properties
index b632dd8e3f..4d2d6fc61c 100644
--- a/src/locale/properties/shared/shared.rl.properties
+++ b/src/locale/properties/shared/shared.rl.properties
@@ -606,3 +606,4 @@ share.resetPasswordEmail=RL
 share.selfService=RL
 share.orcidTitle=RL
 share.myOrcidTitle=RL
+share.developerTools=RL
diff --git a/src/locale/properties/shared/shared.xx.properties b/src/locale/properties/shared/shared.xx.properties
index e83253a951..f8c246cae2 100644
--- a/src/locale/properties/shared/shared.xx.properties
+++ b/src/locale/properties/shared/shared.xx.properties
@@ -606,3 +606,4 @@ share.resetPasswordEmail=X
 share.selfService=X
 share.orcidTitle=X
 share.myOrcidTitle=X
+share.developerTools=X

From 3eeac0241c967f9876819d507330e4e7745fcef0 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 10:17:39 -0600
Subject: [PATCH 4/8] 8661

---
 .../code-panel/code-panel.component.html      |  8 +-
 .../code-panel/code-panel.component.ts        |  1 +
 .../developer-tools/developer-tools.module.ts |  4 +-
 .../developer-tools.component.html            | 84 +++++++++----------
 .../developer-tools.component.scss            |  9 +-
 .../developer-tools.component.spec.ts         |  2 +-
 .../developer-tools.component.ts              | 15 +++-
 .../developer-tools.en.properties             |  2 +-
 .../developer-tools.lr.properties             |  1 -
 .../developer-tools.rl.properties             |  1 -
 .../developer-tools.xx.properties             |  1 -
 11 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/src/app/developer-tools/components/code-panel/code-panel.component.html b/src/app/developer-tools/components/code-panel/code-panel.component.html
index e2e2d575da..d6997b5f0e 100644
--- a/src/app/developer-tools/components/code-panel/code-panel.component.html
+++ b/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"
diff --git a/src/app/developer-tools/components/code-panel/code-panel.component.ts b/src/app/developer-tools/components/code-panel/code-panel.component.ts
index 35f20ad883..a35b8f1ecd 100644
--- a/src/app/developer-tools/components/code-panel/code-panel.component.ts
+++ b/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
diff --git a/src/app/developer-tools/developer-tools.module.ts b/src/app/developer-tools/developer-tools.module.ts
index dd39e7755b..c8f3d82bf2 100644
--- a/src/app/developer-tools/developer-tools.module.ts
+++ b/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,8 @@ 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'
+import { A11yModule } from '@angular/cdk/a11y'
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { TopBarVerificationEmailModule } from '../cdk/top-bar-verification-email
     ModalModule,
     A11yLinkModule,
     TopBarVerificationEmailModule,
+    A11yModule,
   ],
 })
 export class DeveloperToolsModule {}
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index e6d9031a72..3ef12a6157 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -10,7 +10,13 @@
         >
           Developer tools
         </h1>
-        <a routerLink="/my-orcid" i18n="@@developerTools.backToMyRecod">Back to my record</a>
+        <a
+          routerLink="/my-orcid"
+          i18n="@@developerTools.backToMyRecod"
+          cdkFocusInitial
+          #firstInput
+          >Back to my record</a
+        >
       </div>
 
       <div class="loading-container">
@@ -425,54 +431,46 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
             </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>
 
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss b/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
index eaa9da04a3..0fc3e73893 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.scss
+++ b/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,4 +151,11 @@ app-client-secret {
 
 .save-button {
   margin-top: 32px;
+}
+
+.save-message {
+  display: block;
+  width: 100%;
+  margin-top: 32px;
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
index adb05bec39..1d81c9c163 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.spec.ts
@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { DeveloperToolsComponent } from './developer-tools.component'
 import { FormBuilder } from '@angular/forms'
 import { MatDialog } from '@angular/material/dialog'
 import { DeveloperToolsService } from 'src/app/core/developer-tools/developer-tools.service'
@@ -9,6 +8,7 @@ import { ChangeDetectorRef } from '@angular/core'
 import { UserInfoService } from 'src/app/core/user-info/user-info.service'
 import { of } from 'rxjs'
 import { WINDOW_PROVIDERS } from 'src/app/cdk/window'
+import { DeveloperToolsComponent } from './developer-tools.component'
 
 describe('DeveloperToolsComponent', () => {
   let component: DeveloperToolsComponent
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
index 72cb622320..64d1b2efef 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
@@ -1,10 +1,12 @@
 import {
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Inject,
   OnDestroy,
   OnInit,
   QueryList,
+  ViewChild,
   ViewChildren,
 } from '@angular/core'
 import { FormControl } from '@angular/forms'
@@ -61,6 +63,7 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
   sucessSave: boolean
   loadingUserDevTolsState: boolean
   baseURL: string
+  @ViewChild('firstInput') firstInput: ElementRef
 
   constructor(
     private fb: FormBuilder,
@@ -69,7 +72,7 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
     private matDialog: MatDialog,
     private recordService: RecordService,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Inject(WINDOW) private window: Window,
+    @Inject(WINDOW) private window: Window
   ) {}
   ngOnDestroy(): void {
     this.destroy$.next(true)
@@ -124,6 +127,10 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
             ])
           )
         })
+
+        this._changeDetectorRef.detectChanges()
+
+        this.firstInput.nativeElement.focus()
       })
   }
 
@@ -135,6 +142,8 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
     ).some((uri) => !uri)
     this.form.markAllAsTouched()
 
+    console.log('triedToSaveWithoutUrls ', this.triedToSaveWithoutUrls)
+
     if (this.form.invalid) {
       return
     }
@@ -182,9 +191,7 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
     } else {
       this.developerToolsService
         .postDeveloperToolsClient(devToolsClient)
-        .subscribe((res) => {
-          this.ngOnInit()
-        })
+        .subscribe((res) => {})
     }
   }
   validatorAtLeastOne(): ValidatorFn {
diff --git a/src/locale/properties/developer-tools/developer-tools.en.properties b/src/locale/properties/developer-tools/developer-tools.en.properties
index 5c62433146..25705ce340 100644
--- a/src/locale/properties/developer-tools/developer-tools.en.properties
+++ b/src/locale/properties/developer-tools/developer-tools.en.properties
@@ -45,7 +45,6 @@ developerTools.registerAllRedirectURIs=Register all redirect URIs fully where po
 developerTools.thisIsTheMostSecure=This is the most secure option and what we recommend. For more information about redirect URIs, please see our
 developerTools.redirectUriFaq=redirect URI FAQ
 developerTools.addARedirectUriBefore=Please add a redirect URI before saving your application
-developerTools.youShouldProvideAtLeastOneRedirectUri=You should provide at least one redirect URI
 developerTools.redirectUriCannotBeEmpty=Redirect URI cannot be empty
 developerTools.invalidRedirectUrl=Invalid redirect URL
 developerTools.addAnotherRedirectUri=Add another redirect URI
@@ -76,3 +75,4 @@ developerTools.expand=Expand
 developerTools.replaceWithRedirect=REPLACE WITH REDIRECT URI
 developerTools.replaceWithOauth=REPLACE WITH OAUTH CODE
 developerTools.backToMyRecod=Back to my record
+developerTools.exampleCode=example code
\ No newline at end of file
diff --git a/src/locale/properties/developer-tools/developer-tools.lr.properties b/src/locale/properties/developer-tools/developer-tools.lr.properties
index f353ea5884..6ad169df90 100644
--- a/src/locale/properties/developer-tools/developer-tools.lr.properties
+++ b/src/locale/properties/developer-tools/developer-tools.lr.properties
@@ -45,7 +45,6 @@ developerTools.registerAllRedirectURIs=LR
 developerTools.thisIsTheMostSecure=LR
 developerTools.redirectUriFaq=LR
 developerTools.addARedirectUriBefore=LR
-developerTools.youShouldProvideAtLeastOneRedirectUri=LR
 developerTools.redirectUriCannotBeEmpty=LR
 developerTools.invalidRedirectUrl=LR
 developerTools.addAnotherRedirectUri=LR
diff --git a/src/locale/properties/developer-tools/developer-tools.rl.properties b/src/locale/properties/developer-tools/developer-tools.rl.properties
index aad0e23ed2..6f1bcee7a6 100644
--- a/src/locale/properties/developer-tools/developer-tools.rl.properties
+++ b/src/locale/properties/developer-tools/developer-tools.rl.properties
@@ -45,7 +45,6 @@ developerTools.registerAllRedirectURIs=RL
 developerTools.thisIsTheMostSecure=RL
 developerTools.redirectUriFaq=RL
 developerTools.addARedirectUriBefore=RL
-developerTools.youShouldProvideAtLeastOneRedirectUri=RL
 developerTools.redirectUriCannotBeEmpty=RL
 developerTools.invalidRedirectUrl=RL
 developerTools.addAnotherRedirectUri=RL
diff --git a/src/locale/properties/developer-tools/developer-tools.xx.properties b/src/locale/properties/developer-tools/developer-tools.xx.properties
index f9179e8dfd..78a6204d3a 100644
--- a/src/locale/properties/developer-tools/developer-tools.xx.properties
+++ b/src/locale/properties/developer-tools/developer-tools.xx.properties
@@ -45,7 +45,6 @@ developerTools.registerAllRedirectURIs=X
 developerTools.thisIsTheMostSecure=X
 developerTools.redirectUriFaq=X
 developerTools.addARedirectUriBefore=X
-developerTools.youShouldProvideAtLeastOneRedirectUri=X
 developerTools.redirectUriCannotBeEmpty=X
 developerTools.invalidRedirectUrl=X
 developerTools.addAnotherRedirectUri=X

From b473ae6c0d7ef101383b7f8855ac989321cf5460 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 10:22:42 -0600
Subject: [PATCH 5/8] fix focus

---
 .../pages/developer-tools/developer-tools.component.ts     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
index 64d1b2efef..4114b3b4b8 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
@@ -127,11 +127,10 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
             ])
           )
         })
-
-        this._changeDetectorRef.detectChanges()
-
-        this.firstInput.nativeElement.focus()
       })
+    this._changeDetectorRef.detectChanges()
+
+    this.firstInput.nativeElement.focus()
   }
 
   save() {

From e4514218c896e0ce66fef1a288b8803d4e0a6018 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 10:27:44 -0600
Subject: [PATCH 6/8] remove i18n module

---
 src/app/developer-tools/developer-tools.module.ts              | 2 --
 .../pages/developer-tools/developer-tools.component.ts         | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/src/app/developer-tools/developer-tools.module.ts b/src/app/developer-tools/developer-tools.module.ts
index c8f3d82bf2..0c3b2892ef 100644
--- a/src/app/developer-tools/developer-tools.module.ts
+++ b/src/app/developer-tools/developer-tools.module.ts
@@ -22,7 +22,6 @@ 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'
-import { A11yModule } from '@angular/cdk/a11y'
 
 @NgModule({
   declarations: [
@@ -50,7 +49,6 @@ import { A11yModule } from '@angular/cdk/a11y'
     ModalModule,
     A11yLinkModule,
     TopBarVerificationEmailModule,
-    A11yModule,
   ],
 })
 export class DeveloperToolsModule {}
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
index 4114b3b4b8..8227844624 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
@@ -140,9 +140,6 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
       this.form.get('redirectUris').value as string[]
     ).some((uri) => !uri)
     this.form.markAllAsTouched()
-
-    console.log('triedToSaveWithoutUrls ', this.triedToSaveWithoutUrls)
-
     if (this.form.invalid) {
       return
     }

From 9753d29b52162e1a744897776731761d7f26b332 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 10:39:49 -0600
Subject: [PATCH 7/8] orc-font-body-small

---
 .../components/client-secret/client-secret.component.html  | 2 +-
 .../pages/developer-tools/developer-tools.component.html   | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/developer-tools/components/client-secret/client-secret.component.html b/src/app/developer-tools/components/client-secret/client-secret.component.html
index 536cd66a4a..132310defb 100644
--- a/src/app/developer-tools/components/client-secret/client-secret.component.html
+++ b/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"
     >
diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
index 3ef12a6157..76ce022153 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.html
@@ -15,6 +15,7 @@
           i18n="@@developerTools.backToMyRecod"
           cdkFocusInitial
           #firstInput
+          class="underline orc-font-body-small"
           >Back to my record</a
         >
       </div>
@@ -239,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"
@@ -315,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"
@@ -400,7 +401,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                 >
 
                 <a
-                  class="undeline"
+                  class="underline"
                   i18n="@@developerTools.moreInformation"
                   rel="noopener noreferrer"
                   target="_blank"

From d8253b6587aa338e8eb804914f8bef10d32852c5 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 3 Jul 2023 10:41:22 -0600
Subject: [PATCH 8/8] Rever changes

---
 .../pages/developer-tools/developer-tools.component.ts        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
index 8227844624..9432eb5f9f 100644
--- a/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
+++ b/src/app/developer-tools/pages/developer-tools/developer-tools.component.ts
@@ -187,7 +187,9 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
     } else {
       this.developerToolsService
         .postDeveloperToolsClient(devToolsClient)
-        .subscribe((res) => {})
+        .subscribe((res) => {
+          this.ngOnInit()
+        })
     }
   }
   validatorAtLeastOne(): ValidatorFn {