diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
| commit | a9072370ca1eb9a5cce928b1d487db0f307edea6 (patch) | |
| tree | 59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/portal/src/app/pages/login.svelte | |
| parent | 56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff) | |
| download | greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip | |
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/portal/src/app/pages/login.svelte')
| -rw-r--r-- | old-apps/portal/src/app/pages/login.svelte | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/old-apps/portal/src/app/pages/login.svelte b/old-apps/portal/src/app/pages/login.svelte new file mode 100644 index 0000000..1ca6b61 --- /dev/null +++ b/old-apps/portal/src/app/pages/login.svelte @@ -0,0 +1,142 @@ +<script> + import {onMount} from "svelte"; + import {link, replace, querystring} from "svelte-spa-router"; + import {api_base, IconNames, frontpage_base} 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"; + + const loginForm = { + loading: false, + values: { + username: "", + password: "", + persist: true + }, + alert: { + title: "", + type: "", + message: "", + isVisible: false, + show(type, obj) { + loginForm.alert.title = obj.title; + loginForm.alert.message = obj.text; + loginForm.alert.type = type; + loginForm.alert.isVisible = true; + loginForm.loading = false; + }, + hide() { + loginForm.alert.isVisible = false; + loginForm.alert.title = ""; + loginForm.alert.message = ""; + loginForm.alert.type = ""; + }, + }, + is_valid() { + return is_email(loginForm.values.username) && loginForm.values.password.length > 0; + }, + async submit_form() { + if (loginForm.loading) { + return; + } + if (loginForm.is_valid()) { + loginForm.alert.hide(); + loginForm.loading = true; + try { + const response = await login(loginForm.values); + if (response.ok) { + await replace("#/home"); + } else { + if (response.data.title || response.data.text) { + loginForm.alert.show("error", { + title: response.data.title ?? "", + text: response.data.text ?? "", + }); + } else { + loginForm.alert.show("error", { + title: "An unknown error occured", + text: "Try again soon", + }); + } + } + } catch (e) { + loginForm.alert.show("error", { + title: "An error occured", + text: "Could not connect to server, please check your internet connection", + }); + } + } else { + loginForm.alert.show("error", { + title: "Invalid form", + }); + } + }, + }; + + onMount(() => { + if ($querystring === "deleted") { + loginForm.alert.show("info", { + title: "Account deleted", + text: "Your account and all its data was successfully deleted.", + }); + } + if ($querystring === "expired") { + loginForm.alert.show("info", { + title: "Session expired", + text: "Your session has expired, feel free to log in again.", + }); + } + }); +</script> + +<Layout> + <a href="{frontpage_base()}" class="block margin-bottom-xs">Go to {frontpage_base()}</a> + <Tile> + <form on:submit|preventDefault={loginForm.submit_form} + class="max-width-xxs"> + <fieldset> + <legend class="form-legend"> + <span class="margin-bottom-xs text-xl">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> + </div> + </div> + <div class="flex justify-between"> + <Button text="Login" + type="submit" + variant="primary" + loading={loginForm.loading}/> + </div> + </fieldset> + </form> + </Tile> +</Layout> |
