diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-02 23:02:22 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-02 23:02:22 +0200 |
| commit | 83b11393da8f733c0ffc5abed5d1e0e827d04b61 (patch) | |
| tree | 0b8f1062cc7435576165c7eb1d8745842acc6c32 /apps/accounts/src/app | |
| parent | 53865dad18012512f90d235f4d2833469dcc1685 (diff) | |
| download | greatoffice-83b11393da8f733c0ffc5abed5d1e0e827d04b61.tar.xz greatoffice-83b11393da8f733c0ffc5abed5d1e0e827d04b61.zip | |
refactor: Rename accounts to portal
Diffstat (limited to 'apps/accounts/src/app')
| -rw-r--r-- | apps/accounts/src/app/index.d.ts | 48 | ||||
| -rw-r--r-- | apps/accounts/src/app/index.scss | 21 | ||||
| -rw-r--r-- | apps/accounts/src/app/index.svelte | 61 | ||||
| -rw-r--r-- | apps/accounts/src/app/index.ts | 14 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/_layout.svelte | 142 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/forgot.svelte | 99 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/login.svelte | 145 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/not-found.svelte | 23 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/reset-password.svelte | 135 | ||||
| -rw-r--r-- | apps/accounts/src/app/pages/sign-up.svelte | 128 |
10 files changed, 0 insertions, 816 deletions
diff --git a/apps/accounts/src/app/index.d.ts b/apps/accounts/src/app/index.d.ts deleted file mode 100644 index c044583..0000000 --- a/apps/accounts/src/app/index.d.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* Use this file to declare any custom file extensions for importing */ -/* Use this folder to also add/extend a package d.ts file, if needed. */ - -/* CSS MODULES */ -declare module "*.module.css" { - const classes: { [key: string]: string }; - export default classes; -} -declare module "*.module.scss" { - const classes: { [key: string]: string }; - export default classes; -} - -/* CSS */ -declare module "*.css"; -declare module "*.scss"; - -/* IMAGES */ -declare module "*.svg" { - const ref: string; - export default ref; -} -declare module "*.bmp" { - const ref: string; - export default ref; -} -declare module "*.gif" { - const ref: string; - export default ref; -} -declare module "*.jpg" { - const ref: string; - export default ref; -} -declare module "*.jpeg" { - const ref: string; - export default ref; -} -declare module "*.png" { - const ref: string; - export default ref; -} - -/* CUSTOM: ADD YOUR OWN HERE */ -declare module "*.svelte" { - const value: any; - export default value; -} diff --git a/apps/accounts/src/app/index.scss b/apps/accounts/src/app/index.scss deleted file mode 100644 index 56ac1c0..0000000 --- a/apps/accounts/src/app/index.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use '../../web-shared/src/styles/base'as * with ($breakpoints: ('xs': "768px", - 'sm': "768px", - 'md': "1200px", - 'lg': "1200px", - 'xl': "1600px", - ), - $grid-columns: 12); - -@use '../../web-shared/src/styles/custom-style/colors'; -@use '../../web-shared/src/styles/custom-style/spacing'; -@use '../../web-shared/src/styles/custom-style/shared-styles'; -@use '../../web-shared/src/styles/custom-style/typography'; -@use '../../web-shared/src/styles/custom-style/icons'; -@use '../../web-shared/src/styles/custom-style/buttons'; -@use '../../web-shared/src/styles/custom-style/forms'; -@use '../../web-shared/src/styles/custom-style/util'; - -@use '../../web-shared/src/styles/components/radios-checkboxes'; -@use '../../web-shared/src/styles/components/btn-states'; -@use '../../web-shared/src/styles/components/alert'; -@use '../../web-shared/src/styles/components/details'; diff --git a/apps/accounts/src/app/index.svelte b/apps/accounts/src/app/index.svelte deleted file mode 100644 index 40fe6ae..0000000 --- a/apps/accounts/src/app/index.svelte +++ /dev/null @@ -1,61 +0,0 @@ -<svelte:options immutable={true}/> -<svelte:window bind:online={online}/> - -<script> - import {projects_base} from "$shared/lib/configuration"; - 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"; - - let online = true; - - async function user_is_logged_in() { - if (await is_active()) { - location.replace(projects_base("#/home")); - } - return true; - } - - const routes = { - "/login": wrap({ - component: Login, - conditions: [user_is_logged_in], - }), - "/": wrap({ - component: Login, - conditions: [user_is_logged_in], - }), - "/signup": wrap({ - component: SignUp, - conditions: [user_is_logged_in], - }), - "/reset-password": wrap({ - component: Reset, - conditions: [user_is_logged_in], - }), - "/forgot": wrap({ - component: Forgot, - conditions: [user_is_logged_in], - }), - "*": NotFound, - }; -</script> - -<PreHeader show="{!online}">You seem to be offline, please check your internet connection.</PreHeader> - -<Router - {routes} - restoreScrollState={true} - on:routeLoading={() => { - document.getElementById("loader").style.display = "inline-block"; - }} - on:routeLoaded={() => { - document.getElementById("loader").style.display = "none"; - }} -/> diff --git a/apps/accounts/src/app/index.ts b/apps/accounts/src/app/index.ts deleted file mode 100644 index 0bfb30d..0000000 --- a/apps/accounts/src/app/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import App from "./index.svelte"; -import "./index.scss"; -import {is_debug, is_development} from "$shared/lib/configuration"; -import {noop} from "$shared/lib/helpers"; - -if (!is_development() && !is_debug()) { - console.log("%c Production; Suppressing logs", "background-color:yellow;color:black;font-size:18px;"); - console.log = noop; -} - -// @ts-ignore -export default new App({ - target: document.getElementById("root"), -}); diff --git a/apps/accounts/src/app/pages/_layout.svelte b/apps/accounts/src/app/pages/_layout.svelte deleted file mode 100644 index 8c2e4a8..0000000 --- a/apps/accounts/src/app/pages/_layout.svelte +++ /dev/null @@ -1,142 +0,0 @@ -<script> - import Details from "$shared/components/details.svelte"; - import Button from "$shared/components/button.svelte"; - import {switch_theme} from "$shared/lib/helpers"; -</script> - -<style> - #decoration { - position: absolute; - top: 0; - left: 0; - pointer-events: none; - width: 100%; - height: 100%; - overflow: hidden; - } - - #decoration svg { - position: absolute; - top: 0; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - width: 134%; - min-width: 1280px; - max-width: 1920px; - height: auto; - } -</style> - -<main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm"> - <slot/> - - <Details summary="About"> - <p>Time Tracker is a tool to keep track of time spent.</p> - <p>Use demo@demo.demo 123456 to demo the app.</p> - <a href="https://git.ivarlovlie.no/time-tracker">Source</a> - <a href="https://git.ivarlovlie.no/time-tracker/tree/LICENSE">License</a> - <a href="/assets/third-party-licenses.txt">License notices</a> - </Details> - - <Details summary="Pricing"/> - - <Details summary="Privacy policy"> - <h3>Information we collect</h3> - <p>We collect information you the user provide, explicitly this means:</p> - <ul> - <li>Username</li> - <li>Password</li> - <li>Entries generated by you</li> - <li>Labels generated by you</li> - <li>Categories generated by you</li> - <li>Your IP address when making requests to our API (using the service)</li> - </ul> - - <h3>How we use your information</h3> - <p>We use your information to provide the time-tracker service.</p> - - <h3>How we share your information</h3> - <p> - We do not share your information with anyone nor any entity. All information is handled by us the provider and you the user - exclusively. - </p> - - <h3>Right to delete</h3> - <p> - You can at any time delete any data related to your personal information by navigating to your profile page inside of the - service. - </p> - - <h3>Right to inspect</h3> - <p>You can at any time download all of your generated data by navigating to your profile page inside of the service.</p> - - <h3>Contact</h3> - <p>Please direct any inquires about your personal data to time-tracker@ivarlovlie.no.</p> - </Details> - - <Details summary="Terms of service"/> - - <Button on:click={() => switch_theme()} - text="Switch theme" - variant="secondary"/> - - <figure id="decoration" - aria-hidden="true"> - <svg class="color-contrast-higher opacity-10%" - viewBox="0 0 1920 450" - fill="none"> - <g stroke="currentColor" - stroke-width="2"> - <rect x="1286" - y="64" - width="128" - height="128"/> - <circle cx="1350" - cy="128" - r="64"/> - <path d="M1286 64L1414 192"/> - <circle cx="1478" - cy="128" - r="64"/> - <rect x="1414" - y="192" - width="128" - height="128"/> - <circle cx="1478" - cy="256" - r="64"/> - <path d="M1414 192L1542 320"/> - <circle cx="1606" - cy="256" - r="64"/> - <rect x="1542" - y="320" - width="128" - height="128"/> - <circle cx="1606" - cy="384" - r="64"/> - <path d="M1542 320L1670 448"/> - <rect x="1690" - y="192" - width="128" - height="128"/> - <circle cx="1754" - cy="256" - r="64"/> - <path d="M1690 192L1818 320"/> - <rect x="1542" - y="64" - width="128" - height="128"/> - <circle cx="1606" - cy="128" - r="64"/> - <path d="M1542 64L1670 192"/> - <circle cx="1478" - r="64"/> - </g> - </svg> - </figure> -</main> diff --git a/apps/accounts/src/app/pages/forgot.svelte b/apps/accounts/src/app/pages/forgot.svelte deleted file mode 100644 index f22d664..0000000 --- a/apps/accounts/src/app/pages/forgot.svelte +++ /dev/null @@ -1,99 +0,0 @@ -<script> - import {onMount} from "svelte"; - import {link} from "svelte-spa-router"; - import {create_forgot_password_request} from "$shared/lib/api/user"; - import {is_email} from "$shared/lib/helpers"; - import Alert from "$shared/components/alert.svelte"; - import Button from "$shared/components/button.svelte"; - import Layout from "./_layout.svelte"; - - let isLoading = false; - let username; - - const alert = { - title: "", - type: "", - message: "", - isVisible: false, - show(type, obj) { - alert.title = obj.title; - alert.message = obj.text; - alert.type = type; - alert.isVisible = true; - isLoading = false; - }, - hide() { - alert.isVisible = false; - alert.title = ""; - alert.message = ""; - alert.type = ""; - isLoading = false; - }, - }; - - function is_valid() { - return is_email(username); - } - - async function submit_form() { - if (isLoading) { - return; - } - if (is_valid()) { - isLoading = true; - const response = await create_forgot_password_request(username); - if (response.ok) { - alert.show("success", { - title: "Request is sent", - text: "If we find an account associated with this email address, you will receive an email with a reset link very soon.", - }); - } else { - console.error(response.data); - alert.show("error", { - title: response.data?.title ?? "An error occured", - text: response.data?.text ?? "Please try again soon", - }); - } - } - } - - onMount(() => { - document.addEventListener("DOMContentLoaded", () => { - document.getElementById("email-address").focus(); - }); - }); -</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> -</Layout> diff --git a/apps/accounts/src/app/pages/login.svelte b/apps/accounts/src/app/pages/login.svelte deleted file mode 100644 index 3324056..0000000 --- a/apps/accounts/src/app/pages/login.svelte +++ /dev/null @@ -1,145 +0,0 @@ -<script> - import {onMount} from "svelte"; - import {link, querystring} from "svelte-spa-router"; - 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 {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: "", - }, - 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) { - location.replace(projects_base("#/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) { - console.error(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> - <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> - </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> -</Layout> diff --git a/apps/accounts/src/app/pages/not-found.svelte b/apps/accounts/src/app/pages/not-found.svelte deleted file mode 100644 index 34568ba..0000000 --- a/apps/accounts/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/accounts/src/app/pages/reset-password.svelte b/apps/accounts/src/app/pages/reset-password.svelte deleted file mode 100644 index 56c4f62..0000000 --- a/apps/accounts/src/app/pages/reset-password.svelte +++ /dev/null @@ -1,135 +0,0 @@ -<script> - import {querystring, link} from "svelte-spa-router"; - 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 Layout from "./_layout.svelte"; - - const requestId = new URLSearchParams($querystring).get("id"); - let isLoading = false; - let newPassword; - let newPasswordError; - let alert = { - title: "", - type: "", - message: "", - isVisible: false, - show(type, obj) { - alert.title = obj.title; - alert.message = obj.text; - alert.type = type; - alert.isVisible = true; - isLoading = false; - }, - hide() { - alert.isVisible = false; - alert.title = ""; - alert.message = ""; - alert.type = ""; - isLoading = false; - }, - }; - - function is_valid() { - let isValid = true; - if (!newPassword.length > 5) { - newPasswordError = "The new password must be at least 5 characters"; - isValid = false; - } - return isValid; - } - - async function submit() { - if (isLoading) { - return; - } - if (is_valid()) { - isLoading = true; - const response = await fulfill_forgot_password_request(requestId, newPassword); - if (response.ok) { - alert.show("success", { - title: "Your new password is set", - text: "<a href='/#/login'>Click here to log in</a>", - }); - } else { - console.error(response.data); - alert.show("error", { - title: response.data?.title ?? "An error occured", - text: response.data?.text ?? "Please try again soon", - }); - } - } - } - - async function is_valid_password_reset_request() { - const response = await check_forgot_password_request(requestId); - if (response.ok) { - return response.data === true; - } - return false; - } -</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"> - ... 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}/> - </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> -</Layout> diff --git a/apps/accounts/src/app/pages/sign-up.svelte b/apps/accounts/src/app/pages/sign-up.svelte deleted file mode 100644 index 80780e0..0000000 --- a/apps/accounts/src/app/pages/sign-up.svelte +++ /dev/null @@ -1,128 +0,0 @@ -<script> - import {create_account} from "$shared/lib/api/user"; - import {is_email} from "$shared/lib/helpers"; - import Alert from "$shared/components/alert.svelte"; - import Button from "$shared/components/button.svelte"; - import {link} from "svelte-spa-router"; - import Layout from "./_layout.svelte"; - - const signupForm = { - loading: false, - values: { - username: "", - password: "", - }, - alert: { - title: "", - type: "", - message: "", - isVisible: false, - show(type, obj) { - signupForm.alert.title = obj.title; - signupForm.alert.message = obj.text; - signupForm.alert.type = type; - signupForm.alert.isVisible = true; - signupForm.loading = false; - }, - hide() { - signupForm.alert.isVisible = false; - signupForm.alert.title = ""; - signupForm.alert.message = ""; - signupForm.alert.type = ""; - }, - }, - is_valid() { - return ( - is_email(signupForm.values.username) && - signupForm.values.password.length > 0 - ); - }, - async submit_form() { - if (signupForm.loading) { - return; - } - if (signupForm.is_valid()) { - signupForm.alert.hide(); - signupForm.loading = true; - try { - const response = await create_account(signupForm.values); - if (response.ok) { - location.reload(); - } else { - if (response.data.title || response.data.text) { - signupForm.alert.show("error", { - title: response.data.title ?? "", - text: response.data.text ?? "", - }); - } else { - signupForm.alert.show("error", { - title: "An unknown error occured", - text: "Try again soon", - }); - } - } - } catch (e) { - console.error(e); - signupForm.alert.show("error", { - title: "An error occured", - text: "Could not connect to server, please check your internet connection", - }); - } - } else { - signupForm.alert.show("error", { - title: "Invalid form", - }); - } - }, - }; -</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> -</Layout> |
