Svelte 5 Migration 6: Update the whole i18n setup (#696)

* define i18n interface * update changelog * API endpoint GET full i18n with caching and pre-compression * split i18n into email + ui mods * change i18n cache etag from app start to build time * i18n preload, LangSelector -> sv5, i18n override during local dev * automatically build i18n JSON in `build.rs` for 100% type checking * migrate LangSelector to svelte 5 * fix i18n during DEV ssr + compile via dynamic imports * add pre-built I18n JSON from the backend * fix i18n `preload` in static UI HTML * migrate `helpers.js` to `helpers.ts` * migrate account dashboard to `useI18n()`` * migrate device UI to `useI18n()`` * migrate error HTML to `useI18n()`` * migrate providers callback + WebauthnRequest to `useI18n()`` * migrate logout HTML to `useI18n()`` * migrate authorize HTML to `useI18n()`` * migrate user registration HTML to `useI18n()`` * migrate password reset HTML + PasswordPolicy to `useI18n()`` * migrate email changed confirm HTML to `useI18n()` * delete obsolete WithI18n * remove old `POST /i18n` endpoint * move HTML serving endpoints into separate module * remove all `i18n` pre-rendering entries from static HTML * drop all old UI i18n parts from the backend * final i18n cleanup
sebadob · Jan 15, 2025 · 88e6a87 · 88e6a87
1 parent c0de5b6
commit 88e6a87
Show file tree

Hide file tree

Showing 114 changed files with 2,330 additions and 2,869 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,9 @@ Korean has been added to the translations for all user-facing UI parts.
 - Fixed a regression from v0.27.0 which made it impossible to use `zh-Hans` as a users language. The deserialization
   of the database value would fail when using Hiqlite.
   [#693](https://github.com/sebadob/rauthy/pull/693)
+- Fixed a bug in the UI - Custom User Attributed: When only a single existing attributed has been deleted, the
+  list would not properly update and remove it.
+  [#695](https://github.com/sebadob/rauthy/pull/695)
 
 ## v0.27.3
 

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -6,13 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="icon" href="%sveltekit.assets%/assets/favicon.svg"/>
 
-    <!-- <link rel="preload" href="/auth/v1/theme/rauthy" as="style"/>-->
-    <!-- <link rel="stylesheet" href="/auth/v1/theme/rauthy"/>-->
     <!--
     We can keep the {{client_id}} during local dev -> backend will always return the default.
     In production, the value will be replaced with the proper id to load custom client branding.
     -->
-    <link rel="preload" href="/auth/v1/theme/{{client_id}}" as="style"/>
     <link rel="stylesheet" href="/auth/v1/theme/{{client_id}}"/>
     <style>
         :root {
@@ -51,7 +48,6 @@
     %sveltekit.head%
 </head>
 <body>
-<template id="i18n">{{ i18n|safe }}</template>
 <template id="auth_providers">{{ auth_providers|safe }}</template>
 <input name="rauthy-csrf-token" id="{{ csrf_token }}" type="hidden"/>
 <input name="rauthy-data" id="{{ data }}" type="hidden"/>

diff --git a/frontend/src/components/ClientLogo.svelte b/frontend/src/components/ClientLogo.svelte
@@ -1,7 +1,7 @@
 <script>
-    import {getKey} from "$lib/utils/helpers.js";
+    import {getKey} from "$lib/utils/helpers";
 
-    let { clientId } = $props();
+    let {clientId} = $props();
 </script>
 
 <!--

diff --git a/frontend/src/components/Error.svelte b/frontend/src/components/Error.svelte
@@ -1,56 +1,57 @@
 <script>
     import {slide} from 'svelte/transition';
     import IconChevronRight from "$lib/icons/IconChevronRight.svelte";
-    import WithI18n from "$lib/WithI18n.svelte";
-    import BrowserCheck from "./BrowserCheck.svelte";
-    import LangSelector from "$lib/LangSelector.svelte";
+    import LangSelector from "$lib5/LangSelector.svelte";
     import Main from "$lib5/Main.svelte";
     import ContentCenter from "$lib5/ContentCenter.svelte";
+    import {useI18n} from "$state/i18n.svelte";
 
-    let t = $state();
+    let t = useI18n();
     let showDetails = $state(false);
 
+    // TODO:
+    // The `details` and `detailsText` cannot be translated statically.
+    // -> implement a mechanism to fetch them either from the body or query params
+
 </script>
 
 <Main>
     <ContentCenter>
-        <WithI18n bind:t content="error">
-            <div class="flex-col">
-                <h1>{t.error}</h1>
-                <br>
-                <p>{t.errorText}</p>
+        <div class="flex-col">
+            <h1>{t.error.error}</h1>
+            <br>
+            <p>{t.error.errorText}</p>
 
-                {#if t.detailsText}
+            {#if t.error.detailsText}
+                <div
+                        role="button"
+                        tabindex="0"
+                        class="showDetails"
+                        onclick={() => showDetails = !showDetails}
+                        onkeypress={() => showDetails = !showDetails}
+                >
+                    {t.error.details}
                     <div
-                            role="button"
-                            tabindex="0"
-                            class="showDetails"
-                            onclick={() => showDetails = !showDetails}
-                            onkeypress={() => showDetails = !showDetails}
+                            class="chevron"
+                            style:margin-top={showDetails ? '' : '-5px'}
+                            style:transform={showDetails ? 'rotate(90deg)' : 'rotate(180deg)'}
                     >
-                        {t.details}
-                        <div
-                                class="chevron"
-                                style:margin-top={showDetails ? '' : '-5px'}
-                                style:transform={showDetails ? 'rotate(90deg)' : 'rotate(180deg)'}
-                        >
-                            <IconChevronRight
-                                    color="var(--col-act2)"
-                                    width={16}
-                            />
-                        </div>
+                        <IconChevronRight
+                                color="var(--col-act2)"
+                                width={16}
+                        />
                     </div>
+                </div>
 
-                    {#if showDetails}
-                        <div transition:slide class="details">
-                            {t.detailsText}
-                        </div>
-                    {/if}
+                {#if showDetails}
+                    <div transition:slide class="details">
+                        {t.error.detailsText}
+                    </div>
                 {/if}
+            {/if}
 
-                <LangSelector absolute/>
-            </div>
-        </WithI18n>
+            <LangSelector absolute/>
+        </div>
     </ContentCenter>
 </Main>
 

diff --git a/frontend/src/components/HiddenValue.svelte b/frontend/src/components/HiddenValue.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import {run} from 'svelte/legacy';
 
     import {onMount} from "svelte";
     import IconEyeSlash from "$lib/icons/IconEyeSlash.svelte";
     import IconEye from "$lib/icons/IconEye.svelte";
-    import {sleepAwait} from "../utils/helpers.js";
+    import {sleepAwait} from "../utils/helpers";
     import IconClipboard from "$lib/icons/IconClipboard.svelte";
 
     /**
@@ -13,7 +13,7 @@
      */
 
     /** @type {Props} */
-    let { value = '' } = $props();
+    let {value = ''} = $props();
 
     let hidden = '';
     let text = $state('');
@@ -51,6 +51,7 @@
     function toggle() {
         showValue = !showValue;
     }
+
     run(() => {
         if (showValue) {
             show();

diff --git a/frontend/src/components/ProviderLogo.svelte b/frontend/src/components/ProviderLogo.svelte
@@ -1,7 +1,7 @@
 <script>
-    import {getKey} from "$lib/utils/helpers.js";
+    import {getKey} from "$lib/utils/helpers";
 
-    let { providerId } = $props();
+    let {providerId} = $props();
 </script>
 
 <!--

diff --git a/frontend/src/components/account/AccDevices.svelte b/frontend/src/components/account/AccDevices.svelte
@@ -1,7 +1,7 @@
 <script>
     import Devices from "../common/Devices.svelte";
 
-    let {t, sessionInfo = $bindable()} = $props();
+    let {sessionInfo = $bindable()} = $props();
 
 </script>
 
@@ -10,7 +10,7 @@
     This is component is only a wrapper because the same Devices
     is reused in the admin ui
     -->
-    <Devices {t} userId={sessionInfo.user_id}/>
+    <Devices userId={sessionInfo.user_id}/>
 </div>
 
 <style>