diff options
Diffstat (limited to 'apps/portal/src/app/pages/reset-password.svelte')
| -rw-r--r-- | apps/portal/src/app/pages/reset-password.svelte | 115 |
1 files changed, 59 insertions, 56 deletions
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> |