init

routes/dashboard/login/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
+    import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
+    import Panel from '$lib/components/dashboard/auth/Panel.svelte';
+    import constraints from '$lib/constraints';
+  
+    export let data;
+  </script>
+  
+  <svelte:head>
+    <title>YourSitee</title>
+  </svelte:head>
+  
+  <Panel
+    title="Welcome back! Log in to continue"
+    links={[
+      { url: 'register', text: 'Register' },
+      // { url: 'login/recovery', text: 'Forgot password?' },
+    ]}
+    button="Sign In">
+    <InputGroup title="Username/Email address" required={true}>
+      <TextInput
+        name="identifier"
+        required
+        placeholder="Provide your username or email"
+        tabindex={1}
+        minlength={1}
+        maxlength={64}
+        value={data.username ?? data.email ?? ''} />
+    </InputGroup>
+    <InputGroup title="Password" required={true}>
+      <TextInput
+        name="password"
+        required
+        placeholder="Password"
+        type="password"
+        tabindex={2}
+        minlength={constraints.password.min}
+        maxlength={constraints.password.max} />
+    </InputGroup>
+  </Panel>
+  

routes/dashboard/login/+page.ts

@@ -0,0 +1,8 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url }) => {
+  return {
+    username: url.searchParams.get('un'),
+    email: url.searchParams.get('e'),
+  };
+};

routes/dashboard/login/recovery/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import Button from '$lib/components/dashboard/elements/Button.svelte';
+    import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
+    import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
+    import Back from '$lib/components/dashboard/auth/Back.svelte';
+    import Panel from '$lib/components/dashboard/auth/Panel.svelte';
+  
+    export let data;
+  </script>
+  
+  <svelte:head>
+    <title>YourSitee</title>
+  </svelte:head>
+  
+  <Back />
+  {#if !data.code}
+    <Panel
+      title="Forgot your password?"
+      subtitle="No problem at all! Let us send you an email with a recovery link to help you log into your account.">
+      <InputGroup title="Email address"><TextInput name="email" placeholder="you@example.com" required /></InputGroup>
+      <Button>Send recovery link</Button>
+    </Panel>
+  {:else}
+    <Panel title="Create a new password" action="?/new">
+      <InputGroup title="New password"><TextInput name="password" type="password" required /></InputGroup>
+      <InputGroup title="Confirm new password"><TextInput name="password-confirm" type="password" required /></InputGroup>
+      <Button>Set new password</Button>
+    </Panel>
+  {/if}
+