diff --git a/extension/src/_locales/en/messages.json b/extension/src/_locales/en/messages.json
index e2942659..e03597a7 100644
--- 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
index 546a7615..f57f2852 100644
--- 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
index 03409142..322cc3a4 100644
--- a/extension/src/sites/install.html
+++ b/extension/src/sites/install.html
@@ -38,6 +38,7 @@
+
diff --git a/extension/src/sites/install.js b/extension/src/sites/install.js
index 1992fad6..16467e5c 100644
--- a/extension/src/sites/install.js
+++ b/extension/src/sites/install.js
@@ -242,15 +242,18 @@ 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
@@ -258,21 +261,24 @@ async function initializeForm () {
// 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
index e8860626..76120f37 100644
--- a/extension/src/sites/manage.html
+++ b/extension/src/sites/manage.html
@@ -292,6 +292,7 @@
+
diff --git a/extension/src/sites/manage.js b/extension/src/sites/manage.js
index d4e8f6bb..d2decc37 100644
--- 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
index b66d93b5..20ae3254 100644
--- 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;