🚧 frontend wip

messages/en-US.json

@@ -150,6 +150,7 @@
     "resourceAdd": "Add Resource",
     "resourceErrorDelte": "Error deleting resource",
     "authentication": "Authentication",
+    "authPages": "Auth Page",
     "protected": "Protected",
     "notProtected": "Not Protected",
     "resourceMessageRemove": "Once removed, the resource will no longer be accessible. All targets associated with the resource will also be removed.",

server/db/pg/migrate.ts

@@ -10,7 +10,8 @@ const runMigrations = async () => {
         await migrate(db as any, {
             migrationsFolder: migrationsFolder
         });
-        console.log("Migrations completed successfully.");
+        console.log("Migrations completed successfully. ✅");
+        process.exit(0);
     } catch (error) {
         console.error("Error running migrations:", error);
         process.exit(1);

server/db/pg/schema/schema.ts

@@ -7,7 +7,8 @@ import {
     bigint,
     real,
     text,
-    index
+    index,
+    uniqueIndex
 } from "drizzle-orm/pg-core";
 import { InferSelectModel } from "drizzle-orm";
 import { randomUUID } from "crypto";
@@ -64,19 +65,23 @@ export const orgDomains = pgTable("orgDomains", {
         .references(() => domains.domainId, { onDelete: "cascade" })
 });
 
-export const orgAuthPages = pgTable("orgAuthPages", {
+export const orgAuthPages = pgTable(
-    orgId: varchar("orgId")
+    "orgAuthPages",
-        .notNull()
+    {
-        .references(() => orgs.orgId, { onDelete: "cascade" }),
+        orgId: varchar("orgId")
-    orgAuthPageId: serial("orgAuthPageId").primaryKey(),
+            .notNull()
-    logoUrl: text("logoUrl"),
+            .references(() => orgs.orgId, { onDelete: "cascade" }),
-    logoWidth: integer("logoWidth"),
+        orgAuthPageId: serial("orgAuthPageId").primaryKey(),
-    logoHeight: integer("logoHeight"),
+        logoUrl: text("logoUrl").notNull(),
-    title: text("title"),
+        logoWidth: integer("logoWidth").notNull(),
-    subtitle: text("subtitle"),
+        logoHeight: integer("logoHeight").notNull(),
-    resourceTitle: text("resourceTitle"),
+        title: text("title").notNull(),
-    resourceSubtitle: text("resourceSubtitle")
+        subtitle: text("subtitle"),
-});
+        resourceTitle: text("resourceTitle").notNull(),
+        resourceSubtitle: text("resourceSubtitle")
+    },
+    (t) => [uniqueIndex("uniqueAuthPagePerOrgIdx").on(t.orgId)]
+);
 
 export const sites = pgTable("sites", {
     siteId: serial("siteId").primaryKey(),

server/db/sqlite/schema/schema.ts

@@ -1,6 +1,12 @@
 import { randomUUID } from "crypto";
 import { InferSelectModel } from "drizzle-orm";
-import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
+import {
+    sqliteTable,
+    text,
+    integer,
+    index,
+    uniqueIndex
+} from "drizzle-orm/sqlite-core";
 import { boolean } from "yargs";
 
 export const domains = sqliteTable("domains", {
@@ -66,19 +72,25 @@ export const orgDomains = sqliteTable("orgDomains", {
         .references(() => domains.domainId, { onDelete: "cascade" })
 });
 
-export const orgAuthPages = sqliteTable("orgAuthPages", {
+export const orgAuthPages = sqliteTable(
-    orgId: text("orgId")
+    "orgAuthPages",
-        .notNull()
+    {
-        .references(() => orgs.orgId, { onDelete: "cascade" }),
+        orgId: text("orgId")
-    orgAuthPageId: integer("orgAuthPageId").primaryKey({ autoIncrement: true }),
+            .notNull()
-    logoUrl: text("logoUrl"),
+            .references(() => orgs.orgId, { onDelete: "cascade" }),
-    logoWidth: integer("logoWidth"),
+        orgAuthPageId: integer("orgAuthPageId").primaryKey({
-    logoHeight: integer("logoHeight"),
+            autoIncrement: true
-    title: text("title"),
+        }),
-    subtitle: text("subtitle"),
+        logoUrl: text("logoUrl").notNull(),
-    resourceTitle: text("resourceTitle"),
+        logoWidth: integer("logoWidth").notNull(),
-    resourceSubtitle: text("resourceSubtitle")
+        logoHeight: integer("logoHeight").notNull(),
-});
+        title: text("title").notNull(),
+        subtitle: text("subtitle"),
+        resourceTitle: text("resourceTitle").notNull(),
+        resourceSubtitle: text("resourceSubtitle")
+    },
+    (t) => [uniqueIndex("uniqueAuthPagePerOrgIdx").on(t.orgId)]
+);
 
 export const sites = sqliteTable("sites", {
     siteId: integer("siteId").primaryKey({ autoIncrement: true }),

src/app/[orgId]/settings/general/auth-pages/page.tsx

@@ -0,0 +1,15 @@
+import AuthPageCustomizationForm from "@app/components/AuthPagesCustomizationForm";
+import { SettingsContainer } from "@app/components/Settings";
+
+export interface AuthPageProps {
+    params: Promise<{ orgId: string }>;
+}
+
+export default async function AuthPage(props: AuthPageProps) {
+    const orgId = (await props.params).orgId;
+    return (
+        <SettingsContainer>
+            <AuthPageCustomizationForm orgId={orgId} />
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/general/layout.tsx

@@ -1,7 +1,7 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { HorizontalTabs, type TabItem } from "@app/components/HorizontalTabs";
 import { verifySession } from "@app/lib/auth/verifySession";
 import OrgProvider from "@app/providers/OrgProvider";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
@@ -10,7 +10,7 @@ import { GetOrgUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { cache } from "react";
-import { getTranslations } from 'next-intl/server';
+import { getTranslations } from "next-intl/server";
 
 type GeneralSettingsProps = {
     children: React.ReactNode;
@@ -19,7 +19,7 @@ type GeneralSettingsProps = {
 
 export default async function GeneralSettingsPage({
     children,
-    params,
+    params
 }: GeneralSettingsProps) {
     const { orgId } = await params;
 
@@ -35,8 +35,8 @@ export default async function GeneralSettingsPage({
         const getOrgUser = cache(async () =>
             internal.get<AxiosResponse<GetOrgUserResponse>>(
                 `/org/${orgId}/user/${user.userId}`,
-                await authCookieHeader(),
+                await authCookieHeader()
-            ),
+            )
         );
         const res = await getOrgUser();
         orgUser = res.data.data;
@@ -49,8 +49,8 @@ export default async function GeneralSettingsPage({
         const getOrg = cache(async () =>
             internal.get<AxiosResponse<GetOrgResponse>>(
                 `/org/${orgId}`,
-                await authCookieHeader(),
+                await authCookieHeader()
-            ),
+            )
         );
         const res = await getOrg();
         org = res.data.data;
@@ -60,11 +60,16 @@ export default async function GeneralSettingsPage({
 
     const t = await getTranslations();
 
-    const navItems = [
+    const navItems: TabItem[] = [
         {
-            title: t('general'),
+            title: t("general"),
             href: `/{orgId}/settings/general`,
+            exact: true
         },
+        {
+            title: t("authPages"),
+            href: `/{orgId}/settings/general/auth-pages`
+        }
     ];
 
     return (
@@ -72,13 +77,11 @@ export default async function GeneralSettingsPage({
             <OrgProvider org={org}>
                 <OrgUserProvider orgUser={orgUser}>
                     <SettingsSectionTitle
-                        title={t('orgGeneralSettings')}
+                        title={t("orgGeneralSettings")}
-                        description={t('orgSettingsDescription')}
+                        description={t("orgSettingsDescription")}
                     />
 
-                    <HorizontalTabs items={navItems}>
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
-                        {children}
-                    </HorizontalTabs>
                 </OrgUserProvider>
             </OrgProvider>
         </>

src/components/AuthPagesCustomizationForm.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import z from "zod";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+
+export type AuthPageCustomizationProps = {
+    orgId: string;
+};
+
+const AuthPageFormSchema = z.object({
+    logoUrl: z.string().url(),
+    logoWidth: z.number().min(1),
+    logoHeight: z.number().min(1),
+    title: z.string(),
+    subtitle: z.string().optional(),
+    resourceTitle: z.string(),
+    resourceSubtitle: z.string().optional()
+});
+
+export default function AuthPageCustomizationForm({
+    orgId
+}: AuthPageCustomizationProps) {
+    const [, formAction, isSubmitting] = React.useActionState(onSubmit, null);
+
+    const form = useForm({
+        resolver: zodResolver(AuthPageFormSchema),
+        defaultValues: {
+            title: `Log in to {{orgName}}`,
+            resourceTitle: `Authenticate to access {{resourceName}}`
+        }
+    });
+
+    async function onSubmit() {
+        const isValid = await form.trigger();
+
+        if (!isValid) return;
+        // ...
+    }
+
+    return (
+        <Form {...form}>
+            <button>Hello</button>
+        </Form>
+    );
+}

src/components/HorizontalTabs.tsx

@@ -8,16 +8,17 @@ import { Badge } from "@app/components/ui/badge";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useTranslations } from "next-intl";
 
-export type HorizontalTabs = Array<{
+export type TabItem = {
     title: string;
     href: string;
     icon?: React.ReactNode;
     showProfessional?: boolean;
-}>;
+    exact?: boolean;
+};
 
 interface HorizontalTabsProps {
     children: React.ReactNode;
-    items: HorizontalTabs;
+    items: TabItem[];
     disabled?: boolean;
 }
 
@@ -49,8 +50,11 @@ export function HorizontalTabs({
                         {items.map((item) => {
                             const hydratedHref = hydrateHref(item.href);
                             const isActive =
-                                pathname.startsWith(hydratedHref) &&
+                                (item.exact
+                                    ? pathname === hydratedHref
+                                    : pathname.startsWith(hydratedHref)) &&
                                 !pathname.includes("create");
+
                             const isProfessional =
                                 item.showProfessional && !isUnlocked();
                             const isDisabled =
@@ -88,7 +92,7 @@ export function HorizontalTabs({
                                                 variant="outlinePrimary"
                                                 className="ml-2"
                                             >
-                                                {t('licenseBadge')}
+                                                {t("licenseBadge")}
                                             </Badge>
                                         )}
                                     </div>