Replace cloud tunnel remote access with embedded Tailscale (tsnet)

assets/js/components/Config/Remote/RemoteClientReveal.vue

@@ -1,30 +1,8 @@
 <template>
 	<div>
 		<ol class="text-muted mb-2">
-			<li>
-				<i18n-t keypath="config.remote.qrInstall" scope="global">
-					<template #ios>
-						<a href="https://apps.apple.com/app/evcc-io/id6478510176" target="_blank">
-							iOS
-						</a>
-					</template>
-					<template #android>
-						<a
-							href="https://play.google.com/store/apps/details?id=io.evcc.android"
-							target="_blank"
-						>
-							Android
-						</a>
-					</template>
-				</i18n-t>
-			</li>
 			<li>{{ $t("config.remote.qrScan") }}</li>
 		</ol>
-		<div class="text-center my-3">
-			<a v-if="qrDataUrl" :href="appUrl" class="d-inline-block">
-				<img :src="qrDataUrl" alt="QR Code" class="qr-code" />
-			</a>
-		</div>
 
 		<hr class="my-4" />
 
@@ -70,7 +48,6 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import QRCode from "qrcode";
 import FormRow from "../FormRow.vue";
 import CopyLink from "../../Helper/CopyLink.vue";
 import type { RemoteClientCreated } from "@/types/evcc";
@@ -83,43 +60,5 @@ export default defineComponent({
 		serverUrl: { type: String, required: true },
 	},
 	emits: ["done"],
-	data() {
-		return {
-			qrDataUrl: null as string | null,
-		};
-	},
-	computed: {
-		appUrl(): string {
-			if (!this.client || !this.serverUrl) return "";
-			const params = new URLSearchParams({
-				url: this.serverUrl,
-				username: this.client.username,
-				password: this.client.password,
-			});
-			return `evcc://server?${params.toString()}`;
-		},
-	},
-	watch: {
-		appUrl: {
-			immediate: true,
-			async handler(url: string) {
-				if (!url) return;
-				try {
-					this.qrDataUrl = await QRCode.toDataURL(url, {
-						width: 200,
-						margin: 1,
-					});
-				} catch {
-					this.qrDataUrl = null;
-				}
-			},
-		},
-	},
 });
 </script>
-
-<style scoped>
-.qr-code {
-	image-rendering: pixelated;
-}
-</style>

assets/js/components/Config/Remote/RemoteModal.vue

@@ -10,20 +10,19 @@
 			Development preview. Not ready for general use. Use with caution and monitor your system
 			closely. Feedback welcome!
 		</div>
-		<SponsorTokenRequired v-if="!isSponsor" feature class="mt-0" />
 		<ErrorMessage :error="error" />
 
 		<template v-if="view === 'list'">
 			<p>{{ $t("config.remote.description") }}</p>
+
 			<div class="form-check form-switch my-3">
 				<input
 					id="remoteEnabled"
 					:checked="config.enabled"
 					class="form-check-input"
 					type="checkbox"
 					role="switch"
-					:disabled="!isSponsor"
-					@change="change"
+					@change="changeEnabled"
 				/>
 				<div class="form-check-label">
 					<label for="remoteEnabled">{{ $t("config.remote.enableLabel") }}</label>
@@ -38,15 +37,73 @@
 				</div>
 			</div>
 
-			<div v-if="status.url" class="mt-4">
-				<FormRow id="remoteServerUrl" :label="$t('config.remote.url')">
-					<input
-						id="remoteServerUrl"
-						type="text"
-						class="form-control border"
-						:value="status.url"
-						readonly
-					/>
+			<template v-if="config.enabled">
+				<div v-if="status.url" class="mt-4">
+					<FormRow id="remoteTailnetUrl" :label="$t('config.remote.url')">
+						<input
+							id="remoteTailnetUrl"
+							type="text"
+							class="form-control border"
+							:value="status.url"
+							readonly
+						/>
+					</FormRow>
+				</div>
+
+				<div v-if="status.authUrl" class="mt-4">
+					<p class="text-muted small">
+						{{ $t("config.remote.authRequired") }}
+					</p>
+					<a
+						:href="status.authUrl"
+						target="_blank"
+						rel="noopener"
+						class="btn btn-primary btn-sm"
+					>
+						{{ $t("config.remote.authenticateTailscale") }}
+					</a>
+				</div>
+
+				<hr class="my-4" />
+
+				<FormRow id="remoteHostname" :label="$t('config.remote.hostname')">
+					<div class="input-group">
+						<input
+							id="remoteHostname"
+							v-model="hostname"
+							type="text"
+							class="form-control border"
+							:placeholder="$t('config.remote.hostnamePlaceholder')"
+						/>
+						<button
+							type="button"
+							class="btn btn-outline-secondary"
+							@click="saveHostname"
+						>
+							{{ $t("config.general.save") }}
+						</button>
+					</div>
+				</FormRow>
+
+				<FormRow id="remoteAuthKey" :label="$t('config.remote.authKey')">
+					<div class="input-group">
+						<input
+							id="remoteAuthKey"
+							v-model="authKey"
+							type="password"
+							class="form-control border"
+							:placeholder="$t('config.remote.authKeyPlaceholder')"
+							autocomplete="off"
+						/>
+						<button
+							type="button"
+							class="btn btn-outline-secondary"
+							@click="saveAuthKey"
+						>
+							{{ $t("config.general.save") }}
+						</button>
+					</div>
+					<div class="form-text">{{ $t("config.remote.authKeyHint") }}</div>
 				</FormRow>
 
 				<hr class="my-4" />
@@ -62,7 +119,7 @@
 					@add="view = 'create'"
 					@remove="removeClient"
 				/>
-			</div>
+			</template>
 		</template>
 
 		<RemoteClientCreate
@@ -85,7 +142,6 @@ import { defineComponent } from "vue";
 import GenericModal from "../../Helper/GenericModal.vue";
 import ErrorMessage from "../../Helper/ErrorMessage.vue";
 import FormRow from "../FormRow.vue";
-import SponsorTokenRequired from "../DeviceModal/SponsorTokenRequired.vue";
 import RemoteClientList from "./RemoteClientList.vue";
 import RemoteClientCreate from "./RemoteClientCreate.vue";
 import RemoteClientReveal from "./RemoteClientReveal.vue";
@@ -107,26 +163,26 @@ export default defineComponent({
 		GenericModal,
 		ErrorMessage,
 		FormRow,
-		SponsorTokenRequired,
 		RemoteClientList,
 		RemoteClientCreate,
 		RemoteClientReveal,
 	},
 	props: {
 		remote: { type: Object as () => Remote | undefined, default: undefined },
-		isSponsor: Boolean,
 	},
 	data() {
 		return {
 			error: null as string | null,
 			view: "list" as View,
 			clients: [] as RemoteClient[],
 			createdClient: null as RemoteClientCreated | null,
+			authKey: "",
+			hostname: "",
 		};
 	},
 	computed: {
 		config(): RemoteConfig {
-			return this.remote?.config ?? { enabled: false };
+			return this.remote?.config ?? { enabled: false, hostname: "evcc" };
 		},
 		status(): RemoteStatus {
 			return this.remote?.status ?? { connected: false, loginBlocked: false };
@@ -142,6 +198,14 @@ export default defineComponent({
 			}
 		},
 	},
+	watch: {
+		"config.hostname": {
+			immediate: true,
+			handler(val: string) {
+				this.hostname = val || "evcc";
+			},
+		},
+	},
 	methods: {
 		async onOpen() {
 			this.error = null;
@@ -161,7 +225,7 @@ export default defineComponent({
 				this.handleError(err);
 			}
 		},
-		async change(e: Event) {
+		async changeEnabled(e: Event) {
 			const target = e.target as HTMLInputElement;
 			const checked = target.checked;
 			try {
@@ -175,6 +239,23 @@ export default defineComponent({
 				this.handleError(err);
 			}
 		},
+		async saveAuthKey() {
+			try {
+				this.error = null;
+				await api.post("config/remote/authkey", { authKey: this.authKey });
+				this.authKey = "";
+			} catch (err) {
+				this.handleError(err);
+			}
+		},
+		async saveHostname() {
+			try {
+				this.error = null;
+				await api.post("config/remote/hostname", { hostname: this.hostname });
+			} catch (err) {
+				this.handleError(err);
+			}
+		},
 		async submitCreate(payload: { username: string; expiresIn: number }) {
 			try {
 				this.error = null;

assets/js/types/evcc.ts

@@ -490,11 +490,13 @@ export type Remote = ConfigStatus<RemoteConfig, RemoteStatus>;
 
 export type RemoteConfig = {
   enabled: boolean;
+  hostname: string;
 };
 
 export type RemoteStatus = {
   connected: boolean;
   url?: string;
+  authUrl?: string;
   loginBlocked: boolean;
   lastSeen?: Record<string, string>;
 };

assets/js/views/Config.vue

@@ -430,7 +430,7 @@
 				<TelemetryModal :is-sponsor="isSponsor" :telemetry="telemetry" />
 				<OptimizerModal :is-sponsor="isSponsor" />
 				<ExperimentalModal :experimental="experimental" />
-				<RemoteModal :remote="remote" :is-sponsor="isSponsor" />
+				<RemoteModal :remote="remote" />
 				<TitleModal @changed="loadDirty" />
 				<ModbusProxyModal :is-sponsor="isSponsor" @changed="loadDirty" />
 				<CircuitsModal :gridMeter="gridMeter" :extMeters="extMeters" @changed="loadDirty" />

cmd/root.go

@@ -238,11 +238,8 @@ func runRoot(cmd *cobra.Command, args []string) {
 	// publish to UI
 	go socketHub.Run(pipe.NewDropper(ignoreEmpty).Pipe(tee.Attach()), cache)
 
-	// remote access tunnel
-	var remoteAccess *remote.Remote
-	if remoteHost := os.Getenv("EVCC_REMOTE_ACCESS"); remoteHost != "" {
-		remoteAccess = remote.New(remoteHost, httpd.Router(), valueChan)
-	}
+	// remote access via Tailscale
+	remoteAccess := remote.New(httpd.Router(), valueChan)
 
 	// signal ui listening
 	valueChan <- util.Param{Key: keys.StartupCompleted, Val: false}
@@ -393,9 +390,7 @@ func runRoot(cmd *cobra.Command, args []string) {
 	}}
 
 	// publish remote access status
-	if remoteAccess != nil {
-		valueChan <- util.Param{Key: keys.Remote, Val: remoteAccess.ConfigStatus()}
-	}
+	valueChan <- util.Param{Key: keys.Remote, Val: remoteAccess.ConfigStatus()}
 
 	// publish system infos
 	valueChan <- util.Param{Key: keys.Version, Val: util.FormattedVersion()}