From a0f0062bdbbff7b2e4eac3ed91a60bf9f4a3233a Mon Sep 17 00:00:00 2001 From: sebadob Date: Mon, 20 Jan 2025 14:04:35 +0100 Subject: [PATCH 1/9] migrate account view to new template setup + first sv5 components --- dev_notes.md | 4 + frontend/src/api/fetch.ts | 2 +- .../{errorResponse.ts => common/error.ts} | 2 +- frontend/src/api/response/common/language.ts | 1 + frontend/src/api/response/common/session.ts | 9 + frontend/src/api/response/common/user.ts | 41 +++ frontend/src/api/templates/authProvider.ts | 6 + .../src/components/account/AccDevices.svelte | 4 +- .../src/components/account/AccInfo.svelte | 30 +- frontend/src/components/account/AccMFA.svelte | 4 +- .../src/components/account/AccMain.svelte | 67 ++--- frontend/src/i18n/de.ts | 1 + frontend/src/i18n/en.ts | 1 + frontend/src/i18n/interface.ts | 1 + frontend/src/i18n/ko.ts | 1 + frontend/src/i18n/zh.ts | 1 + frontend/src/lib/Modal.svelte | 2 + frontend/src/lib_svelte5/Button.svelte | 282 ++++++++++++++++++ frontend/src/lib_svelte5/Loading.svelte | 100 +++++++ frontend/src/lib_svelte5/Modal.svelte | 154 ++++++++++ frontend/src/lib_svelte5/Template.svelte | 4 +- .../src/lib_svelte5/icons/IconStop.svelte | 21 ++ frontend/src/routes/account/+page.svelte | 26 +- .../src/routes/oidc/authorize/+page.svelte | 12 +- frontend/src/types/icon.ts | 5 + frontend/svelte.config.js | 1 + 26 files changed, 696 insertions(+), 86 deletions(-) rename frontend/src/api/response/{errorResponse.ts => common/error.ts} (65%) create mode 100644 frontend/src/api/response/common/language.ts create mode 100644 frontend/src/api/response/common/session.ts create mode 100644 frontend/src/api/response/common/user.ts create mode 100644 frontend/src/api/templates/authProvider.ts create mode 100644 frontend/src/lib_svelte5/Button.svelte create mode 100644 frontend/src/lib_svelte5/Loading.svelte create mode 100644 frontend/src/lib_svelte5/Modal.svelte create mode 100644 frontend/src/lib_svelte5/icons/IconStop.svelte create mode 100644 frontend/src/types/icon.ts diff --git a/dev_notes.md b/dev_notes.md index 4c4b2b076..0e0b64c1c 100644 --- a/dev_notes.md +++ b/dev_notes.md @@ -2,6 +2,10 @@ ## CURRENT WORK +### Missing i18n (zh/ko) for Svelte 5 Migration: + +- `t.common.close` + ## Stage 1 - essentials [x] finished diff --git a/frontend/src/api/fetch.ts b/frontend/src/api/fetch.ts index 4817cabb9..578ea7d4e 100644 --- a/frontend/src/api/fetch.ts +++ b/frontend/src/api/fetch.ts @@ -1,5 +1,5 @@ import {CSRF_TOKEN} from "../utils/constants"; -import {type ErrorResponse} from "$api/response/errorResponse.ts"; +import {type ErrorResponse} from "$api/response/error.ts"; export interface IResponse { body: undefined | T, diff --git a/frontend/src/api/response/errorResponse.ts b/frontend/src/api/response/common/error.ts similarity index 65% rename from frontend/src/api/response/errorResponse.ts rename to frontend/src/api/response/common/error.ts index 6a797fa26..584bb29ce 100644 --- a/frontend/src/api/response/errorResponse.ts +++ b/frontend/src/api/response/common/error.ts @@ -1,4 +1,4 @@ -export interface ErrorResponse { +export interface Error { timestamp: number, error: string, message: string, diff --git a/frontend/src/api/response/common/language.ts b/frontend/src/api/response/common/language.ts new file mode 100644 index 000000000..a415787ea --- /dev/null +++ b/frontend/src/api/response/common/language.ts @@ -0,0 +1 @@ +export type Language = 'en' | 'de' | 'zhhans' | 'ko'; \ No newline at end of file diff --git a/frontend/src/api/response/common/session.ts b/frontend/src/api/response/common/session.ts new file mode 100644 index 000000000..5ea45d2fb --- /dev/null +++ b/frontend/src/api/response/common/session.ts @@ -0,0 +1,9 @@ +export interface SessionResponse { + id: string, + user_id?: string, + is_mfa: boolean, + state: 'Open' | 'Init' | 'Auth' | 'LoggedOut' | 'Unknown', + exp: number, + last_seen: number, + remote_ip?: string, +} \ No newline at end of file diff --git a/frontend/src/api/response/common/user.ts b/frontend/src/api/response/common/user.ts new file mode 100644 index 000000000..e6efd4e6a --- /dev/null +++ b/frontend/src/api/response/common/user.ts @@ -0,0 +1,41 @@ +import type {Language} from "$api/response/common/language.ts"; + +export type UserAccountTypeResponse = + 'New' + | 'Password' + | 'Passkey' + | 'Federated' + | 'FederatedPasskey' + | 'FederatedPassword'; + +export interface UserResponse { + id: string, + email: string, + given_name: string, + family_name?: string, + language: Language, + roles: string[], + groups?: string[], + enabled: boolean, + email_verified: boolean, + password_expires?: number, + created_at: number, + last_login?: number, + last_failed_login?: number, + failed_login_attempts?: number, + user_expires?: number, + account_type: UserAccountTypeResponse, + webauthn_user_id?: string, + user_values: UserValuesResponse, + auth_provider_id?: string, + federation_uid?: string, +} + +export interface UserValuesResponse { + birthdate?: string, + phone?: string, + street?: string, + zip?: number, + city?: string, + country?: string, +} diff --git a/frontend/src/api/templates/authProvider.ts b/frontend/src/api/templates/authProvider.ts new file mode 100644 index 000000000..366fa34a2 --- /dev/null +++ b/frontend/src/api/templates/authProvider.ts @@ -0,0 +1,6 @@ +export type AuthProvidersTemplate = AuthProviderTemplate[]; + +export interface AuthProviderTemplate { + id: string, + name: string, +} \ No newline at end of file diff --git a/frontend/src/components/account/AccDevices.svelte b/frontend/src/components/account/AccDevices.svelte index 5d038504e..cb1073e02 100644 --- a/frontend/src/components/account/AccDevices.svelte +++ b/frontend/src/components/account/AccDevices.svelte @@ -1,7 +1,7 @@ @@ -10,7 +10,7 @@ This is component is only a wrapper because the same Devices is reused in the admin ui --> - + diff --git a/frontend/src/lib_svelte5/Loading.svelte b/frontend/src/lib_svelte5/Loading.svelte new file mode 100644 index 000000000..52c133bd2 --- /dev/null +++ b/frontend/src/lib_svelte5/Loading.svelte @@ -0,0 +1,100 @@ + + +
+
+
+
+
+
+
+ + diff --git a/frontend/src/lib_svelte5/Modal.svelte b/frontend/src/lib_svelte5/Modal.svelte new file mode 100644 index 000000000..d0f1a7b11 --- /dev/null +++ b/frontend/src/lib_svelte5/Modal.svelte @@ -0,0 +1,154 @@ + + + + + + { + showModal = false; + onClose?.(); + }} + onclick={outsideClick} +> +
+ {#if !strict} +
+
+ +
+
+ {/if} + + {#if prerender || showModal} + {@render children()} + {/if} +
+ + + diff --git a/frontend/src/lib_svelte5/Template.svelte b/frontend/src/lib_svelte5/Template.svelte index 3db9846be..4ec492968 100644 --- a/frontend/src/lib_svelte5/Template.svelte +++ b/frontend/src/lib_svelte5/Template.svelte @@ -3,12 +3,14 @@ import {useIsDev} from "$state/is_dev.svelte.ts"; import {fetchGet} from "$api/fetch.ts"; + type T = $$Generic; + let { id, value = $bindable(), }: { id: string, - value: boolean | string | object, + value: boolean | string | T, } = $props(); onMount(async () => { diff --git a/frontend/src/lib_svelte5/icons/IconStop.svelte b/frontend/src/lib_svelte5/icons/IconStop.svelte new file mode 100644 index 000000000..961ab0f76 --- /dev/null +++ b/frontend/src/lib_svelte5/icons/IconStop.svelte @@ -0,0 +1,21 @@ + + + + + diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte index 0c87c1039..68346ccf7 100644 --- a/frontend/src/routes/account/+page.svelte +++ b/frontend/src/routes/account/+page.svelte @@ -1,38 +1,44 @@ - {t?.logout.logout || 'Logout'} +