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/reset-password.svelte | 115 ++++++++++++------------
 1 file changed, 59 insertions(+), 56 deletions(-)

(limited to 'apps/portal/src/app/pages/reset-password.svelte')

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>
-- 
cgit v1.3