Change start URL validation into warning (closes #530)

filips123 · Sep 26, 2024 · c396ef2 · c396ef2
1 parent 5eb19d2
commit c396ef2
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 11 deletions.
diff --git a/extension/src/_locales/en/messages.json b/extension/src/_locales/en/messages.json
@@ -160,8 +160,8 @@
     "description": "A validation error when the web app start URL is invalid"
   },
   "webAppValidationStartURLScope": {
-    "message": "Start URL needs to be within the scope:",
-    "description": "A validation error when the web app start URL is out-of-scope, with the scope displayed after the colon"
+    "message": "Start URL should be within the scope:",
+    "description": "A validation warning when the web app start URL is out-of-scope, with the scope displayed after the colon"
   },
   "webAppValidationIconURLInvalid": {
     "message": "Icon URL needs to be a valid URL",

diff --git a/extension/src/_locales/sl/messages.json b/extension/src/_locales/sl/messages.json
@@ -116,8 +116,8 @@
     "description": "A validation error when the web app start URL is invalid"
   },
   "webAppValidationStartURLScope": {
-    "message": "Začetni URL mora biti v območju:",
-    "description": "A validation error when the web app start URL is out-of-scope, with the scope displayed after the colon"
+    "message": "Začetni URL mora verjetno biti v območju:",
+    "description": "A validation warning when the web app start URL is out-of-scope, with the scope displayed after the colon"
   },
   "webAppValidationIconURLInvalid": {
     "message": "URL ikone mora biti veljaven URL",

diff --git a/extension/src/sites/install.html b/extension/src/sites/install.html
@@ -38,6 +38,7 @@
               <label for="web-app-start-url" class="form-label" data-i18n="webAppStartURL"></label>
               <input type="url" class="form-control form-control-sm" id="web-app-start-url" />
               <div class="invalid-feedback" id="web-app-start-url-invalid"></div>
+              <div class="warning-feedback" id="web-app-start-url-warning"></div>
             </div>
             <div class="mb-3">
               <label for="web-app-icon-url" class="form-label" data-i18n="webAppIconURL"></label>

diff --git a/extension/src/sites/install.js b/extension/src/sites/install.js
@@ -242,37 +242,43 @@ async function initializeForm () {
   // Validate start URL input
   const startUrlValidation = async function () {
     const invalidLabel = document.getElementById('web-app-start-url-invalid')
+    const warningLabel = document.getElementById('web-app-start-url-warning')
 
     // Empty URL defaults to manifest start URL
     if (!this.value) {
       this.setCustomValidity('')
+      this.classList.remove('is-warning')
       return
     }
 
     // Start URL needs to be a valid URL
     if (this.validity.typeMismatch) {
+      this.classList.remove('is-warning')
       this.setCustomValidity(await getMessage('webAppValidationStartURLInvalid'))
       invalidLabel.innerText = this.validationMessage
       return
     }
 
     // If the manifest does not exist there is no scope
     if (!manifestExists) {
+      this.classList.remove('is-warning')
       this.setCustomValidity('')
       return
     }
 
-    // Start URL needs to be within the scope
+    // Start URL should be within the scope
     const startUrl = new URL(this.value)
     const scope = new URL(manifest.scope)
     if (startUrl.origin !== scope.origin || !startUrl.pathname.startsWith(scope.pathname)) {
-      this.setCustomValidity(`${await getMessage('webAppValidationStartURLScope')} ${scope}`)
-      invalidLabel.innerText = this.validationMessage
+      this.setCustomValidity('')
+      warningLabel.innerText = `${await getMessage('webAppValidationStartURLScope')} ${scope}`
+      this.classList.add('is-warning')
       return
     }
 
     // All checks passed
     this.setCustomValidity('')
+    this.classList.remove('is-warning')
   }
 
   const startUrlInput = document.getElementById('web-app-start-url')

diff --git a/extension/src/sites/manage.html b/extension/src/sites/manage.html
@@ -292,6 +292,7 @@
             <label for="web-app-start-url" class="form-label fw-bold" data-i18n="webAppStartURL"></label>
             <input type="url" class="form-control form-control-sm" id="web-app-start-url" />
             <div class="invalid-feedback" id="web-app-start-url-invalid"></div>
+            <div class="warning-feedback" id="web-app-start-url-warning"></div>
           </div>
           <div class="mb-3">
             <label for="web-app-icon-url" class="form-label fw-bold" data-i18n="webAppIconURL"></label>

diff --git a/extension/src/sites/manage.js b/extension/src/sites/manage.js
@@ -242,31 +242,36 @@ async function createSiteList () {
       // Validate start URL input
       const startUrlValidation = async function () {
         const invalidLabel = document.getElementById('web-app-start-url-invalid')
+        const warningLabel = document.getElementById('web-app-start-url-warning')
 
         // Empty URL defaults to manifest start URL
         if (!this.value) {
           this.setCustomValidity('')
+          this.classList.remove('is-warning')
           return
         }
 
         // Start URL needs to be a valid URL
         if (this.validity.typeMismatch) {
+          this.classList.remove('is-warning')
           this.setCustomValidity(await getMessage('webAppValidationStartURLInvalid'))
           invalidLabel.innerText = this.validationMessage
           return
         }
 
-        // Start URL needs to be within the scope
+        // Start URL should be within the scope
         const startUrl = new URL(this.value)
         const scope = new URL(site.manifest.scope)
         if (startUrl.origin !== scope.origin || !startUrl.pathname.startsWith(scope.pathname)) {
-          this.setCustomValidity(`${await getMessage('webAppValidationStartURLScope')} ${scope}`)
-          invalidLabel.innerText = this.validationMessage
+          this.setCustomValidity('')
+          warningLabel.innerText = `${await getMessage('webAppValidationStartURLScope')} ${scope}`
+          this.classList.add('is-warning')
           return
         }
 
         // All checks passed
         this.setCustomValidity('')
+        this.classList.remove('is-warning')
       }
 
       const startUrlInput = document.getElementById('web-app-start-url')

diff --git a/extension/src/styles/bootstrap.scss b/extension/src/styles/bootstrap.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import "bootstrap/scss/_functions";
 
 $color-mode-type: media-query;
@@ -25,7 +27,16 @@ $border-color-dark:         $gray-700-alt;
 @import "bootstrap/scss/_variables";
 @import "bootstrap/scss/_variables-dark";
 
-$form-validation-states: map-remove($form-validation-states, "valid");
+$form-validation-states: map.remove($form-validation-states, "valid");
+
+$form-validation-states: map.set($form-validation-states, "warning", (
+  "color": $yellow-300,
+  "icon": "",
+  "tooltip-color": #fff,
+  "tooltip-bg-color": var(--#{$prefix}warning),
+  "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}warning-rgb), $input-btn-focus-color-opacity),
+  "border-color": $yellow-300,
+));
 
 $kbd-color:  $white;
 $kbd-bg:     $gray-800;