From 939d4799b40f1e263a83d3a90340a7cb70d1cb68 Mon Sep 17 00:00:00 2001 From: LucHeart Date: Sat, 7 Feb 2026 22:28:33 +0100 Subject: [PATCH 1/6] rework login form --- .gitignore | 2 + src/lib/components/Turnstile.svelte | 2 +- src/lib/components/input/PasswordInput.svelte | 15 +- src/lib/components/input/TextInput.svelte | 21 ++- src/lib/components/login-form.svelte | 131 ++++++++++++++++++ src/lib/components/svg/DiscordIcon.svelte | 4 +- .../components/ui/field/field-content.svelte | 20 +++ .../ui/field/field-description.svelte | 25 ++++ .../components/ui/field/field-error.svelte | 58 ++++++++ .../components/ui/field/field-group.svelte | 23 +++ .../components/ui/field/field-label.svelte | 26 ++++ .../components/ui/field/field-legend.svelte | 29 ++++ .../ui/field/field-separator.svelte | 38 +++++ src/lib/components/ui/field/field-set.svelte | 24 ++++ .../components/ui/field/field-title.svelte | 23 +++ src/lib/components/ui/field/field.svelte | 53 +++++++ src/lib/components/ui/field/index.ts | 33 +++++ src/routes/(anonymous)/login/+page.svelte | 92 +----------- 18 files changed, 522 insertions(+), 97 deletions(-) create mode 100644 src/lib/components/login-form.svelte create mode 100644 src/lib/components/ui/field/field-content.svelte create mode 100644 src/lib/components/ui/field/field-description.svelte create mode 100644 src/lib/components/ui/field/field-error.svelte create mode 100644 src/lib/components/ui/field/field-group.svelte create mode 100644 src/lib/components/ui/field/field-label.svelte create mode 100644 src/lib/components/ui/field/field-legend.svelte create mode 100644 src/lib/components/ui/field/field-separator.svelte create mode 100644 src/lib/components/ui/field/field-set.svelte create mode 100644 src/lib/components/ui/field/field-title.svelte create mode 100644 src/lib/components/ui/field/field.svelte create mode 100644 src/lib/components/ui/field/index.ts diff --git a/.gitignore b/.gitignore index b67af474..623ad58e 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ vite.config.ts.timestamp-* # Other package managers package-lock.json yarn.lock + +.claude diff --git a/src/lib/components/Turnstile.svelte b/src/lib/components/Turnstile.svelte index 77beb78d..7bdcb28f 100644 --- a/src/lib/components/Turnstile.svelte +++ b/src/lib/components/Turnstile.svelte @@ -66,7 +66,7 @@ -
+
{#if !mounted}
(showPopup = false)} popup={showPopup ? (popup as Snippet) : undefined} > + {#snippet labelSnippet(id: string)} +
+ Password + + Forgot your password? + +
+ {/snippet} {#snippet after()} + +
+ +
+ + + Or continue with + +
+
+
+ + + + + +
+ + + + Don't have an account? Sign up + + +
+
+ + + + + By clicking continue, you agree to our Terms of Service + and Privacy Policy. + +
diff --git a/src/lib/components/svg/DiscordIcon.svelte b/src/lib/components/svg/DiscordIcon.svelte index 6421e5eb..9ac6aeb6 100644 --- a/src/lib/components/svg/DiscordIcon.svelte +++ b/src/lib/components/svg/DiscordIcon.svelte @@ -3,10 +3,10 @@ class?: string; } - let props: Props = $props(); + let { class: className = 'fill-black dark:fill-white' }: Props = $props(); - + Discord + import { cn, type WithElementRef } from "$lib/utils/shadcn.js"; + import type { HTMLAttributes } from "svelte/elements"; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef> = $props(); + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/field/field-description.svelte b/src/lib/components/ui/field/field-description.svelte new file mode 100644 index 00000000..655f695a --- /dev/null +++ b/src/lib/components/ui/field/field-description.svelte @@ -0,0 +1,25 @@ + + +

a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", + className + )} + {...restProps} +> + {@render children?.()} +

diff --git a/src/lib/components/ui/field/field-error.svelte b/src/lib/components/ui/field/field-error.svelte new file mode 100644 index 00000000..bc2913a6 --- /dev/null +++ b/src/lib/components/ui/field/field-error.svelte @@ -0,0 +1,58 @@ + + +{#if hasContent} + +{/if} diff --git a/src/lib/components/ui/field/field-group.svelte b/src/lib/components/ui/field/field-group.svelte new file mode 100644 index 00000000..a25a55fe --- /dev/null +++ b/src/lib/components/ui/field/field-group.svelte @@ -0,0 +1,23 @@ + + +
[data-slot=field-group]]:gap-4", + className + )} + {...restProps} +> + {@render children?.()} +
diff --git a/src/lib/components/ui/field/field-label.svelte b/src/lib/components/ui/field/field-label.svelte new file mode 100644 index 00000000..5257b92b --- /dev/null +++ b/src/lib/components/ui/field/field-label.svelte @@ -0,0 +1,26 @@ + + + diff --git a/src/lib/components/ui/field/field-legend.svelte b/src/lib/components/ui/field/field-legend.svelte new file mode 100644 index 00000000..77068e28 --- /dev/null +++ b/src/lib/components/ui/field/field-legend.svelte @@ -0,0 +1,29 @@ + + + + {@render children?.()} + diff --git a/src/lib/components/ui/field/field-separator.svelte b/src/lib/components/ui/field/field-separator.svelte new file mode 100644 index 00000000..498e8c6a --- /dev/null +++ b/src/lib/components/ui/field/field-separator.svelte @@ -0,0 +1,38 @@ + + +
+ + {#if children} + + {@render children()} + + {/if} +
diff --git a/src/lib/components/ui/field/field-set.svelte b/src/lib/components/ui/field/field-set.svelte new file mode 100644 index 00000000..03f24699 --- /dev/null +++ b/src/lib/components/ui/field/field-set.svelte @@ -0,0 +1,24 @@ + + +
[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", + className + )} + {...restProps} +> + {@render children?.()} +
diff --git a/src/lib/components/ui/field/field-title.svelte b/src/lib/components/ui/field/field-title.svelte new file mode 100644 index 00000000..02415109 --- /dev/null +++ b/src/lib/components/ui/field/field-title.svelte @@ -0,0 +1,23 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/field/field.svelte b/src/lib/components/ui/field/field.svelte new file mode 100644 index 00000000..c4a5f1ad --- /dev/null +++ b/src/lib/components/ui/field/field.svelte @@ -0,0 +1,53 @@ + + + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/field/index.ts b/src/lib/components/ui/field/index.ts new file mode 100644 index 00000000..a644a956 --- /dev/null +++ b/src/lib/components/ui/field/index.ts @@ -0,0 +1,33 @@ +import Field from "./field.svelte"; +import Set from "./field-set.svelte"; +import Legend from "./field-legend.svelte"; +import Group from "./field-group.svelte"; +import Content from "./field-content.svelte"; +import Label from "./field-label.svelte"; +import Title from "./field-title.svelte"; +import Description from "./field-description.svelte"; +import Separator from "./field-separator.svelte"; +import Error from "./field-error.svelte"; + +export { + Field, + Set, + Legend, + Group, + Content, + Label, + Title, + Description, + Separator, + Error, + // + Set as FieldSet, + Legend as FieldLegend, + Group as FieldGroup, + Content as FieldContent, + Label as FieldLabel, + Title as FieldTitle, + Description as FieldDescription, + Separator as FieldSeparator, + Error as FieldError, +}; diff --git a/src/routes/(anonymous)/login/+page.svelte b/src/routes/(anonymous)/login/+page.svelte index 1c7fc727..fb9c8e05 100644 --- a/src/routes/(anonymous)/login/+page.svelte +++ b/src/routes/(anonymous)/login/+page.svelte @@ -1,94 +1,8 @@ - -
-
Login
- - - - - - - - - - - Forgot your password? - - - -
- -
+ + From 61f709ecb6f0555ef51541641d8adf6a7aa80f49 Mon Sep 17 00:00:00 2001 From: LucHeart Date: Sat, 7 Feb 2026 22:35:31 +0100 Subject: [PATCH 2/6] add logo --- src/routes/(anonymous)/login/+page.svelte | 9 +++++++++ src/routes/Sidebar.svelte | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/routes/(anonymous)/login/+page.svelte b/src/routes/(anonymous)/login/+page.svelte index fb9c8e05..c37d82ef 100644 --- a/src/routes/(anonymous)/login/+page.svelte +++ b/src/routes/(anonymous)/login/+page.svelte @@ -1,8 +1,17 @@ + + OpenShock Logo + OpenShock Logo + diff --git a/src/routes/Sidebar.svelte b/src/routes/Sidebar.svelte index 7d716ad5..b27be378 100644 --- a/src/routes/Sidebar.svelte +++ b/src/routes/Sidebar.svelte @@ -301,7 +301,7 @@ OpenShock Logo From 0c2dbb1e29f14afc664ed2ddec2d8f7152cb58a6 Mon Sep 17 00:00:00 2001 From: LucHeart Date: Sun, 8 Feb 2026 00:03:03 +0100 Subject: [PATCH 3/6] reworked the footer, woops --- src/lib/components/input/PasswordInput.svelte | 3 +- src/lib/components/input/TextInput.svelte | 44 +++++++++----- src/lib/components/login-form.svelte | 6 +- src/routes/(anonymous)/login/+page.svelte | 6 +- src/routes/Footer.svelte | 60 +++++++++++++++---- 5 files changed, 84 insertions(+), 35 deletions(-) diff --git a/src/lib/components/input/PasswordInput.svelte b/src/lib/components/input/PasswordInput.svelte index 0ae8036e..72030396 100644 --- a/src/lib/components/input/PasswordInput.svelte +++ b/src/lib/components/input/PasswordInput.svelte @@ -151,9 +151,10 @@ {#snippet after()}
diff --git a/src/routes/(anonymous)/login/+page.svelte b/src/routes/(anonymous)/login/+page.svelte index c37d82ef..e95ad92f 100644 --- a/src/routes/(anonymous)/login/+page.svelte +++ b/src/routes/(anonymous)/login/+page.svelte @@ -4,14 +4,14 @@ import { asset, resolve } from '$app/paths'; - - + + OpenShock Logo OpenShock Logo - + diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index 5509657f..35d20f1f 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -3,27 +3,61 @@ import { browser } from '$app/environment'; import { PUBLIC_GITHUB_PROJECT_URL } from '$env/static/public'; import { SignalR_State } from '$lib/signalr'; + import { Wifi, WifiOff } from '@lucide/svelte'; + import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'; + import { Button } from '$lib/components/ui/button'; const version = browser && sessionStorage.getItem('backendVersion'); -