Add user settings page

package.json

@@ -53,5 +53,8 @@
         "turndown": "^7.2.4",
         "unpdf": "^1.8.0",
         "xlsx": "^0.18.5"
+    },
+    "repository": {
+        "url": "https://git.tben.me/Moduletrace/wireguard-ui"
     }
 }

src/components/general/user-form/index.tsx

@@ -1,7 +1,6 @@
 import Form from "@/src/components/twui/form/Form";
 import LoadingOverlay from "@/src/components/twui/elements/LoadingOverlay";
 import useFormInit from "@/src/hooks/use-form-init";
-import type { BUN_SQLITE_WGUI_USERS } from "@/db/types/db";
 import UserFormName from "./user-form-name";
 import Tag from "@/src/components/twui/elements/Tag";
 import UserFormAction from "./user-form-action";
@@ -10,10 +9,13 @@ import UserFormUsername from "./user-form-username";
 import type { UserFormObject } from "@/src/types";
 import submitUserForm from "./submit-user-form";
 import UserFormPassword from "./user-form-password";
+import UserFormImage from "./user-form-image";
+import UserFormBio from "./user-form-bio";
+import type { BUN_SQLITE_WGUI_USERS_JOIN } from "@/src/types/sql-joins";
 
 type Props = {
-    existing_user?: UserFormObject;
+    existing_user?: BUN_SQLITE_WGUI_USERS_JOIN;
-    existing_user_full?: BUN_SQLITE_WGUI_USERS;
+    existing_user_full?: BUN_SQLITE_WGUI_USERS_JOIN;
     is_first_user?: boolean;
 };
 
@@ -46,8 +48,13 @@ export default function UserForm({
                 <UserFormUsername {...init} />
                 <UserFormPassword {...init} />
                 {/* <UserFormUserTypes {...init} /> */}
-                {/* <UserFormBio {...init} /> */}
+
-                {/* <UserFormImage {...init} /> */}
+                {is_first_user ? null : (
+                    <>
+                        <UserFormBio {...init} />
+                        <UserFormImage {...init} />
+                    </>
+                )}
                 <UserFormAction {...init} />
             </Form>
         </>

src/functions/backend/db/media/delete-media.ts

@@ -2,8 +2,12 @@ import _ from "lodash";
 import type { BUN_SQLITE_WGUI_MEDIA } from "@/db/types/db";
 import grabMediaFromParadigm from "@/src/functions/backend/db/media/grab-media-from-paraidigm";
 import type { MediaParadigmType, TableType, User } from "@/src/types";
+import grabDirNames from "@/src/utils/grab-dir-names";
 import BunSQLite from "@moduletrace/bun-sqlite";
 import { rmSync } from "fs";
+import path from "path";
+
+const { DATA_DIR } = grabDirNames();
 
 type Params = {
     id?: string | number;
@@ -84,11 +88,13 @@ export default async function deleteMedia(params: Params) {
         }
 
         if (target_media.media_write_path) {
-            rmSync(target_media.media_write_path);
+            rmSync(path.join(DATA_DIR, target_media.media_write_path));
         }
 
         if (target_media.media_thumbnail_write_path) {
-            rmSync(target_media.media_thumbnail_write_path);
+            rmSync(
+                path.join(DATA_DIR, target_media.media_thumbnail_write_path),
+            );
         }
 
         await BunSQLite.delete<BUN_SQLITE_WGUI_MEDIA, TableType>({

src/functions/backend/db/users/media/upload-and-record-media.ts

@@ -202,7 +202,7 @@ export default async function uploadAndRecordMedia({
         }
     }
 
-    if (existsSync(media_write_path)) {
+    if (existsSync(media_write_path_full)) {
         media_written_to_disk = true;
     }
 
@@ -252,7 +252,16 @@ export default async function uploadAndRecordMedia({
             targetId: existing_media_id,
         });
 
-        media_record = update_media_record.singleRes || undefined;
+        if (!update_media_record.success) {
+            throw new Error(`Couldn't update media record!`);
+        }
+
+        media_record = (
+            await BunSQLite.select<BUN_SQLITE_WGUI_MEDIA, TableType>({
+                table: "media",
+                targetId: existing_media_id,
+            })
+        ).singleRes || undefined;
     } else {
         const new_media_record = await BunSQLite.insert<
             BUN_SQLITE_WGUI_MEDIA,
@@ -263,7 +272,18 @@ export default async function uploadAndRecordMedia({
             update_on_duplicate,
         });
 
-        media_record = new_media_record.singleRes || undefined;
+        const insert_id = new_media_record.postInsertReturn?.insertId;
+
+        if (!new_media_record.success || !insert_id) {
+            throw new Error(`Couldn't record media!`);
+        }
+
+        media_record = (
+            await BunSQLite.select<BUN_SQLITE_WGUI_MEDIA, TableType>({
+                table: "media",
+                targetId: insert_id,
+            })
+        ).singleRes || undefined;
     }
 
     if (!media_record) {

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>
         </>
     );
 }

src/types/index.ts

@@ -47,6 +47,10 @@ export type PagePropsType = {
     persons?: BUN_SQLITE_WGUI_USERS_JOIN[] | null;
     host?: BUN_SQLITE_WGUI_HOSTS_JOIN | null;
     hosts?: BUN_SQLITE_WGUI_HOSTS[] | null;
+    existing_user?: UserFormObject | null;
+    existing_user_full?: BUN_SQLITE_WGUI_USERS | null;
+    single_user?: BUN_SQLITE_WGUI_USERS_JOIN | null;
+    single_users?: BUN_SQLITE_WGUI_USERS_JOIN[] | null;
     variables?: BUN_SQLITE_WGUI_VARIABLES[] | null;
     client?: BUN_SQLITE_WGUI_CLIENTS | null;
     clients?: BUN_SQLITE_WGUI_CLIENTS[] | null;
@@ -306,9 +310,7 @@ export type AdminFetchParams<T extends {} = BUN_SQLITE_WGUI_ALL_TYPEDEFS> = {
     method?: "PUT" | "DELETE" | "POST" | "GET";
 };
 
-export type UserFormObject = BUN_SQLITE_WGUI_USERS & {
+export type UserFormObject = BUN_SQLITE_WGUI_USERS_JOIN;
-    user_types?: UserType[];
-};
 
 export type PageQueryObject = {
     user_id?: string;