From 323b61a7ef3bb5e9f0d057acf4991752b35bcab1 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 12 Feb 2025 13:22:14 +0100
Subject: [PATCH] footer and header in setup, remove lang setup step

---
 src/app/components/header/LangSelector.vue    | 44 +++++++++++
 src/app/components/header/Update.vue          |  2 +
 src/app/components/icons/Language.vue         | 15 ++++
 src/app/components/ui/Footer.vue              | 38 ++++++++++
 src/app/layouts/default.vue                   | 42 +----------
 src/app/layouts/setup.vue                     | 45 ++++++-----
 src/app/pages/setup/1.vue                     | 12 +--
 src/app/pages/setup/2.vue                     | 75 ++++++++++++++++++-
 src/app/pages/setup/3.vue                     | 72 +-----------------
 src/app/pages/setup/4.vue                     | 62 +++++++++++++--
 src/app/pages/setup/5.vue                     | 71 ------------------
 src/app/stores/setup.ts                       | 14 ++--
 src/server/api/setup/{3.post.ts => 2.post.ts} |  2 +-
 src/server/api/setup/{5.post.ts => 4.post.ts} |  0
 14 files changed, 274 insertions(+), 220 deletions(-)
 create mode 100644 src/app/components/header/LangSelector.vue
 create mode 100644 src/app/components/icons/Language.vue
 create mode 100644 src/app/components/ui/Footer.vue
 delete mode 100644 src/app/pages/setup/5.vue
 rename src/server/api/setup/{3.post.ts => 2.post.ts} (89%)
 rename src/server/api/setup/{5.post.ts => 4.post.ts} (100%)

diff --git a/src/app/components/header/LangSelector.vue b/src/app/components/header/LangSelector.vue
new file mode 100644
index 00000000..c0452def
--- /dev/null
+++ b/src/app/components/header/LangSelector.vue
@@ -0,0 +1,44 @@
+<template>
+  <SelectRoot v-model="langProxy" :default-value="locale">
+    <SelectTrigger
+      class="inline-flex h-8 items-center justify-around gap-2 rounded bg-gray-200 px-3 text-sm leading-none dark:bg-neutral-700 dark:text-neutral-400"
+      aria-label="Select language"
+    >
+      <IconsLanguage class="size-3" />
+      <SelectValue />
+      <IconsArrowDown class="size-3" />
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="min-w-28 rounded bg-gray-300 dark:bg-neutral-500"
+        position="popper"
+      >
+        <SelectViewport class="p-2">
+          <SelectItem
+            v-for="(option, index) in langs"
+            :key="index"
+            :value="option.code"
+            class="relative flex h-6 items-center rounded px-3 text-sm leading-none outline-none hover:bg-red-800 hover:text-white data-[state=checked]:underline dark:text-white"
+          >
+            <SelectItemText>
+              {{ option.name }}
+            </SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+const { locales, locale, setLocale } = useI18n();
+
+const langProxy = ref(locale);
+
+watchEffect(() => {
+  setLocale(langProxy.value);
+});
+
+const langs = locales.value.sort((a, b) => a.code.localeCompare(b.code));
+</script>
diff --git a/src/app/components/header/Update.vue b/src/app/components/header/Update.vue
index 15ffee6e..faadf344 100644
--- a/src/app/components/header/Update.vue
+++ b/src/app/components/header/Update.vue
@@ -23,4 +23,6 @@
 
 <script lang="ts" setup>
 const globalStore = useGlobalStore();
+
+// TODO: only show this to admins
 </script>
diff --git a/src/app/components/icons/Language.vue b/src/app/components/icons/Language.vue
new file mode 100644
index 00000000..9ddd7b3c
--- /dev/null
+++ b/src/app/components/icons/Language.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
+    />
+  </svg>
+</template>
diff --git a/src/app/components/ui/Footer.vue b/src/app/components/ui/Footer.vue
new file mode 100644
index 00000000..cfc5c356
--- /dev/null
+++ b/src/app/components/ui/Footer.vue
@@ -0,0 +1,38 @@
+<template>
+  <footer>
+    <p class="m-10 text-center text-xs text-gray-300 dark:text-neutral-600">
+      <a
+        class="hover:underline"
+        target="_blank"
+        href="https://github.com/wg-easy/wg-easy"
+        >WireGuard Easy</a
+      >
+      ({{ globalStore.currentRelease }}) © 2021-2025 by
+      <a
+        class="hover:underline"
+        target="_blank"
+        href="https://emile.nl/?ref=wg-easy"
+        >Emile Nijssen</a
+      >
+      is licensed under
+      <a
+        class="hover:underline"
+        target="_blank"
+        href="https://spdx.org/licenses/AGPL-3.0-only.html"
+        >AGPL-3.0-only</a
+      >
+      ·
+      <a
+        class="hover:underline"
+        href="https://github.com/sponsors/WeeJeWel"
+        target="_blank"
+        >{{ $t('donate') }}</a
+      >
+    </p>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+const globalStore = useGlobalStore();
+globalStore.fetchRelease();
+</script>
diff --git a/src/app/layouts/default.vue b/src/app/layouts/default.vue
index 179d017d..efa369a6 100644
--- a/src/app/layouts/default.vue
+++ b/src/app/layouts/default.vue
@@ -11,55 +11,21 @@
       >
         <HeaderLogo v-if="loggedIn" />
         <div class="flex grow-0 items-center gap-3 self-end xxs:self-center">
+          <HeaderLangSelector />
           <HeaderThemeSwitch />
-          <HeaderChartToggle />
+          <HeaderChartToggle v-if="loggedIn" />
           <UiUserMenu v-if="loggedIn" />
         </div>
       </div>
       <HeaderUpdate class="mt-5" />
     </header>
     <slot />
-    <footer>
-      <p class="m-10 text-center text-xs text-gray-300 dark:text-neutral-600">
-        <a
-          class="hover:underline"
-          target="_blank"
-          href="https://github.com/wg-easy/wg-easy"
-          >WireGuard Easy</a
-        >
-        ({{ globalStore.currentRelease }}) © 2021-2024 by
-        <a
-          class="hover:underline"
-          target="_blank"
-          href="https://emile.nl/?ref=wg-easy"
-          >Emile Nijssen</a
-        >
-        is licensed under
-        <a
-          class="hover:underline"
-          target="_blank"
-          href="https://spdx.org/licenses/AGPL-3.0-only.html"
-          >AGPL-3.0-only</a
-        >
-        ·
-        <a
-          class="hover:underline"
-          href="https://github.com/sponsors/WeeJeWel"
-          target="_blank"
-          >{{ $t('donate') }}</a
-        >
-      </p>
-    </footer>
+    <UiFooter />
   </div>
 </template>
 
 <script setup lang="ts">
-const globalStore = useGlobalStore();
-globalStore.fetchRelease();
-
 const route = useRoute();
 
-const loggedIn = computed(
-  () => route.path !== '/login' && route.path !== '/setup'
-);
+const loggedIn = computed(() => route.path !== '/login');
 </script>
diff --git a/src/app/layouts/setup.vue b/src/app/layouts/setup.vue
index b1fc260a..7e6f5dfb 100644
--- a/src/app/layouts/setup.vue
+++ b/src/app/layouts/setup.vue
@@ -1,23 +1,34 @@
 <template>
-  <main class="container mx-auto px-4">
-    <UiBanner />
-    <Panel>
-      <PanelBody class="mx-auto mt-10 p-4 md:w-[70%] lg:w-[60%]">
-        <h2 class="mb-16 mt-8 text-3xl font-medium">
-          {{ $t('setup.welcome') }}
-        </h2>
+  <div>
+    <header class="container mx-auto mt-4 max-w-3xl px-3 xs:mt-6 md:px-0">
+      <div class="mb-5 flex justify-end">
+        <div class="flex grow-0 items-center gap-3 self-end xxs:self-center">
+          <HeaderLangSelector />
+          <HeaderThemeSwitch />
+        </div>
+      </div>
+      <UiBanner />
+    </header>
+    <main>
+      <Panel>
+        <PanelBody class="mx-auto mt-10 p-4 md:w-[70%] lg:w-[60%]">
+          <h2 class="mb-16 mt-8 text-3xl font-medium">
+            {{ $t('setup.welcome') }}
+          </h2>
 
-        <slot />
+          <slot />
 
-        <div class="mt-12 flex">
-          <UiStepProgress
-            :step="setupStore.step"
-            :total-steps="setupStore.totalSteps"
-          />
-        </div>
-      </PanelBody>
-    </Panel>
-  </main>
+          <div class="mt-12 flex">
+            <UiStepProgress
+              :step="setupStore.step"
+              :total-steps="setupStore.totalSteps"
+            />
+          </div>
+        </PanelBody>
+      </Panel>
+    </main>
+    <UiFooter />
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/app/pages/setup/1.vue b/src/app/pages/setup/1.vue
index 4b7cedfd..ac67462e 100644
--- a/src/app/pages/setup/1.vue
+++ b/src/app/pages/setup/1.vue
@@ -1,14 +1,9 @@
 <template>
   <div>
-    <p class="p-8 text-center text-lg">
-      {{ $t('setup.messageSetupLanguage') }}
+    <p class="px-8 pt-8 text-center text-2xl">
+      {{ $t('setup.messageWelcome.whatIs') }}
     </p>
-    <div class="mb-8 flex justify-center">
-      <UiChooseLang />
-    </div>
-    <div>
-      <NuxtLink to="/setup/2"><BaseButton>Continue</BaseButton></NuxtLink>
-    </div>
+    <NuxtLink to="/setup/2"><BaseButton>Continue</BaseButton></NuxtLink>
   </div>
 </template>
 
@@ -16,7 +11,6 @@
 definePageMeta({
   layout: 'setup',
 });
-
 const setupStore = useSetupStore();
 setupStore.setStep(1);
 </script>
diff --git a/src/app/pages/setup/2.vue b/src/app/pages/setup/2.vue
index 6251264d..71e36e14 100644
--- a/src/app/pages/setup/2.vue
+++ b/src/app/pages/setup/2.vue
@@ -1,16 +1,83 @@
 <template>
   <div>
-    <p class="px-8 pt-8 text-center text-2xl">
-      {{ $t('setup.messageWelcome.whatIs') }}
+    <p class="p-8 text-center text-lg">
+      {{ $t('setup.messageSetupCreateAdminUser') }}
     </p>
-    <NuxtLink to="/setup/3"><BaseButton>Continue</BaseButton></NuxtLink>
+    <form id="newAccount"></form>
+    <div>
+      <Label for="username">{{ $t('username') }}</Label>
+      <input
+        id="username"
+        v-model="username"
+        form="newAccount"
+        type="text"
+        autocomplete="username"
+        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
+      />
+    </div>
+    <div>
+      <Label for="password">{{ $t('setup.newPassword') }}</Label>
+      <input
+        id="password"
+        v-model="password"
+        form="newAccount"
+        type="password"
+        autocomplete="new-password"
+        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
+      />
+    </div>
+    <div>
+      <Label for="accept">{{ $t('setup.accept') }}</Label>
+      <input
+        id="accept"
+        v-model="accept"
+        form="newAccount"
+        type="checkbox"
+        class="ml-2"
+      />
+    </div>
+    <BaseButton @click="newAccount">Create Account</BaseButton>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
+import { FetchError } from 'ofetch';
+const { t } = useI18n();
+
 definePageMeta({
   layout: 'setup',
 });
+
 const setupStore = useSetupStore();
 setupStore.setStep(2);
+const router = useRouter();
+const username = ref<null | string>(null);
+const password = ref<null | string>(null);
+const accept = ref<boolean>(true);
+
+const toast = useToast();
+
+async function newAccount() {
+  try {
+    if (!username.value || !password.value) {
+      toast.showToast({
+        type: 'error',
+        title: t('setup.requirements'),
+        message: t('setup.emptyFields'),
+      });
+      return;
+    }
+
+    await setupStore.step2(username.value, password.value, accept.value);
+    await router.push('/setup/3');
+  } catch (error) {
+    if (error instanceof FetchError) {
+      toast.showToast({
+        type: 'error',
+        title: t('setup.requirements'),
+        message: error.data.message,
+      });
+    }
+  }
+}
 </script>
diff --git a/src/app/pages/setup/3.vue b/src/app/pages/setup/3.vue
index 90850665..620844be 100644
--- a/src/app/pages/setup/3.vue
+++ b/src/app/pages/setup/3.vue
@@ -1,83 +1,19 @@
 <template>
   <div>
     <p class="p-8 text-center text-lg">
-      {{ $t('setup.messageSetupCreateAdminUser') }}
+      {{ 'Do you have a existing Setup?' }}
     </p>
-    <form id="newAccount"></form>
-    <div>
-      <Label for="username">{{ $t('username') }}</Label>
-      <input
-        id="username"
-        v-model="username"
-        form="newAccount"
-        type="text"
-        autocomplete="username"
-        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
-      />
+    <div class="mb-8 flex justify-center">
+      <NuxtLink to="/setup/4"><BaseButton>No</BaseButton></NuxtLink>
+      <NuxtLink to="/setup/migrate"><BaseButton>Yes</BaseButton></NuxtLink>
     </div>
-    <div>
-      <Label for="password">{{ $t('setup.newPassword') }}</Label>
-      <input
-        id="password"
-        v-model="password"
-        form="newAccount"
-        type="password"
-        autocomplete="new-password"
-        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
-      />
-    </div>
-    <div>
-      <Label for="accept">{{ $t('setup.accept') }}</Label>
-      <input
-        id="accept"
-        v-model="accept"
-        form="newAccount"
-        type="checkbox"
-        class="ml-2"
-      />
-    </div>
-    <BaseButton @click="newAccount">Create Account</BaseButton>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { FetchError } from 'ofetch';
-const { t } = useI18n();
-
 definePageMeta({
   layout: 'setup',
 });
-
 const setupStore = useSetupStore();
 setupStore.setStep(3);
-const router = useRouter();
-const username = ref<null | string>(null);
-const password = ref<null | string>(null);
-const accept = ref<boolean>(true);
-
-const toast = useToast();
-
-async function newAccount() {
-  try {
-    if (!username.value || !password.value) {
-      toast.showToast({
-        type: 'error',
-        title: t('setup.requirements'),
-        message: t('setup.emptyFields'),
-      });
-      return;
-    }
-
-    await setupStore.step3(username.value, password.value, accept.value);
-    await router.push('/setup/4');
-  } catch (error) {
-    if (error instanceof FetchError) {
-      toast.showToast({
-        type: 'error',
-        title: t('setup.requirements'),
-        message: error.data.message,
-      });
-    }
-  }
-}
 </script>
diff --git a/src/app/pages/setup/4.vue b/src/app/pages/setup/4.vue
index 806f3119..9cd88bd2 100644
--- a/src/app/pages/setup/4.vue
+++ b/src/app/pages/setup/4.vue
@@ -1,19 +1,71 @@
 <template>
   <div>
     <p class="p-8 text-center text-lg">
-      {{ 'Do you have a existing Setup?' }}
+      {{ $t('setup.messageSetupHostPort') }}
     </p>
-    <div class="mb-8 flex justify-center">
-      <NuxtLink to="/setup/5"><BaseButton>No</BaseButton></NuxtLink>
-      <NuxtLink to="/setup/migrate"><BaseButton>Yes</BaseButton></NuxtLink>
+    <div>
+      <Label for="host">{{ $t('setup.host') }}</Label>
+      <input
+        id="host"
+        v-model="host"
+        type="text"
+        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
+        placeholder="vpn.example.com"
+      />
     </div>
+    <div>
+      <Label for="port">{{ $t('setup.port') }}</Label>
+      <input
+        id="port"
+        v-model="port"
+        type="number"
+        :min="1"
+        :max="65535"
+        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
+      />
+    </div>
+    <BaseButton @click="updateHostPort">Continue</BaseButton>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
 definePageMeta({
   layout: 'setup',
 });
+
+const { t } = useI18n();
+
 const setupStore = useSetupStore();
 setupStore.setStep(4);
+const router = useRouter();
+const host = ref<null | string>(null);
+const port = ref<number>(51820);
+
+const toast = useToast();
+
+async function updateHostPort() {
+  if (!host.value || !port.value) {
+    toast.showToast({
+      type: 'error',
+      title: t('setup.requirements'),
+      message: t('setup.emptyFields'),
+    });
+    return;
+  }
+
+  try {
+    await setupStore.step4(host.value, port.value);
+    await router.push('/setup/success');
+  } catch (error) {
+    if (error instanceof FetchError) {
+      toast.showToast({
+        type: 'error',
+        title: t('setup.requirements'),
+        message: error.data.message,
+      });
+    }
+  }
+}
 </script>
diff --git a/src/app/pages/setup/5.vue b/src/app/pages/setup/5.vue
deleted file mode 100644
index 9ca57c35..00000000
--- a/src/app/pages/setup/5.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <p class="p-8 text-center text-lg">
-      {{ $t('setup.messageSetupHostPort') }}
-    </p>
-    <div>
-      <Label for="host">{{ $t('setup.host') }}</Label>
-      <input
-        id="host"
-        v-model="host"
-        type="text"
-        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
-        placeholder="vpn.example.com"
-      />
-    </div>
-    <div>
-      <Label for="port">{{ $t('setup.port') }}</Label>
-      <input
-        id="port"
-        v-model="port"
-        type="number"
-        :min="1"
-        :max="65535"
-        class="mb-5 w-full rounded-lg border-2 border-gray-100 px-3 py-2 text-sm text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-gray-200 dark:placeholder:text-neutral-400 dark:focus:border-red-800"
-      />
-    </div>
-    <BaseButton @click="updateHostPort">Continue</BaseButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { FetchError } from 'ofetch';
-
-definePageMeta({
-  layout: 'setup',
-});
-
-const { t } = useI18n();
-
-const setupStore = useSetupStore();
-setupStore.setStep(5);
-const router = useRouter();
-const host = ref<null | string>(null);
-const port = ref<number>(51820);
-
-const toast = useToast();
-
-async function updateHostPort() {
-  if (!host.value || !port.value) {
-    toast.showToast({
-      type: 'error',
-      title: t('setup.requirements'),
-      message: t('setup.emptyFields'),
-    });
-    return;
-  }
-
-  try {
-    await setupStore.step5(host.value, port.value);
-    await router.push('/setup/success');
-  } catch (error) {
-    if (error instanceof FetchError) {
-      toast.showToast({
-        type: 'error',
-        title: t('setup.requirements'),
-        message: error.data.message,
-      });
-    }
-  }
-}
-</script>
diff --git a/src/app/stores/setup.ts b/src/app/stores/setup.ts
index 6ecde89f..478c9e0a 100644
--- a/src/app/stores/setup.ts
+++ b/src/app/stores/setup.ts
@@ -4,8 +4,8 @@ export const useSetupStore = defineStore('Setup', () => {
   /**
    * @throws if unsuccessful
    */
-  async function step3(username: string, password: string, accept: boolean) {
-    const response = await $fetch('/api/setup/3', {
+  async function step2(username: string, password: string, accept: boolean) {
+    const response = await $fetch('/api/setup/2', {
       method: 'post',
       body: { username, password, accept },
     });
@@ -15,8 +15,8 @@ export const useSetupStore = defineStore('Setup', () => {
   /**
    * @throws if unsuccessful
    */
-  async function step5(host: string, port: number) {
-    const response = await $fetch('/api/setup/5', {
+  async function step4(host: string, port: number) {
+    const response = await $fetch('/api/setup/4', {
       method: 'post',
       body: { host, port },
     });
@@ -35,14 +35,14 @@ export const useSetupStore = defineStore('Setup', () => {
   }
 
   const step = ref(1);
-  const totalSteps = ref(6);
+  const totalSteps = ref(5);
   function setStep(i: number) {
     step.value = i;
   }
 
   return {
-    step3,
-    step5,
+    step2,
+    step4,
     runMigration,
     step,
     totalSteps,
diff --git a/src/server/api/setup/3.post.ts b/src/server/api/setup/2.post.ts
similarity index 89%
rename from src/server/api/setup/3.post.ts
rename to src/server/api/setup/2.post.ts
index 393a4deb..ae1e1b29 100644
--- a/src/server/api/setup/3.post.ts
+++ b/src/server/api/setup/2.post.ts
@@ -9,6 +9,6 @@ export default defineSetupEventHandler(async ({ event }) => {
   // TODO: validate setup step
 
   await Database.users.create(username, password);
-  await Database.general.setSetupStep(4);
+  await Database.general.setSetupStep(3);
   return { success: true };
 });
diff --git a/src/server/api/setup/5.post.ts b/src/server/api/setup/4.post.ts
similarity index 100%
rename from src/server/api/setup/5.post.ts
rename to src/server/api/setup/4.post.ts