summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/portal/src/app/index.svelte6
-rw-r--r--apps/portal/src/app/pages/_layout.svelte9
-rw-r--r--apps/portal/src/app/pages/forgot.svelte67
-rw-r--r--apps/portal/src/app/pages/login.svelte101
-rw-r--r--apps/portal/src/app/pages/not-found.svelte23
-rw-r--r--apps/portal/src/app/pages/reset-password.svelte115
-rw-r--r--apps/portal/src/app/pages/sign-up.svelte91
-rw-r--r--apps/portal/src/index.html4
8 files changed, 200 insertions, 216 deletions
diff --git a/apps/portal/src/app/index.svelte b/apps/portal/src/app/index.svelte
index 40fe6ae..0082aa2 100644
--- a/apps/portal/src/app/index.svelte
+++ b/apps/portal/src/app/index.svelte
@@ -6,12 +6,11 @@
import Router from "svelte-spa-router";
import {wrap} from "svelte-spa-router/wrap";
import {is_active} from "$shared/lib/session";
- import NotFound from "$app/pages/not-found.svelte";
import SignUp from "$app/pages/sign-up.svelte";
import Login from "$app/pages/login.svelte";
import Forgot from "$app/pages/forgot.svelte";
import Reset from "$app/pages/reset-password.svelte";
- import PreHeader from "$shared/components/pre-header.svelte";
+ import PreHeader from "$shared/components/pre-header.svelte";
let online = true;
@@ -42,8 +41,7 @@
"/forgot": wrap({
component: Forgot,
conditions: [user_is_logged_in],
- }),
- "*": NotFound,
+ })
};
</script>
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>
diff --git a/apps/portal/src/index.html b/apps/portal/src/index.html
index 985b62b..0bf1fb1 100644
--- a/apps/portal/src/index.html
+++ b/apps/portal/src/index.html
@@ -35,7 +35,7 @@
</script>
<link rel="stylesheet"
href="./_assets/pre.css">
- <title>Time Tracker</title>
+ <title>Projects - Greatoffice</title>
</head>
<body>
@@ -47,7 +47,7 @@
<div class="fill-loader fill-loader--v4"
id="loader"
role="alert">
- <p class="fill-loader__label">Loading Time Tracker...</p>
+ <p class="fill-loader__label">Loading Projects...</p>
<div aria-hidden="true">
<div class="fill-loader__base"></div>
<div class="fill-loader__fill"></div>
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 16:20:14 +0100