From 6561771c435f9d9bed1589b5ed13d17aee0b7873 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 11 Dec 2022 20:46:58 +0100
Subject: feat: Add frontpage

---
 code/app/src/routes/(main)/(public)/+layout.svelte | 10 +--
 .../(main)/(public)/reset-password/+page.svelte    | 32 ++++----
 .../routes/(main)/(public)/reset-password/+page.ts | 11 +++
 .../(main)/(public)/reset-password/[id]/+page.ts   | 11 +++
 .../routes/(main)/(public)/sign-in/+page.svelte    | 86 +++++++++++-----------
 .../src/routes/(main)/(public)/sign-in/+page.ts    | 11 +++
 .../routes/(main)/(public)/sign-up/+page.svelte    | 44 +++++------
 .../src/routes/(main)/(public)/sign-up/+page.ts    | 11 +++
 8 files changed, 131 insertions(+), 85 deletions(-)
 create mode 100644 code/app/src/routes/(main)/(public)/reset-password/+page.ts
 create mode 100644 code/app/src/routes/(main)/(public)/reset-password/[id]/+page.ts
 create mode 100644 code/app/src/routes/(main)/(public)/sign-in/+page.ts
 create mode 100644 code/app/src/routes/(main)/(public)/sign-up/+page.ts

(limited to 'code/app/src/routes/(main)/(public)')

diff --git a/code/app/src/routes/(main)/(public)/+layout.svelte b/code/app/src/routes/(main)/(public)/+layout.svelte
index 0d84f9a..6da653c 100644
--- a/code/app/src/routes/(main)/(public)/+layout.svelte
+++ b/code/app/src/routes/(main)/(public)/+layout.svelte
@@ -1,18 +1,18 @@
 <script>
-    import {LocaleSwitcher} from "$components";
+    import { LocaleSwitcher } from "$components";
     import LL from "$i18n/i18n-svelte";
 </script>
 
-<LocaleSwitcher tabindex={-1}/>
-<slot/>
+<LocaleSwitcher tabindex={-1} />
+<slot />
 <footer class="grid sm:gap-5 grid-flow-row sm:justify-center px-2 sm:grid-flow-col">
     <a href="https://greatoffice.life/privacy" class="link">
         {$LL.privacyPolicy()}
     </a>
-    <a href="https://greatoffice.life/tos" class="link">
+    <a href="https://greatoffice.life/terms" class="link">
         {$LL.tos()}
     </a>
-    <a href="https://greatoffice.life/documentation" class="link">
+    <a href="https://greatoffice.life/docs" class="link">
         {$LL.documentation()}
     </a>
 </footer>
diff --git a/code/app/src/routes/(main)/(public)/reset-password/+page.svelte b/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
index 34dabae..55859f6 100644
--- a/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/reset-password/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import {Alert, Input, Button} from "$components";
+    import { Alert, Input, Button } from "$components";
     import LL from "$i18n/i18n-svelte";
-    import {FormError} from "$models/internal/FormError";
-    import {PasswordResetService} from "$services/password-reset-service";
+    import { FormError } from "$models/internal/FormError";
+    import { PasswordResetService } from "$services/password-reset-service";
 
     const formData = {
         email: {
@@ -44,6 +44,10 @@
     }
 </script>
 
+<svlete:head>
+    <title>Reset password - Greatoffice</title>
+</svlete:head>
+
 <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
     <div class="sm:mx-auto sm:w-full p-2 sm:p-0 sm:max-w-md">
         <h2 class="mt-6 text-3xl tracking-tight font-bold text-gray-900">
@@ -61,21 +65,21 @@
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
             <form class="space-y-6" on:submit|preventDefault={submit_form_async}>
                 {#if showErrorAlert}
-                    <Alert title={formError.title} message={formError.subtitle} type="error"/>
+                    <Alert title={formError.title} message={formError.subtitle} type="error" />
                 {:else if showSuccessAlert}
-                    <Alert type="success" title={$LL.success()} message={$LL.resetPasswordPage.requestSentMessage()}/>
+                    <Alert type="success" title={$LL.success()} message={$LL.resetPasswordPage.requestSentMessage()} />
                 {/if}
                 <Input
-                        id="email"
-                        name="email"
-                        type="email"
-                        autocomplete="email"
-                        errors={formData.email.errors}
-                        bind:value={formData.email.value}
-                        required
-                        label={$LL.emailAddress()}
+                    id="email"
+                    name="email"
+                    type="email"
+                    autocomplete="email"
+                    errors={formData.email.errors}
+                    bind:value={formData.email.value}
+                    required
+                    label={$LL.emailAddress()}
                 />
-                <Button text={$LL.submit()} type="submit" {loading} fullWidth/>
+                <Button text={$LL.submit()} type="submit" {loading} fullWidth />
             </form>
         </div>
     </div>
diff --git a/code/app/src/routes/(main)/(public)/reset-password/+page.ts b/code/app/src/routes/(main)/(public)/reset-password/+page.ts
new file mode 100644
index 0000000..c0859e0
--- /dev/null
+++ b/code/app/src/routes/(main)/(public)/reset-password/+page.ts
@@ -0,0 +1,11 @@
+import LL from '$i18n/i18n-svelte';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+const l = get(LL);
+
+export const load: PageLoad = async () => {
+    return {
+        title: l.resetPasswordPage.title(),
+    };
+};
\ No newline at end of file
diff --git a/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.ts b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.ts
new file mode 100644
index 0000000..3252b7a
--- /dev/null
+++ b/code/app/src/routes/(main)/(public)/reset-password/[id]/+page.ts
@@ -0,0 +1,11 @@
+import LL from '$i18n/i18n-svelte';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+const l = get(LL);
+
+export const load: PageLoad = async () => {
+    return {
+        title: l.resetPasswordPage.fulfillTitle(),
+    };
+};
\ No newline at end of file
diff --git a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
index e862050..c4ecb1a 100644
--- a/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/sign-in/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import {goto} from "$app/navigation";
-    import {Button, Checkbox, Input, Alert} from "$components";
+    import { goto } from "$app/navigation";
+    import { Button, Checkbox, Input, Alert } from "$components";
     import LL from "$i18n/i18n-svelte";
     import pwKey from "$actions/pwKey";
-    import {onMount} from "svelte";
-    import {signInPageMessageQueryKey, signInPageTestKeys, type SignInPageMessage} from ".";
-    import {AccountService} from "$services/account-service";
-    import type {LoginPayload} from "$services/abstractions/IAccountService";
-    import {FormError} from "$models/internal/FormError";
+    import { onMount } from "svelte";
+    import { signInPageMessageQueryKey, signInPageTestKeys, type SignInPageMessage } from ".";
+    import { AccountService } from "$services/account-service";
+    import type { LoginPayload } from "$services/abstractions/IAccountService";
+    import { FormError } from "$models/internal/FormError";
 
     let loading = false;
     let showErrorAlert = false;
@@ -71,24 +71,24 @@
         <div class="sm:max-w-md sm:mx-auto sm:w-full">
             {#if messageType === "after-password-reset"}
                 <Alert
-                        title={$LL.signInPage.yourNewPasswordIsApplied()}
-                        _pwKey={signInPageTestKeys.afterPasswordResetAlert}
-                        message={$LL.signInPage.signInBelow()}
-                        closeable
+                    title={$LL.signInPage.yourNewPasswordIsApplied()}
+                    _pwKey={signInPageTestKeys.afterPasswordResetAlert}
+                    message={$LL.signInPage.signInBelow()}
+                    closeable
                 />
             {:else if messageType === "user-disabled"}
                 <Alert
-                        title={$LL.signInPage.yourAccountIsDisabled()}
-                        _pwKey={signInPageTestKeys.userDisabledAlert}
-                        message={$LL.signInPage.contactYourAdminIfDisabled()}
-                        closeable
+                    title={$LL.signInPage.yourAccountIsDisabled()}
+                    _pwKey={signInPageTestKeys.userDisabledAlert}
+                    message={$LL.signInPage.contactYourAdminIfDisabled()}
+                    closeable
                 />
             {:else if messageType === "user-inactivity"}
                 <Alert
-                        title={$LL.signInPage.youHaveReachedInactivityLimit()}
-                        _pwKey={signInPageTestKeys.userInactivityAlert}
-                        message={$LL.signInPage.feelFreeToSignInAgain()}
-                        closeable
+                    title={$LL.signInPage.youHaveReachedInactivityLimit()}
+                    _pwKey={signInPageTestKeys.userInactivityAlert}
+                    message={$LL.signInPage.feelFreeToSignInAgain()}
+                    closeable
                 />
             {/if}
         </div>
@@ -107,39 +107,37 @@
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
             {#if showErrorAlert}
-                <Alert title={formError.title} message={formError.subtitle} type="error"
-                       _pwKey={signInPageTestKeys.formErrorAlert}/>
+                <Alert title={formError.title} message={formError.subtitle} type="error" _pwKey={signInPageTestKeys.formErrorAlert} />
             {/if}
-            <form class="space-y-6 mt-2" use:pwKey={signInPageTestKeys.signInForm}
-                  on:submit|preventDefault={submit_form_async}>
+            <form class="space-y-6 mt-2" use:pwKey={signInPageTestKeys.signInForm} on:submit|preventDefault={submit_form_async}>
                 <Input
-                        id="username"
-                        _pwKey={signInPageTestKeys.usernameInput}
-                        name="username"
-                        type="email"
-                        label={$LL.emailAddress()}
-                        required
-                        bind:value={formData.username.value}
+                    id="username"
+                    _pwKey={signInPageTestKeys.usernameInput}
+                    name="username"
+                    type="email"
+                    label={$LL.emailAddress()}
+                    required
+                    bind:value={formData.username.value}
                 />
 
                 <Input
-                        id="password"
-                        name="password"
-                        type="password"
-                        label={$LL.password()}
-                        _pwKey={signInPageTestKeys.passwordInput}
-                        autocomplete="current-password"
-                        required
-                        bind:value={formData.password.value}
+                    id="password"
+                    name="password"
+                    type="password"
+                    label={$LL.password()}
+                    _pwKey={signInPageTestKeys.passwordInput}
+                    autocomplete="current-password"
+                    required
+                    bind:value={formData.password.value}
                 />
 
                 <div class="flex items-center justify-between">
                     <Checkbox
-                            id="remember-me"
-                            _pwKey={signInPageTestKeys.rememberMeCheckbox}
-                            name="remember-me"
-                            bind:checked={formData.persist.value}
-                            label={$LL.signInPage.notMyComputer()}
+                        id="remember-me"
+                        _pwKey={signInPageTestKeys.rememberMeCheckbox}
+                        name="remember-me"
+                        bind:checked={formData.persist.value}
+                        label={$LL.signInPage.notMyComputer()}
                     />
                     <div class="text-sm">
                         <a href="/reset-password" class="link" use:pwKey={signInPageTestKeys.resetPasswordAnchor}>
@@ -148,7 +146,7 @@
                     </div>
                 </div>
 
-                <Button text={$LL.submit()} fullWidth type="submit" {loading}/>
+                <Button text={$LL.submit()} fullWidth type="submit" {loading} />
             </form>
         </div>
     </div>
diff --git a/code/app/src/routes/(main)/(public)/sign-in/+page.ts b/code/app/src/routes/(main)/(public)/sign-in/+page.ts
new file mode 100644
index 0000000..bebc459
--- /dev/null
+++ b/code/app/src/routes/(main)/(public)/sign-in/+page.ts
@@ -0,0 +1,11 @@
+import LL from '$i18n/i18n-svelte';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+const l = get(LL);
+
+export const load: PageLoad = async () => {
+    return {
+        title: l.signInPage.title(),
+    };
+};
\ No newline at end of file
diff --git a/code/app/src/routes/(main)/(public)/sign-up/+page.svelte b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
index 58940ea..d111042 100644
--- a/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
+++ b/code/app/src/routes/(main)/(public)/sign-up/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import {goto} from "$app/navigation";
-    import type {CreateAccountPayload} from "$api/account";
-    import {Button, Input, Alert} from "$components";
+    import { goto } from "$app/navigation";
+    import type { CreateAccountPayload } from "$api/account";
+    import { Button, Input, Alert } from "$components";
     import LL from "$i18n/i18n-svelte";
-    import {FormError} from "$models/internal/FormError";
-    import {AccountService} from "$services/account-service";
+    import { FormError } from "$models/internal/FormError";
+    import { AccountService } from "$services/account-service";
 
     const formData = {
         username: {
@@ -76,30 +76,30 @@
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
             {#if showErrorAlert}
-                <Alert title={formError.title} message={formError.subtitle} type="error" class="mb-2"/>
+                <Alert title={formError.title} message={formError.subtitle} type="error" class="mb-2" />
             {/if}
             <form class="space-y-6" on:submit|preventDefault={submit_form_async}>
                 <Input
-                        label={$LL.emailAddress()}
-                        id="email"
-                        name="email"
-                        autocomplete="email"
-                        required
-                        type="email"
-                        bind:value={formData.username.value}
-                        errors={formData.username.errors}
+                    label={$LL.emailAddress()}
+                    id="email"
+                    name="email"
+                    autocomplete="email"
+                    required
+                    type="email"
+                    bind:value={formData.username.value}
+                    errors={formData.username.errors}
                 />
 
                 <Input
-                        label={$LL.password()}
-                        id="password"
-                        name="password"
-                        required
-                        type="password"
-                        bind:value={formData.password.value}
-                        errors={formData.password.errors}
+                    label={$LL.password()}
+                    id="password"
+                    name="password"
+                    required
+                    type="password"
+                    bind:value={formData.password.value}
+                    errors={formData.password.errors}
                 />
-                <Button type="submit" text={$LL.submit()} {loading} fullWidth/>
+                <Button type="submit" text={$LL.submit()} {loading} fullWidth />
             </form>
         </div>
     </div>
diff --git a/code/app/src/routes/(main)/(public)/sign-up/+page.ts b/code/app/src/routes/(main)/(public)/sign-up/+page.ts
new file mode 100644
index 0000000..8c86f55
--- /dev/null
+++ b/code/app/src/routes/(main)/(public)/sign-up/+page.ts
@@ -0,0 +1,11 @@
+import LL from '$i18n/i18n-svelte';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+const l = get(LL);
+
+export const load: PageLoad = async () => {
+    return {
+        title: l.signUpPage.title(),
+    };
+};
\ No newline at end of file
-- 
cgit v1.3