🚧 WIP

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

@@ -0,0 +1,64 @@
+import AuthPageBrandingForm from "@app/components/AuthPageBrandingForm";
+import AuthPageSettings from "@app/components/private/AuthPageSettings";
+import { SettingsContainer } from "@app/components/Settings";
+import { priv } from "@app/lib/api";
+import { getCachedSubscription } from "@app/lib/api/getCachedSubscription";
+import { pullEnv } from "@app/lib/pullEnv";
+import { build } from "@server/build";
+import { TierId } from "@server/lib/billing/tiers";
+import type { GetOrgTierResponse } from "@server/routers/billing/types";
+import {
+    GetLoginPageBrandingResponse,
+    GetLoginPageResponse
+} from "@server/routers/loginPage/types";
+import { AxiosResponse } from "axios";
+import { redirect } from "next/navigation";
+
+export interface AuthPageProps {
+    params: Promise<{ orgId: string }>;
+}
+
+export default async function AuthPage(props: AuthPageProps) {
+    const orgId = (await props.params).orgId;
+    const env = pullEnv();
+    let subscriptionStatus: GetOrgTierResponse | null = null;
+    try {
+        const subRes = await getCachedSubscription(orgId);
+        subscriptionStatus = subRes.data.data;
+    } catch {}
+    const subscribed =
+        build === "enterprise"
+            ? true
+            : subscriptionStatus?.tier === TierId.STANDARD;
+
+    if (!subscribed) {
+        redirect(env.app.dashboardUrl);
+    }
+
+    let loginPage: GetLoginPageResponse | null = null;
+    try {
+        const res = await priv.get<AxiosResponse<GetLoginPageResponse>>(
+            `/org/${orgId}/login-page`
+        );
+        if (res.status === 200) {
+            loginPage = res.data.data;
+        }
+    } catch (error) {}
+
+    let loginPageBranding: GetLoginPageBrandingResponse | null = null;
+    try {
+        const res = await priv.get<AxiosResponse<GetLoginPageBrandingResponse>>(
+            `/org/${orgId}/login-page-branding`
+        );
+        if (res.status === 200) {
+            loginPageBranding = res.data.data;
+        }
+    } catch (error) {}
+
+    return (
+        <SettingsContainer>
+            <AuthPageSettings loginPage={loginPage} />
+            <AuthPageBrandingForm orgId={orgId} branding={loginPageBranding} />
+        </SettingsContainer>
+    );
+}

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

@@ -1,36 +0,0 @@
-import AuthPageCustomizationForm from "@app/components/AuthPagesCustomizationForm";
-import { SettingsContainer } from "@app/components/Settings";
-import { getCachedSubscription } from "@app/lib/api/getCachedSubscription";
-import { pullEnv } from "@app/lib/pullEnv";
-import { build } from "@server/build";
-import { TierId } from "@server/lib/billing/tiers";
-import type { GetOrgTierResponse } from "@server/routers/billing/types";
-import { redirect } from "next/navigation";
-
-export interface AuthPageProps {
-    params: Promise<{ orgId: string }>;
-}
-
-export default async function AuthPage(props: AuthPageProps) {
-    const orgId = (await props.params).orgId;
-    const env = pullEnv();
-    let subscriptionStatus: GetOrgTierResponse | null = null;
-    try {
-        const subRes = await getCachedSubscription(orgId);
-        subscriptionStatus = subRes.data.data;
-    } catch {}
-    const subscribed =
-        build === "enterprise"
-            ? true
-            : subscriptionStatus?.tier === TierId.STANDARD;
-
-    if (!subscribed) {
-        redirect(env.app.dashboardUrl);
-    }
-
-    return (
-        <SettingsContainer>
-            <AuthPageCustomizationForm orgId={orgId} />
-        </SettingsContainer>
-    );
-}

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

@@ -73,7 +73,7 @@ export default async function GeneralSettingsPage({
     if (subscribed) {
         navItems.push({
             title: t("authPage"),
-            href: `/{orgId}/settings/general/auth-pages`
+            href: `/{orgId}/settings/general/auth-page`
         });
     }
 

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

@@ -43,8 +43,7 @@ import {
     SettingsSectionTitle,
     SettingsSectionDescription,
     SettingsSectionBody,
-    SettingsSectionForm,
-    SettingsSectionFooter
+    SettingsSectionForm
 } from "@app/components/Settings";
 import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
@@ -129,7 +128,6 @@ export default function GeneralPage() {
     const [loadingSave, setLoadingSave] = useState(false);
     const [isSecurityPolicyConfirmOpen, setIsSecurityPolicyConfirmOpen] =
         useState(false);
-    const authPageSettingsRef = useRef<AuthPageSettingsRef>(null);
 
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
@@ -252,14 +250,6 @@ export default function GeneralPage() {
             // Update organization
             await api.post(`/org/${org?.org.orgId}`, reqData);
 
-            // Also save auth page settings if they have unsaved changes
-            if (
-                build === "saas" &&
-                authPageSettingsRef.current?.hasUnsavedChanges()
-            ) {
-                await authPageSettingsRef.current.saveAuthSettings();
-            }
-
             toast({
                 title: t("orgUpdated"),
                 description: t("orgUpdatedDescription")
@@ -600,7 +590,7 @@ export default function GeneralPage() {
                             </SettingsSectionHeader>
                             <SettingsSectionBody>
                                 <SettingsSectionForm>
-                                <SecurityFeaturesAlert />
+                                    <SecurityFeaturesAlert />
                                     <FormField
                                         control={form.control}
                                         name="requireTwoFactor"
@@ -832,8 +822,6 @@ export default function GeneralPage() {
                 </form>
             </Form>
 
-            {build === "saas" && <AuthPageSettings ref={authPageSettingsRef} />}
-
             <div className="flex justify-end gap-2">
                 {build !== "saas" && (
                     <Button