shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added auth getting started box

Browse Source
This commit is contained in:
dswbx
2025-02-26 19:50:35 +01:00
parent 9a683c8e35
commit 4ca68e837c
1 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/src/ui/routes/auth/auth.index.tsx
View File

@@ -1,10 +1,13 @@
import clsx from "clsx";
import { TbArrowRight, TbCircle, TbCircleCheckFilled, TbFingerprint } from "react-icons/tb";
import { useApiQuery } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { ButtonLink, type ButtonLinkProps } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Alert } from "ui/components/display/Alert";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { routes } from "ui/lib/routes";
import { routes, useNavigate } from "ui/lib/routes";
export function AuthIndex() {
const { app } = useBknd();
@@ -32,8 +35,22 @@ export function AuthIndex() {
title="Auth not enabled"
message="To use authentication features, please enable it in the settings."
/>
<div className="flex flex-col flex-grow p-3 gap-3">
<div className="grid xs:grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
<div className="flex flex-col md:flex-row flex-1 p-3 gap-3">
<div className="flex flex-col border border-primary/20 self-stretch md:self-start">
<div className="flex flex-row gap-3 py-3 px-4 border-b border-b-muted font-medium bg-muted items-center justify-between">
Getting started
<TbFingerprint className="size-5" />
</div>
<Item title="Enable authentication" done={enabled} to={routes.auth.settings()} />
<Item title="Create Roles" done={rolesTotal > 0} to={rolesLink} />
<Item title="Create an user" done={usersTotal > 0} to={usersLink} />
<Item
title="Enable a second strategy"
done={strategiesTotal > 1}
to={strategiesLink}
/>
</div>
<div className="grid xs:grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5 flex-grow">
<KpiCard
title="Users registered"
value={!enabled ? 0 : usersTotal}
@@ -75,7 +92,7 @@ type KpiCardProps = {
};
const KpiCard: React.FC<KpiCardProps> = ({ title, value, actions }) => (
<div className="flex flex-col border border-muted">
<div className="flex flex-col border border-muted h-auto self-start">
<div className="flex flex-col gap-2 px-5 pt-3.5 pb-4 border-b border-b-muted">
<div>
<span className="opacity-50">{title}</span>
@@ -92,3 +109,25 @@ const KpiCard: React.FC<KpiCardProps> = ({ title, value, actions }) => (
</div>
</div>
);
const Item = ({ title, done = false, to }: { title: string; done?: boolean; to?: string }) => {
const [navigate] = useNavigate();
return (
<div className="flex border-b border-b-muted">
<div className={clsx("flex flex-1 flex-row gap-3 py-3 px-4", done && "opacity-50")}>
<div className="flex flex-row flex-1 gap-3 items-center">
{done ? <TbCircleCheckFilled className="size-5" /> : <TbCircle className="size-5" />}
<p
className={clsx(
"font-medium text-primary/80 leading-none",
done ? "line-through" : ""
)}
>
{title}
</p>
</div>
{to && <IconButton Icon={TbArrowRight} onClick={() => navigate(to)} />}
</div>
</div>
);
};