PD-5529, PD-5551, PD-5550, PD-5549, PD-5547, PD-5543, PD-3931

SUPPORTED_BROWSERS.md

@@ -6,9 +6,9 @@
 | ---------------- | --------------- |
 | Android WebView  | 145 or newer    |
 | Apple Safari     | 17 or newer     |
-| Google Chrome    | 117 or newer    |
-| Microsoft Edge   | 117 or newer    |
-| Mozilla Firefox  | 116 or newer    |
-| Opera            | 103 or newer    |
+| Google Chrome    | 119 or newer    |
+| Microsoft Edge   | 119 or newer    |
+| Mozilla Firefox  | 119 or newer    |
+| Opera            | 105 or newer    |
 | Opera Mobile     | 80 or newer     |
-| Samsung Internet | 24 or newer     |
+| Samsung Internet | 25 or newer     |

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html

@@ -34,6 +34,7 @@
       mat-raised-button
       color="primary"
       id="cy-two-factor-enable"
+      class="two-factor-panel__enable-button"
       (click)="twoFactor()"
       i18n="@@account.enableTwoFactorAuth"
     >

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss

@@ -1,3 +1,8 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
 .two-factor-panel {
   display: flex;
   flex-direction: column;
@@ -78,3 +83,8 @@
   border-color: var(--orcid-color-state-warning-dark, #d32f2f) !important;
   color: #fff !important;
 }
+
+.two-factor-panel__enable-button {
+  align-self: flex-start;
+  width: auto;
+}

src/app/cdk/platform-info/supported-browsers.json

@@ -1,18 +1,18 @@
 {
   "chrome": {
-    "major": 117,
+    "major": 119,
     "minor": 0
   },
   "firefox": {
-    "major": 116,
+    "major": 119,
     "minor": 0
   },
   "android": {
     "major": 145,
     "minor": 0
   },
   "edge": {
-    "major": 117,
+    "major": 119,
     "minor": 0
   },
   "safari": {
@@ -24,11 +24,11 @@
     "minor": 0
   },
   "opera": {
-    "major": 103,
+    "major": 105,
     "minor": 0
   },
   "samsung": {
-    "major": 24,
+    "major": 25,
     "minor": 0
   }
 }

src/app/cdk/side-bar/modals/modal-websites/modal-websites.component.ts

@@ -152,7 +152,6 @@ export class ModalWebsitesComponent implements OnInit, OnDestroy {
       websites: [],
       visibility: this.originalBackendWebsites.visibility,
     }
-    this._changeDetectorRef.detach()
     this.websites.reverse()
     this.websites
       .map((value) => value.putCode)
@@ -178,15 +177,15 @@ export class ModalWebsitesComponent implements OnInit, OnDestroy {
   }
 
   saveEvent() {
-    if (this.isSavingWebsites) {
+    if (this.loadingWebsites || this.isSavingWebsites) {
       return
     }
 
+    this.isSavingWebsites = true
     this.websitesForm.markAllAsTouched()
     this.websitesForm.updateValueAndValidity()
 
     if (this.websitesForm.valid) {
-      this.isSavingWebsites = true
       this._recordWebsitesService
         .postWebsites(this.formToBackend(this.websitesForm))
         .pipe(
@@ -201,6 +200,7 @@ export class ModalWebsitesComponent implements OnInit, OnDestroy {
           () => {}
         )
     } else {
+      this.isSavingWebsites = false
       this._snackBar.showValidationError()
     }
   }

src/app/sign-in/components/form-sign-in/form-sign-in.component.spec.ts

@@ -16,10 +16,12 @@ import { OauthService } from '../../../core/oauth/oauth.service'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
 
 describe('FormSignInComponent', () => {
   let component: FormSignInComponent
   let fixture: ComponentFixture<FormSignInComponent>
+  let router: Router
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -48,10 +50,25 @@ describe('FormSignInComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(FormSignInComponent)
     component = fixture.componentInstance
+    router = TestBed.inject(Router)
     fixture.detectChanges()
   })
 
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('only triggers oauth redirect once per successful flow', () => {
+    component.isOauthAuthorizationTogglzEnable = false
+    component.platform = { social: false, institutional: false } as any
+    component.signInLocal = { params: {} } as any
+    const routerNavigateSpy = spyOn(router, 'navigate').and.returnValue(
+      Promise.resolve(true)
+    )
+
+    component.oauthAuthorize('https://qa.orcid.org/oauth/authorize')
+    component.oauthAuthorize('https://qa.orcid.org/oauth/authorize')
+
+    expect(routerNavigateSpy).toHaveBeenCalledTimes(1)
+  })
 })

src/app/sign-in/components/form-sign-in/form-sign-in.component.ts

@@ -86,6 +86,7 @@ export class FormSignInComponent implements OnInit, OnDestroy {
   backendErrorsMatcher = new ErrorStateMatcherForPasswordField()
   emailVerified: boolean
   invalidVerifyUrl: boolean
+  private oauthRedirectTriggered = false
 
   placeholderUsername = $localize`:@@ngOrcid.signin.username:Email or 16-digit ORCID iD`
   placeholderPassword = $localize`:@@ngOrcid.signin.yourOrcidPassword:Your ORCID password`
@@ -386,9 +387,15 @@ export class FormSignInComponent implements OnInit, OnDestroy {
   }
 
   oauthAuthorize(urlRedirect) {
+    if (this.oauthRedirectTriggered) {
+      return
+    }
+    this.oauthRedirectTriggered = true
+
     if (this.isOauthAuthorizationTogglzEnable) {
-      if (this._oauthUrlSessionManager.get()) {
-        urlRedirect = this._oauthUrlSessionManager.get()
+      const storedOauthRedirectUrl = this._oauthUrlSessionManager.get()
+      if (storedOauthRedirectUrl) {
+        urlRedirect = storedOauthRedirectUrl
         this._oauthUrlSessionManager.clear()
       }
       //add http if not present

src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html

@@ -48,9 +48,7 @@
         type="button"
         class="textarea-copy-action"
         [cdkCopyToClipboard]="textCodeClipboard"
-        matTooltip="{{ textCodeCopiedTooltip }}"
-        #textCodeTooltip="matTooltip"
-        (click)="textCodeTooltip.toggle()"
+        matTooltip="{{ textCodeTooltip }}"
         i18n-aria-label="@@account.copySetupCode"
         aria-label="Copy setup code"
       >
@@ -86,7 +84,7 @@
             i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
             class="error-message"
           >
-            Authentication code is required
+            A verification code is required
           </p>
           <p class="error-length">
             {{ inputVerificationCode.value?.length || 0 }}/6
@@ -103,7 +101,7 @@
             i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
             class="error-message"
           >
-            Invalid authentication code length
+            Invalid verification code length
           </p>
           <p class="error-length">
             {{ inputVerificationCode.value?.length || 0 }}/6
@@ -117,7 +115,7 @@
             i18n="@@ngOrcid.signin.2fa.badVerificationCode"
             class="error-message"
           >
-            Invalid authentication code
+            Invalid verification code
           </p>
           <p class="error-length">
             {{ inputVerificationCode.value?.length || 0 }}/6

src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.scss

@@ -27,6 +27,9 @@ textarea.text-code {
 }
 
 mat-error {
+  display: block;
+  margin-top: var(--orcid-space-s, 8px);
+
   p {
     margin: 0 !important;
   }

src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.spec.ts

@@ -118,7 +118,7 @@ describe('TwoFactorEnableComponent', () => {
   })
 
   it('should call register method when input is filled and submit is triggered', async () => {
-    component.twoFactorForm.get('verificationCode').setValue('123456')
+    component.twoFactorForm.get('verificationCode')?.setValue('123456')
 
     fixture.detectChanges()
     await fixture.whenStable()
@@ -132,4 +132,8 @@ describe('TwoFactorEnableComponent', () => {
       component.twoFactorForm.get('verificationCode')?.hasError('invalidCode')
     ).toBeFalse()
   })
+
+  it('should expose static setup code tooltip text', () => {
+    expect(component.textCodeTooltip).toBe('Copy setup code to clipboard')
+  })
 })

src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.ts

@@ -45,7 +45,7 @@ export class TwoFactorEnableComponent implements OnInit {
   twoFactorForm: UntypedFormGroup
   showTextCode = false
   loading = false
-  textCodeCopiedTooltip = $localize`:@@account.setupCodeClipboard:Setup code has been copied to the clipboard`
+  textCodeTooltip = $localize`:@@account.copySetupCodeToClipboard:Copy setup code to clipboard`
 
   constructor(
     private _twoFactorService: TwoFactorAuthenticationService,

src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html

@@ -13,9 +13,9 @@
       <div class="copy-block__intro">
         <h4 i18n="@@account.yourRecoveryCodesTitle">Your 2FA recovery codes</h4>
         <p i18n="@@account.recoveryCodes">
-          Recovery codes can be used to access your account when you can’t
-          receive 2FA codes (for example, if you lose your device). Each code
-          can only be used once.
+          Recovery codes can be used to access your ORCID account when you
+          aren’t able to use your authentication app. Each recovery code can
+          only be used once.
         </p>
       </div>
       <a

src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.spec.ts

@@ -68,17 +68,19 @@ describe('TwoFactorRecoveryCodesComponent', () => {
 
   it('should only allow complete when copy/download and checkbox are done', () => {
     expect(component.canCompleteSetup).toBeFalse()
+    expect(component.twoFactorForm.get('confirmCodes')?.disabled).toBeTrue()
 
     component.markCodesCopied()
+    expect(component.twoFactorForm.get('confirmCodes')?.enabled).toBeTrue()
     expect(component.canCompleteSetup).toBeFalse()
 
-    component.twoFactorForm.get('confirmCodes').setValue(true)
+    component.twoFactorForm.get('confirmCodes')?.setValue(true)
     expect(component.canCompleteSetup).toBeTrue()
   })
 
   it('should record click and completion events when setup is completed', async () => {
     component.markCodesCopied()
-    component.twoFactorForm.get('confirmCodes').setValue(true)
+    component.twoFactorForm.get('confirmCodes')?.setValue(true)
 
     component.completeSetup()
     await fixture.whenStable()
@@ -91,4 +93,10 @@ describe('TwoFactorRecoveryCodesComponent', () => {
     )
     expect(router.navigate).toHaveBeenCalled()
   })
+
+  it('should enable confirm checkbox after downloading recovery codes', () => {
+    expect(component.twoFactorForm.get('confirmCodes')?.disabled).toBeTrue()
+    component.downloadRecoveryCodes()
+    expect(component.twoFactorForm.get('confirmCodes')?.enabled).toBeTrue()
+  })
 })

src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.ts

@@ -43,7 +43,9 @@ export class TwoFactorRecoveryCodesComponent implements OnInit {
 
     this.twoFactorForm = new UntypedFormGroup({
       backupCodes: new UntypedFormControl(this.backupCodes, []),
-      confirmCodes: new UntypedFormControl(false, [Validators.requiredTrue]),
+      confirmCodes: new UntypedFormControl({ value: false, disabled: true }, [
+        Validators.requiredTrue,
+      ]),
     })
   }
 
@@ -55,11 +57,11 @@ export class TwoFactorRecoveryCodesComponent implements OnInit {
     this.window.document.body.appendChild(link)
     link.click()
     this.window.document.body.removeChild(link)
-    this.hasDownloadedOrCopied = true
+    this.enableConfirmation()
   }
 
   markCodesCopied() {
-    this.hasDownloadedOrCopied = true
+    this.enableConfirmation()
   }
 
   get canCompleteSetup() {
@@ -86,4 +88,9 @@ export class TwoFactorRecoveryCodesComponent implements OnInit {
       }
     })
   }
+
+  private enableConfirmation() {
+    this.hasDownloadedOrCopied = true
+    this.twoFactorForm.get('confirmCodes')?.enable({ emitEvent: false })
+  }
 }