🚧 frontend wip

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>