Add warning message to login page

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
 
 ### Changed
 

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

@@ -11,6 +11,10 @@ import { ArrowUpRightSquareFill } from 'react-bootstrap-icons'
 import dataverse_logo from '@/assets/dataverse_brand_icon.svg'
 import styles from './template.module.scss'
 
+const DATAVERSE_BASE_URL =
+  import.meta.env.VITE_DATAVERSE_BASE_URL ?? 'https://dataverse.harvard.edu'
+const HARVARD_SIGN_UP_URL = `${DATAVERSE_BASE_URL}/dataverseuser.xhtml?editMode=CREATE&redirectPage=%2Fdataverse_homepage.xhtml`
+
 /*
  * This is a Layout common to every keycloak page.
  * It was originally generated by running `npx keycloakify eject-page` and then selecting `Template.tsx` option.
@@ -64,11 +68,22 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
   return (
     <div className={styles.login} id="kc-login-template">
+      {kcContext.pageId === 'login.ftl' && (
+        <div className={styles['top-notice']}>
+          <Alert variant="warning" customHeading={msgStr('signInNoticeTitle')} dismissible={false}>
+            <>
+              {msg('signInNoticeBodyPrefix')}
+              <a href={HARVARD_SIGN_UP_URL}>{msg('signInNoticeSignUpLinkText')}</a>
+            </>
+          </Alert>
+        </div>
+      )}
       <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/i18n.ts

@@ -3,7 +3,17 @@ 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 CILogon options sign-in',
+      signInNoticeBodyPrefix:
+        'CILogon 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'
+    }
+  })
+  .build()
 
 type I18n = typeof ofTypeI18n
 

src/keycloak-theme/login/template.module.scss

@@ -29,6 +29,11 @@
   }
 }
 
+.top-notice {
+  margin: 0.5rem;
+  border-radius: 8px;
+}
+
 .login-card {
   width: 100%;
   height: 100%;

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
+}