新class612

src/kc.gen.tsx

@@ -1,5 +1,5 @@
 // This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
-// Hash: 822f146dfd89023346d41d4f77fba9745b7f55365c95ca37f85806c01ab23dc4
+// Hash: 7dbbfb317418e9799cdce9a990519799f98af7dbfe27f1d0438c6738cffb7515
 
 /* eslint-disable */
 
@@ -9,9 +9,9 @@
 
 import { lazy, Suspense, type ReactNode } from "react";
 
-export type ThemeName = "keycloakify-starter";
+export type ThemeName = "keycloakify-starter" | "class";
 
-export const themeNames: ThemeName[] = ["keycloakify-starter"];
+export const themeNames: ThemeName[] = ["keycloakify-starter", "class"];
 
 export type KcEnvName = never;
 

src/login/KcPage.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "./i18n";
 import DefaultPage from "keycloakify/login/DefaultPage";
 import Template from "./Template";
 import "./theme.css";
+import "./class-theme.css";
 const UserProfileFormFields = lazy(
     () => import("keycloakify/login/UserProfileFormFields")
 );
@@ -25,7 +26,11 @@ export default function KcPage(props: { kcContext: KcContext }) {
                             <DefaultPage
                                 kcContext={kcContext}
                                 i18n={i18n}
-                                classes={classes}
+                                classes={
+                                    kcContext.themeName === "class"
+                                        ? classThemeClasses
+                                        : nexusThemeClasses
+                                }
                                 Template={Template}
                                 doUseDefaultCss={false}
                                 UserProfileFormFields={UserProfileFormFields}
@@ -38,7 +43,7 @@ export default function KcPage(props: { kcContext: KcContext }) {
     );
 }
 
-const classes = {
+const nexusThemeClasses = {
     kcBodyClass: "nexus-body",
     kcLoginClass: "nexus-login",
     kcHeaderClass: "nexus-header",
@@ -76,3 +81,42 @@ const classes = {
     kcLocaleItemClass: "nexus-locale__item",
     kcInputErrorMessageClass: "nexus-field__error"
 } satisfies { [key in ClassKey]?: string };
+
+const classThemeClasses = {
+    kcBodyClass: "class-body",
+    kcLoginClass: "class-login",
+    kcHeaderClass: "class-header",
+    kcHeaderWrapperClass: "class-header__name",
+    kcFormCardClass: "class-card",
+    kcFormHeaderClass: "class-card__header",
+    kcFormGroupClass: "class-field",
+    kcLabelClass: "class-label",
+    kcInputClass: "class-input",
+    kcInputGroup: "class-input-group",
+    kcFormSettingClass: "class-form-settings",
+    kcFormOptionsWrapperClass: "class-form-options",
+    kcFormPasswordVisibilityButtonClass: "class-password-toggle",
+    kcButtonClass: "class-button",
+    kcButtonBlockClass: "class-button--block",
+    kcButtonLargeClass: "class-button--large",
+    kcButtonPrimaryClass: "class-button--primary",
+    kcButtonSecondaryClass: "class-button--secondary",
+    kcButtonDefaultClass: "class-button--default",
+    kcAlertClass: "class-alert",
+    kcFeedbackErrorIcon: "class-feedback class-feedback--error",
+    kcFeedbackWarningIcon: "class-feedback class-feedback--warning",
+    kcFeedbackSuccessIcon: "class-feedback class-feedback--success",
+    kcFeedbackInfoIcon: "class-feedback class-feedback--info",
+    kcFormSocialAccountSectionClass: "class-social",
+    kcFormSocialAccountListClass: "class-social__list",
+    kcFormSocialAccountListButtonClass: "class-social__button",
+    kcFormSocialAccountNameClass: "class-social__name",
+    kcSignUpClass: "class-signup",
+    kcInfoAreaWrapperClass: "class-signup__inner",
+    kcLocaleMainClass: "class-locale",
+    kcLocaleDropDownClass: "class-locale__dropdown",
+    kcLocaleListClass: "class-locale__list",
+    kcLocaleListItemClass: "class-locale__list-item",
+    kcLocaleItemClass: "class-locale__item",
+    kcInputErrorMessageClass: "class-field__error"
+} satisfies { [key in ClassKey]?: string };

src/login/Template.tsx

@@ -5,39 +5,87 @@ import type { I18n } from "./i18n";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { msg } = props.i18n;
+    const isClassTheme = props.kcContext.themeName === "class";
 
     return (
         <>
-            <div className="nexus-atmosphere" aria-hidden="true">
+            {isClassTheme ? (
-                <div className="nexus-grid" />
+                <>
-                <div className="nexus-orbit nexus-orbit--outer">
+                    <div className="class-atmosphere" aria-hidden="true">
-                    <span className="nexus-orbit__node" />
+                        <span className="class-registration-mark class-registration-mark--top" />
-                </div>
+                        <span className="class-registration-mark class-registration-mark--bottom" />
-                <div className="nexus-orbit nexus-orbit--inner">
+                        <div className="class-mobile-brand">
-                    <span className="nexus-orbit__node" />
+                            <span>612</span>
-                </div>
+                            <b>{msg("classArchiveName")}</b>
-                <div className="nexus-core">
+                        </div>
-                    <span>N</span>
+                    </div>
-                </div>
-            </div>
 
-            <aside className="nexus-manifesto" aria-hidden="true">
+                    <aside className="class-record" aria-hidden="true">
-                <div className="nexus-wordmark">
+                        <div className="class-record__index">
-                    <span className="nexus-wordmark__signal" />
+                            <span>ARCHIVE NO. 612</span>
-                    NEXUS <b>/ ID</b>
+                            <span>{msg("classSchoolCohort")}</span>
-                </div>
+                        </div>
-                <div className="nexus-manifesto__copy">
+
-                    <p>{msg("nexusIdentityAccessLayer")}</p>
+                        <div className="class-record__copy">
-                    <h2>
+                            <p>{msg("classIdentityArchive")}</p>
-                        {msg("nexusSecureAccess")}
+                            <h2>
-                        <span>{msg("nexusPreciselyOrchestrated")}</span>
+                                {msg("classMemoriesRemain")}
-                    </h2>
+                                <span>{msg("classWelcomeBack")}</span>
-                </div>
+                            </h2>
-                <div className="nexus-system-status">
+                        </div>
-                    <span>{msg("nexusSecureChannel")}</span>
+
-                    <span className="nexus-system-status__state">{msg("nexusSystemOnline")}</span>
+                        <div className="class-record__ledger">
-                </div>
+                            <div>
-            </aside>
+                                <strong>1095+</strong>
+                                <span>{msg("classDaysTogether")}</span>
+                            </div>
+                            <div>
+                                <strong>612</strong>
+                                <span>{msg("classArchiveNumber")}</span>
+                            </div>
+                            <div>
+                                <strong>∞</strong>
+                                <span>{msg("classMomentsRemembered")}</span>
+                            </div>
+                        </div>
+
+                        <div className="class-record__stamp">612</div>
+                    </aside>
+                </>
+            ) : (
+                <>
+                    <div className="nexus-atmosphere" aria-hidden="true">
+                        <div className="nexus-grid" />
+                        <div className="nexus-orbit nexus-orbit--outer">
+                            <span className="nexus-orbit__node" />
+                        </div>
+                        <div className="nexus-orbit nexus-orbit--inner">
+                            <span className="nexus-orbit__node" />
+                        </div>
+                        <div className="nexus-core">
+                            <span>N</span>
+                        </div>
+                    </div>
+
+                    <aside className="nexus-manifesto" aria-hidden="true">
+                        <div className="nexus-wordmark">
+                            <span className="nexus-wordmark__signal" />
+                            NEXUS <b>/ ID</b>
+                        </div>
+                        <div className="nexus-manifesto__copy">
+                            <p>{msg("nexusIdentityAccessLayer")}</p>
+                            <h2>
+                                {msg("nexusSecureAccess")}
+                                <span>{msg("nexusPreciselyOrchestrated")}</span>
+                            </h2>
+                        </div>
+                        <div className="nexus-system-status">
+                            <span>{msg("nexusSecureChannel")}</span>
+                            <span className="nexus-system-status__state">{msg("nexusSystemOnline")}</span>
+                        </div>
+                    </aside>
+                </>
+            )}
 
             <BaseTemplate {...props} />
         </>