+
+ );
+ }
+
+ return <>;
+};
+
+export default ParticlesBackground;
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
new file mode 100644
index 0000000..2570375
--- /dev/null
+++ b/src/login/Template.tsx
@@ -0,0 +1,224 @@
+import { useEffect, useState, useCallback } from "react";
+import { useMediaQuery } from "react-responsive";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import type { TemplateProps } from "keycloakify/login/TemplateProps";
+import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import { useInitialize } from "keycloakify/login/Template.useInitialize";
+import type { I18n } from "./i18n";
+import type { KcContext } from "./KcContext";
+import { Layout, Typography, Dropdown, Button, Alert, Space, Divider, ConfigProvider, Flex, theme } from "antd";
+import { GlobalOutlined } from "@ant-design/icons";
+import ParticlesBackground from "./ParticlesBackground";
+
+const { Sider, Content } = Layout;
+const { Title, Text } = Typography;
+
+export default function Template(props: TemplateProps
+ 
+
+
+
+ {(() => {
+ const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+
+ {headerNode}
+
+ ) : (
+ <>
+
+
+ {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+ {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
+
+
+ ![]({"https://cdn.tombutcher.work/icons/auth/c-person.svg"})
+ {auth.attemptedUsername}
+
+
+
+
+
+
+ );
+ }
+
+ return node;
+ })()}
+
+
+ * {msg("requiredFields")}
+
+
+ {node}
+
+ {children}
+ {auth !== undefined && auth.showTryAnotherWayLink && (
+
+ )}
+ {displayInfo &&
+
+ {enabledLanguages.length > 1 && (
+ {infoNode}
}
+
+
+
+
+
+ )}
+
+ {advancedMsg(attribute.annotations.inputHelperTextBefore)}
+
+ )}
+
+ {advancedMsg(attribute.annotations.inputHelperTextAfter)}
+
+ )}
+
+ }
+ rules={[{ required: true }]}
+ name={attribute.name}
+ shouldUpdate
+ key={attribute.name}
+ {...rest}
+ >
+ {BeforeField !== undefined && (
+ [`data-${key}`, value]))}>
+ {(() => {
+ const groupDisplayHeader = attribute.group.displayHeader ?? "";
+ const groupHeaderText = groupDisplayHeader !== "" ? advancedMsg(groupDisplayHeader) : attribute.group.name;
+
+ return (
+ <>
+
+ {groupHeaderText}
+
+
+ );
+ })()}
+ {(() => {
+ const groupDisplayDescription = attribute.group.displayDescription ?? "";
+
+ if (groupDisplayDescription !== "") {
+ const groupDescriptionText = advancedMsg(groupDisplayDescription);
+
+ return {groupDescriptionText} ;
+ }
+
+ return null;
+ })()}
+
+ );
+ }
+ }
+
+ return null;
+}
+
+function FieldErrors(props: { attribute: Attribute; displayableErrors: FormFieldError[]; fieldIndex: number | undefined }) {
+ const { attribute, fieldIndex } = props;
+
+ const displayableErrors = props.displayableErrors.filter(error => error.fieldIndex === fieldIndex);
+
+ if (displayableErrors.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {displayableErrors
+ .filter(error => error.fieldIndex === fieldIndex)
+ .map(({ errorMessage }, i) => (
+ {errorMessage}
+ ))}
+
+ );
+}
+
+type InputFieldByTypeProps = {
+ attribute: Attribute;
+ valueOrValues: string | string[];
+ displayableErrors: FormFieldError[];
+ dispatchFormAction: React.Dispatch