Merge pull request #932 from IQSS/930-add-warning-message-to-login-page

Add warning message to login page

Author: ekraffmiller

CHANGELOG.md

@@ -18,6 +18,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 - Added Notifications tab in Account Page
 - Added runtime configuration options for homepage branding and support link.
 - Added an environment variable to docker-compose-dev.yml to hide the OIDC client used in the SPA from the JSF frontend: DATAVERSE_AUTH_OIDC_HIDDEN_JSF: 1
+- Added a message note to the login page
 - Download with terms of use and guestbook.
 - Show terms modal before download when dataset has custom terms, a non-default license (not CC0 1.0), or a guestbook. Draft datasets and dataset editors bypass the modal.
 

src/index.tsx

@@ -11,31 +11,35 @@ const AppEntrypoint = lazy(() => import('./index.app'))
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
-const appConfigInit = initAppConfig()
-
-if (!appConfigInit.ok) {
+if (window.kcContext) {
   root.render(
-    <ConfigError message={appConfigInit.message} schemaError={appConfigInit.schemaError} />
+    <StrictMode>
+      <KcPage kcContext={window.kcContext} />
+    </StrictMode>
   )
 } else {
-  const appConfig = requireAppConfig()
+  const appConfigInit = initAppConfig()
 
-  ApiConfig.init(
-    `${appConfig.backendUrl}/api/v1`,
-    DataverseApiAuthMechanism.BEARER_TOKEN,
-    undefined,
-    `${appConfig.oidc.localStorageKeyPrefix}token`
-  )
+  if (!appConfigInit.ok) {
+    root.render(
+      <ConfigError message={appConfigInit.message} schemaError={appConfigInit.schemaError} />
+    )
+  } else {
+    const appConfig = requireAppConfig()
 
-  root.render(
-    <StrictMode>
-      {window.kcContext ? (
-        <KcPage kcContext={window.kcContext} />
-      ) : (
+    ApiConfig.init(
+      `${appConfig.backendUrl}/api/v1`,
+      DataverseApiAuthMechanism.BEARER_TOKEN,
+      undefined,
+      `${appConfig.oidc.localStorageKeyPrefix}token`
+    )
+
+    root.render(
+      <StrictMode>
         <Suspense>
           <AppEntrypoint />
         </Suspense>
-      )}
-    </StrictMode>
-  )
+      </StrictMode>
+    )
+  }
 }

src/keycloak-theme/login/Template.tsx

@@ -9,6 +9,7 @@ import type { KcContext } from './KcContext'
 import { Alert, DropdownButton, DropdownButtonItem, Tooltip } from '@iqss/dataverse-design-system'
 import { ArrowUpRightSquareFill } from 'react-bootstrap-icons'
 import dataverse_logo from '@/assets/dataverse_brand_icon.svg'
+import { SignInNotice } from './components/SignInNotice'
 import styles from './template.module.scss'
 
 /*
@@ -64,11 +65,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
   return (
     <div className={styles.login} id="kc-login-template">
+      {kcContext.pageId === 'login.ftl' && <SignInNotice i18n={i18n} />}
       <div id="kc-header">
         <div id="kc-header-wrapper" className={styles['header-wrapper']}>
           <img src={dataverse_logo} alt="Brand Logo Image" />
         </div>
       </div>
+
       <div className={styles['login-card']}>
         <header>
           {enabledLanguages.length > 1 && (

src/keycloak-theme/login/components/SignInNotice.module.scss

@@ -0,0 +1,4 @@
+.top-notice {
+  margin: 0.5rem;
+  border-radius: 8px;
+}

src/keycloak-theme/login/components/SignInNotice.tsx

@@ -0,0 +1,27 @@
+import { Alert } from '@iqss/dataverse-design-system'
+import type { I18n } from '../i18n'
+import styles from './SignInNotice.module.scss'
+
+const DATAVERSE_BASE_URL =
+  (import.meta.env.VITE_DATAVERSE_BASE_URL as string) ?? 'https://dataverse.harvard.edu'
+const HARVARD_SIGN_UP_URL = `${DATAVERSE_BASE_URL}/dataverseuser.xhtml?editMode=CREATE&redirectPage=%2Fdataverse_homepage.xhtml`
+
+interface SignInNoticeProps {
+  i18n: I18n
+}
+
+export function SignInNotice({ i18n }: SignInNoticeProps) {
+  const { msg, msgStr } = i18n
+
+  return (
+    <div className={styles['top-notice']}>
+      <Alert variant="warning" customHeading={msgStr('signInNoticeTitle')} dismissible={false}>
+        <>
+          {msg('signInNoticeBodyPrefix')}
+          <a href={HARVARD_SIGN_UP_URL}>{msg('signInNoticeSignUpLinkText')}</a>
+          {msg('signInNoticeBodySuffix')}
+        </>
+      </Alert>
+    </div>
+  )
+}

src/keycloak-theme/login/i18n.ts

@@ -3,7 +3,18 @@ import { i18nBuilder } from 'keycloakify/login'
 import type { ThemeName } from '../kc.gen'
 
 /** @see: https://docs.keycloakify.dev/features/i18n */
-const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build()
+const { useI18n, ofTypeI18n } = i18nBuilder
+  .withThemeName<ThemeName>()
+  .withCustomTranslations({
+    en: {
+      signInNoticeTitle: 'Note about Federated Login options sign-in',
+      signInNoticeBodyPrefix:
+        'Federated Login options are available only to the existing accounts that previously authenticated with these methods. New sign-ups via these options are not supported. Please use your Harvard Login or Username/Email to ',
+      signInNoticeSignUpLinkText: 'sign up in Harvard Dataverse',
+      signInNoticeBodySuffix: ', then you may login here.'
+    }
+  })
+  .build()
 
 type I18n = typeof ofTypeI18n
 

src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DATAVERSE_BASE_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}