Merge pull request #461 from sebadob/ui-allowed-origen-improvements

UI: better UX configuring different URI's for clients
sebadob · Jun 10, 2024 · 55704f3 · 55704f3
2 parents 8041c95 + a43410a
commit 55704f3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/frontend/src/components/admin/clients/ClientConfig.svelte b/frontend/src/components/admin/clients/ClientConfig.svelte
@@ -10,7 +10,8 @@
         REGEX_CLIENT_NAME,
         REGEX_CONTACT,
         REGEX_URI,
-        TOKEN_ALGS
+        REGEX_ORIGIN,
+        TOKEN_ALGS,
     } from "../../../utils/constants.js";
     import {onMount} from "svelte";
     import {globalScopesNames} from "../../../stores/admin.js";
@@ -355,22 +356,16 @@
         />
     </div>
 
-    <!-- URLs Description -->
     <div class="separator">
     </div>
-    <div class="desc">
-        <p>
-            The redirect URIs may contain a <code>*</code> wildcard only at the end.
-        </p>
-    </div>
 
     <!-- Allowed Origins -->
     <ExpandableInput
             style="width: {urlInputWidth}"
             validation={{
           required: true,
-          regex: REGEX_URI,
-          errMsg: "Only URL safe values: a-zA-Z0-9,.:/_-&?=~#!$'()*+%",
+          regex: REGEX_ORIGIN,
+          errMsg: "Must be a valid origen",
         }}
             bind:values={client.allowed_origens}
             bind:validate={validateAllowedOrigins}
@@ -382,6 +377,11 @@
     </ExpandableInput>
 
     <!-- Redirect URIs -->
+    <div class="desc">
+        <p>
+            Redirect URIs may contain a <code>*</code> wildcard only at the end.
+        </p>
+    </div>
     <ExpandableInput
             style="width: {urlInputWidth}"
             validation={{
@@ -398,6 +398,9 @@
         REDIRECT URI
     </ExpandableInput>
 
+    <div class="separator">
+    </div>
+
     <!-- Post Logout Redirect URIs -->
     <ExpandableInput
             style="width: {urlInputWidth}"

diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
@@ -26,6 +26,7 @@ export const REGEX_CLIENT_NAME = /^[a-zA-Z0-9À-ÿ\-\s]{0,128}$/m;
 export const REGEX_CONTACT = /^[a-zA-Z0-9+.@/:]{0,48}$/gm;
 export const REGEX_LOWERCASE_SPACE = /^[a-z0-9-_\/\s]{2,128}$/gm;
 export const REGEX_PROVIDER_SCOPE = /^[a-z0-9-_\/:\s]{0,128}$/gm;
+export const REGEX_ORIGIN = /^(http|https):\/\/[a-zA-Z0-9.:]+$/m;
 export const REGEX_PEM = /^(-----BEGIN CERTIFICATE-----)[a-zA-Z0-9+/=\n]+(-----END CERTIFICATE-----)$/gm;
 export const REGEX_ROLES = /^[a-z0-9\-_/:*]{2,64}$/gm;
 export const REGEX_URI = /^[a-zA-Z0-9,.:/_\-&?=~#!$'()*+%]*$/gm;