About modal: powered by footer for branded installations, update status badge (#33233)

2026-08-27 20:45:50 +02:00 · 2026-08-27 20:45:50 +02:00 · 8905c2777b
commit 8905c2777b
parent 27bbdce298
25 changed files with 114 additions and 49 deletions
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@ -1,4 +1,11 @@
 import { StorybookConfig } from "@storybook/vue3-vite";
+import { createReadStream } from "node:fs";
+
+// serve test logos so the custom branding stories can render them
+const customLogos = {
+  "/custom-logo-light": "tests/custom-logo-light.svg",
+  "/custom-logo-dark": "tests/custom-logo-dark.svg",
+};

 export default {
  stories: ["../assets/js/**/*.stories.@(js|ts)"],
@ -10,4 +17,21 @@ export default {
  core: {
    disableTelemetry: true,
  },
+  viteFinal: (config) => ({
+    ...config,
+    plugins: [
+      ...(config.plugins ?? []),
+      {
+        name: "evcc-custom-logos",
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            const file = customLogos[req.url?.split("?")[0] as keyof typeof customLogos];
+            if (!file) return next();
+            res.setHeader("Content-Type", "image/svg+xml");
+            createReadStream(file).pipe(res);
+          });
+        },
+      },
+    ],
+  }),
 } satisfies StorybookConfig;
--- a/assets/js/components/AboutModal.stories.ts
+++ b/assets/js/components/AboutModal.stories.ts
@ -52,6 +52,11 @@ export default {
    hasUpdater: { control: "boolean" },
    uploadMessage: { control: "text" },
    uploadProgress: { control: "number" },
+    customLogo: { control: "boolean" },
+    customBrand: { control: "text" },
+    customWebsite: { control: "text" },
+    customEmail: { control: "text" },
+    customPhone: { control: "text" },
  },
 } as Meta<typeof AboutModal>;

@ -102,3 +107,14 @@ export const DevBuild = Template.bind({});
 DevBuild.args = {
  installed: "0.0.0",
 };
+
+export const CustomBranding = Template.bind({});
+CustomBranding.args = {
+  installed: "0.303.1",
+  availableVersion: "0.303.1",
+  customLogo: true,
+  customBrand: "G1GA HEMS",
+  customWebsite: "https://example.com/hems",
+  customEmail: "support@example.com",
+  customPhone: "+49 123 456789",
+};
--- a/assets/js/components/AboutModal.vue
+++ b/assets/js/components/AboutModal.vue
@ -1,5 +1,5 @@
 <template>
-	<GenericModal id="aboutModal" :size="modalSize" @opened="acknowledge">
+	<GenericModal id="aboutModal" @opened="acknowledge">
 		<template #title>
 			<a :href="websiteUrl" target="_blank" rel="noopener noreferrer">
 				<template v-if="customLogo">
@ -44,14 +44,12 @@
 								>
 									v{{ installed }}
 								</a>
-								<span
-									v-if="!nightly && !newVersionAvailable"
-									class="text-muted text-nowrap"
-									>{{ $t("footer.version.latestVersion") }}</span
-								>
-								<span v-if="newVersionAvailable" class="text-nowrap">{{
-									$t("footer.version.availableLong")
-								}}</span>
+								<Badge v-if="newVersionAvailable">
+									{{ $t("footer.version.availableLong") }}
+								</Badge>
+								<Badge v-else-if="!nightly" variant="muted">
+									{{ $t("footer.version.latestVersion") }}
+								</Badge>
 							</div>
 						</td>
 					</tr>
@ -115,8 +113,22 @@

 			<!-- open source -->
 			<hr />
-			<p class="mb-0 small d-flex flex-wrap column-gap-1">
-				<i18n-t keypath="footer.version.madeByCommunity" tag="span">
+			<p
+				class="mb-0 d-flex justify-content-between align-items-center flex-wrap column-gap-2 row-gap-1"
+			>
+				<span v-if="customLogo" class="d-flex align-items-center gap-2">
+					<span>{{ $t("footer.version.poweredBy") }}</span>
+					<a
+						:href="evccWebsiteUrl"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="d-flex"
+						aria-label="evcc"
+					>
+						<Logo class="footer-logo" />
+					</a>
+				</span>
+				<i18n-t v-else keypath="footer.version.madeByCommunity" tag="span">
 					<a
 						:href="githubRepoUrl"
 						target="_blank"
@ -125,15 +137,13 @@
 						>{{ $t("footer.version.community") }}</a
 					>
 				</i18n-t>
-				<i18n-t keypath="footer.version.poweredByOpenSource" tag="span" class="d-inline">
 				<a
-						class="text-muted"
+					class="evcc-gray"
 					:href="githubDependenciesUrl"
 					target="_blank"
 					rel="noopener noreferrer"
 					>{{ $t("footer.version.openSource") }}</a
 				>
-				</i18n-t>
 			</p>
 		</div>
 	</GenericModal>
@ -144,6 +154,7 @@ import GenericModal from "./Helper/GenericModal.vue";
 import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/filled/heart";
 import Logo from "./Footer/Logo.vue";
+import Badge from "./Helper/Badge.vue";
 import api from "@/api";
 import settings from "@/settings";
 import { extractDomain } from "@/utils/extractDomain";
@ -155,7 +166,7 @@ const EVCC_WEBSITE = "https://evcc.io/";

 export default defineComponent({
 	name: "AboutModal",
-	components: { GenericModal, Logo },
+	components: { GenericModal, Logo, Badge },
 	props: {
 		installed: { type: String, default: "" },
 		commit: { type: String, default: "" },
@ -199,15 +210,15 @@ export default defineComponent({
 		githubRepoUrl() {
 			return GITHUB_REPO;
 		},
+		evccWebsiteUrl() {
+			return EVCC_WEBSITE;
+		},
 		githubDependenciesUrl() {
 			return `${GITHUB_REPO}/network/dependencies`;
 		},
 		githubCommitUrl() {
 			return `${GITHUB_REPO}/commit/${this.commit}`;
 		},
-		modalSize() {
-			return this.newVersionAvailable ? undefined : "sm";
-		},
 		cleanedReleaseNotes() {
 			if (!this.releaseNotes) return "";
 			return this.releaseNotes.replaceAll("<h2>Changelog</h2>", "");
@ -241,6 +252,9 @@ export default defineComponent({
 .about-logo {
 	height: 2.5rem;
 }
+.footer-logo {
+	height: 1rem;
+}
 .custom-logo {
 	height: 4rem;
 	width: auto;
--- a/assets/js/utils/version.test.ts
+++ b/assets/js/utils/version.test.ts
@ -44,8 +44,9 @@ describe("getShortVersion", () => {
 });

 describe("isNewVersionAvailable", () => {
-  test("never for dev builds", () => {
+  test("never for dev or nightly builds", () => {
    expect(isNewVersionAvailable(DEV, "0.303.1")).toBe(false);
+    expect(isNewVersionAvailable(NIGHTLY, "0.304.0")).toBe(false);
  });
  test("only when available differs", () => {
    expect(isNewVersionAvailable(STABLE, "0.303.1")).toBe(false);
--- a/assets/js/utils/version.ts
+++ b/assets/js/utils/version.ts
@ -19,7 +19,8 @@ export function getShortVersion(version: string): string {
 }

 export function isNewVersionAvailable(installed?: string, available?: string): boolean {
-  return !!available && !isDevelopment(installed || "") && available !== installed;
+  const v = installed || "";
+  return !!available && !isDevelopment(v) && !isNightly(v) && available !== installed;
 }

 export function isNewVersionUnacknowledged(
--- a/i18n/ca.json
+++ b/i18n/ca.json
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Instal·lació iniciada:",
      "modalViewOnGitHub": "Vegeu a GitHub",
      "openSource": "codi obert",
-      "poweredByOpenSource": "Impulsat per {0}."
+      "poweredBy": "impulsat per"
    }
  },
  "forecast": {
--- a/i18n/cs.json
+++ b/i18n/cs.json
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Instalace spuštěna:",
      "modalViewOnGitHub": "Zobrazit na GitHubu",
      "openSource": "open source",
-      "poweredByOpenSource": "Běží na {0}."
+      "poweredBy": "běží na"
    }
  },
  "forecast": {
--- a/i18n/da.json
+++ b/i18n/da.json
@ -1126,7 +1126,7 @@
      "modalUpdateStatusStart": "Installation startede:",
      "modalViewOnGitHub": "Se på GitHub",
      "openSource": "open source",
-      "poweredByOpenSource": "Drevet af {0}."
+      "poweredBy": "drevet af"
    }
  },
  "forecast": {
--- a/i18n/de.json
+++ b/i18n/de.json
@ -1119,14 +1119,14 @@
      "optInSponsorship": "Sponsoring erforderlich."
    },
    "version": {
-      "availableLong": "neue Version verfügbar",
+      "availableLong": "Update verfügbar",
      "community": "evcc Community",
      "labelEmail": "E-Mail",
      "labelPhone": "Telefon",
      "labelRelease": "Release",
      "labelVersion": "Version",
      "labelWebsite": "Website",
-      "latestVersion": "aktuelle Version",
+      "latestVersion": "aktuell",
      "madeByCommunity": "Entwickelt von der {0}.",
      "modalCancel": "Abbrechen",
      "modalDownload": "Download",
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Installation gestartet:",
      "modalViewOnGitHub": "Auf GitHub ansehen",
      "openSource": "Open Source",
-      "poweredByOpenSource": "Unterstützt von {0}."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/en.json
+++ b/i18n/en.json
@ -1119,14 +1119,14 @@
      "optInSponsorship": "Sponsoring required."
    },
    "version": {
-      "availableLong": "new version available",
+      "availableLong": "update available",
      "community": "evcc community",
      "labelEmail": "Email",
      "labelPhone": "Phone",
      "labelRelease": "Release",
      "labelVersion": "Version",
      "labelWebsite": "Website",
-      "latestVersion": "latest version",
+      "latestVersion": "up to date",
      "madeByCommunity": "Made by the {0}.",
      "modalCancel": "Cancel",
      "modalDownload": "Download",
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Installation started:",
      "modalViewOnGitHub": "View on GitHub",
      "openSource": "open source",
-      "poweredByOpenSource": "Powered by {0}."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/fi.json
+++ b/i18n/fi.json
@ -1126,7 +1126,7 @@
      "modalUpdateStatusStart": "Asennus aloitettu:",
      "modalViewOnGitHub": "Näytä GitHubista",
      "openSource": "avoimen lähdekoodin",
-      "poweredByOpenSource": "{0} voimalla."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/fr.json
+++ b/i18n/fr.json
@ -1121,7 +1121,7 @@
      "modalUpdateStatusStart": "L'installation a commencé :",
      "modalViewOnGitHub": "Voir sur GitHub",
      "openSource": "open source",
-      "poweredByOpenSource": "Propulsé par {0}."
+      "poweredBy": "propulsé par"
    }
  },
  "forecast": {
--- a/i18n/it.json
+++ b/i18n/it.json
@ -1047,7 +1047,7 @@
      "modalUpdateStatusStart": "Installazione avviata:",
      "modalViewOnGitHub": "Vedi su GitHub",
      "openSource": "open source",
-      "poweredByOpenSource": "Powered by {0}."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/ja.json
+++ b/i18n/ja.json
@ -934,7 +934,7 @@
      "modalUpdateStatusStart": "インストール開始：",
      "modalViewOnGitHub": "GitHub で見る",
      "openSource": "open source",
-      "poweredByOpenSource": "Powered by {0}."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/lb.json
+++ b/i18n/lb.json
@ -1121,7 +1121,7 @@
      "modalUpdateStatusStart": "Installatioun ugefaang:",
      "modalViewOnGitHub": "Op GitHub kucken",
      "openSource": "Open Source",
-      "poweredByOpenSource": "Bedriwwen vun {0}."
+      "poweredBy": "bedriwwen vun"
    }
  },
  "forecast": {
--- a/i18n/lt.json
+++ b/i18n/lt.json
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Instaliavimas pradėtas:",
      "modalViewOnGitHub": "Peržiūrėti GitHub’e",
      "openSource": "atvirąjį kodą",
-      "poweredByOpenSource": "Sukurta naudojant {0}."
+      "poweredBy": "sukurta naudojant"
    }
  },
  "forecast": {
--- a/i18n/lv.json
+++ b/i18n/lv.json
@ -1141,7 +1141,7 @@
      "modalUpdateStatusStart": "Instalācija sākta:",
      "modalViewOnGitHub": "Skatīt GitHub",
      "openSource": "atvērtais kods",
-      "poweredByOpenSource": "Darbina {0}."
+      "poweredBy": "darbina"
    }
  },
  "forecast": {
--- a/i18n/nl.json
+++ b/i18n/nl.json
@ -1129,7 +1129,7 @@
      "modalUpdateStatusStart": "Installatie gestart:",
      "modalViewOnGitHub": "Op GitHub bekijken",
      "openSource": "open source",
-      "poweredByOpenSource": "Mogelijk gemaakt door {0}."
+      "poweredBy": "mogelijk gemaakt door"
    }
  },
  "forecast": {
--- a/i18n/pt.json
+++ b/i18n/pt.json
@ -1121,7 +1121,7 @@
      "modalUpdateStatusStart": "Instalação iniciada:",
      "modalViewOnGitHub": "Ver no GitHub",
      "openSource": "código aberto",
-      "poweredByOpenSource": "Desenvolvido por {0}."
+      "poweredBy": "desenvolvido por"
    }
  },
  "forecast": {
--- a/i18n/ru.json
+++ b/i18n/ru.json
@ -1126,7 +1126,7 @@
      "modalUpdateStatusStart": "Установка начата:",
      "modalViewOnGitHub": "Посмотреть на GitHub",
      "openSource": "с открытым исходным кодом",
-      "poweredByOpenSource": "Работает на {0}."
+      "poweredBy": "работает на"
    }
  },
  "forecast": {
--- a/i18n/sk.json
+++ b/i18n/sk.json
@ -1126,7 +1126,7 @@
      "modalUpdateStatusStart": "Inštalácia sa začala:",
      "modalViewOnGitHub": "Zobraziť na GitHub",
      "openSource": "otvorený zdrojový kód",
-      "poweredByOpenSource": "Využíva technológiu {0}."
+      "poweredBy": "beží na"
    }
  },
  "forecast": {
--- a/i18n/sv.json
+++ b/i18n/sv.json
@ -1140,7 +1140,7 @@
      "modalUpdateStatusStart": "Installationen har börjat:",
      "modalViewOnGitHub": "Se på GitHub",
      "openSource": "open source",
-      "poweredByOpenSource": "Powered by {0}."
+      "poweredBy": "drivs av"
    }
  },
  "forecast": {
--- a/i18n/ta.json
+++ b/i18n/ta.json
@ -1020,7 +1020,7 @@
      "modalUpdateStatusStart": "நிறுவல் தொடங்கியது:",
      "modalViewOnGitHub": "GitHub இல் காண்க",
      "openSource": "திறந்த மூல",
-      "poweredByOpenSource": "{0} ஆல் இயக்கப்படுகிறது."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/i18n/tr.json
+++ b/i18n/tr.json
@ -987,7 +987,7 @@
      "modalUpdateStatusStart": "Kurulum başladı:",
      "modalViewOnGitHub": "GitHub'da görüntüle",
      "openSource": "açık kaynak",
-      "poweredByOpenSource": "{0} tarafından desteklenmekte."
+      "poweredBy": "powered by"
    }
  },
  "forecast": {
--- a/tests/customization.spec.ts
+++ b/tests/customization.spec.ts
@ -54,6 +54,15 @@ test.describe("customization", async () => {
    const email = page.getByRole("link", { name: "support@example.com" });
    await expect(email).toBeVisible();
    await expect(email).toHaveAttribute("href", "mailto:support@example.com");
+
+    // footer: powered by evcc instead of community credit
+    await expect(page.getByText("powered by")).toBeVisible();
+    await expect(page.getByRole("link", { name: "evcc", exact: true })).toHaveAttribute(
+      "href",
+      "https://evcc.io/"
+    );
+    await expect(page.getByRole("link", { name: "open source" })).toBeVisible();
+    await expect(page.getByText("evcc community")).not.toBeVisible();
  });

  test("issue page uses email flow", async ({ page }) => {