From 589ec1fe9a91ea03615f8c9e652dc0581371053a Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Mon, 31 Mar 2025 10:29:22 +0200
Subject: [PATCH] Feat: Show insecure warning (#1779)

show insecure warning
---
 src/app/components/Header/Insecure.vue        | 22 +++++++++++++++++++
 src/app/components/Header/Update.vue          |  8 +++----
 src/app/components/Ui/Footer.vue              |  2 +-
 src/app/pages/login.vue                       |  1 +
 src/app/stores/global.ts                      |  4 ++--
 src/i18n/locales/en.json                      |  3 ++-
 .../{release.get.ts => information.get.ts}    |  2 ++
 7 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/app/components/Header/Insecure.vue
 rename src/server/api/{release.get.ts => information.get.ts} (85%)

diff --git a/src/app/components/Header/Insecure.vue b/src/app/components/Header/Insecure.vue
new file mode 100644
index 00000000..8b61209b
--- /dev/null
+++ b/src/app/components/Header/Insecure.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    v-if="!globalStore.information?.insecure && !https"
+    class="container mx-auto w-fit rounded-md bg-red-800 p-4 text-white shadow-lg dark:bg-red-100 dark:text-red-600"
+  >
+    <p class="text-center">{{ $t('login.insecure') }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const globalStore = useGlobalStore();
+
+const https = ref(false);
+
+onMounted(() => {
+  if (window.location.protocol === 'https:') {
+    https.value = true;
+  } else {
+    https.value = false;
+  }
+});
+</script>
diff --git a/src/app/components/Header/Update.vue b/src/app/components/Header/Update.vue
index a23bb89a..a00d83a8 100644
--- a/src/app/components/Header/Update.vue
+++ b/src/app/components/Header/Update.vue
@@ -1,21 +1,21 @@
 <template>
   <div
     v-if="
-      globalStore.release?.updateAvailable &&
+      globalStore.information?.updateAvailable &&
       authStore.userData &&
       hasPermissions(authStore.userData, 'admin', 'any')
     "
     class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
-    :title="`v${globalStore.release.currentRelease} → v${globalStore.release.latestRelease.version}`"
+    :title="`v${globalStore.information.currentRelease} → v${globalStore.information.latestRelease.version}`"
   >
     <div class="container mx-auto flex flex-auto flex-row items-center">
       <div class="flex-grow">
         <p class="font-bold">{{ $t('update.updateAvailable') }}</p>
-        <p>{{ globalStore.release.latestRelease.changelog }}</p>
+        <p>{{ globalStore.information.latestRelease.changelog }}</p>
       </div>
 
       <a
-        :href="`https://github.com/wg-easy/wg-easy/releases/tag/${globalStore.release.latestRelease.version}`"
+        :href="`https://github.com/wg-easy/wg-easy/releases/tag/${globalStore.information.latestRelease.version}`"
         target="_blank"
         class="font-sm float-right flex-shrink-0 rounded-md border-2 border-red-800 bg-white p-3 font-semibold text-red-800 transition-all hover:border-white hover:bg-red-800 hover:text-white dark:border-red-600 dark:bg-red-100 dark:text-red-600 dark:hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-red-100"
       >
diff --git a/src/app/components/Ui/Footer.vue b/src/app/components/Ui/Footer.vue
index 78aef5a3..e8d13262 100644
--- a/src/app/components/Ui/Footer.vue
+++ b/src/app/components/Ui/Footer.vue
@@ -7,7 +7,7 @@
         href="https://github.com/wg-easy/wg-easy"
         >WireGuard Easy</a
       >
-      ({{ globalStore.release?.currentRelease }}) © 2021-2025 by
+      ({{ globalStore.information?.currentRelease }}) © 2021-2025 by
       <a
         class="hover:underline"
         target="_blank"
diff --git a/src/app/pages/login.vue b/src/app/pages/login.vue
index 098f2d05..9c342f61 100644
--- a/src/app/pages/login.vue
+++ b/src/app/pages/login.vue
@@ -1,6 +1,7 @@
 <template>
   <main>
     <UiBanner />
+    <HeaderInsecure />
     <form
       class="mx-auto mt-10 flex w-64 flex-col gap-5 overflow-hidden rounded-md bg-white p-5 text-gray-700 shadow dark:bg-neutral-700 dark:text-neutral-200"
       @submit.prevent="submit"
diff --git a/src/app/stores/global.ts b/src/app/stores/global.ts
index 17ebf19f..aee45d54 100644
--- a/src/app/stores/global.ts
+++ b/src/app/stores/global.ts
@@ -1,5 +1,5 @@
 export const useGlobalStore = defineStore('Global', () => {
-  const { data: release } = useFetch('/api/release', {
+  const { data: information } = useFetch('/api/information', {
     method: 'get',
   });
 
@@ -21,7 +21,7 @@ export const useGlobalStore = defineStore('Global', () => {
 
   return {
     sortClient,
-    release,
+    information,
     uiShowCharts,
     toggleCharts,
     uiChartType,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d390d3db..6dd09415 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -65,7 +65,8 @@
   "login": {
     "signIn": "Sign In",
     "rememberMe": "Remember me",
-    "rememberMeDesc": "Stay logged after closing the browser"
+    "rememberMeDesc": "Stay logged after closing the browser",
+    "insecure": "You can't log in with an insecure connection. Use HTTPS."
   },
   "error": {
     "clear": "Clear",
diff --git a/src/server/api/release.get.ts b/src/server/api/information.get.ts
similarity index 85%
rename from src/server/api/release.get.ts
rename to src/server/api/information.get.ts
index 8a6fa12f..5a212fd0 100644
--- a/src/server/api/release.get.ts
+++ b/src/server/api/information.get.ts
@@ -3,9 +3,11 @@ import { gt } from 'semver';
 export default defineEventHandler(async () => {
   const latestRelease = await cachedFetchLatestRelease();
   const updateAvailable = gt(latestRelease.version, RELEASE);
+  const insecure = WG_ENV.INSECURE;
   return {
     currentRelease: RELEASE,
     latestRelease: latestRelease,
     updateAvailable,
+    insecure,
   };
 });