feat: tip for https

Zephyruso · Dec 6, 2024 · 0eae3b3 · 0eae3b3
1 parent 2ae072a
commit 0eae3b3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -84,6 +84,8 @@ export default {
   exportSettings: 'Export Settings',
   importSettings: 'Import Settings',
   hideUnavailable: 'Hide Unavailable',
+  protocolTips:
+    'You are trying to connect a http backend but the zashboard is served by https. This may cause connection error. Please allow the insecure content in your browser settings. The settings is on the left of the browser address bar.',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -84,6 +84,8 @@ export default {
   exportSettings: '导出设置',
   importSettings: '导入设置',
   hideUnavailable: '隐藏不可用',
+  protocolTips:
+    '您正在尝试连接一个http后端但zashboard是通过https提供的，这可能会导致连接错误，请在浏览器设置中允许不安全的内容，设置在浏览器地址栏左侧。',
   [LANG.EN_US]: 'English',
   [LANG.ZH_CN]: '中文',
 }
diff --git a/src/views/SetupPage.vue b/src/views/SetupPage.vue
@@ -1,5 +1,33 @@
 <template>
   <div class="flex h-full w-full items-center justify-center">
+    <div
+      class="toast toast-start toast-top max-w-64 whitespace-normal text-sm"
+      v-if="protocolTips"
+    >
+      <div class="breaks-all alert alert-warning w-72 whitespace-normal">
+        <a
+          href="https://github.com/Zephyruso/zashboard/blob/main/README.md"
+          target="_blank"
+        >
+          {{ $t('protocolTips') }}
+        </a>
+      </div>
+    </div>
+    <div class="absolute bottom-4 right-4">
+      {{ $t('language') }}:
+      <select
+        class="select select-bordered select-xs w-48"
+        v-model="language"
+        @change="() => (i18n.global.locale = language)"
+      >
+        <option
+          v-for="opt in Object.values(LANG)"
+          :key="opt"
+          :value="opt"
+          :label="$t(opt)"
+        />
+      </select>
+    </div>
     <div class="rounded-lg bg-base-100 p-6 shadow-lg">
       <h1 class="mb-4 text-2xl font-semibold">{{ $t('setup') }}</h1>
       <div class="form-control mb-4">
@@ -75,10 +103,13 @@
 </template>
 
 <script setup lang="ts">
+import { LANG } from '@/config'
+import { i18n } from '@/i18n'
 import router from '@/router'
+import { language } from '@/store/settings'
 import { activeUuid, addBackend, backendList, removeBackend } from '@/store/setup'
 import { MinusCircleIcon } from '@heroicons/vue/24/outline'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const form = reactive({
   protocol: 'http',
@@ -87,6 +118,8 @@ const form = reactive({
   password: '',
 })
 
+const protocolTips = ref(false)
+
 const handleSubmit = async (
   form: {
     protocol: string
@@ -103,6 +136,13 @@ const handleSubmit = async (
     return
   }
 
+  if (window.location.protocol === 'https:' && protocol === 'http' && !quiet) {
+    protocolTips.value = true
+    setTimeout(() => {
+      protocolTips.value = false
+    }, 10000)
+  }
+
   const data = await fetch(`${protocol}://${host}:${port}/version`, {
     method: 'GET',
     headers: {