From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <kiizuha@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on
	server-vie001.gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_DBL_BLOCKED_OPENDNS,
	URIBL_ZEN_BLOCKED_OPENDNS autolearn=ham autolearn_force=no
	version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1737249162;
	bh=dSJ9MI4auCtIeo613YPX2V7zjeR8t+eE57KGLnioYRI=;
	h=From:To:Cc:Subject:Date:Message-ID:In-Reply-To:References:
	 MIME-Version:Content-Transfer-Encoding:Message-ID:Date:From:
	 Reply-To:Subject:To:Cc:In-Reply-To:References:Resent-Date:
	 Resent-From:Resent-To:Resent-Cc:User-Agent:Content-Type:
	 Content-Transfer-Encoding;
	b=cHZmJm94awHzpMTg/98+93OtaXxfUvZ2QsAZ9yf1vJF3swBUwK8v9BKLPyR1ISziM
	 BLoPE9uj64WNKMQFCYeDLwJFs76qIiTQ6ZlJTlyLGg56cA8zrENpP/sD2GQL5ZVyC5
	 roq2etrLMa/SdsOY23/Owmy8cUdU/8N6totiCCo0KNk9ngwzhLok+NQS5AQMc1eVyi
	 Q8M6yUYy3tGdUsQwG6JH8GKPGZIsqbiF1swpnSK29+2Db/JEYQI/sZcXCiwv3EZxzF
	 Om5RlWWI3+H0AIgG5r0Jjzh8wKGFrq00qzixGQ2M98G+LYB3vTAGgLB+ycFxcMSGUM
	 6yf13Q1D9kZSA==
Received: from localhost.localdomain (unknown [101.128.125.239])
	by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id 313DE2061C22;
	Sun, 19 Jan 2025 01:12:41 +0000 (UTC)
From: Muhammad Rizki <kiizuha@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Muhammad Rizki <kiizuha@gnuweeb.org>,
	Alviro Iskandar Setiawan <alviro.iskandar@gnuweeb.org>,
	Dwiky Rizky Ananditya <kyzsuki@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>
Subject: [PATCH v1 15/17] feat(routes): add login page
Date: Sun, 19 Jan 2025 08:11:32 +0700
Message-ID: <20250119011136.1254-16-kiizuha@gnuweeb.org>
X-Mailer: git-send-email 2.45.2.windows.1
In-Reply-To: <20250119011136.1254-1-kiizuha@gnuweeb.org>
References: <20250119011136.1254-1-kiizuha@gnuweeb.org>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.gnuweeb.org>

this page includes login form and its page authentication handler.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/routes/+page.svelte | 124 +++++++++++++++++++++++++++++++++++++++-
 src/routes/+page.ts     |  17 ++++++
 2 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/+page.ts

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..46ef170 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,122 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+  import Loading from "$components/customs/loading.svelte";
+  import { Button } from "$components/ui/button";
+  import * as Card from "$components/ui/card";
+  import * as Form from "$components/ui/form";
+  import { Input } from "$components/ui/input";
+  import InputPassword from "$components/ui/input/input-password.svelte";
+  import { useAuth } from "$lib/hooks/auth.svelte";
+  import { useHttp } from "$lib/hooks/http.svelte";
+  import { loginSchema } from "$lib/schemas/login";
+  import type { LoginResponse, User } from "$typings";
+  import { superForm, setError, setMessage } from "sveltekit-superforms";
+  import { zod } from "sveltekit-superforms/adapters";
+
+  let { data } = $props();
+
+  const auth = useAuth();
+
+  const form = superForm(data.form, {
+    SPA: true,
+    validators: zod(loginSchema),
+
+    async onUpdate({ form }) {
+      const http = useHttp<LoginResponse, User>({
+        action: "login",
+        method: "POST",
+
+        payload: {
+          user: form.data.username_or_email,
+          pass: form.data.password
+        },
+
+        formatter(data, resp) {
+          data = resp?.data.res?.user_info!;
+        },
+
+        onComplete(resp) {
+          auth.save(resp.data.res!);
+        },
+
+        onError(_, errorMessage) {
+          setError(form, "username_or_email", "");
+          setError(form, "password", "");
+          setMessage(form, errorMessage);
+        }
+      });
+
+      await http.execute();
+    }
+  });
+
+  const isError = () => Boolean($errors.username_or_email && $errors.password);
+  const isValid = () => Boolean($formData.username_or_email && $formData.password);
+
+  const { form: formData, errors, message, submitting, constraints, enhance } = form;
+</script>
+
+<div class="mx-auto flex min-h-screen w-full items-center justify-center px-3 py-2">
+  <Card.Root class="w-full max-w-lg">
+    <form method="POST" use:enhance>
+      <Card.Header class="flex items-center justify-center space-y-1">
+        <Card.Title class="text-2xl">GNU/Weeb Mail Login</Card.Title>
+        <Card.Description>Proceed login to manager your email account</Card.Description>
+
+        {#if isError()}
+          <span class="text-sm font-medium text-destructive">
+            {$message}
+          </span>
+        {/if}
+      </Card.Header>
+
+      <Card.Content class="grid gap-4">
+        <Form.Field {form} name="username_or_email" class="grid gap-1">
+          <Form.Control>
+            {#snippet children({ props })}
+              <Form.Label>Username or Email</Form.Label>
+              <Input
+                {...props}
+                aria-invalid={$errors.username_or_email ? "true" : undefined}
+                bind:value={$formData.username_or_email}
+                placeholder="username@gnuweeb.org"
+                disabled={$submitting}
+                {...$constraints.username_or_email}
+              />
+              <Form.FieldErrors />
+            {/snippet}
+          </Form.Control>
+        </Form.Field>
+
+        <Form.Field {form} name="password" class="grid gap-2">
+          <Form.Control>
+            {#snippet children({ props })}
+              <Form.Label>Password</Form.Label>
+              <InputPassword
+                {...props}
+                aria-invalid={$errors.password ? "true" : undefined}
+                bind:value={$formData.password}
+                placeholder="Enter password"
+                disabled={$submitting}
+                {...$constraints.password}
+              />
+              <Form.FieldErrors />
+            {/snippet}
+          </Form.Control>
+        </Form.Field>
+      </Card.Content>
+
+      <Card.Footer>
+        <Button
+          type="submit"
+          class="mt-3 flex w-full gap-x-2"
+          disabled={$submitting || !isValid() || isError()}
+        >
+          <span>Login</span>
+          {#if $submitting}
+            <Loading />
+          {/if}
+        </Button>
+      </Card.Footer>
+    </form>
+  </Card.Root>
+</div>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..99ac97a
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1,17 @@
+import { loginSchema } from "$lib/schemas/login";
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
+import type { PageLoad } from "./$types";
+import { useAuth } from "$lib/hooks/auth.svelte";
+import { redirect } from "@sveltejs/kit";
+
+export const load: PageLoad = async () => {
+  const auth = useAuth();
+
+  if (auth.isValid()) return redirect(307, "/home");
+
+  const data = { email: "", password: "" };
+  const form = await superValidate(data, zod(loginSchema));
+
+  return { form };
+};
-- 
Muhammad Rizki