🚧 frontend wip

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')}
-                        description={t('orgSettingsDescription')}
+                        title={t("orgGeneralSettings")}
+                        description={t("orgSettingsDescription")}
                     />
 
-                    <HorizontalTabs items={navItems}>
-                        {children}
-                    </HorizontalTabs>
+                    <HorizontalTabs items={navItems}>{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>