diff options
| -rw-r--r-- | src/server/StaticData/AppConstants.cs (renamed from src/server/StaticData/Constants.cs) | 2 | ||||
| -rw-r--r-- | src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte | 50 | ||||
| -rw-r--r-- | src/webapp/src/components/carbon-extras/NativeDateInput.svelte | 21 | ||||
| -rw-r--r-- | src/webapp/src/components/forms/login-form.svelte | 128 | ||||
| -rw-r--r-- | src/webapp/src/global.d.ts | 11 | ||||
| -rw-r--r-- | src/webapp/src/styles/carbon.scss | 49 | ||||
| -rw-r--r-- | src/webapp/src/styles/global.scss | 5 |
7 files changed, 1 insertions, 265 deletions
diff --git a/src/server/StaticData/Constants.cs b/src/server/StaticData/AppConstants.cs index e0a46b1..c0c5794 100644 --- a/src/server/StaticData/Constants.cs +++ b/src/server/StaticData/AppConstants.cs @@ -1,6 +1,6 @@ namespace IOL.BookmarkThing.Server.StaticData; -public static class Constants +public static class AppConstants { public const string API_NAME = "Bookmark API"; public const string BASIC_AUTH_SCHEME = "BasicAuthenticationScheme"; diff --git a/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte b/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte deleted file mode 100644 index f7303ac..0000000 --- a/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte +++ /dev/null @@ -1,50 +0,0 @@ -<script lang="ts"> - import {ToggleSkeleton} from "carbon-components-svelte"; - import {createEventDispatcher, onMount} from "svelte"; - - const dispatch = createEventDispatcher(); - export let toggled = false; - export let size = "sm"; - - let toggle_id; - - onMount(() => { - //@ts-ignore - document.getElementById(toggle_id).checked = toggled; - }); - - function handle_click(e) { - if (e.target.classList.contains("bx--toggle")) { - //@ts-ignore - document.getElementById(toggle_id).checked = !toggled; - dispatch("toggle"); - } - } -</script> -<style lang="scss"> - .bx--switcher__item-toggle { - font-size: 0.875rem; - font-weight: 600; - line-height: 1.28572; - letter-spacing: 0.16px; - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding: 0.375rem 1rem; - color: #c6c6c6; - text-decoration: none; - } -</style> -<li class="bx--switcher__item"> - <div class="bx--switcher__item-toggle"> - <div style="display: flex;"> - <slot/> - </div> - <ToggleSkeleton size="{size}" - on:click={handle_click} - bind:id={toggle_id} - style="flex: initial !important;" - {toggled}/> - </div> -</li> diff --git a/src/webapp/src/components/carbon-extras/NativeDateInput.svelte b/src/webapp/src/components/carbon-extras/NativeDateInput.svelte deleted file mode 100644 index ccdec53..0000000 --- a/src/webapp/src/components/carbon-extras/NativeDateInput.svelte +++ /dev/null @@ -1,21 +0,0 @@ -<script lang="ts"> - import {generate_unsafe_id} from "@/lib/helpers"; - - export let value; - export let minDate; - export let label; - export let id = generate_unsafe_id(9); -</script> - -<div class="bx--date-picker-container"> - <label for="{id}" - class="bx--label">{label}</label> - <div class="bx--date-picker-input__wrapper"> - <input id="{id}" - type="date" - class="bx--date-picker__input" - placeholder="mm/dd/yyyy" - min={minDate} - bind:value> - </div> -</div> diff --git a/src/webapp/src/components/forms/login-form.svelte b/src/webapp/src/components/forms/login-form.svelte deleted file mode 100644 index a5c5653..0000000 --- a/src/webapp/src/components/forms/login-form.svelte +++ /dev/null @@ -1,128 +0,0 @@ -<script lang="ts"> - import {start_session_async} from "@/lib/stores/session"; - import type {ICreateSessionRequest} from "@/lib/models/ICreateSessionRequest"; - import {createEventDispatcher} from "svelte"; - import type {IErrorResult} from "@/lib/models/IErrorResult"; - import {Button, Checkbox, Column, Form, Grid, InlineNotification, PasswordInput, Row, TextInput, Tile} from "carbon-components-svelte"; - import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20"; - import {api_base} from "@/lib/configuration"; - - const dispatch = createEventDispatcher(); - - const form = { - loading: false, - error: {} as IErrorResult, - username: { - value: "", - error: "", - validate() { - form.username.error = ""; - let is_valid = true; - if (!form.username.value) { - form.username.error = "Username is required"; - is_valid = false; - } - return is_valid; - } - }, - password: { - value: "", - error: "", - validate() { - form.password.error = ""; - let is_valid = true; - if (!form.password.value) { - form.password.error = "Password is required"; - is_valid = false; - } - return is_valid; - } - }, - persist: { - value: false, - error: "", - validate() { - return true; - } - }, - is_valid() { - const username_is_valid = form.username.validate(); - const password_is_valid = form.password.validate(); - const persist_is_valid = form.persist.validate(); - return (username_is_valid && password_is_valid && persist_is_valid); - }, - payload(): ICreateSessionRequest { - return { - username: this.username.value, - password: this.password.value, - persist: this.persist.value - } as ICreateSessionRequest; - }, - async submit() { - if (!form.is_valid()) return; - form.error = {} as IErrorResult; - form.loading = true; - const login_request = await start_session_async(form.payload()); - form.loading = false; - if (login_request.ok) { - dispatch("authenticated"); - } else if (login_request.error) { - form.error = login_request.error; - } - } - }; -</script> - -<Tile> - <Form on:submit={form.submit}> - <Grid condensed> - <Row style="padding-bottom: 12px"> - <Column> - <h1>Login</h1> - </Column> - </Row> - {#if form.error.title || form.error.text} - <Row> - <Column> - <InlineNotification - hideCloseButton - title={form.error.title ?? ""} - subtitle={form.error.text ?? ""}/> - </Column> - </Row> - {/if} - <Row> - <Column> - <TextInput placeholder="Username" - size="sm" - invalid={form.username.error !== ""} - invalidText={form.username.error} - bind:value={form.username.value}/> - <PasswordInput placeholder="Password" - size="sm" - invalid={form.password.error !== ""} - invalidText={form.password.error} - bind:value={form.password.value}/> - </Column> - </Row> - <Row> - <Checkbox name="persist" - labelText="Persist session" - bind:checked={form.persist.value}/> - <Button type="submit" - disabled={form.loading} - size="sm"> - Submit - </Button> - </Row> - <Row> - <Button kind="secondary" - href={api_base("account/create-github-session")} - icon="{LogoGithub20}" - size="sm"> - Login with Github - </Button> - </Row> - </Grid> - </Form> -</Tile> diff --git a/src/webapp/src/global.d.ts b/src/webapp/src/global.d.ts deleted file mode 100644 index 90ee84c..0000000 --- a/src/webapp/src/global.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type {IsURLOptions} from "validator/lib/isURL"; - -declare global { - namespace n4s { - interface EnforceCustomMatchers<R> { - isURL(str: string, options?: IsURLOptions): R; - } - } -} - -export {}; diff --git a/src/webapp/src/styles/carbon.scss b/src/webapp/src/styles/carbon.scss deleted file mode 100644 index 201c0e8..0000000 --- a/src/webapp/src/styles/carbon.scss +++ /dev/null @@ -1,49 +0,0 @@ -// This is a recipe for dynamic, client-side theming - -$feature-flags: ( - // Custom CSS properties must be enabled to dynamically switch themes - enable-css-custom-properties: true, - ui-shell: true, - grid-columns-16: true -); - -$css--font-face: false; -$css--helpers: true; -$css--body: true; -$css--use-layer: true; -$css--reset: true; -$css--default-type: true; -$css--plex: true; - -// Use all Carbon themes -@import "../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; -@import "../node_modules/carbon-components/scss/globals/scss/component-tokens"; -@import "../node_modules/carbon-components/src/components/tag/tag"; -@import "../node_modules/carbon-components/src/components/notification/inline-notification"; -@import "../node_modules/carbon-components/src/components/notification/toast-notification"; - -// The default theme is "white" (White) -:root { - @include carbon--theme($carbon--theme--white, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } -} - -// Set the <html> theme attribute to "g100" to use the Gray 100 theme -// <html theme="g100"> -:root[theme="g100"] { - @include carbon--theme($carbon--theme--g100, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } -} - -@import "../node_modules/carbon-components/scss/globals/scss/_css--reset"; -@import "../node_modules/carbon-components/scss/globals/scss/_css--font-face"; -@import "../node_modules/carbon-components/scss/globals/scss/_css--helpers"; -@import "../node_modules/carbon-components/scss/globals/scss/_css--body"; -@import "../node_modules/carbon-components/scss/globals/grid/grid"; - -// Import all component styles -@import "../node_modules/carbon-components/scss/globals/scss/styles"; diff --git a/src/webapp/src/styles/global.scss b/src/webapp/src/styles/global.scss deleted file mode 100644 index 49d45a7..0000000 --- a/src/webapp/src/styles/global.scss +++ /dev/null @@ -1,5 +0,0 @@ -textarea { - min-height: 39px !important; - resize: vertical; -} - |