Svelte 5 Migration 2 (#671)

* add compression utils * define a template for the theme CSS * API endpoint to GET themes * DB migration scripts + CRUD queries + cache invalidation * add `BUILD_TIME` static for proper theme default timestamp * themes API endpoints + types def + OpenAPI docs * include theme fetch in `app.html` and create first template for TS API types
sebadob · Jan 3, 2025 · c44db4b · c44db4b
1 parent c76d281
commit c44db4b
Show file tree

Hide file tree

Showing 26 changed files with 1,057 additions and 59 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -38,6 +38,7 @@ askama_actix = "0.14"
 async-trait = "0.1.74"
 base64 = "0.22.0"
 bincode = "1"
+brotli = "7.0.0"
 cached = "0.54"
 chacha20poly1305 = { version = "0.10", features = ["std"] }
 chrono = { version = "0.4", default-features = false, features = ["clock", "serde", "std"] }
@@ -65,6 +66,7 @@ lazy_static = "1"
 lettre = { version = "0.11", default-features = false, features = [
     "builder", "smtp-transport", "tokio1-rustls-tls", "tracing"
 ] }
+libflate = "2.1.0"
 mime = "0.3.17"
 mime_guess = "2"
 num_cpus = "1"

diff --git a/frontend/build.sh b/frontend/build.sh
diff --git a/frontend/src/api/request/admin/themes.ts b/frontend/src/api/request/admin/themes.ts
@@ -0,0 +1,19 @@
+export interface ThemeCss {
+    text: number[],
+    textHigh: number[],
+    bg: number[],
+    bgHigh: number[],
+    action: number[],
+    accent: number[],
+    error: number[],
+    btnText: string,
+    themeSun: string,
+    themeMoon: string,
+}
+
+export interface ThemeRequestResponse {
+    clientId: string,
+    light: ThemeCss,
+    dark: ThemeCss,
+    borderRadius: string,
+}
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,10 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="%lang%">
 <head>
     <meta charset="utf-8"/>
     <meta name="robots" content="noindex, nofollow">
-    <link rel="icon" href="%sveltekit.assets%/assets/favicon.svg"/>
     <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>
         * {
             box-sizing: border-box;

diff --git a/frontend/src/hooks.server.js b/frontend/src/hooks.server.js
@@ -0,0 +1,31 @@
+const isDev = process.env.DEV_MODE === 'true';
+
+const langDefault = 'en';
+const themeDefault = 'body{--text:208 10 40;--text-high:208 20 20;--bg:228 2 98;--bg-high:228 8 84;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:white;--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);--border-radius:5px;}.theme-dark{--text:228 2 70;--text-high:228 8 90;--bg:208 90 4;--bg-high:208 30 19;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:hsl(var(--bg));--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}@media (prefers-color-scheme: dark){body{--text:228 2 70;--text-high:228 8 90;--bg:208 90 4;--bg-high:208 30 19;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:hsl(var(--bg));--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}.theme-light{--text:208 10 40;--text-high:208 20 20;--bg:228 2 98;--bg-high:228 8 84;--action:34 100 59;--accent:246 60 53;--error:15 100 37;--btn-text:white;--theme-sun:hsla(var(--action), .7);--theme-moon:hsla(var(--accent), .85);}}';
+
+/**
+ * This hook only runs during local dev and compiling into static HTML.
+ * Proxy values in `vite.config.js` have a higher priority.
+ *
+ * We can use it to fix "error" popping up because of for instance invalid CSS
+ * values inside `app.html`, which will be used in production for SSR.
+ *
+ * @type {import('@sveltejs/kit').Handle}
+ */
+export async function handle({event, resolve}) {
+    let path = event.url.pathname;
+
+    if (path === '/auth/v1/theme/%7B%7Bclient_id%7D%7D') {
+        return new Response(themeDefault);
+    }
+
+    return resolve(event, {
+        transformPageChunk: ({html}) => {
+            if (isDev) {
+                return html.replace('%lang%', langDefault);
+            } else {
+                return html.replace('%lang%', '{{lang}}');
+            }
+        }
+    });
+}
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
@@ -9,13 +9,19 @@ const config = {
         paths: {
             base: '/auth/v1',
         },
-        adapter: adapter({
-            fallback: null,
-            pages: '../templates/html',
-            assets: '../static/v1',
-            precompress: true,
-            strict: true,
-        }),
+        alias: {
+            // Contains all the API request and response types
+            // (as soon as Svelte 5 + TS migration is done)
+            $api: 'src/api',
+            // The `lib5` is a temp lib which will exist until all core components
+            // have been migrated to Svelte5 + TS. Migration all dependencies will
+            // be a lot safer when changing each component to `lib5` first.
+            // Later on, the old component can be removed from `lib` and via compiler
+            // warnings, we can be 100% sure, that we have not forgotten any migration.
+            // After this is done and no errors are thrown, we can do a very easy
+            // switch to the original `lib` via global search and replace.
+            $lib5: 'src/lib_svelte5',
+        },
         csp: isDev ? {} : {
             directives: {
                 'default-src': ['none'],
@@ -25,6 +31,13 @@ const config = {
                 'img-src': ['self'],
             },
         },
+        adapter: adapter({
+            fallback: null,
+            pages: '../templates/html',
+            assets: '../static/v1',
+            precompress: true,
+            strict: true,
+        }),
     },
 };
 

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -48,6 +48,7 @@ const config = {
             '/auth/v1/scopes': backend,
             '/auth/v1/search': backend,
             '/auth/v1/sessions': backend,
+            '/auth/v1/theme': backend,
             '/auth/v1/update_language': backend,
             '/auth/v1/version': backend,
             '/auth/webid/': backend,

diff --git a/justfile b/justfile
@@ -320,7 +320,7 @@ build-ui:
     for folder in "${PAGES[@]}"; do
         for html in $folder; do
           # set correct document language
-          sd 'lang="en"' 'lang="{{{{ lang }}"' $html
+          #sd 'lang="en"' 'lang="{{{{ lang }}"' $html
           # for pre-rendering colors
           sd '#6b3d99;' '{{{{ col_act1 }};' $html
           sd '#714d99;' '{{{{ col_act1a }};' "$html"

diff --git a/migrations/hiqlite/4_themes.sql b/migrations/hiqlite/4_themes.sql
@@ -0,0 +1,14 @@
+CREATE TABLE themes
+(
+    client_id     TEXT    NOT NULL
+        CONSTRAINT themes_pk
+            PRIMARY KEY
+        CONSTRAINT themes_clients_id_fk
+            REFERENCES clients
+            ON UPDATE CASCADE ON DELETE CASCADE,
+    last_update   INTEGER NOT NULL,
+    version       INTEGER NOT NULL,
+    light         BLOB    NOT NULL,
+    dark          BLOB    NOT NULL,
+    border_radius TEXT    NOT NULL
+) STRICT;
diff --git a/migrations/postgres/30_themes.sql b/migrations/postgres/30_themes.sql
@@ -0,0 +1,14 @@
+CREATE TABLE themes
+(
+    client_id     VARCHAR NOT NULL
+        CONSTRAINT themes_pk
+            PRIMARY KEY
+        CONSTRAINT themes_clients_id_fk
+            REFERENCES clients
+            ON UPDATE CASCADE ON DELETE CASCADE,
+    last_update   BIGINT  NOT NULL,
+    version       INT     NOT NULL,
+    light         BYTEA   NOT NULL,
+    dark          BYTEA   NOT NULL,
+    border_radius VARCHAR NOT NULL
+);
diff --git a/src/api/src/lib.rs b/src/api/src/lib.rs
@@ -2,6 +2,7 @@
 
 #![forbid(unsafe_code)]
 
+use actix_web::http::header::{HeaderMap, HeaderValue};
 use actix_web::{web, HttpRequest, HttpResponse};
 use rauthy_api_types::users::WebauthnLoginResponse;
 use rauthy_common::constants::COOKIE_MFA;
@@ -29,12 +30,51 @@ pub mod openapi;
 pub mod roles;
 pub mod scopes;
 pub mod sessions;
+pub mod themes;
 pub mod users;
 
 pub type ReqApiKey = web::ReqData<Option<ApiKey>>;
 pub type ReqPrincipal = web::ReqData<Principal>;
 pub type ReqSession = web::ReqData<Option<Session>>;
 
+#[derive(Debug, PartialEq)]
+enum AcceptEncoding {
+    Br,
+    Gzip,
+    None,
+}
+
+impl From<&HeaderMap> for AcceptEncoding {
+    #[inline]
+    fn from(headers: &HeaderMap) -> Self {
+        if let Some(accept) = headers
+            .get("accept-encoding")
+            .map(|v| v.to_str().unwrap_or_default())
+        {
+            if accept.contains("br") {
+                Self::Br
+            } else if accept.contains("gzip") {
+                Self::Gzip
+            } else {
+                Self::None
+            }
+        } else {
+            Self::None
+        }
+    }
+}
+
+impl AcceptEncoding {
+    #[inline]
+    pub fn value(&self) -> HeaderValue {
+        match self {
+            AcceptEncoding::Br => HeaderValue::from_static("br"),
+            AcceptEncoding::Gzip => HeaderValue::from_static("gzip"),
+            AcceptEncoding::None => HeaderValue::from_static("none"),
+        }
+    }
+}
+
 #[derive(RustEmbed)]
 #[folder = "../../static/v1/"]
 struct Assets;