feat: fix form

Author: Rieranthony

apps/api/src/schemas/website.ts

@@ -2,10 +2,18 @@ import { z } from "@hono/zod-openapi";
 import { WebsiteInstallationTarget, APIKeyType } from "@repo/database/enums";
 
 export const createWebsiteRequestSchema = z.object({
-  name: z.string().openapi({
-    description: "The website's name.",
-    example: "Dub",
-  }),
+  name: z
+    .string()
+    .openapi({
+      description: "The website's name.",
+      example: "Dub",
+    })
+    .min(3, {
+      message: "Name must be at least 3 characters",
+    })
+    .max(30, {
+      message: "Name must be less than 30 characters",
+    }),
   domain: z
     .string()
     .regex(/^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/)

apps/origami-web/src/app/(withAuth)/welcome/[organizationSlug]/creation-flow/index.tsx

@@ -5,6 +5,7 @@ import WebsiteCreationForm from "./website-creation-form";
 import { useMutation } from "@tanstack/react-query";
 import { useTRPC } from "@/lib/trpc/client";
 import { CreateWebsiteResponse } from "@api/schemas";
+import { motion } from "motion/react";
 
 type CreationFlowWrapperProps = {
   organizationId: string;
@@ -26,11 +27,17 @@ export default function CreationFlowWrapper({
 
   if (!website) {
     return (
-      <WebsiteCreationForm
-        onSubmit={createWebsite}
-        organizationId={organizationId}
-        isSubmitting={isSubmitting}
-      />
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 1 }}
+      >
+        <WebsiteCreationForm
+          onSubmit={createWebsite}
+          organizationId={organizationId}
+          isSubmitting={isSubmitting}
+        />
+      </motion.div>
     );
   }
 

apps/origami-web/src/app/(withAuth)/welcome/[organizationSlug]/creation-flow/website-creation-form.tsx

@@ -170,10 +170,16 @@ export default function WebsiteCreationForm({
 
           <BaseSubmitButton
             type="submit"
-            disabled={isSubmitting || isDomainTaken}
+            disabled={
+              isSubmitting ||
+              isDomainTaken ||
+              !form.formState.isValid ||
+              !isValidDomain(domainValue)
+            }
             isSubmitting={isSubmitting}
+            className="w-full"
           >
-            Create Website
+            Start your integration
           </BaseSubmitButton>
         </form>
       </Form>

apps/origami-web/src/app/(withAuth)/welcome/[organizationSlug]/page.tsx

@@ -5,6 +5,7 @@ import { db } from "@database/database";
 
 import { notFound } from "next/navigation";
 import CreationFlowWrapper from "./creation-flow";
+import { ensurePageAuth } from "@/lib/auth/server";
 
 export default async function Page({
   params,
@@ -15,7 +16,10 @@ export default async function Page({
 }) {
   const { organizationSlug } = await params;
 
-  const organization = await getOrganizationBySlug(db, organizationSlug);
+  const [organization] = await Promise.all([
+    getOrganizationBySlug(db, organizationSlug),
+    ensurePageAuth(),
+  ]);
 
   if (!organization) {
     notFound();
@@ -26,10 +30,11 @@ export default async function Page({
       <div className="flex items-center gap-4">
         <Logo className="size-6" />
         <span className="text-primary/30 text-sm">/</span>
-        <TextEffect className="text-center text-2xl font-medium" delay={1}>
+        <TextEffect className="text-center text-2xl font-medium" delay={0.5}>
           Welcome to Origami
         </TextEffect>
       </div>
+
       <CreationFlowWrapper organizationId={organization.id} />
     </div>
   );

apps/origami-web/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:cursor-pointer",
   {
     variants: {
       variant: {