Merge pull request #300 from sebadob/bug-ui-client-name-undefined

bug: UI `client_name` showing undefined
sebadob · Apr 7, 2024 · 2600005 · 2600005
2 parents a3e62ab + 20265a6
commit 2600005
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/frontend/src/components/admin/clients/ClientConfig.svelte b/frontend/src/components/admin/clients/ClientConfig.svelte
@@ -43,6 +43,12 @@
     let validateRedirectUris;
     let validatePostLogoutUris;
 
+    // This hook is needed to not show `undefined` in inputs after some
+    // values have been emptied manually
+    $: if (client.id) {
+        checkUndefinedValues();
+    }
+
     $: if (success) {
         timer = setTimeout(() => {
             success = false;
@@ -51,6 +57,16 @@
     }
 
     onMount(() => {
+        return () => clearTimeout(timer);
+    });
+
+    let formErrors = {};
+    const schema = yup.object().shape({
+        name: yup.string().trim().matches(REGEX_CLIENT_NAME, "Can only contain characters, numbers and '-'"),
+        access_token_lifetime: yup.number().required('Token Lifetime is required').min(60, 'Cannot be lower than 60').max(86400, 'Cannot be higher than 86400'),
+    });
+
+    function checkUndefinedValues() {
         if (client.redirect_uris[0] === '') {
             client.redirect_uris = [];
         }
@@ -60,14 +76,7 @@
         if (!client.name) {
             client.name = '';
         }
-        return () => clearTimeout(timer);
-    });
-
-    let formErrors = {};
-    const schema = yup.object().shape({
-        name: yup.string().trim().matches(REGEX_CLIENT_NAME, "Can only contain characters, numbers and '-'"),
-        access_token_lifetime: yup.number().required('Token Lifetime is required').min(60, 'Cannot be lower than 60').max(86400, 'Cannot be higher than 86400'),
-    });
+    }
 
     function handleKeyPress(event) {
         if (event.code === 'Enter') {

diff --git a/frontend/src/lib/inputs/Input.svelte b/frontend/src/lib/inputs/Input.svelte
@@ -37,8 +37,8 @@
 <div class="container" style:width="calc({width} + 12px)">
     <div class="label">
         <div
-            class="labelInner font-label noselect"
-            style:background={disabled ? 'var(--col-gmid)' : 'var(--col-bg)'}
+                class="labelInner font-label noselect"
+                style:background={disabled ? 'var(--col-gmid)' : 'var(--col-bg)'}
         >
             <label for={name}>
                 <slot></slot>
@@ -60,9 +60,9 @@
 
     {#if error}
         <div
-            class="err font-label"
-            style:width={width}
-            transition:slide|global={{ duration: 250 }}
+                class="err font-label"
+                style:width={width}
+                transition:slide|global={{ duration: 250 }}
         >
             {error}
         </div>