summaryrefslogtreecommitdiffstats
path: root/apps/accounts/src/app
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-06-02 23:02:22 +0200
committerivarlovlie <git@ivarlovlie.no>2022-06-02 23:02:22 +0200
commit83b11393da8f733c0ffc5abed5d1e0e827d04b61 (patch)
tree0b8f1062cc7435576165c7eb1d8745842acc6c32 /apps/accounts/src/app
parent53865dad18012512f90d235f4d2833469dcc1685 (diff)
downloadgreatoffice-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.ts48
-rw-r--r--apps/accounts/src/app/index.scss21
-rw-r--r--apps/accounts/src/app/index.svelte61
-rw-r--r--apps/accounts/src/app/index.ts14
-rw-r--r--apps/accounts/src/app/pages/_layout.svelte142
-rw-r--r--apps/accounts/src/app/pages/forgot.svelte99
-rw-r--r--apps/accounts/src/app/pages/login.svelte145
-rw-r--r--apps/accounts/src/app/pages/not-found.svelte23
-rw-r--r--apps/accounts/src/app/pages/reset-password.svelte135
-rw-r--r--apps/accounts/src/app/pages/sign-up.svelte128
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>