Add user settings page

src/pages/admin/settings/(sections)/settings-form-section.tsx

@@ -0,0 +1,51 @@
+import UserForm from "@/src/components/general/user-form";
+import AdminCard from "@/src/components/general/admin-card";
+import H3 from "@/src/components/twui/layout/H3";
+import P from "@/src/components/twui/layout/P";
+import Stack from "@/src/components/twui/layout/Stack";
+import { useContext } from "react";
+import { AppContext } from "@/src/pages/__root";
+import EmptyContent from "@/src/components/twui/elements/EmptyContent";
+import _ from "lodash";
+import type { BUN_SQLITE_WGUI_USERS_JOIN } from "@/src/types/sql-joins";
+
+export default function SettingsFormSection() {
+    const { pageProps } = useContext(AppContext);
+
+    const target_user = pageProps?.single_user;
+
+    if (!target_user) {
+        return <EmptyContent title="No User Found!" />;
+    }
+
+    return (
+        <AdminCard className="w-full p-5 flex flex-col gap-4">
+            <Stack className="gap-1">
+                <H3 className="text-[14px] font-semibold mb-0!">
+                    Account details
+                </H3>
+                <P
+                    noMargin
+                    className="text-[12.5px] text-foreground-light/45 dark:text-foreground-dark/45"
+                >
+                    Update your name and email. You'll receive the Wireguard
+                    configs at this email.
+                </P>
+            </Stack>
+
+            <UserForm
+                existing_user={_.pick<
+                    BUN_SQLITE_WGUI_USERS_JOIN,
+                    keyof BUN_SQLITE_WGUI_USERS_JOIN
+                >(target_user, [
+                    "first_name",
+                    "last_name",
+                    "email",
+                    "username",
+                    "bio",
+                ])}
+                existing_user_full={target_user}
+            />
+        </AdminCard>
+    );
+}

src/pages/admin/settings/index.server.ts

@@ -0,0 +1,27 @@
+import userAuth from "@/src/functions/backend/auth/user-auth";
+import grabUsers from "@/src/functions/backend/db/users/grab-users";
+import type { PagePropsType } from "@/src/types";
+import type { BunextPageServerFn } from "@moduletrace/bunext/types";
+
+const server: BunextPageServerFn<PagePropsType> = async ({ req }) => {
+    const { user } = await userAuth({ req });
+
+    if (!user?.logged_in_status || !user.id) {
+        return {
+            redirect: {
+                destination: "/auth/login",
+                permanent: false,
+            },
+        };
+    }
+
+    const user_res = await grabUsers({ user_id: user.id });
+
+    return {
+        props: {
+            single_user: user_res.singleRes || null,
+        },
+    };
+};
+
+export default server;

src/pages/admin/settings/index.tsx

@@ -1,11 +1,21 @@
 import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
 import AdminHero from "@/src/components/general/admin-hero";
 import { SiteData } from "@/src/data/site-data";
+import Divider from "@/src/components/twui/layout/Divider";
+import Stack from "@/src/components/twui/layout/Stack";
+import SettingsFormSection from "./(sections)/settings-form-section";
 
 export default function AdminSettingsPage() {
     return (
         <>
-            <AdminHero title="Settings" />
+            <AdminHero
+                title="Settings"
+                description="Manage your account details"
+            />
+            <Divider className="mb-6" />
+            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
+                <SettingsFormSection />
+            </Stack>
         </>
     );
 }
@@ -13,4 +23,4 @@ export default function AdminSettingsPage() {
 export const meta: BunextPageModuleMeta = {
     title: `Admin Settings | ${SiteData["SiteName"]}`,
     description: `WgUI settings.`,
-};
+};