109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import { LoaderIcon } from "@lume/icons";
|
|
import { cn } from "@lume/utils";
|
|
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const Route = createLazyFileRoute("/auth/create/")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const navigate = useNavigate();
|
|
|
|
const [t] = useTranslation();
|
|
const [method, setMethod] = useState<"self" | "managed">("self");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const next = () => {
|
|
setLoading(true);
|
|
|
|
if (method === "self") {
|
|
navigate({ to: "/auth/create/self" });
|
|
} else {
|
|
navigate({ to: "/auth/create/managed" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
|
|
<div className="flex flex-col items-center gap-1 text-center">
|
|
<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
|
|
<p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
|
|
{t("signup.subtitle")}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMethod("self")}
|
|
className={cn(
|
|
"flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
|
|
method === "self"
|
|
? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
|
|
: "",
|
|
)}
|
|
>
|
|
<p className="font-semibold">{t("signup.selfManageMethod")}</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-500">
|
|
{t("signup.selfManageMethodDescription")}
|
|
</p>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMethod("managed")}
|
|
className={cn(
|
|
"flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
|
|
method === "managed"
|
|
? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
|
|
: "",
|
|
)}
|
|
>
|
|
<p className="font-semibold">{t("signup.providerMethod")}</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-500">
|
|
{t("signup.providerMethodDescription")}
|
|
</p>
|
|
</button>
|
|
<div className="flex flex-col gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={next}
|
|
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
|
|
>
|
|
{loading ? (
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
) : (
|
|
t("global.continue")
|
|
)}
|
|
</button>
|
|
{method === "managed" ? (
|
|
<div className="flex flex-col gap-1.5 rounded-xl border border-red-200 bg-red-100 p-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900 dark:text-red-200">
|
|
<p className="font-semibold text-red-900 dark:text-red-100">
|
|
Attention:
|
|
</p>
|
|
<p>
|
|
You're chosing Managed by Provider, this feature still in
|
|
"Beta".
|
|
</p>
|
|
<p>
|
|
Some functions still missing or not work as expected, you
|
|
shouldn't create your main account with this method
|
|
</p>
|
|
<a
|
|
href="https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-blue-500"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|