Make Cobble a local install: setup flow, bots-first admin, settings
Local, password-only auth: - No public pages; everything outside /admin and /auth redirects in - First run (no users) sends every page to /auth/signup, which creates the super admin (user #1) once and then locks - Login is email/username + password; removed the emailed-code flow, /auth/sso and email password reset - Google login kept for existing accounts only, never creates them - seed-super-admin now requires SEED_SUPER_ADMIN_PASSWORD Bots-first admin: - /admin and closed sections (people, logs, backups) redirect to /admin/bots; only bots and settings are live (AdminSections) - Removed the old admin layout; every /admin page uses the bots rail - Coordinator bot created at signup/seed and by /admin/bots (ensureCoordinatorBot), which redirects to its chat - bots.system_prompt (markdown) with a default coordinator prompt - seed-bots reuses the existing coordinator Settings: - Sub pages general (default), profile, change-password, listed in the rail with a back link; unknown settings paths redirect to general - Redesigned settings UI: pane header, grouped rows, sticky save bar - General: System/Light/Dark theme, saved per device Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -1,41 +1,33 @@
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import { AdminHomePath } from "@/src/dict/admin-sections-dict";
|
||||
import type useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { ApiReqParams, LoginFormObject, LoginMethod } from "@/src/types";
|
||||
import type { ApiReqParams, LoginFormObject } from "@/src/types";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
|
||||
|
||||
type Params = ReturnType<typeof useFormInit<LoginFormObject>> & {
|
||||
method: LoginMethod;
|
||||
};
|
||||
type Params = ReturnType<typeof useFormInit<LoginFormObject>>;
|
||||
|
||||
export default async function submitLoginForm({
|
||||
setLoading,
|
||||
setStatus,
|
||||
form,
|
||||
method,
|
||||
}: Params) {
|
||||
setLoading(true);
|
||||
|
||||
const identifier = form.username_or_email?.trim() || "";
|
||||
|
||||
const res = await fetchApi<ApiReqParams, APIResponseObject>(
|
||||
method == "password"
|
||||
? `/api/auth/password-login`
|
||||
: `/api/auth/get-login-code`,
|
||||
`/api/auth/password-login`,
|
||||
{
|
||||
method: "POST",
|
||||
body: {
|
||||
login: {
|
||||
email_or_username: identifier,
|
||||
password: method == "password" ? form.password : undefined,
|
||||
email_or_username: form.username_or_email?.trim() || "",
|
||||
password: form.password,
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (res.success) {
|
||||
saveSSOPendingLogin({ identifier, method });
|
||||
window.location.pathname = `/auth/sso`;
|
||||
window.location.pathname = AdminHomePath;
|
||||
} else {
|
||||
setStatus({
|
||||
error: true,
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
|
||||
import useFormInit from "@/src/hooks/use-form-init";
|
||||
import useLoginMethod from "@/src/hooks/use-login-method";
|
||||
import type { LoginFormObject } from "@/src/types";
|
||||
import LoginShell from "@/src/components/general/login-shell";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import GoogleAuthSection from "@/src/components/general/google-auth-section";
|
||||
import LoginFormEmailUsername from "./login-form-email-username";
|
||||
import LoginFormPassword from "./login-form-password";
|
||||
@@ -14,36 +12,21 @@ import submitLoginForm from "../../(functions)/submit-login-form";
|
||||
export default function LoginForm() {
|
||||
const init = useFormInit<LoginFormObject>();
|
||||
const { loading, status } = init;
|
||||
const method = useLoginMethod();
|
||||
|
||||
return (
|
||||
<LoginShell status={status}>
|
||||
<GoogleAuthSection {...init} mode="login" />
|
||||
<GoogleAuthSection {...init} />
|
||||
<Form
|
||||
className="w-full flex items-center justify-center relative gap-4"
|
||||
onSubmit={() => {
|
||||
submitLoginForm({ ...init, method });
|
||||
submitLoginForm(init);
|
||||
}}
|
||||
>
|
||||
{loading && <LoadingOverlay />}
|
||||
<LoginFormEmailUsername {...init} />
|
||||
{method == "password" ? <LoginFormPassword {...init} /> : null}
|
||||
<LoginFormAction method={method} />
|
||||
<LoginFormPassword {...init} />
|
||||
<LoginFormAction />
|
||||
</Form>
|
||||
{method == "password" ? (
|
||||
<AuthFooterLink
|
||||
prompt="Forgot your password?"
|
||||
title="Reset it"
|
||||
url="/auth/reset-password"
|
||||
className="w-full text-sm"
|
||||
/>
|
||||
) : null}
|
||||
<AuthFooterLink
|
||||
prompt="Already have a code?"
|
||||
title="Enter it"
|
||||
url="/auth/sso"
|
||||
className="w-full text-sm"
|
||||
/>
|
||||
</LoginShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,9 @@
|
||||
import Button from "@moduletrace/twui/layout/Button";
|
||||
import type { LoginMethod } from "@/src/types";
|
||||
|
||||
type Props = {
|
||||
method: LoginMethod;
|
||||
};
|
||||
|
||||
export default function LoginFormAction({ method }: Props) {
|
||||
const label = method == "password" ? "Log in" : "Email me a login code";
|
||||
|
||||
export default function LoginFormAction() {
|
||||
return (
|
||||
<Button title={label} type="submit" className="w-full">
|
||||
{label}
|
||||
<Button title="Log in" type="submit" className="w-full">
|
||||
Log in
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,9 @@ import Section from "@moduletrace/twui/layout/Section";
|
||||
import Container from "@moduletrace/twui/layout/Container";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import AuthHero from "@/src/components/general/auth-hero";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import LoginForm from "../(partials)/login-form";
|
||||
import useLoginMethod from "@/src/hooks/use-login-method";
|
||||
|
||||
export default function LoginFormSection() {
|
||||
const method = useLoginMethod();
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Container>
|
||||
@@ -16,18 +12,9 @@ export default function LoginFormSection() {
|
||||
<AuthHero
|
||||
eyebrow="Welcome back"
|
||||
title="Log in to your account"
|
||||
description={
|
||||
method == "password"
|
||||
? "Log in with your password, then confirm with a code we email you."
|
||||
: "Enter your email or username and we'll email you a one-time login code."
|
||||
}
|
||||
description="Log in with your email or username and password."
|
||||
/>
|
||||
<LoginForm />
|
||||
<AuthFooterLink
|
||||
prompt="Don't have an account?"
|
||||
title="Sign up"
|
||||
url="/auth/signup"
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@@ -32,10 +32,6 @@ export const server: BunextPageServerFn = async ({ req }) => {
|
||||
name: AppData["AuthCSRFCookieName"],
|
||||
httpOnly: true,
|
||||
},
|
||||
{
|
||||
name: AppData["SSOAuthCookieName"],
|
||||
httpOnly: true,
|
||||
},
|
||||
]);
|
||||
return new_res;
|
||||
},
|
||||
|
||||
@@ -14,7 +14,7 @@ import { SiteData } from "@/src/data/site-data";
|
||||
export default function LogoutPage() {
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
window.location.pathname = "/";
|
||||
window.location.pathname = "/auth/login";
|
||||
}, 1000);
|
||||
}, []);
|
||||
|
||||
@@ -43,5 +43,5 @@ export default function LogoutPage() {
|
||||
|
||||
export const meta: BunextPageModuleMeta = {
|
||||
title: `Logging Out | ${SiteData["SiteName"]}`,
|
||||
description: "You are being logged out and redirected to the homepage.",
|
||||
description: "You are being logged out and redirected to the login page.",
|
||||
};
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import type useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { ApiReqParams, LoginFormObject } from "@/src/types";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
|
||||
|
||||
export default async function submitRequestReset({
|
||||
setLoading,
|
||||
setStatus,
|
||||
form,
|
||||
}: ReturnType<typeof useFormInit<LoginFormObject>>) {
|
||||
setLoading(true);
|
||||
|
||||
const identifier = form.username_or_email?.trim() || "";
|
||||
|
||||
const res = await fetchApi<ApiReqParams, APIResponseObject>(
|
||||
`/api/auth/request-password-reset`,
|
||||
{
|
||||
method: "POST",
|
||||
body: {
|
||||
login: {
|
||||
email_or_username: identifier,
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (res.success) {
|
||||
saveSSOPendingLogin({ identifier, method: "reset" });
|
||||
window.location.pathname = `/auth/reset-password/confirm`;
|
||||
} else {
|
||||
setStatus({
|
||||
error: true,
|
||||
msg: res.msg || "Couldn't send a reset code. Please try again.",
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
|
||||
import Button from "@moduletrace/twui/layout/Button";
|
||||
import useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { LoginFormObject } from "@/src/types";
|
||||
import LoginShell from "@/src/components/general/login-shell";
|
||||
import LoginFormEmailUsername from "@/src/pages/auth/login/(partials)/login-form/login-form-email-username";
|
||||
import submitRequestReset from "../../(functions)/submit-request-reset";
|
||||
|
||||
export default function RequestResetForm() {
|
||||
const init = useFormInit<LoginFormObject>();
|
||||
const { loading, status } = init;
|
||||
|
||||
return (
|
||||
<LoginShell status={status}>
|
||||
<Form
|
||||
className="w-full flex items-center justify-center relative gap-4"
|
||||
onSubmit={() => {
|
||||
submitRequestReset(init);
|
||||
}}
|
||||
>
|
||||
{loading && <LoadingOverlay />}
|
||||
<LoginFormEmailUsername {...init} />
|
||||
<Button title="Email me a reset code" type="submit" className="w-full">
|
||||
Email me a reset code
|
||||
</Button>
|
||||
</Form>
|
||||
</LoginShell>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import Section from "@moduletrace/twui/layout/Section";
|
||||
import Container from "@moduletrace/twui/layout/Container";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import AuthHero from "@/src/components/general/auth-hero";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import RequestResetForm from "../(partials)/request-reset-form";
|
||||
|
||||
export default function RequestResetSection() {
|
||||
return (
|
||||
<Section>
|
||||
<Container>
|
||||
<Stack className="w-full items-center max-w-md mx-auto gap-8">
|
||||
<AuthHero
|
||||
eyebrow="Forgot password"
|
||||
title="Reset your password"
|
||||
description="Enter your email or username and we'll email you a code to set a new password."
|
||||
/>
|
||||
<RequestResetForm />
|
||||
<AuthFooterLink
|
||||
prompt="Remembered it?"
|
||||
title="Log in"
|
||||
url="/auth/login"
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import type useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { ApiReqParams, PasswordResetFormObject } from "@/src/types";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
import validatePassword from "@/src/utils/validate-password";
|
||||
|
||||
export default async function submitConfirmReset({
|
||||
setLoading,
|
||||
setStatus,
|
||||
form,
|
||||
}: ReturnType<typeof useFormInit<PasswordResetFormObject>>) {
|
||||
const password_error = validatePassword({ password: form.new_password });
|
||||
|
||||
if (password_error) {
|
||||
setStatus({ error: true, msg: password_error });
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.new_password != form.confirm_password) {
|
||||
setStatus({ error: true, msg: "The passwords don't match." });
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const res = await fetchApi<ApiReqParams, APIResponseObject>(
|
||||
`/api/auth/reset-password`,
|
||||
{
|
||||
method: "POST",
|
||||
body: {
|
||||
sso_code: form.code?.trim(),
|
||||
new_password: form.new_password,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (res.success) {
|
||||
window.location.pathname = `/admin`;
|
||||
} else {
|
||||
setStatus({
|
||||
error: true,
|
||||
msg: res.msg || "Couldn't reset your password. Please try again.",
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
|
||||
import Button from "@moduletrace/twui/layout/Button";
|
||||
import useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { PasswordResetFormObject } from "@/src/types";
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
import LoginShell from "@/src/components/general/login-shell";
|
||||
import LoginCodeInput from "@/src/components/general/login-code-input";
|
||||
import PasswordInput from "@/src/components/general/password-input";
|
||||
import ResendCodeButton from "@/src/components/general/resend-code-button";
|
||||
import submitConfirmReset from "../../(functions)/submit-confirm-reset";
|
||||
|
||||
export default function ConfirmResetForm() {
|
||||
const init = useFormInit<PasswordResetFormObject>();
|
||||
const { loading, status, setForm } = init;
|
||||
|
||||
return (
|
||||
<LoginShell status={status}>
|
||||
<Form
|
||||
className="w-full flex items-center justify-center relative gap-4"
|
||||
onSubmit={() => {
|
||||
submitConfirmReset(init);
|
||||
}}
|
||||
>
|
||||
{loading && <LoadingOverlay />}
|
||||
<LoginCodeInput
|
||||
onCodeChange={(code) => {
|
||||
setForm((prev) => ({ ...prev, code }));
|
||||
}}
|
||||
/>
|
||||
<PasswordInput
|
||||
id="new_password"
|
||||
label="New password"
|
||||
autoComplete="new-password"
|
||||
info={`At least ${AppData["PasswordMinLength"]} characters.`}
|
||||
onValueChange={(new_password) => {
|
||||
setForm((prev) => ({ ...prev, new_password }));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<PasswordInput
|
||||
id="confirm_password"
|
||||
label="Confirm new password"
|
||||
autoComplete="new-password"
|
||||
onValueChange={(confirm_password) => {
|
||||
setForm((prev) => ({ ...prev, confirm_password }));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<Button title="Save password and log in" type="submit" className="w-full">
|
||||
Save password and log in
|
||||
</Button>
|
||||
</Form>
|
||||
<ResendCodeButton {...init} />
|
||||
</LoginShell>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import Section from "@moduletrace/twui/layout/Section";
|
||||
import Container from "@moduletrace/twui/layout/Container";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import AuthHero from "@/src/components/general/auth-hero";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import useSSOPendingLogin from "@/src/hooks/use-sso-pending-login";
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
import ConfirmResetForm from "../(partials)/confirm-reset-form";
|
||||
|
||||
export default function ConfirmResetSection() {
|
||||
const pending = useSSOPendingLogin();
|
||||
|
||||
const expiry = `It expires in ${AppData["SSOCodeExpiryMinutes"]} minutes.`;
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Container>
|
||||
<Stack className="w-full items-center max-w-md mx-auto gap-8">
|
||||
<AuthHero
|
||||
eyebrow="Check your email"
|
||||
title="Set a new password"
|
||||
description={
|
||||
pending?.identifier
|
||||
? `If ${pending.identifier} matches an account, we've emailed it a 6-digit reset code. ${expiry}`
|
||||
: `Enter the 6-digit reset code we emailed you. ${expiry}`
|
||||
}
|
||||
/>
|
||||
<ConfirmResetForm />
|
||||
<AuthFooterLink
|
||||
prompt="Wrong account?"
|
||||
title="Start over"
|
||||
url="/auth/reset-password"
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import type { BunextPageServerFn } from "@moduletrace/bunext/types";
|
||||
import grabLoginMethod from "@/src/functions/backend/auth/grab-login-method";
|
||||
|
||||
/**
|
||||
* Password resets only exist in password login mode.
|
||||
*/
|
||||
export const server: BunextPageServerFn = async () => {
|
||||
if (grabLoginMethod() != "password") {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/auth/login",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
|
||||
import ConfirmResetSection from "./(sections)/confirm-reset-section";
|
||||
import { SiteData } from "@/src/data/site-data";
|
||||
|
||||
export default function ConfirmResetPage() {
|
||||
return <ConfirmResetSection />;
|
||||
}
|
||||
|
||||
export const meta: BunextPageModuleMeta = {
|
||||
title: `Set New Password | ${SiteData["SiteName"]}`,
|
||||
description: `Set a new password for your ${SiteData["SiteName"]} account.`,
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import type { BunextPageServerFn } from "@moduletrace/bunext/types";
|
||||
import grabLoginMethod from "@/src/functions/backend/auth/grab-login-method";
|
||||
|
||||
/**
|
||||
* Password resets only exist in password login mode.
|
||||
*/
|
||||
export const server: BunextPageServerFn = async () => {
|
||||
if (grabLoginMethod() != "password") {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/auth/login",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
|
||||
import RequestResetSection from "./(sections)/request-reset-section";
|
||||
import { SiteData } from "@/src/data/site-data";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return <RequestResetSection />;
|
||||
}
|
||||
|
||||
export const meta: BunextPageModuleMeta = {
|
||||
title: `Reset Password | ${SiteData["SiteName"]}`,
|
||||
description: `Reset your ${SiteData["SiteName"]} password.`,
|
||||
};
|
||||
@@ -1,31 +1,25 @@
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import { AdminHomePath } from "@/src/dict/admin-sections-dict";
|
||||
import type useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { ApiReqParams, LoginMethod, SignupFormObject } from "@/src/types";
|
||||
import type { ApiReqParams, SignupFormObject } from "@/src/types";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
import saveSSOPendingLogin from "@/src/functions/frontend/save-sso-pending-login";
|
||||
import validatePassword from "@/src/utils/validate-password";
|
||||
|
||||
type Params = ReturnType<typeof useFormInit<SignupFormObject>> & {
|
||||
method: LoginMethod;
|
||||
};
|
||||
type Params = ReturnType<typeof useFormInit<SignupFormObject>>;
|
||||
|
||||
export default async function submitSignupForm({
|
||||
setLoading,
|
||||
setStatus,
|
||||
form,
|
||||
method,
|
||||
}: Params) {
|
||||
const password_error =
|
||||
method == "password"
|
||||
? validatePassword({ password: form.password })
|
||||
: undefined;
|
||||
const password_error = validatePassword({ password: form.password });
|
||||
|
||||
if (password_error) {
|
||||
setStatus({ error: true, msg: password_error });
|
||||
return;
|
||||
}
|
||||
|
||||
if (method == "password" && form.password != form.confirm_password) {
|
||||
if (form.password != form.confirm_password) {
|
||||
setStatus({ error: true, msg: "The passwords don't match." });
|
||||
return;
|
||||
}
|
||||
@@ -42,18 +36,14 @@ export default async function submitSignupForm({
|
||||
last_name: form.last_name,
|
||||
username: form.username,
|
||||
email: form.email,
|
||||
password: method == "password" ? form.password : undefined,
|
||||
password: form.password,
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (res.success) {
|
||||
saveSSOPendingLogin({
|
||||
identifier: form.email?.trim() || "",
|
||||
method,
|
||||
});
|
||||
window.location.pathname = `/auth/sso`;
|
||||
window.location.pathname = AdminHomePath;
|
||||
} else {
|
||||
setStatus({
|
||||
error: true,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
|
||||
import useFormInit from "@/src/hooks/use-form-init";
|
||||
import useLoginMethod from "@/src/hooks/use-login-method";
|
||||
import { type SignupFormObject } from "@/src/types";
|
||||
import LoginShell from "@/src/components/general/login-shell";
|
||||
import SignupFormName from "./signup-form-name";
|
||||
@@ -9,34 +8,27 @@ import SignupFormUsername from "./signup-form-username";
|
||||
import SignupFormEmail from "./signup-form-email";
|
||||
import SignupFormPassword from "./signup-form-password";
|
||||
import SignupFormConfirmPassword from "./signup-form-confirm-password";
|
||||
import GoogleAuthSection from "@/src/components/general/google-auth-section";
|
||||
import SignupFormAction from "./signup-form-action";
|
||||
import submitSignupForm from "../../(functions)/submit-signup-form";
|
||||
|
||||
export default function SignupForm() {
|
||||
const init = useFormInit<SignupFormObject>();
|
||||
const { loading, status } = init;
|
||||
const method = useLoginMethod();
|
||||
|
||||
return (
|
||||
<LoginShell status={status}>
|
||||
<GoogleAuthSection {...init} mode="signup" />
|
||||
<Form
|
||||
className="w-full flex items-center justify-center relative gap-4"
|
||||
onSubmit={() => {
|
||||
submitSignupForm({ ...init, method });
|
||||
submitSignupForm(init);
|
||||
}}
|
||||
>
|
||||
{loading && <LoadingOverlay />}
|
||||
<SignupFormEmail {...init} />
|
||||
<SignupFormName {...init} />
|
||||
<SignupFormUsername {...init} />
|
||||
{method == "password" ? (
|
||||
<>
|
||||
<SignupFormPassword {...init} />
|
||||
<SignupFormConfirmPassword {...init} />
|
||||
</>
|
||||
) : null}
|
||||
<SignupFormPassword {...init} />
|
||||
<SignupFormConfirmPassword {...init} />
|
||||
<SignupFormAction {...init} />
|
||||
</Form>
|
||||
</LoginShell>
|
||||
|
||||
@@ -6,8 +6,8 @@ export default function SignupFormAction({}: ReturnType<
|
||||
typeof useFormInit<SignupFormObject>
|
||||
>) {
|
||||
return (
|
||||
<Button title="Create account" type="submit" className="w-full">
|
||||
Create account
|
||||
<Button title="Create super admin" type="submit" className="w-full">
|
||||
Create super admin
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -2,33 +2,23 @@ import Section from "@moduletrace/twui/layout/Section";
|
||||
import Container from "@moduletrace/twui/layout/Container";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import AuthHero from "@/src/components/general/auth-hero";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import { SiteData } from "@/src/data/site-data";
|
||||
import SignupForm from "../(partials)/signup-form";
|
||||
import useLoginMethod from "@/src/hooks/use-login-method";
|
||||
|
||||
/**
|
||||
* First-run setup. Only reachable while no account exists.
|
||||
*/
|
||||
export default function SignupFormSection() {
|
||||
const method = useLoginMethod();
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Container>
|
||||
<Stack className="w-full items-center max-w-md mx-auto gap-8">
|
||||
<AuthHero
|
||||
eyebrow="Get started"
|
||||
title="Create your account"
|
||||
description={
|
||||
method == "password"
|
||||
? `Sign up for ${SiteData["SiteName"]}. We'll email you a code to confirm it's you.`
|
||||
: `Sign up for ${SiteData["SiteName"]} and we'll email you a one-time login code.`
|
||||
}
|
||||
eyebrow="Set up"
|
||||
title="Create the super admin"
|
||||
description={`This is the first account on this ${SiteData["SiteName"]} install. It can add everyone else.`}
|
||||
/>
|
||||
<SignupForm />
|
||||
<AuthFooterLink
|
||||
prompt="Already have an account?"
|
||||
title="Log in"
|
||||
url="/auth/login"
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@@ -7,6 +7,6 @@ export default function SignupPage() {
|
||||
}
|
||||
|
||||
export const meta: BunextPageModuleMeta = {
|
||||
title: `Sign Up | ${SiteData["SiteName"]}`,
|
||||
description: `Create your ${SiteData["SiteName"]} account.`,
|
||||
title: `Set Up | ${SiteData["SiteName"]}`,
|
||||
description: `Create the super admin for this ${SiteData["SiteName"]} install.`,
|
||||
};
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import type useFormInit from "@/src/hooks/use-form-init";
|
||||
import type { ApiReqParams, SSOFormObject } from "@/src/types";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
|
||||
export default async function submitSSOForm({
|
||||
setLoading,
|
||||
setStatus,
|
||||
form,
|
||||
}: ReturnType<typeof useFormInit<SSOFormObject>>) {
|
||||
setLoading(true);
|
||||
|
||||
const res = await fetchApi<ApiReqParams, APIResponseObject>(
|
||||
`/api/auth/login`,
|
||||
{
|
||||
method: "POST",
|
||||
body: {
|
||||
sso_code: form.code?.trim(),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (res.success) {
|
||||
window.location.pathname = `/admin`;
|
||||
} else {
|
||||
setStatus({
|
||||
error: true,
|
||||
msg: res.msg || "Couldn't log you in. Please try again.",
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import Form from "@moduletrace/twui/form/Form";
|
||||
import LoadingOverlay from "@moduletrace/twui/elements/LoadingOverlay";
|
||||
import Button from "@moduletrace/twui/layout/Button";
|
||||
import useFormInit from "@/src/hooks/use-form-init";
|
||||
import { type SSOFormObject } from "@/src/types";
|
||||
import LoginShell from "@/src/components/general/login-shell";
|
||||
import LoginCodeInput from "@/src/components/general/login-code-input";
|
||||
import ResendCodeButton from "@/src/components/general/resend-code-button";
|
||||
import submitSSOForm from "../../(functions)/submit-sso-form";
|
||||
|
||||
export default function SSOForm() {
|
||||
const init = useFormInit<SSOFormObject>();
|
||||
const { loading, status, setForm } = init;
|
||||
|
||||
return (
|
||||
<LoginShell status={status}>
|
||||
<Form
|
||||
className="w-full flex items-center justify-center relative gap-4"
|
||||
onSubmit={() => {
|
||||
submitSSOForm(init);
|
||||
}}
|
||||
>
|
||||
{loading && <LoadingOverlay />}
|
||||
<LoginCodeInput
|
||||
onCodeChange={(code) => {
|
||||
setForm((prev) => ({ ...prev, code }));
|
||||
}}
|
||||
/>
|
||||
<Button title="Log in" type="submit" className="w-full">
|
||||
Log in
|
||||
</Button>
|
||||
</Form>
|
||||
<ResendCodeButton {...init} />
|
||||
</LoginShell>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import Section from "@moduletrace/twui/layout/Section";
|
||||
import Container from "@moduletrace/twui/layout/Container";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import AuthHero from "@/src/components/general/auth-hero";
|
||||
import AuthFooterLink from "@/src/components/general/auth-footer-link";
|
||||
import SSOForm from "../(partials)/sso-form";
|
||||
import useSSOPendingLogin from "@/src/hooks/use-sso-pending-login";
|
||||
import ssoHeroDescription from "../(utils)/sso-hero-description";
|
||||
|
||||
export default function SSOFormSection() {
|
||||
const pending = useSSOPendingLogin();
|
||||
const is_two_step = pending?.method == "password";
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<Container>
|
||||
<Stack className="w-full items-center max-w-md mx-auto gap-8">
|
||||
<AuthHero
|
||||
eyebrow={
|
||||
is_two_step ? "Two-step verification" : "Check your email"
|
||||
}
|
||||
title={
|
||||
is_two_step ? "Verify it's you" : "Enter your login code"
|
||||
}
|
||||
description={ssoHeroDescription({ pending })}
|
||||
/>
|
||||
<SSOForm />
|
||||
<AuthFooterLink
|
||||
prompt="Wrong account?"
|
||||
title="Start over"
|
||||
url="/auth/login"
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
import type { SSOPendingLogin } from "@/src/types";
|
||||
|
||||
type Params = {
|
||||
pending?: SSOPendingLogin;
|
||||
};
|
||||
|
||||
/**
|
||||
* The code-only wording reads the same whether or not the account exists,
|
||||
* matching the no-enumeration response of `get-login-code`. A password
|
||||
* login only gets here once the password was correct.
|
||||
*/
|
||||
export default function ssoHeroDescription({ pending }: Params) {
|
||||
const expiry = `It expires in ${AppData["SSOCodeExpiryMinutes"]} minutes.`;
|
||||
|
||||
if (pending?.method == "password") {
|
||||
return `We've emailed a 6-digit code to the address on your account. ${expiry}`;
|
||||
}
|
||||
|
||||
if (pending?.identifier) {
|
||||
return `If ${pending.identifier} matches an account, we've emailed it a 6-digit login code. ${expiry}`;
|
||||
}
|
||||
|
||||
return `Enter the 6-digit code we emailed you. ${expiry}`;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
|
||||
import SSOFormSection from "./(sections)/sso-form-section";
|
||||
import { SiteData } from "@/src/data/site-data";
|
||||
|
||||
export default function SSOPage() {
|
||||
return <SSOFormSection />;
|
||||
}
|
||||
|
||||
export const meta: BunextPageModuleMeta = {
|
||||
title: `Enter Login Code | ${SiteData["SiteName"]}`,
|
||||
description: `Enter your one-time login code to log in to ${SiteData["SiteName"]}.`,
|
||||
};
|
||||
Reference in New Issue
Block a user