From 50ea76f42d06197f82aa399754e2481fc6146dad Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Wed, 17 Aug 2022 21:38:27 +0300
Subject: [PATCH] componetize a lot of stuff

---
 src/lib/ContactForm.svelte   | 89 +++++-------------------------------
 src/lib/Form/Form.svelte     | 50 ++++++++++++++++++++
 src/lib/Form/Meta.svelte     | 47 +++++++++++++++++++
 src/lib/Form/TextArea.svelte | 15 ++++++
 src/lib/Form/index.ts        |  5 +-
 src/lib/PubnixForm.svelte    | 85 ++++------------------------------
 src/lib/app.css              | 18 --------
 7 files changed, 136 insertions(+), 173 deletions(-)
 create mode 100644 src/lib/Form/Form.svelte
 create mode 100644 src/lib/Form/Meta.svelte
 create mode 100644 src/lib/Form/TextArea.svelte

diff --git a/src/lib/ContactForm.svelte b/src/lib/ContactForm.svelte
index 7c03315..0f8545a 100644
--- a/src/lib/ContactForm.svelte
+++ b/src/lib/ContactForm.svelte
@@ -1,83 +1,16 @@
 <script lang="ts">
-	import { Note, Captcha } from "$lib/Form";
+	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 </script>
 
-<form
-	action="https://segfautils.projectsegfau.lt/api/form"
-	method="POST"
-	id="contact-form"
->
+<Form action="https://segfautils.projectsegfau.lt/api/form" method="POST" id="contact-form" >
 	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
-	<div class="meta">
-		<input
-			type="email"
-			name="email"
-			class="form-textbox"
-			placeholder="Your email"
-			required
-		/>
-		<select id="commentType" name="commentType" required class="form-button">
-			<option value="" selected disabled>Select a type of comment</option>
-			<option value="Feedback">Feedback</option>
-			<option value="Suggestion">Suggestion</option>
-			<option value="Question">Question</option>
-			<option value="Bug">Bug</option>
-		</select>
-	</div>
-	<textarea
-		id="comment"
-		name="message"
-		rows="4"
-		cols="25"
-		required
-		class="form-textbox"
-		placeholder="Your message"
-	/>
+	<Meta inputType="email" inputPlaceholder="Your email" selectType="commentType">
+		<option value="" selected disabled>Select a type of comment</option>
+		<option value="Feedback">Feedback</option>
+		<option value="Suggestion">Suggestion</option>
+		<option value="Question">Question</option>
+		<option value="Bug">Bug</option>
+	</Meta>
+	<TextArea id="comment" name="message" placeholder="Your message" />
 	<Captcha />
-</form>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		width: fit-content;
-	}
-
-	.meta {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	.meta > * {
-		width: 50%;
-	}
-
-	@media screen and (max-width: 450px) {
-		.meta {
-			flex-direction: column;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.meta > * {
-			width: calc(100% - 1rem);
-		}
-
-		.meta > *:nth-child(2) {
-			width: 100%;
-		}
-	}
-
-	.form-textbox {
-		background-color: var(--secondary);
-		color: var(--text);
-		border-radius: 10px;
-		border: none;
-		padding: 0.5rem;
-		font-family: var(--font-primary);
-		outline: none;
-	}
-</style>
+</Form>
\ No newline at end of file
diff --git a/src/lib/Form/Form.svelte b/src/lib/Form/Form.svelte
new file mode 100644
index 0000000..d7644e2
--- /dev/null
+++ b/src/lib/Form/Form.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    export let action: string;
+    export let method: string;
+    export let id: string;
+</script>
+
+<form
+	{action}
+	{method}
+	{id}
+>
+    <slot />
+</form>
+
+<style>
+    form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		width: fit-content;
+	}
+
+	:global(.form-button) {
+		background-color: var(--secondary);
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		color: var(--text);
+		font-family: var(--font-primary);
+		text-decoration: none;
+	}
+
+	:global(.form-button:not(select):hover) {
+		background-color: var(--accent);
+		text-decoration: none;
+		transition: all 0.5s;
+		color: var(--secondary);
+	}
+
+	:global(.form-textbox) {
+		background-color: var(--secondary);
+		color: var(--text);
+		border-radius: 10px;
+		border: none;
+		padding: 0.5rem;
+		font-family: var(--font-primary);
+		outline: none;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/Form/Meta.svelte b/src/lib/Form/Meta.svelte
new file mode 100644
index 0000000..4ec6778
--- /dev/null
+++ b/src/lib/Form/Meta.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    export let inputType: string;
+    export let inputPlaceholder: string;
+    export let selectType: string;
+</script>
+
+<div class="meta">
+    <input
+        type={inputType}
+        name={inputType}
+        class="form-textbox"
+        placeholder={inputPlaceholder}
+        required
+    />
+    <select name={selectType} required class="form-button">
+        <slot />
+    </select>
+</div>
+
+<style>
+    .meta {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		gap: 1rem;
+	}
+
+	.meta > * {
+		width: 50%;
+	}
+
+	@media screen and (max-width: 450px) {
+		.meta {
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+		}
+
+		.meta > * {
+			width: calc(100% - 1rem);
+		}
+
+		.meta > *:nth-child(2) {
+			width: 100%;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/Form/TextArea.svelte b/src/lib/Form/TextArea.svelte
new file mode 100644
index 0000000..1416f5d
--- /dev/null
+++ b/src/lib/Form/TextArea.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let id: string;
+    export let name: string;
+    export let placeholder: string;
+</script>
+
+<textarea
+    {id}
+    {name}
+    rows="4"
+    cols="25"
+    required
+    class="form-textbox"
+    {placeholder}
+/>
\ No newline at end of file
diff --git a/src/lib/Form/index.ts b/src/lib/Form/index.ts
index 83ac350..883e995 100644
--- a/src/lib/Form/index.ts
+++ b/src/lib/Form/index.ts
@@ -1,2 +1,5 @@
 export { default as Note } from "./Note.svelte";
-export { default as Captcha } from "./Captcha.svelte";
\ No newline at end of file
+export { default as Captcha } from "./Captcha.svelte";
+export { default as Form } from "./Form.svelte";
+export { default as Meta } from "./Meta.svelte";
+export { default as TextArea } from "./TextArea.svelte";
\ No newline at end of file
diff --git a/src/lib/PubnixForm.svelte b/src/lib/PubnixForm.svelte
index b95345f..d314dc4 100644
--- a/src/lib/PubnixForm.svelte
+++ b/src/lib/PubnixForm.svelte
@@ -1,27 +1,14 @@
 <script lang="ts">
-	import { Note, Captcha } from "$lib/Form";
+	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 </script>
 
-<form
-	action="https://segfautils.projectsegfau.lt/api/pubnix"
-	method="POST"
-	id="contact-form"
->
+<Form action="https://segfautils.projectsegfau.lt/api/pubnix" method="POST" id="pubnix-form" >
 	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
-	<div class="meta">
-		<input
-			type="email"
-			name="email"
-			class="form-textbox"
-			placeholder="Your email"
-			required
-		/>
-		<select id="actionType" name="actionType" required class="form-button">
-			<option value="" selected disabled>Select a type of action</option>
-			<option value="Feedback">Sign up</option>
-			<option value="Suggestion">Delete user account</option>
-		</select>
-	</div>
+	<Meta inputType="email" inputPlaceholder="Your email" selectType="actionType">
+		<option value="" selected disabled>Select a type of action</option>
+        <option value="Feedback">Sign up</option>
+        <option value="Suggestion">Delete user account</option>
+	</Meta>
 	<input
 		type="text"
 		name="sshkey"
@@ -29,60 +16,6 @@
 		placeholder="Your SSH public key"
 		required
 	/>
-	<textarea
-		id="comment"
-		name="message"
-		rows="4"
-		cols="25"
-		required
-		class="form-textbox"
-		placeholder="The reason you want to join the pubnix."
-	/>
+	<TextArea id="comment" name="message" placeholder="The reason you want to join the pubnix." />
 	<Captcha />
-</form>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		width: fit-content;
-	}
-
-	.meta {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	.meta > * {
-		width: 50%;
-	}
-
-	@media screen and (max-width: 450px) {
-		.meta {
-			flex-direction: column;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.meta > * {
-			width: calc(100% - 1rem);
-		}
-
-		.meta > *:nth-child(2) {
-			width: 100%;
-		}
-	}
-
-	.form-textbox {
-		background-color: var(--secondary);
-		color: var(--text);
-		border-radius: 10px;
-		border: none;
-		padding: 0.5rem;
-		font-family: var(--font-primary);
-		outline: none;
-	}
-</style>
\ No newline at end of file
+</Form>
\ No newline at end of file
diff --git a/src/lib/app.css b/src/lib/app.css
index 12bbde8..4861aab 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -59,22 +59,4 @@ a {
 
 a:hover {
 	filter: brightness(125%);
-}
-
-.form-button {
-	background-color: var(--secondary);
-	border: none;
-	border-radius: 10px;
-	padding: 0.5rem;
-	cursor: pointer;
-	color: var(--text);
-	font-family: var(--font-primary);
-	text-decoration: none;
-}
-
-.form-button:not(select):hover {
-	background-color: var(--accent);
-	text-decoration: none;
-	transition: all 0.5s;
-	color: var(--secondary);
 }
\ No newline at end of file