Feat: Show insecure warning (#1779)

show insecure warning

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>

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"
       >

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"

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"

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,

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",

src/server/api/release.get.ts → 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,
   };
 });