From 29c085bd2c29c272e998884872cc75600024f100 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 26 Nov 2021 20:33:37 +0100
Subject: [PATCH] [core] Save baseURL into PersistentStorage

---
 api/src/stores/main.ts      |  2 +-
 api/src/utils/persistent.ts |  8 +++----
 src/boot/axios.ts           | 18 ++-------------
 src/boot/plugins.ts         | 25 ++++++++++++++------
 src/pages/Backend.vue       | 46 +++++++++++++++++++++++++++++++++++++
 src/pages/Login.vue         | 39 ++++---------------------------
 src/router/routes.ts        |  5 ++++
 7 files changed, 80 insertions(+), 63 deletions(-)
 create mode 100644 src/pages/Backend.vue

diff --git a/api/src/stores/main.ts b/api/src/stores/main.ts
index 876deac..1635840 100644
--- a/api/src/stores/main.ts
+++ b/api/src/stores/main.ts
@@ -10,7 +10,7 @@ function loadToken() {
 }
 
 function clearToken() {
-  PersistentStorage.remove('fg_token');
+  void PersistentStorage.remove('fg_token');
 }
 
 export function saveToken(token?: string) {
diff --git a/api/src/utils/persistent.ts b/api/src/utils/persistent.ts
index 9a5b58e..e53f4f2 100644
--- a/api/src/utils/persistent.ts
+++ b/api/src/utils/persistent.ts
@@ -1,7 +1,8 @@
 import { LocalStorage, Platform } from 'quasar';
 import { Storage } from '@capacitor/storage';
 
-type GetReturn = Date | number | boolean | string | object;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PersitentTypes = Date | RegExp | number | boolean | string | object;
 
 export class PersistentStorage {
   static clear() {
@@ -14,13 +15,12 @@ export class PersistentStorage {
     else return Promise.resolve(LocalStorage.remove(key));
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static set(key: string, value: any) {
+  static set(key: string, value: PersitentTypes) {
     if (Platform.is.capacitor) return Storage.set({ key, value: JSON.stringify(value) });
     else return Promise.resolve(LocalStorage.set(key, value));
   }
 
-  static get<T extends GetReturn>(key: string) {
+  static get<T extends PersitentTypes>(key: string) {
     if (Platform.is.capacitor)
       return Storage.get({ key }).then((v) =>
         v.value === null ? null : (JSON.parse(v.value) as T)
diff --git a/src/boot/axios.ts b/src/boot/axios.ts
index c8cd602..403ea59 100644
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -1,5 +1,4 @@
 import { useMainStore, api } from '@flaschengeist/api';
-import { LocalStorage, Notify } from 'quasar';
 import { AxiosError } from 'axios';
 import { boot } from 'quasar/wrappers';
 import config from 'src/config';
@@ -31,7 +30,8 @@ function minify(o: unknown, cloned = false) {
 }
 
 export default boot(({ router }) => {
-  api.defaults.baseURL = LocalStorage.getItem<string>('baseURL') || config.baseURL;
+  // Persisted value is read in plugins.ts boot file!
+  api.defaults.baseURL = config.baseURL;
 
   /***
    * Intercept requests
@@ -95,17 +95,3 @@ export default boot(({ router }) => {
 });
 
 export { api };
-
-export const setBaseURL = (url: string) => {
-  LocalStorage.set('baseURL', url);
-  api.defaults.baseURL = url;
-  Notify.create({
-    message: 'Serveraddresse gespeichert',
-    position: 'bottom',
-    caption: `${url}`,
-    color: 'positive',
-  });
-  setTimeout(() => {
-    window.location.reload();
-  }, 5000);
-};
diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts
index a3e6ba7..ab7f195 100644
--- a/src/boot/plugins.ts
+++ b/src/boot/plugins.ts
@@ -1,10 +1,10 @@
-import { Notify } from 'quasar';
+import { Notify, Platform } from 'quasar';
 import { api } from 'src/boot/axios';
 import { boot } from 'quasar/wrappers';
 import routes from 'src/router/routes';
-import { AxiosResponse } from 'axios';
 import { RouteRecordRaw } from 'vue-router';
 import { FG_Plugin } from '@flaschengeist/types';
+import { PersistentStorage } from '@flaschengeist/api';
 
 /****************************************************
  ******** Internal area for some magic **************
@@ -264,16 +264,24 @@ function loadPlugin(
   return true;
 }
 
+async function loadBaseUrl() {
+  return PersistentStorage.get<string>('baseURL').then((url) => {
+    if (url !== null) api.defaults.baseURL = url;
+    console.log('loaded: ', url, api.defaults.baseURL);
+  });
+}
 /**
  * Loading backend information
  * @returns Backend object or null
  */
 async function getBackend() {
   try {
-    const { data }: AxiosResponse<Backend> = await api.get('/');
+    const { data } = await api.get<Backend>('/');
+    if (!data || typeof data !== 'object' || !('plugins' in data))
+      throw Error('Invalid backend response received');
     return data;
   } catch (e) {
-    console.warn(e);
+    console.error('Loading backend', e);
     return null;
   }
 }
@@ -282,10 +290,13 @@ async function getBackend() {
  * Boot file, load all required plugins, check for dependencies
  */
 export default boot(async ({ router, app }) => {
+  await loadBaseUrl();
   const backend = await getBackend();
-  if (!backend || typeof backend !== 'object' || !('plugins' in backend)) {
-    console.log('Backend error');
-    router.isReady().finally(() => void router.push({ name: 'offline', params: { refresh: 1 } }));
+  if (backend === null) {
+    router.isReady().finally(() => {
+      if (Platform.is.capacitor) void router.push({ name: 'setup_backend' });
+      else void router.push({ name: 'offline', params: { refresh: 1 } });
+    });
     return;
   }
 
diff --git a/src/pages/Backend.vue b/src/pages/Backend.vue
new file mode 100644
index 0000000..6214b46
--- /dev/null
+++ b/src/pages/Backend.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="row justify-center items-center content-center q-pa-md">
+    <q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
+      <q-toolbar class="bg-primary text-white">
+        <q-toolbar-title>Servereinstellung</q-toolbar-title>
+      </q-toolbar>
+      <q-card-section>
+        <q-form class="q-gutter-md" @submit="changeUrl">
+          <q-input v-model="server" filled label="Server" dense />
+          <q-btn dense color="primary" label="Speichern" type="submit" />
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { useRouter } from 'vue-router';
+import { notEmpty, PersistentStorage } from '@flaschengeist/api';
+import { defineComponent, ref } from 'vue';
+import { api } from 'boot/axios';
+
+export default defineComponent({
+  name: 'PageBackend',
+  setup() {
+    const router = useRouter();
+
+    const server = ref(api.defaults.baseURL);
+
+    function changeUrl() {
+      if (server.value) {
+        void PersistentStorage.set('baseURL', server.value).then(() => {
+          console.log('uiuiui');
+          void router.push({ name: 'login' }).then(() => router.go(0));
+        });
+      }
+    }
+
+    return {
+      changeUrl,
+      notEmpty,
+      server,
+    };
+  },
+});
+</script>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 6cb7614..7d99aa2 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -44,25 +44,13 @@
       </q-card-section>
       <div class="row justify-end">
         <q-btn
-          v-if="quasar.platform.is.cordova || quasar.platform.is.electron"
+          v-if="$q.platform.is.capacitor || $q.platform.is.electron"
           flat
           round
           icon="mdi-menu-down"
-          @click="openServerSettings"
+          :to="{ name: 'setup_backend' }"
         />
       </div>
-      <q-slide-transition v-if="quasar.platform.is.cordova || quasar.platform.is.electron">
-        <div v-show="visible">
-          <q-separator />
-          <q-card-section>
-            <q-form ref="ServerSettingsForm" class="q-gutter-md" @submit="changeUrl">
-              <div class="text-h6">Servereinstellung</div>
-              <q-input v-model="server" filled label="Server" dense />
-              <q-btn size="xs" dense color="primary" label="Speichern" type="submit" />
-            </q-form>
-          </q-card-section>
-        </div>
-      </q-slide-transition>
     </q-card>
   </q-page>
 </template>
@@ -73,34 +61,20 @@ import { Loading, Notify } from 'quasar';
 import { notEmpty, useMainStore, useUserStore } from '@flaschengeist/api';
 import { PasswordInput } from '@flaschengeist/api/components';
 import { defineComponent, ref } from 'vue';
-import { setBaseURL, api } from 'boot/axios';
-import { useQuasar } from 'quasar';
 
 export default defineComponent({
   name: 'PageLogin',
   components: { PasswordInput },
   setup() {
+    const mainRoute = { name: 'dashboard' };
+
     const mainStore = useMainStore();
     const userStore = useUserStore();
-    const mainRoute = { name: 'dashboard' };
     const router = useRouter();
 
     /* Stuff for the real login page */
     const userid = ref('');
     const password = ref('');
-    const server = ref<string | undefined>(api.defaults.baseURL);
-    const visible = ref(false);
-    const quasar = useQuasar();
-
-    function openServerSettings() {
-      visible.value = !visible.value;
-    }
-
-    function changeUrl() {
-      if (server.value) {
-        setBaseURL(server.value);
-      }
-    }
 
     async function doLogin() {
       Loading.show({ message: 'Du wirst angemeldet' });
@@ -155,16 +129,11 @@ export default defineComponent({
     }
 
     return {
-      changeUrl,
       doLogin,
       doReset,
       notEmpty,
-      openServerSettings,
       password,
-      server,
       userid,
-      visible,
-      quasar,
     };
   },
 });
diff --git a/src/router/routes.ts b/src/router/routes.ts
index b7a0cd6..d258554 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -53,6 +53,11 @@ const routes: RouteRecordRaw[] = [
     name: 'offline',
     component: () => import('pages/Offline.vue'),
   },
+  {
+    path: '/setup-backend',
+    name: 'setup_backend',
+    component: () => import('pages/Backend.vue'),
+  },
   // Always leave this as last one,
   // but you can also remove it
   {