Network UI: add external uri path hint (#27659)

assets/js/components/Config/FormRow.vue

@@ -16,6 +16,9 @@
 			<slot />
 		</div>
 		<div v-if="error" class="invalid-feedback d-block">{{ error }}</div>
+		<div v-if="warning" class="form-text text-warning mt-1" role="status">
+			{{ warning }}
+		</div>
 		<div class="form-text evcc-gray">
 			<div v-if="example" class="hyphenate">
 				{{ $t("config.form.example") }}: {{ example }}
@@ -47,6 +50,7 @@ export default {
 		optional: Boolean,
 		deprecated: Boolean,
 		error: String,
+		warning: String,
 		danger: String,
 		example: String,
 		docsLink: String,

assets/js/components/Config/NetworkModal.vue

@@ -43,6 +43,7 @@
 				id="networkExternalUrl"
 				:label="$t('config.network.labelExternalUrl')"
 				:help="$t('config.network.descriptionExternalUrl')"
+				:warning="urlPathWarning(values.externalUrl)"
 				example="https://evcc.example.org"
 				optional
 			>
@@ -83,6 +84,16 @@ export default {
 	components: { FormRow, JsonModal },
 	emits: ["changed"],
 	methods: {
+		urlPathWarning(url) {
+			try {
+				if (new URL(url).pathname > "/") {
+					return this.$t("config.network.warningUrlPath");
+				}
+			} catch {
+				// ignore
+			}
+			return null;
+		},
 		transformWriteValues(values) {
 			const payload = { ...values };
 			delete payload.internalUrl;

i18n/de.json

@@ -568,7 +568,8 @@
       "labelHost": "mDNS-Hostname",
       "labelInternalUrl": "Interne URL",
       "labelPort": "Port",
-      "title": "Netzwerk"
+      "title": "Netzwerk",
+      "warningUrlPath": "Die URL benötigt normalerweise keinen Pfad. Bist du dir sicher?"
     },
     "ocpp": {
       "connectedChargers": "Verbundene Wallboxen",

i18n/en.json

@@ -568,7 +568,8 @@
       "labelHost": "mDNS Hostname",
       "labelInternalUrl": "Internal URL",
       "labelPort": "Port",
-      "title": "Network"
+      "title": "Network",
+      "warningUrlPath": "The URL usually doesn't need a path. Are you sure this is correct?"
     },
     "ocpp": {
       "connectedChargers": "Connected chargers",

tests/config.spec.ts

@@ -102,7 +102,10 @@ test.describe("network modal", async () => {
     await expectModalVisible(modal);
 
     const portValue = await modal.getByLabel("Port").inputValue();
+    await modal.getByLabel("External URL").fill(NETWORK_EXTERNAL_URL + "/somepath");
+    await expect(modal.getByRole("status")).toContainText("doesn't need a path");
     await modal.getByLabel("External URL").fill(NETWORK_EXTERNAL_URL);
+    await expect(modal.getByRole("status")).not.toBeVisible();
     await modal.getByLabel("mDNS Hostname").fill(NETWORK_HOST);
 
     await modal.getByRole("button", { name: "Save" }).click();