fix: seperate component

Author: ChengShi-1

src/keycloak-theme/login/Template.tsx

@@ -9,12 +9,9 @@ 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'
 
-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.
@@ -68,16 +65,7 @@ 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>
-      )}
+      {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" />

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,26 @@
+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>
+        </>
+      </Alert>
+    </div>
+  )
+}

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

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