From 3211ef25f7bc321832c9962eb73c7201d221e2a6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 5 Jun 2022 18:45:16 +0200
Subject: refactor: Update style on portal forms

---
 apps/portal/src/app/pages/_layout.svelte        |   9 +-
 apps/portal/src/app/pages/forgot.svelte         |  67 +++++++-------
 apps/portal/src/app/pages/login.svelte          | 101 +++++++++++----------
 apps/portal/src/app/pages/not-found.svelte      |  23 -----
 apps/portal/src/app/pages/reset-password.svelte | 115 ++++++++++++------------
 apps/portal/src/app/pages/sign-up.svelte        |  91 +++++++++----------
 6 files changed, 196 insertions(+), 210 deletions(-)
 delete mode 100644 apps/portal/src/app/pages/not-found.svelte

(limited to 'apps/portal/src/app/pages')

diff --git a/apps/portal/src/app/pages/_layout.svelte b/apps/portal/src/app/pages/_layout.svelte
index 713a430..ec4bd11 100644
--- a/apps/portal/src/app/pages/_layout.svelte
+++ b/apps/portal/src/app/pages/_layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Button from "$shared/components/button.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import {switch_theme} from "$shared/lib/helpers";
 </script>
 
@@ -30,9 +31,11 @@
 <main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm">
     <slot/>
 
-    <Button on:click={() => switch_theme()}
-            text="Switch theme"
-            variant="secondary"/>
+    <Tile class="margin-top-sm">
+        <Button on:click={() => switch_theme()}
+                text="Switch theme"
+                variant="secondary"/>
+    </Tile>
 
     <figure id="decoration"
             aria-hidden="true">
diff --git a/apps/portal/src/app/pages/forgot.svelte b/apps/portal/src/app/pages/forgot.svelte
index f22d664..5ffac23 100644
--- a/apps/portal/src/app/pages/forgot.svelte
+++ b/apps/portal/src/app/pages/forgot.svelte
@@ -5,11 +5,12 @@
 	import {is_email} from "$shared/lib/helpers";
 	import Alert from "$shared/components/alert.svelte";
 	import Button from "$shared/components/button.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import Layout from "./_layout.svelte";
 
 	let isLoading = false;
 	let username;
-	
+
 	const alert = {
 		title: "",
 		type: "",
@@ -65,35 +66,37 @@
 </script>
 
 <Layout>
-    <form on:submit|preventDefault={submit_form}
-          class="margin-bottom-md max-width-xxs">
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Send reset link</span> <br/>
-                <span class="text-sm">... or <a href="/login"
-                                                use:link>log in</a></span>
-            </legend>
-            <div class="margin-bottom-xs">
-                <p>Provide your email address, and we'll send you a link to set your new password.</p>
-            </div>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert visible={alert.isVisible}
-                       title={alert.title}
-                       message={alert.message}
-                       type={alert.type}/>
-            </div>
-            <div class="margin-bottom-xs">
-                <input type="email"
-                       id="email-address"
-                       placeholder="Email address"
-                       class="form-control width-100%"
-                       bind:value={username}/>
-            </div>
-            <div class="flex justify-end">
-                <Button text="Send reset link"
-                        type="primary"
-                        loading={isLoading}/>
-            </div>
-        </fieldset>
-    </form>
+    <Tile>
+        <form on:submit|preventDefault={submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Send reset link</span> <br/>
+                    <span class="text-sm">... or <a href="/login"
+                                                    use:link>log in</a></span>
+                </legend>
+                <div class="margin-bottom-xs">
+                    <p>Provide your email address, and we'll send you a link to set your new password.</p>
+                </div>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={alert.isVisible}
+                           title={alert.title}
+                           message={alert.message}
+                           type={alert.type}/>
+                </div>
+                <div class="margin-bottom-xs">
+                    <input type="email"
+                           id="email-address"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           bind:value={username}/>
+                </div>
+                <div class="flex justify-end">
+                    <Button text="Send reset link"
+                            type="primary"
+                            loading={isLoading}/>
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
diff --git a/apps/portal/src/app/pages/login.svelte b/apps/portal/src/app/pages/login.svelte
index 3324056..df8d537 100644
--- a/apps/portal/src/app/pages/login.svelte
+++ b/apps/portal/src/app/pages/login.svelte
@@ -4,6 +4,7 @@
 	import {api_base, projects_base, IconNames} from "$shared/lib/configuration";
 	import Button from "$shared/components/button.svelte";
 	import Alert from "$shared/components/alert.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import {login} from "$shared/lib/api/user";
 	import {is_email} from "$shared/lib/helpers";
 	import Layout from "./_layout.svelte";
@@ -92,54 +93,56 @@
 </script>
 
 <Layout>
-    <form on:submit|preventDefault={loginForm.submit_form}
-          class="margin-bottom-md max-width-xxs">
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Log into your account</span>
-                <br/>
-                <span class="text-sm">... or <a href="/signup"
-                                                use:link>create a new one</a></span>
-            </legend>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert visible={loginForm.alert.isVisible}
-                       title={loginForm.alert.title}
-                       message={loginForm.alert.message}
-                       type={loginForm.alert.type}/>
-            </div>
-            <div class="margin-bottom-xxs">
-                <input type="email"
-                       placeholder="Email address"
-                       class="form-control width-100%"
-                       id="username"
-                       bind:value={loginForm.values.username}/>
-            </div>
-            <div class="margin-bottom-xxs">
-                <input type="password"
-                       placeholder="Password"
-                       id="password"
-                       class="form-control width-100%"
-                       bind:value={loginForm.values.password}/>
-                <div class="flex justify-end">
-                    <a tabindex="-1"
-                       class="text-sm"
-                       href="/forgot"
-                       use:link>Reset password</a>
+    <Tile>
+        <form on:submit|preventDefault={loginForm.submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Log into your account</span>
+                    <br/>
+                    <span class="text-sm">... or <a href="/signup"
+                                                    use:link>create a new one</a></span>
+                </legend>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={loginForm.alert.isVisible}
+                           title={loginForm.alert.title}
+                           message={loginForm.alert.message}
+                           type={loginForm.alert.type}/>
                 </div>
-            </div>
-            <div class="flex justify-between">
-                <Button text="Login with Github"
-                        variant="secondary"
-                        icon="{IconNames.github}"
-                        icon_right_aligned="true"
-                        href={api_base("_/account/create-github-session")}
-                        loading={loginForm.loading}
-                />
-                <Button text="Login"
-                        type="submit"
-                        variant="primary"
-                        loading={loginForm.loading}/>
-            </div>
-        </fieldset>
-    </form>
+                <div class="margin-bottom-xxs">
+                    <input type="email"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           id="username"
+                           bind:value={loginForm.values.username}/>
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="password"
+                           placeholder="Password"
+                           id="password"
+                           class="form-control width-100%"
+                           bind:value={loginForm.values.password}/>
+                    <div class="flex justify-end">
+                        <a tabindex="-1"
+                           class="text-sm"
+                           href="/forgot"
+                           use:link>Reset password</a>
+                    </div>
+                </div>
+                <div class="flex justify-between">
+                    <Button text="Login with Github"
+                            variant="secondary"
+                            icon="{IconNames.github}"
+                            icon_right_aligned="true"
+                            href={api_base("_/account/create-github-session")}
+                            loading={loginForm.loading}
+                    />
+                    <Button text="Login"
+                            type="submit"
+                            variant="primary"
+                            loading={loginForm.loading}/>
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
diff --git a/apps/portal/src/app/pages/not-found.svelte b/apps/portal/src/app/pages/not-found.svelte
deleted file mode 100644
index 34568ba..0000000
--- a/apps/portal/src/app/pages/not-found.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-	import {link} from "svelte-spa-router";
-</script>
-<style>
-    header {
-        font-size: 12rem;
-    }
-
-    main {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-    }
-</style>
-
-<main>
-    <header>404</header>
-    <p>Page not found!</p>
-    <a use:link
-       href="/">Go to front</a>
-</main>
diff --git a/apps/portal/src/app/pages/reset-password.svelte b/apps/portal/src/app/pages/reset-password.svelte
index 56c4f62..1b26903 100644
--- a/apps/portal/src/app/pages/reset-password.svelte
+++ b/apps/portal/src/app/pages/reset-password.svelte
@@ -3,6 +3,7 @@
 	import {check_forgot_password_request, fulfill_forgot_password_request} from "$shared/lib/api/user";
 	import Alert from "$shared/components/alert.svelte";
 	import Button from "$shared/components/button.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import Layout from "./_layout.svelte";
 
 	const requestId = new URLSearchParams($querystring).get("id");
@@ -71,65 +72,67 @@
 </script>
 
 <Layout>
-    <form on:submit|preventDefault={submit}
-          class="margin-bottom-md max-width-xxs {isLoading ? 'c-disabled loading' : ''}">
-        {#if requestId}
-            {#await is_valid_password_reset_request()}
-                <p>Checking your request...</p>
-                <a href="/login"
-                   use:link>cancel</a>
-            {:then isActive}
-                {#if isActive === true}
-                    <fieldset>
-                        <legend class="form-legend">
-                            <span class="margin-bottom-xs">Set your new password</span> <br/>
-                            <span class="text-sm">
+    <Tile>
+        <form on:submit|preventDefault={submit}
+              class="max-width-xxs {isLoading ? 'c-disabled loading' : ''}">
+            {#if requestId}
+                {#await is_valid_password_reset_request()}
+                    <p>Checking your request...</p>
+                    <a href="/login"
+                       use:link>cancel</a>
+                {:then isActive}
+                    {#if isActive === true}
+                        <fieldset>
+                            <legend class="form-legend">
+                                <span class="margin-bottom-xs">Set your new password</span> <br/>
+                                <span class="text-sm">
 								... or
 								<a href="/login"
                                    use:link> log in </a>
 							</span>
-                        </legend>
-                        <div class="margin-bottom-xxs max-width-xxs">
-                            <Alert visible={alert.isVisible}
-                                   title={alert.title}
-                                   message={alert.message}
-                                   type={alert.type}/>
+                            </legend>
+                            <div class="margin-bottom-xxs max-width-xxs">
+                                <Alert visible={alert.isVisible}
+                                       title={alert.title}
+                                       message={alert.message}
+                                       type={alert.type}/>
+                            </div>
+                            <div class="margin-bottom-xs">
+                                <input
+                                        type="password"
+                                        id="new-password"
+                                        placeholder="New password"
+                                        class="form-control width-100%"
+                                        bind:value={newPassword}
+                                />
+                                {#if newPasswordError}
+                                    <small class="color-danger">{newPasswordError}</small>
+                                {/if}
+                            </div>
+                            <div class="flex justify-end">
+                                <Button text="Set new password"
+                                        type="primary"
+                                        loading={isLoading}
+                                        on:click={submit}/>
+                            </div>
+                        </fieldset>
+                    {:else}
+                        <Alert title="This request is expired"
+                               message="Please submit the forgot password form again"
+                               type="warning"/>
+                        <div class="flex justify-between width-100% margin-y-sm">
+                            <a href="/forgot"
+                               use:link>Go to forgot form</a>
+                            <a href="/login"
+                               use:link>Go to login form</a>
                         </div>
-                        <div class="margin-bottom-xs">
-                            <input
-                                    type="password"
-                                    id="new-password"
-                                    placeholder="New password"
-                                    class="form-control width-100%"
-                                    bind:value={newPassword}
-                            />
-                            {#if newPasswordError}
-                                <small class="color-danger">{newPasswordError}</small>
-                            {/if}
-                        </div>
-                        <div class="flex justify-end">
-                            <Button text="Set new password"
-                                    type="primary"
-                                    loading={isLoading}
-                                    on:click={submit}/>
-                        </div>
-                    </fieldset>
-                {:else}
-                    <Alert title="This request is expired"
-                           message="Please submit the forgot password form again"
-                           type="warning"/>
-                    <div class="flex justify-between width-100% margin-y-sm">
-                        <a href="/forgot"
-                           use:link>Go to forgot form</a>
-                        <a href="/login"
-                           use:link>Go to login form</a>
-                    </div>
-                {/if}
-            {:catch _}
-                <Alert title="An error occured"
-                       message="Please try again soon"
-                       type="error"/>
-            {/await}
-        {/if}
-    </form>
+                    {/if}
+                {:catch _}
+                    <Alert title="An error occured"
+                           message="Please try again soon"
+                           type="error"/>
+                {/await}
+            {/if}
+        </form>
+    </Tile>
 </Layout>
diff --git a/apps/portal/src/app/pages/sign-up.svelte b/apps/portal/src/app/pages/sign-up.svelte
index 80780e0..31ae55b 100644
--- a/apps/portal/src/app/pages/sign-up.svelte
+++ b/apps/portal/src/app/pages/sign-up.svelte
@@ -3,6 +3,7 @@
 	import {is_email} from "$shared/lib/helpers";
 	import Alert from "$shared/components/alert.svelte";
 	import Button from "$shared/components/button.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import {link} from "svelte-spa-router";
 	import Layout from "./_layout.svelte";
 
@@ -78,51 +79,47 @@
 </script>
 
 <Layout>
-    <form
-            on:submit|preventDefault={signupForm.submit_form}
-            class="margin-bottom-md max-width-xxs"
-    >
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Create your account</span> <br/>
-                <span class="text-sm"
-                >... or <a href="/login"
-                           use:link>log in</a></span
-                >
-            </legend>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert
-                        visible={signupForm.alert.isVisible}
-                        title={signupForm.alert.title}
-                        message={signupForm.alert.message}
-                        type={signupForm.alert.type}
-                />
-            </div>
-            <div class="margin-bottom-xxs">
-                <input
-                        type="email"
-                        placeholder="Email address"
-                        class="form-control width-100%"
-                        id="email-address"
-                        bind:value={signupForm.values.username}
-                />
-            </div>
-            <div class="margin-bottom-xxs">
-                <input
-                        type="password"
-                        placeholder="Password"
-                        class="form-control width-100%"
-                        bind:value={signupForm.values.password}
-                />
-            </div>
-            <div class="flex justify-end">
-                <Button
-                        class="margin-bottom-xs"
-                        text="Submit"
-                        type="primary"
-                        loading={signupForm.loading}
-                />
-            </div>
-        </fieldset>
-    </form>
+    <Tile>
+        <form on:submit|preventDefault={signupForm.submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Create your account</span> <br/>
+                    <span class="text-sm"
+                    >... or <a href="/login"
+                               use:link>log in</a></span
+                    >
+                </legend>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={signupForm.alert.isVisible}
+                           title={signupForm.alert.title}
+                           message={signupForm.alert.message}
+                           type={signupForm.alert.type}
+                    />
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="email"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           id="email-address"
+                           bind:value={signupForm.values.username}
+                    />
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="password"
+                           placeholder="Password"
+                           class="form-control width-100%"
+                           bind:value={signupForm.values.password}
+                    />
+                </div>
+                <div class="flex justify-end">
+                    <Button class="margin-bottom-xs"
+                            text="Submit"
+                            type="primary"
+                            loading={signupForm.loading}
+                    />
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
-- 
cgit v1.3