OAuth: clarify callback window can be closed (#25789)

assets/js/components/Config/AuthSuccessBanner.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="alert alert-success my-4 pb-0" role="alert" data-testid="auth-success-banner">
+		<p>{{ $t("header.authProviders.success", { title: providerName }) }}</p>
+	</div>
+</template>
+
+<script lang="ts">
+import type { AuthProviders } from "@/types/evcc";
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+	name: "AuthSuccessBanner",
+	props: {
+		providerId: { type: String, required: true },
+		authProviders: { type: Object as PropType<AuthProviders>, default: () => ({}) },
+	},
+	computed: {
+		providerName() {
+			for (const [name, provider] of Object.entries(this.authProviders)) {
+				console.log(provider.id, this.providerId);
+				if (provider.id === this.providerId) {
+					return name;
+				}
+			}
+			return "Unknown";
+		},
+	},
+});
+</script>

assets/js/views/Config.vue

@@ -3,6 +3,11 @@
 		<div class="container px-4">
 			<TopHeader :title="$t('config.main.title')" />
 			<div class="wrapper pb-5">
+				<AuthSuccessBanner
+					v-if="callbackCompleted"
+					:provider-id="callbackCompleted"
+					:auth-providers="authProviders"
+				/>
 				<WelcomeBanner v-if="loadpointsRequired" />
 				<ExperimentalBanner v-else-if="$hiddenFeatures()" />
 
@@ -437,6 +442,7 @@ type DeviceValuesMap = Record<DeviceType, Record<string, any>>;
 import BackupRestoreModal from "@/components/Config/BackupRestoreModal.vue";
 import WelcomeBanner from "../components/Config/WelcomeBanner.vue";
 import ExperimentalBanner from "../components/Config/ExperimentalBanner.vue";
+import AuthSuccessBanner from "../components/Config/AuthSuccessBanner.vue";
 import PasswordModal from "../components/Auth/PasswordModal.vue";
 
 export default defineComponent({
@@ -453,6 +459,7 @@ export default defineComponent({
 		EebusIcon,
 		EebusModal,
 		ExperimentalBanner,
+		AuthSuccessBanner,
 		GeneralConfig,
 		HemsIcon,
 		HemsModal,
@@ -523,6 +530,12 @@ export default defineComponent({
 		return { title: this.$t("config.main.title") };
 	},
 	computed: {
+		callbackCompleted() {
+			return this.$route.query["callbackCompleted"] as string | undefined;
+		},
+		authProviders() {
+			return store.state?.authProviders;
+		},
 		loadpointsRequired() {
 			return this.loadpoints.length === 0;
 		},

i18n/de.json

@@ -697,6 +697,7 @@
     "authProviders": {
       "confirmLogout": "Sicher, dass du {title} trennen möchtest?",
       "loggedOut": "Erfolgreich abgemeldet",
+      "success": "Die Autorisierung mit {title} war erfolgreich. Du kannst diesen Tab jetzt schließen.",
       "title": "Autorisierungsstatus"
     },
     "blog": "Blog",

i18n/en.json

@@ -697,6 +697,7 @@
     "authProviders": {
       "confirmLogout": "Are you sure you want to disconnect {title}?",
       "loggedOut": "Successfully logged out",
+      "success": "Authorization with {title} was successful. You can now close this tab.",
       "title": "Authorization Status"
     },
     "blog": "Blog",

server/providerauth/handler.go

@@ -54,7 +54,7 @@ func (a *Handler) run(paramC chan<- util.Param) {
 		res := make(map[string]*AuthProvider)
 		for id, provider := range a.providers {
 			res[provider.DisplayName()] = &AuthProvider{
-				ID:            url.QueryEscape(id),
+				ID:            id,
 				Authenticated: provider.Authenticated(),
 			}
 		}
@@ -182,5 +182,5 @@ func (a *Handler) handleCallback(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	http.Redirect(w, r, "/", http.StatusFound)
+	http.Redirect(w, r, "/#/config?callbackCompleted="+url.QueryEscape(id), http.StatusFound)
 }