diff --git a/ui/src/pages/login/header.tsx b/ui/src/pages/login/header.tsx
new file mode 100644
index 000000000..37f378907
--- /dev/null
+++ b/ui/src/pages/login/header.tsx
@@ -0,0 +1,61 @@
+import { komodo_client, useLoginOptions } from "@/lib/hooks";
+import { Button, Group, Stack, Text } from "@mantine/core";
+import { MoghAuth } from "komodo_client";
+import { KeyRound } from "lucide-react";
+
+export default function LoginHeader({
+ secondFactorPending,
+}: {
+ secondFactorPending: boolean;
+}) {
+ const options = useLoginOptions().data;
+ return (
+
+
+
+
+
+ KOMODO
+
+
+ Log In
+
+
+
+
+ {(
+ [
+ [options?.oidc, "Oidc"],
+ [options?.github, "Github"],
+ [options?.google, "Google"],
+ ] as Array<
+ [boolean | undefined, MoghAuth.Types.ExternalLoginProvider]
+ >
+ ).map(
+ ([enabled, provider]) =>
+ enabled && (
+
+ ),
+ )}
+
+
+ );
+}
diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login/index.tsx
similarity index 67%
rename from ui/src/pages/login.tsx
rename to ui/src/pages/login/index.tsx
index 576f54fd4..c6d325696 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login/index.tsx
@@ -1,9 +1,4 @@
-import {
- komodo_client,
- useLogin,
- useLoginOptions,
- useUserInvalidate,
-} from "@/lib/hooks";
+import { useLogin, useLoginOptions, useUserInvalidate } from "@/lib/hooks";
import { sanitizeQuery } from "@/lib/utils";
import {
Button,
@@ -12,15 +7,15 @@ import {
Group,
Loader,
PasswordInput,
- Stack,
Text,
TextInput,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { notifications } from "@mantine/notifications";
import { MoghAuth } from "komodo_client";
-import { KeyRound } from "lucide-react";
+import { AlertTriangle, KeyRound } from "lucide-react";
import { useState } from "react";
+import LoginHeader from "./header";
export default function Login({
passkeyIsPending: _passkeyIsPending,
@@ -101,11 +96,11 @@ export default function Login({
},
);
- // const noAuthConfigured =
- // options !== undefined &&
- // Object.values(options).every((value) => value === false);
+ const noAuthConfigured =
+ options !== undefined &&
+ Object.values(options).every((value) => value === false);
- // const showSignUp = options !== undefined && !options.registration_disabled;
+ const showSignUp = options !== undefined && !options.registration_disabled;
const localForm = useForm({
mode: "uncontrolled",
@@ -131,67 +126,10 @@ export default function Login({
},
});
- const registration_disabled = options?.registration_disabled ?? true;
-
return (
);