Refactor authentication code; add OIDC support

services/web/frontend/extracted-translations.json

@@ -2492,6 +2492,7 @@
   "you_can_select_or_invite_collaborator": "",
   "you_can_select_or_invite_collaborator_plural": "",
   "you_can_still_use_your_premium_features": "",
+  "you_cant_add_or_change_password_due_to_ldap_or_sso": "",
   "you_cant_add_or_change_password_due_to_sso": "",
   "you_cant_join_this_group_subscription": "",
   "you_currently_have_x_linked_with_your_overleaf_account": "",

services/web/frontend/js/features/settings/components/linking-section.tsx

@@ -200,7 +200,8 @@ function SSOLinkingWidgetContainer({
   const { t } = useTranslation()
   const { unlink } = useSSOContext()
 
-  let description = ''
+  let description = subscription.provider.descriptionKey ||
+    `${t('login_with_service', { service: subscription.provider.name, })}.`
   switch (subscription.providerId) {
     case 'collabratec':
       description = t('linked_collabratec_description')

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -4,6 +4,7 @@ import { FetchError } from '../../../../infrastructure/fetch-json'
 import IEEELogo from '../../../../shared/svgs/ieee-logo'
 import GoogleLogo from '../../../../shared/svgs/google-logo'
 import OrcidLogo from '../../../../shared/svgs/orcid-logo'
+import OpenIDLogo from '../../../../shared/svgs/openid-logo'
 import LinkingStatus from './status'
 import OLButton from '@/shared/components/ol/ol-button'
 import {
@@ -18,6 +19,7 @@ const providerLogos: { readonly [p: string]: JSX.Element } = {
   collabratec: <IEEELogo />,
   google: <GoogleLogo />,
   orcid: <OrcidLogo />,
+  oidc: <OpenIDLogo />,
 }
 
 type SSOLinkingWidgetProps = {
@@ -67,7 +69,7 @@ export function SSOLinkingWidget({
 
   return (
     <div className="settings-widget-container">
-      <div>{providerLogos[providerId]}</div>
+      <div>{providerLogos[providerId] || providerLogos['oidc']}</div>
       <div className="description-container">
         <div className="title-row">
           <h4 id={providerId}>{title}</h4>

services/web/frontend/js/features/settings/components/password-section.tsx

@@ -39,11 +39,7 @@ function CanOnlyLogInThroughSSO() {
   return (
     <p>
       <Trans
-        i18nKey="you_cant_add_or_change_password_due_to_sso"
-        components={[
-          // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-          <a href="/learn/how-to/Logging_in_with_Group_single_sign-on" />,
-        ]}
+        i18nKey="you_cant_add_or_change_password_due_to_ldap_or_sso"
       />
     </p>
   )

services/web/frontend/js/shared/svgs/openid-logo.jsx

@@ -0,0 +1,27 @@
+function OpenIDLogo() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="40" height="40" fill="white" />
+      <path
+        d="M18.185415 36.042565 23.298193 32.35627 23.060446 3.090316 18.185415 6.8918455Z"
+        fill="#ff8e00"
+      />
+      <path
+        d="M18.246064 36.042565C-0.37463741 32.997945 -1.0248032 15.054095 18.13083 11.143396l0.05944 3.322396 c -13.3672163 2.225847 -11.6629563 14.187201 0 15.92785l0.05944 3.127104Z"
+        fill="#626262"
+      />
+      <path
+        d="M23.219348 14.720521c2.279219 0.01577 4.262468 1.057732 6.237225 2.117891l-2.917255 2.176115h9.317022l0.05701 -6.371868 -2.917255 2.176115C30.03396 13.32315 27.308358 11.530342 23.169615 11.496378Z"
+        fill="#626262"
+      />
+    </svg>
+  )
+}
+
+export default OpenIDLogo
+