Merge pull request #2003 from ORCID/8712-qa-developer-tools-mobile-is…

…sues 8712 qa developer tools mobile issues
ORCID · Jul 6, 2023 · baee285 · baee285
2 parents d20c745 + 70dabe9
commit baee285
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 16 deletions.
diff --git a/src/app/cdk/platform-info/browserlist.regexp.ts b/src/app/cdk/platform-info/browserlist.regexp.ts
@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
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
@@ -11,7 +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`
+  exampleCodeAriaLabel = $localize`:@@developerTools.exampleCode2:example code`
 
   openState = false
   @Input() title: string

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
@@ -11,10 +11,10 @@
           Developer tools
         </h1>
         <a
+          #firstInput
           routerLink="/my-orcid"
           i18n="@@developerTools.backToMyRecod"
           cdkFocusInitial
-          #firstInput
           class="underline orc-font-body-small"
           >Back to my record</a
         >
@@ -85,7 +85,11 @@
                 >Application name</strong
               >
             </label>
-            <mat-form-field appearance="outline" class="mat-form-field-min">
+            <mat-form-field
+              appearance="outline"
+              class="mat-form-field-min"
+              [ngClass]="{ 'two-line-hint': isMobile }"
+            >
               <input
                 matInput
                 formControlName="displayName"
@@ -265,8 +269,9 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
             </div>
           </div>
 
-          <ng-container formArrayName="redirectUris">
-            <ng-container
+          <div class="input-container" formArrayName="redirectUris">
+            <div
+              class="input-group"
               *ngFor="let redirectUri of redirectUris.controls; index as i"
             >
               <mat-form-field
@@ -310,8 +315,8 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
                   >delete
                 </mat-icon>
               </button>
-            </ng-container>
-          </ng-container>
+            </div>
+          </div>
 
           <div class="row">
             <a
@@ -342,7 +347,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                 access token and an authenticated ORCID iD.
               </p>
 
-              <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
+              <strong i18n="@@developerTools.endpoint">Endpoint</strong>
               <p>{{ baseURL }}/oauth/authorize</p>
 
               <strong i18n="@@developerTools.scope">Scope</strong>
@@ -368,7 +373,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                 be used to read public information on the record.
               </p>
 
-              <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
+              <strong i18n="@@developerTools.endpoint">Endpoint</strong>
               <p>{{ baseURL }}/oauth/token</p>
 
               <strong i18n="@@developerTools.responseType"
@@ -410,7 +415,7 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
                 >
               </p>
 
-              <strong i18n="@@developerTools.endpoint">Ednpoint</strong>
+              <strong i18n="@@developerTools.endpoint">Endpoint</strong>
               <p>{{ baseURL }}/oauth/token</p>
 
               <strong i18n="@@developerTools.scope">Scope</strong>
@@ -456,9 +461,10 @@ <h3 class="orc-font-body" i18n="@@developerTools.exampleCode">
             id="cy-register-for-public-api"
             (click)="save()"
             [disabled]="form.pristine"
-            class="save-button"
+            class="save-button mat-button-wrap-text"
           >
             <ng-container
+              i18n="@@developerTools.saveApplicationAndGenerate"
               *ngIf="!existingClient?.clientId?.value"
               i18n="@@developerTools.saveApplicationAndGenerate"
             >

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
@@ -150,6 +150,7 @@ app-client-secret {
 
 .save-button {
   margin-top: 32px;
+  margin-bottom: 32px;
 }
 
 .save-message {
@@ -158,3 +159,30 @@ app-client-secret {
   margin-top: 32px;
   margin-bottom: 0;
 }
+
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .input-group {
+    display: flex;
+    flex-direction: row;
+
+    .mat-icon-button {
+      top: -5px;
+    }
+  }
+
+
+}
+
+
+.columns-8 :host,
+.columns-4 :host {
+  .title-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
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
@@ -9,6 +9,7 @@ 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'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
 
 describe('DeveloperToolsComponent', () => {
   let component: DeveloperToolsComponent
@@ -19,6 +20,10 @@ describe('DeveloperToolsComponent', () => {
       declarations: [DeveloperToolsComponent],
       providers: [
         WINDOW_PROVIDERS,
+        {
+          provide: PlatformInfoService,
+          useValue: { get: () => of({}) },
+        },
         {
           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
@@ -34,6 +34,7 @@ import { RecordService } from 'src/app/core/record/record.service'
 import { MatInput } from '@angular/material/input'
 import { environment } from 'src/environments/environment'
 import { WINDOW } from 'src/app/cdk/window'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
 
 @Component({
   selector: 'app-developer-tools',
@@ -63,6 +64,8 @@ export class DeveloperToolsComponent implements OnInit, OnDestroy {
   sucessSave: boolean
   loadingUserDevTolsState: boolean
   baseURL: string
+  isMobile: boolean
+
   @ViewChild('firstInput') firstInput: ElementRef
 
   constructor(
@@ -72,14 +75,22 @@ 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,
+    private _platform: PlatformInfoService
   ) {}
   ngOnDestroy(): void {
     this.destroy$.next(true)
     this.destroy$.complete()
   }
 
   ngOnInit(): void {
+    this._platform
+      .get()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((platform) => {
+        this.isMobile = platform.columns4 || platform.columns8
+      })
+
     this.baseURL = this.window.location.origin
     this.getDeveloperToolsEnableState()
       .pipe(

diff --git a/src/locale/properties/developer-tools/developer-tools.en.properties b/src/locale/properties/developer-tools/developer-tools.en.properties
@@ -52,7 +52,7 @@ developerTools.changesHaveBeenSavedSuccessfully=Changes have been saved successf
 developerTools.saveApplicationAndGenerate=Save application and generate my client ID and secret
 developerTools.saveApplication=Save application
 developerTools.providesAnAuthorizationCode=Provides an authorization code that can be exchanged for an access token and an authenticated ORCID iD.
-developerTools.endpoint=Ednpoint
+developerTools.endpoint=Endpoint
 developerTools.scope=Scope
 developerTools.code=code
 developerTools.providesAnAuthenticatd=Provides an authenticated ORCID iD and an access token that can be used to read public information on the record.
@@ -61,7 +61,7 @@ developerTools.providesAnAccess=Provides an access token that can be used to rea
 developerTools.moreInformation=More information on OpenID Connect Endpoint
 developerTools.responseType=Response type
 developerTools.clientId=Client ID
-developerTools.exampleCode=example code
+developerTools.exampleCode=Example code
 developerTools.ariaLabelWebsiteDelete=Delete redirect URI
 developerTools.labelAuthorizeRequest=Authorize request
 developerTools.labelTokenRequest=Token request
@@ -75,3 +75,5 @@ developerTools.expand=Expand
 developerTools.replaceWithRedirect=REPLACE WITH REDIRECT URI
 developerTools.replaceWithOauth=REPLACE WITH OAUTH CODE
 developerTools.backToMyRecod=Back to my record
+developerTools.exampleCode2=example code
+