Merge pull request #8164 from overleaf/msm-add-disabled-state-link-accounts

[Settings] Disable "Link Account" buttons after click

GitOrigin-RevId: 528acdebe4812f1bf81fa70f1d9ce810ce5170c3

services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react'
+import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { DomainInfo } from './input'
 import { ExposedSettings } from '../../../../../../../types/exposed-settings'
@@ -12,6 +14,14 @@ function SsoLinkingInfo({ domainInfo, email }: SSOLinkingInfoProps) {
   const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings
   const { t } = useTranslation()
 
+  const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
+    useState(false)
+
+  function handleLinkAccountsButtonClick() {
+    setLinkAccountsButtonDisabled(true)
+    window.location.href = `${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`
+  }
+
   return (
     <>
       <p className="affiliations-table-label">{domainInfo.university.name}</p>
@@ -36,12 +46,14 @@ function SsoLinkingInfo({ domainInfo, email }: SSOLinkingInfoProps) {
           {t('find_out_more_about_institution_login')}.
         </a>
       </p>
-      <a
-        className="btn-sm btn btn-primary btn-link-accounts"
-        href={`${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`}
+      <Button
+        bsStyle="primary"
+        className="btn-sm btn-link-accounts"
+        disabled={linkAccountsButtonDisabled}
+        onClick={handleLinkAccountsButtonClick}
       >
         {t('link_accounts_and_add_email')}
-      </a>
+      </Button>
     </>
   )
 }

services/web/frontend/js/features/settings/components/emails/row.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { UserEmailData } from '../../../../../../types/user-email'
-import { Row, Col } from 'react-bootstrap'
+import { Button, Row, Col } from 'react-bootstrap'
 import Email from './email'
 import InstitutionAndRole from './institution-and-role'
 import EmailCell from './cell'
@@ -59,6 +60,14 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
   const { t } = useTranslation()
   const { state } = useUserEmailsContext()
 
+  const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
+    useState(false)
+
+  function handleLinkAccountsButtonClick() {
+    setLinkAccountsButtonDisabled(true)
+    window.location.href = `${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`
+  }
+
   if (
     !userEmailData.samlProviderId &&
     institutionAlreadyLinked(state, userEmailData)
@@ -127,12 +136,14 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
           </Col>
           <Col md={3} className="text-md-right">
             <EmailCell>
-              <a
-                className="btn-sm btn btn-info btn-link-accounts"
-                href={`${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`}
+              <Button
+                bsStyle="info"
+                className="btn-sm btn-link-accounts"
+                disabled={linkAccountsButtonDisabled}
+                onClick={handleLinkAccountsButtonClick}
               >
                 {t('link_accounts')}
-              </a>
+              </Button>
             </EmailCell>
           </Col>
         </Row>

services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx

@@ -89,7 +89,7 @@ describe('<EmailsRow/>', function () {
         getByTextContent(
           'You can now link your Overleaf account to your Overleaf institutional account.'
         )
-        screen.getByRole('link', { name: 'Link Accounts' })
+        screen.getByRole('button', { name: 'Link Accounts' })
       })
     })
 
@@ -106,7 +106,8 @@ describe('<EmailsRow/>', function () {
         getByTextContent(
           'You can log in to Overleaf through your Overleaf institutional login.'
         )
-        expect(screen.queryByRole('link', { name: 'Link Accounts' })).to.be.null
+        expect(screen.queryByRole('button', { name: 'Link Accounts' })).to.be
+          .null
       })
     })
   })

services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx

@@ -201,7 +201,7 @@ describe('<EmailsSection />', function () {
       target: { value: 'user@autocomplete.edu' },
     })
 
-    await screen.findByRole('link', { name: 'Link Accounts and Add Email' })
+    await screen.findByRole('button', { name: 'Link Accounts and Add Email' })
   })
 
   it('adds new email address with existing institution and custom departments', async function () {