Svelte 5 Migration 5: fixes after global CSS switch (#691)

* improve dev proxying * create template for global state via runes * further `app.html` cleanup * many CSS fixes * fix flex issues in lots of places after global css migration * improve vite dev proxying * fix events infinite re-render * fix account and password policy css * fix some button width because of bigger font
sebadob · Jan 9, 2025 · 5c9dab6 · 5c9dab6
1 parent a92374e
commit 5c9dab6
Show file tree

Hide file tree

Showing 29 changed files with 743 additions and 632 deletions.
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -15,10 +15,6 @@
     <link rel="preload" href="/auth/v1/theme/{{client_id}}" as="style"/>
     <link rel="stylesheet" href="/auth/v1/theme/{{client_id}}"/>
     <style>
-        * {
-            box-sizing: border-box;
-        }
-
         :root {
             --col-act1: #6b3d99;
             --col-act1a: #714d99;
@@ -51,12 +47,6 @@
         a:hover {
             color: var(--col-act2a)
         }
-
-        .content {
-            width: 100%;
-            height: 100vh;
-            padding: 20px 10px;
-        }
     </style>
     %sveltekit.head%
 </head>
@@ -66,6 +56,6 @@
 <input name="rauthy-csrf-token" id="{{ csrf_token }}" type="hidden"/>
 <input name="rauthy-data" id="{{ data }}" type="hidden"/>
 <input name="rauthy-action" id="{{ action }}" type="hidden"/>
-<div>%sveltekit.body%</div>
+<div style="display: contents">%sveltekit.body%</div>
 </body>
 </html>
diff --git a/frontend/src/components/Error.svelte b/frontend/src/components/Error.svelte
@@ -1,51 +1,58 @@
 <script>
-    import { slide } from 'svelte/transition';
+    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 Main from "$lib5/Main.svelte";
+    import ContentCenter from "$lib5/ContentCenter.svelte";
 
     let t = $state();
     let showDetails = $state(false);
 
 </script>
 
-<BrowserCheck>
-    <WithI18n bind:t content="error">
-        <h1>{t.error}</h1>
-        <p>{t.errorText}</p>
+<Main>
+    <ContentCenter>
+        <WithI18n bind:t content="error">
+            <div class="flex-col">
+                <h1>{t.error}</h1>
+                <br>
+                <p>{t.errorText}</p>
 
-        {#if t.detailsText}
-            <div
-                    role="button"
-                    tabindex="0"
-                    class="showDetails"
-                    onclick={() => showDetails = !showDetails}
-                    onkeypress={() => showDetails = !showDetails}
-            >
-                {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>
-            </div>
+                {#if t.detailsText}
+                    <div
+                            role="button"
+                            tabindex="0"
+                            class="showDetails"
+                            onclick={() => showDetails = !showDetails}
+                            onkeypress={() => showDetails = !showDetails}
+                    >
+                        {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>
+                    </div>
 
-            {#if showDetails}
-                <div transition:slide class="details">
-                    {t.detailsText}
-                </div>
-            {/if}
-        {/if}
+                    {#if showDetails}
+                        <div transition:slide class="details">
+                            {t.detailsText}
+                        </div>
+                    {/if}
+                {/if}
 
-        <LangSelector absolute />
-    </WithI18n>
-</BrowserCheck>
+                <LangSelector absolute/>
+            </div>
+        </WithI18n>
+    </ContentCenter>
+</Main>
 
 <style>
     .chevron {

diff --git a/frontend/src/components/account/AccPassword.svelte b/frontend/src/components/account/AccPassword.svelte
@@ -29,7 +29,7 @@
     } = $props();
     let inputWidth = $derived(viewModePhone ? 'calc(100vw - 1.5rem)' : '300px');
 
-    const btnWidth = "12rem";
+    const btnWidth = "13rem";
 
     let accType = user.account_type;
     let passkeys = $state([]);

diff --git a/frontend/src/components/admin/AdminMainPre.svelte b/frontend/src/components/admin/AdminMainPre.svelte
@@ -13,7 +13,7 @@
      */
 
     /** @type {Props} */
-    let { selected = $bindable('Users') } = $props();
+    let {selected = $bindable('Users')} = $props();
 
     let sessionInfo = $state();
     let isAdmin = $state(false);
@@ -45,30 +45,28 @@
     <title>Admin</title>
 </svelte:head>
 
-<BrowserCheck>
-    {#if !sessionInfo && !mfaReqErr}
-        <Loading/>
-    {:else if mfaReqErr}
-        <div class="noAdmin">
-            <div class="text">
-                A rauthy admin account must have <b>MFA enabled.</b><br>
-                Please navigate to your <b>account</b> and activate MFA.<br>
-                Afterwards, you need to do a logout and log back in.
-            </div>
-            <Button on:click={() => window.location.href = '/auth/v1/account'}>ACCOUNT</Button>
+{#if !sessionInfo && !mfaReqErr}
+    <Loading/>
+{:else if mfaReqErr}
+    <div class="noAdmin">
+        <div class="text">
+            A rauthy admin account must have <b>MFA enabled.</b><br>
+            Please navigate to your <b>account</b> and activate MFA.<br>
+            Afterwards, you need to do a logout and log back in.
         </div>
-    {:else if !isAdmin}
-        <div class="noAdmin">
-            <div class="text">
-                You are not assigned to the <b>rauthy_admin</b> role.<br/>
-                You do not have access to the admin panel.
-            </div>
-            <Button on:click={() => window.location.href = '/auth/v1/'}>GO BACK</Button>
+        <Button on:click={() => window.location.href = '/auth/v1/account'}>ACCOUNT</Button>
+    </div>
+{:else if !isAdmin}
+    <div class="noAdmin">
+        <div class="text">
+            You are not assigned to the <b>rauthy_admin</b> role.<br/>
+            You do not have access to the admin panel.
         </div>
-    {:else}
-        <AdminMain bind:selected/>
-    {/if}
-</BrowserCheck>
+        <Button on:click={() => window.location.href = '/auth/v1/'}>GO BACK</Button>
+    </div>
+{:else}
+    <AdminMain bind:selected/>
+{/if}
 
 <style>
     .noAdmin {

diff --git a/frontend/src/components/admin/ContentWrapper.svelte b/frontend/src/components/admin/ContentWrapper.svelte
@@ -21,10 +21,12 @@
 
 <style>
     .content {
+        padding-left: 1rem;
+        padding-top: 2.5rem;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
+        /*justify-content: center;*/
+        /*align-items: center;*/
         height: 100vh;
         flex: 1;
         overflow-y: auto;

diff --git a/frontend/src/components/admin/clients/ClientBranding.svelte b/frontend/src/components/admin/clients/ClientBranding.svelte
@@ -389,10 +389,10 @@
     </div>
 
     <div class="btns">
-        <Button on:click={onSubmit} bind:isLoading level={1} width="4rem">
+        <Button on:click={onSubmit} bind:isLoading level={1}>
             SAVE
         </Button>
-        <Button on:click={onReset} bind:isLoading level={3} width="4rem">
+        <Button on:click={onReset} bind:isLoading level={3}>
             RESET
         </Button>
 

diff --git a/frontend/src/components/admin/clients/ClientSecret.svelte b/frontend/src/components/admin/clients/ClientSecret.svelte
@@ -59,7 +59,6 @@
     <Button
             on:click={generateSecret}
             level={1}
-            width="130px"
     >
         GENERATE NEW
     </Button>

diff --git a/frontend/src/components/admin/events/Events.svelte b/frontend/src/components/admin/events/Events.svelte
@@ -30,8 +30,6 @@
         eventLevel = await readSavedEventLevel();
     });
 
-    //
-
     async function readSavedEventLevel() {
         return localStorage.getItem('eventLevel') || 'Info';
     }

diff --git a/frontend/src/components/admin/events/EventsArchive.svelte b/frontend/src/components/admin/events/EventsArchive.svelte
@@ -1,7 +1,7 @@
 <script>
     import {run} from 'svelte/legacy';
 
-    import {onMount} from "svelte";
+    import {onMount, untrack} from "svelte";
     import {postEvents} from "../../../utils/dataFetchingAdmin.js";
     import {formatDateToDateInput, formatUtcTsFromDateInput} from "../../../utils/helpers.js";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
@@ -10,6 +10,7 @@
     import OptionSelect from "$lib/OptionSelect.svelte";
     import Event from "./Event.svelte";
     import Switch from "$lib/Switch.svelte";
+    import {sleepAwait} from "$lib/utils/helpers.js";
 
     let err = '';
     let events = $state([]);
@@ -22,7 +23,6 @@
     let filter = $state(false);
     let typ = $state(EVENT_TYPES[0]);
 
-
     let searchOptions = [
         {
             label: 'IP',
@@ -39,7 +39,7 @@
         {label: 'Type', callback: (a, b) => a.typ.localeCompare(b.typ)},
     ];
 
-    onMount(() => {
+    $effect(() => {
         fetchData();
     });
 
@@ -67,12 +67,6 @@
     function onSave() {
         fetchData();
     }
-
-    run(() => {
-        if (from || until || level || filter || typ) {
-            fetchData();
-        }
-    });
 </script>
 
 <div class="content">

diff --git a/frontend/src/components/admin/users/UserForceLogout.svelte b/frontend/src/components/admin/users/UserForceLogout.svelte
@@ -29,7 +29,7 @@
         Invalidate all existing sessions and refresh tokens for this user?
     </div>
 
-    <Button on:click={onSubmit} bind:isLoading level={1} width="5rem">
+    <Button on:click={onSubmit} bind:isLoading level={1}>
         LOGOUT
     </Button>
 

diff --git a/frontend/src/components/passwordReset/PasswordPolicy.svelte b/frontend/src/components/passwordReset/PasswordPolicy.svelte
@@ -159,12 +159,18 @@
 {/if}
 
 <style>
+    ul {
+        margin-left: 1rem;
+    }
+
     .li {
+        margin-left: 1.5rem;
         width: 100%;
     }
 
     .policyContainer {
-        margin-left: -10px;
+        margin-left: -.5rem;
+        margin-bottom: 1rem;
     }
 
     .policyErr {

diff --git a/frontend/src/css/global.css b/frontend/src/css/global.css
@@ -1,3 +1,13 @@
+/*
+Some lines are out-commented until all components have been updated properly.
+These need to be taken into account again after the migration to the new theme
+has been finished:
+
+- body line height and colors
+- h1, h2, h3, h4, h5, h6 color
+- global input settings
+ */
+
 /* CSS Reset */
 *, *::before, *::after {
     box-sizing: border-box;
@@ -68,7 +78,7 @@ blockquote {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: hsl(var(--text-high));
+    /*color: hsl(var(--text-high));*/
     overflow-wrap: break-word;
 }
 

diff --git a/frontend/src/global_state/is_dev.svelte.ts b/frontend/src/global_state/is_dev.svelte.ts
@@ -0,0 +1,22 @@
+let _isDev = $state(typeof (process) !== 'undefined' && process.env.DEV_MODE === 'true');
+
+export function useIsDev() {
+    if (typeof (process) !== 'undefined') {
+        _isDev = process.env.DEV_MODE === 'true';
+    } else if (typeof (window) !== 'undefined') {
+        // We can take advantage of the fast that SSR template values will not exist during local dev.
+        // TODO needs adjustment as soon as this has been converted into a template
+        let elem = window.document.getElementsByName('rauthy-csrf-token')[0];
+        _isDev = elem.id === '{{ csrf_token }}';
+    }
+    console.log('isDev: ', _isDev);
+
+    return {
+        get(): boolean {
+            return _isDev;
+        },
+        set(value: boolean) {
+            _isDev = value;
+        }
+    }
+}
diff --git a/frontend/src/lib/nav/Nav.svelte b/frontend/src/lib/nav/Nav.svelte
@@ -75,6 +75,7 @@
 
 <nav
         class="nav"
+        style:min-width="{$width}px"
         style:width="{$width}px"
         style:padding={isExpanded ? '20px 10px' : '10px 3px'}
 >

diff --git a/frontend/src/lib_svelte5/ContentCenter.svelte b/frontend/src/lib_svelte5/ContentCenter.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {type Snippet} from "svelte";
+
+    let {children}: { children: Snippet } = $props();
+</script>
+
+<div>
+    {@render children()}
+</div>
+
+
+<style>
+    div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,8 +30,6 @@ @@
             eventLevel = await readSavedEventLevel();
         });
-        //
         async function readSavedEventLevel() {
             return localStorage.getItem('eventLevel') || 'Info';
         }
@@ Expand Down @@