diff options
Diffstat (limited to 'apps/portal/src/app/pages/forgot.svelte')
| -rw-r--r-- | apps/portal/src/app/pages/forgot.svelte | 67 |
1 files changed, 35 insertions, 32 deletions
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> |