From 84d04df159fdd3c1597df06ab3505abf2466b347 Mon Sep 17 00:00:00 2001
From: Omer Sabic <osabic2004@gmail.com>
Date: Sun, 23 Jun 2024 11:24:35 +0200
Subject: [PATCH] expanded website settings

---
 src/routes/(app)/website/+page.svelte | 340 +++++++++++++++-----------
 src/routes/(app)/website/schema.js    |  12 +-
 2 files changed, 208 insertions(+), 144 deletions(-)

diff --git a/src/routes/(app)/website/+page.svelte b/src/routes/(app)/website/+page.svelte
index 6588038..0cf8c96 100644
--- a/src/routes/(app)/website/+page.svelte
+++ b/src/routes/(app)/website/+page.svelte
@@ -27,7 +27,7 @@
 			} else {
 				// console.log(e.result);
 				if (e.result.type === 'error') {
-					// console.log(e.result.error);
+					console.log(e.result.error);
 					toast.error(
 						'Error when updating website. Message from server: ' + e.result.error.message
 					);
@@ -80,42 +80,43 @@
 	$: disable_autopublish = !$formData.auto_publish;
 </script>
 
-<div class="w-full max-w-7xl">
+<div class="w-full">
 	<form method="post" use:enhance enctype="multipart/form-data">
-		<input type="text" value={data.blog_info.id} name="id" readonly class="hidden" />
+		<div class="max-w-7xl">
+			<input type="text" value={data.blog_info.id} name="id" readonly class="hidden" />
 
-		<div class="grid grid-cols-1 gap-16 md:grid-cols-2 md:grid-rows-1">
-			<div class="space-y-16">
-				<div class="space-y-4">
-					<div class="flex items-center justify-between space-x-4 border-b px-4">
-						<h2 class="mb-4 text-2xl font-bold">Basics</h2>
-					</div>
-					<div>
-						<Form.Field {form} name="name">
-							<Form.Control let:attrs>
-								<Form.Label>Blog name</Form.Label>
-								<Input {...attrs} bind:value={$formData.name} />
-							</Form.Control>
-							<Form.Description />
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field {form} name="title">
-							<Form.Control let:attrs>
-								<Form.Label>Blog title</Form.Label>
-								<Input {...attrs} bind:value={$formData.title} />
-							</Form.Control>
-							<Form.Description />
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field {form} name="subtitle">
-							<Form.Control let:attrs>
-								<Form.Label>Blog subtitle</Form.Label>
-								<Input {...attrs} bind:value={$formData.subtitle} />
-							</Form.Control>
-							<Form.Description />
-							<Form.FieldErrors />
-						</Form.Field>
-						<!-- <Form.Field {form} name="primary_color_hex">
+			<div class="grid grid-cols-1 gap-16 md:grid-cols-2 md:grid-rows-1">
+				<div class="space-y-16">
+					<div class="space-y-4">
+						<div class="flex items-center justify-between space-x-4 border-b px-4">
+							<h2 class="mb-4 text-2xl font-bold">Basics</h2>
+						</div>
+						<div>
+							<Form.Field {form} name="name">
+								<Form.Control let:attrs>
+									<Form.Label>Blog name</Form.Label>
+									<Input {...attrs} bind:value={$formData.name} />
+								</Form.Control>
+								<Form.Description />
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="title">
+								<Form.Control let:attrs>
+									<Form.Label>Blog title</Form.Label>
+									<Input {...attrs} bind:value={$formData.title} />
+								</Form.Control>
+								<Form.Description />
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="subtitle">
+								<Form.Control let:attrs>
+									<Form.Label>Blog subtitle</Form.Label>
+									<Input {...attrs} bind:value={$formData.subtitle} />
+								</Form.Control>
+								<Form.Description />
+								<Form.FieldErrors />
+							</Form.Field>
+							<!-- <Form.Field {form} name="primary_color_hex">
 								<Form.Control let:attrs>
 									<Form.Label>Primary color</Form.Label>
 									<ColorPicker
@@ -157,133 +158,186 @@
 								<Form.Description />
 								<Form.FieldErrors />
 							</Form.Field> -->
-						<Form.Field {form} name="domain">
-							<Form.Control let:attrs>
-								<Form.Label>Custom domain</Form.Label>
-								<Input {...attrs} bind:value={$formData.domain} />
-							</Form.Control>
-							{#if data.blog_info.subdomain_slug}
-								<Form.Description
-									>You can also access your website at <a
-										href="http://{data.blog_info.subdomain_slug}.{config.sites_url}"
-										class="font-semibold underline"
-										>{data.blog_info.subdomain_slug}.{config.sites_url}</a
-									></Form.Description
-								>
-							{/if}
-							<Form.FieldErrors />
-						</Form.Field>
-					</div>
-				</div>
-				<div class="space-y-4">
-					<div class="flex items-center justify-between space-x-4 border-b px-4">
-						<h2 class="mb-4 text-2xl font-bold">Auto publish</h2>
-					</div>
-					<div>
-						<Form.Field {form} name="auto_publish">
-							<Form.Control let:attrs>
-								<Form.Label>Auto Publish</Form.Label>
-								<div class="flex items-center justify-start">
-									<Switch {...attrs} bind:checked={$formData.auto_publish} />
-								</div>
-							</Form.Control>
-							<Form.FieldErrors />
-							<Form.Description
-								>Automatically creates a blog post for you when you upload a video</Form.Description
-							>
-						</Form.Field>
-					</div>
-				</div>
-			</div>
-			<div class="space-y-16">
-				<div class="space-y-4">
-					<div class="flex items-center justify-between space-x-4 border-b px-4">
-						<h2 class="mb-4 text-2xl font-bold">Freebies</h2>
-					</div>
-					<div>
-						<Form.Field {form} name="freebie_title">
-							<Form.Control let:attrs>
-								<Form.Label class="text-right">Freebie title</Form.Label>
-								<div class="flex items-center justify-start">
-									<Input {...attrs} bind:value={$formData.freebie_title} />
-								</div>
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field {form} name="use_freebie">
-							<Form.Control let:attrs>
-								<Form.Label class="text-right">Send freebie</Form.Label>
-								<div class="flex items-center justify-start">
-									<!-- <Switch disabled={['free', 'basic'].includes(tier)} {...attrs} /> -->
-									<Switch {...attrs} bind:checked={$formData.use_freebie} />
-									<!-- <ProBadge class="ml-[10px]" /> -->
-								</div>
-								<Form.Description
-									>Whether to send a freebie when a new person enters their email on your website.</Form.Description
-								>
-							</Form.Control>
-						</Form.Field>
-						<Form.Field {form} name="freebie_url">
-							<Form.Control let:attrs>
-								<Form.Label class="text-right">Freebie file</Form.Label>
-								<div class="flex items-center justify-start">
-									<Input
-										type="file"
-										on:input={(e) =>
-											handleFileChange(e, $formData.freebie_url).then((x) => {
-												$formData.freebie_url = x;
-											})}
-										bind:disabled={disable_freebies}
-									/>
-									<Input {...attrs} class="hidden" bind:value={$formData.freebie_url} readonly />
-								</div>
-							</Form.Control>
-							<Form.Description>Maximum size of 5MB (TEMPORARY)</Form.Description>
-							<Form.FieldErrors />
-						</Form.Field>
-						<div class="hidden">
-							<Form.Field {form} name="freebie_image_url">
+							<Form.Field {form} name="domain">
 								<Form.Control let:attrs>
-									<Form.Label class="text-right">Freebie image</Form.Label>
+									<Form.Label>Custom domain</Form.Label>
+									<Input {...attrs} bind:value={$formData.domain} />
+								</Form.Control>
+								{#if data.blog_info.subdomain_slug}
+									<Form.Description
+										>You can also access your website at <a
+											href="http://{data.blog_info.subdomain_slug}.{config.sites_url}"
+											class="font-semibold underline"
+											>{data.blog_info.subdomain_slug}.{config.sites_url}</a
+										></Form.Description
+									>
+								{/if}
+								<Form.FieldErrors />
+							</Form.Field>
+						</div>
+					</div>
+					<div class="space-y-4">
+						<div class="flex items-center justify-between space-x-4 border-b px-4">
+							<h2 class="mb-4 text-2xl font-bold">Auto publish</h2>
+						</div>
+						<div>
+							<Form.Field {form} name="auto_publish">
+								<Form.Control let:attrs>
+									<Form.Label>Auto Publish</Form.Label>
+									<div class="flex items-center justify-start">
+										<Switch {...attrs} bind:checked={$formData.auto_publish} />
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+								<Form.Description
+									>Automatically creates a blog post for you when you upload a video</Form.Description
+								>
+							</Form.Field>
+						</div>
+					</div>
+				</div>
+				<div class="space-y-16">
+					<div class="space-y-4">
+						<div class="flex items-center justify-between space-x-4 border-b px-4">
+							<h2 class="mb-4 text-2xl font-bold">Freebies</h2>
+						</div>
+						<div>
+							<Form.Field {form} name="freebie_title">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Freebie title</Form.Label>
+									<div class="flex items-center justify-start">
+										<Input {...attrs} bind:value={$formData.freebie_title} />
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="use_freebie">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Send freebie</Form.Label>
+									<div class="flex items-center justify-start">
+										<!-- <Switch disabled={['free', 'basic'].includes(tier)} {...attrs} /> -->
+										<Switch {...attrs} bind:checked={$formData.use_freebie} />
+										<!-- <ProBadge class="ml-[10px]" /> -->
+									</div>
+									<Form.Description
+										>Whether to send a freebie when a new person enters their email on your website.</Form.Description
+									>
+								</Form.Control>
+							</Form.Field>
+							<Form.Field {form} name="freebie_url">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Freebie file</Form.Label>
 									<div class="flex items-center justify-start">
 										<Input
 											type="file"
-											accept="png,jpg,webp,jpeg"
 											on:input={(e) =>
-												handleFileChange(e, $formData.freebie_image_url).then(
-													(x) => ($formData.freebie_image_url = x)
-												)}
+												handleFileChange(e, $formData.freebie_url).then((x) => {
+													$formData.freebie_url = x;
+												})}
 											bind:disabled={disable_freebies}
 										/>
+										<Input {...attrs} class="hidden" bind:value={$formData.freebie_url} readonly />
+									</div>
+								</Form.Control>
+								<Form.Description>Maximum size of 5MB (TEMPORARY)</Form.Description>
+								<Form.FieldErrors />
+							</Form.Field>
+							<div class="hidden">
+								<Form.Field {form} name="freebie_image_url">
+									<Form.Control let:attrs>
+										<Form.Label class="text-right">Freebie image</Form.Label>
+										<div class="flex items-center justify-start">
+											<Input
+												type="file"
+												accept="png,jpg,webp,jpeg"
+												on:input={(e) =>
+													handleFileChange(e, $formData.freebie_image_url).then(
+														(x) => ($formData.freebie_image_url = x)
+													)}
+												bind:disabled={disable_freebies}
+											/>
+											<Input
+												{...attrs}
+												class="hidden"
+												bind:value={$formData.freebie_image_url}
+												readonly
+											/>
+										</div>
+									</Form.Control>
+									<Form.FieldErrors />
+								</Form.Field>
+							</div>
+
+							<Form.Field {form} name="freebie_text">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Freebie text</Form.Label>
+									<div class="flex items-center justify-start">
+										<Textarea {...attrs} bind:value={$formData.freebie_text} />
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+								<Form.Description
+									>The text displayed next to the signup form on your blog.</Form.Description
+								>
+							</Form.Field>
+						</div>
+					</div>
+					<div class="space-y-4">
+						<div class="flex items-center justify-between space-x-4 border-b px-4">
+							<h2 class="mb-4 text-2xl font-bold">Pages</h2>
+						</div>
+						<div>
+							<Form.Field {form} name="use_contact_page">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Use contact page</Form.Label>
+									<div class="flex items-center justify-start">
+										<Switch {...attrs} bind:checked={$formData.use_contact_page} />
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="contact_email">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Contact email</Form.Label>
+									<div class="flex items-center justify-start">
 										<Input
 											{...attrs}
-											class="hidden"
-											bind:value={$formData.freebie_image_url}
-											readonly
+											bind:value={$formData.contact_email}
+											readonly={!$formData.use_contact_page}
+										/>
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="use_about_page">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">Use about page</Form.Label>
+									<div class="flex items-center justify-start">
+										<Switch {...attrs} bind:checked={$formData.use_about_page} />
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+							</Form.Field>
+							<Form.Field {form} name="about_text">
+								<Form.Control let:attrs>
+									<Form.Label class="text-right">About text</Form.Label>
+									<div class="flex items-center justify-start">
+										<Textarea
+											{...attrs}
+											bind:value={$formData.about_text}
+											readonly={!$formData.use_about_page}
 										/>
 									</div>
 								</Form.Control>
 								<Form.FieldErrors />
 							</Form.Field>
 						</div>
-
-						<Form.Field {form} name="freebie_text">
-							<Form.Control let:attrs>
-								<Form.Label class="text-right">Freebie text</Form.Label>
-								<div class="flex items-center justify-start">
-									<Textarea {...attrs} bind:value={$formData.freebie_text} />
-								</div>
-							</Form.Control>
-							<Form.FieldErrors />
-							<Form.Description
-								>The text displayed next to the signup form on your blog.</Form.Description
-							>
-						</Form.Field>
 					</div>
 				</div>
 			</div>
 		</div>
-		<div class="mt-4">
+
+		<div class="mt-4 w-full border-t-[1px] border-t-gray-800 py-6 sticky bottom-0 bg-background">
 			<Form.Button disabled={!isTainted($tainted)}>Submit</Form.Button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/website/schema.js b/src/routes/(app)/website/schema.js
index 6c9ccc3..c12ac5b 100644
--- a/src/routes/(app)/website/schema.js
+++ b/src/routes/(app)/website/schema.js
@@ -17,8 +17,11 @@ export const schema = z.object({
     title: z.string(),
     subtitle: z.string(),
     auto_publish: z.boolean(),
+    use_contact_page: z.boolean(),
+    contact_email: z.string().email().nullable(),
+    use_about_page: z.boolean(),
+    about_text: z.string().nullable()
 }).superRefine((data, ctx) => {
-    console.log(data);
     if (data.use_freebie) {
         if (!data.freebie_url) {
             ctx.addIssue({
@@ -35,4 +38,11 @@ export const schema = z.object({
         //     });
         // }
     }
+    if(data.use_contact_page && !data.contact_email) {
+        ctx.addIssue({
+            path: ['contact_email'],
+            message: "A contact email is required when the contact page is enabled",
+            code: "custom"
+        });
+    }
 });
\ No newline at end of file