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 ( + + + moghtech + + + 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 (
- - moghtech - - - KOMODO - - - Log In - - - - - {( - [ - [options?.oidc, "Oidc"], - [options?.github, "Github"], - [options?.google, "Google"], - ] as Array< - [boolean | undefined, MoghAuth.Types.ExternalLoginProvider] - > - ).map( - ([enabled, provider]) => - enabled && ( - - ), - )} - - - } + legend={} component="form" onSubmit={ totpIsPending @@ -218,7 +156,7 @@ export default function Login({ key={localForm.key("password")} /> - {!registration_disabled && ( + {showSignUp && ( @@ -240,13 +174,11 @@ export default function Login({ )} {passkeyIsPending && ( - <> + - - - Provide your passkey to finish login - - + Provide your passkey to finish login... + + )} {totpIsPending && ( @@ -276,6 +208,25 @@ export default function Login({ )} + + {noAuthConfigured && ( + + + + No login methods have been configured.
+ See the{" "} + + example config + {" "} + for information on configuring auth. +
+
+ )}
);