From 6732921ff70e7b10763385714c60b8695b5337a1 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sat, 27 Nov 2021 01:31:43 +0100
Subject: [PATCH] [core] Improved backend setup on login page

---
 src/pages/Backend.vue |  46 --------------
 src/pages/Login.vue   | 135 +++++++++++++++++++++++++++---------------
 src/router/routes.ts  |  11 ++--
 3 files changed, 92 insertions(+), 100 deletions(-)
 delete mode 100644 src/pages/Backend.vue

diff --git a/src/pages/Backend.vue b/src/pages/Backend.vue
deleted file mode 100644
index a5e6413..0000000
--- a/src/pages/Backend.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<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 '@flaschengeist/api';
-
-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 7d99aa2..2a80ab2 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -2,55 +2,68 @@
   <q-page padding class="fit row justify-center items-center content-center">
     <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> Login </q-toolbar-title>
+        <q-toolbar-title>{{ backendSetup ? 'Servereinrichtung' : 'Login' }}</q-toolbar-title>
       </q-toolbar>
-
-      <q-card-section>
-        <q-form @submit="doLogin">
-          <q-input
-            v-model="userid"
-            class="q-pa-md"
-            filled
-            label="Benutzername oder E-Mail"
-            autocomplete="username"
-            :rules="[notEmpty]"
-            tabindex="1"
-          />
-          <password-input
-            v-model="password"
-            class="q-px-md q-pt-md q-pb-none"
-            filled
-            label="Passwort"
-            autocomplete="cureent-password"
-            :rules="[notEmpty]"
-            tabindex="2"
-          />
-          <div class="full-width row justify-end q-px-md">
-            <q-btn
-              label="Passwort vergessen?"
-              type="a"
-              color="secondary"
-              tabindex="4"
-              flat
-              dense
-              size="sm"
-              @click="doReset"
+      <div v-if="!backendSetup">
+        <q-card-section>
+          <q-form @submit="doLogin">
+            <q-input
+              v-model="userid"
+              class="q-pa-md"
+              filled
+              label="Benutzername oder E-Mail"
+              autocomplete="username"
+              :rules="[notEmpty]"
+              tabindex="1"
             />
-          </div>
-          <div class="full-width row justify-end q-px-md q-pt-md">
-            <q-btn label="Login" type="submit" color="primary" tabindex="3" />
-          </div>
-        </q-form>
-      </q-card-section>
-      <div class="row justify-end">
-        <q-btn
-          v-if="$q.platform.is.capacitor || $q.platform.is.electron"
-          flat
-          round
-          icon="mdi-menu-down"
-          :to="{ name: 'setup_backend' }"
-        />
+            <password-input
+              v-model="password"
+              class="q-px-md q-pt-md q-pb-none"
+              filled
+              label="Passwort"
+              autocomplete="cureent-password"
+              :rules="[notEmpty]"
+              tabindex="2"
+            />
+            <div class="full-width row justify-end q-px-md">
+              <q-btn
+                label="Passwort vergessen?"
+                type="a"
+                color="secondary"
+                tabindex="4"
+                flat
+                dense
+                size="sm"
+                @click="doReset"
+              />
+            </div>
+            <div class="full-width row justify-end q-px-md q-pt-md">
+              <q-btn label="Login" type="submit" color="primary" tabindex="3" />
+            </div>
+          </q-form>
+        </q-card-section>
+        <div class="row justify-end">
+          <q-btn
+            v-if="$q.platform.is.capacitor || $q.platform.is.electron"
+            flat
+            round
+            :icon="showBackendSetup ? 'mdi-menu-up' : 'mdi-menu-down'"
+            @click="showBackendSetup = !showBackendSetup"
+          />
+        </div>
       </div>
+      <q-slide-transition v-if="$q.platform.is.capacitor">
+        <div v-show="showBackendSetup || backendSetup">
+          <q-separator />
+          <q-card-section>
+            <q-form ref="ServerSettingsForm" class="q-gutter-md" @submit="changeBackend">
+              <div class="text-h6">Backend einrichten</div>
+              <q-input v-model="server" filled label="Server" dense />
+              <q-btn dense color="primary" label="Speichern" type="submit" />
+            </q-form>
+          </q-card-section>
+        </div>
+      </q-slide-transition>
     </q-card>
   </q-page>
 </template>
@@ -58,23 +71,44 @@
 <script lang="ts">
 import { useRouter } from 'vue-router';
 import { Loading, Notify } from 'quasar';
-import { notEmpty, useMainStore, useUserStore } from '@flaschengeist/api';
+import { api, notEmpty, PersistentStorage, useMainStore, useUserStore } from '@flaschengeist/api';
 import { PasswordInput } from '@flaschengeist/api/components';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent({
   name: 'PageLogin',
   components: { PasswordInput },
-  setup() {
+  props: {
+    backendSetup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
     const mainRoute = { name: 'dashboard' };
 
     const mainStore = useMainStore();
     const userStore = useUserStore();
     const router = useRouter();
 
+    onMounted(() => {
+      if (mainStore.session) void router.replace(mainRoute);
+    });
+
     /* Stuff for the real login page */
     const userid = ref('');
     const password = ref('');
+    const server = ref(api.defaults.baseURL);
+    const showBackendSetup = ref(!!props.backendSetup);
+
+    function changeBackend() {
+      if (server.value) {
+        void PersistentStorage.set('baseURL', server.value).then(() => {
+          showBackendSetup.value = false;
+          void router.go(0);
+        });
+      }
+    }
 
     async function doLogin() {
       Loading.show({ message: 'Du wirst angemeldet' });
@@ -129,11 +163,14 @@ export default defineComponent({
     }
 
     return {
+      changeBackend,
       doLogin,
       doReset,
       notEmpty,
       password,
       userid,
+      server,
+      showBackendSetup,
     };
   },
 });
diff --git a/src/router/routes.ts b/src/router/routes.ts
index d258554..b83b05b 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -10,12 +10,18 @@ const routes: RouteRecordRaw[] = [
         name: 'login',
         path: 'login',
         component: () => import('pages/Login.vue'),
+        props: true,
       },
       {
         name: 'password_reset',
         path: 'reset',
         component: () => import('pages/Reset.vue'),
       },
+      {
+        path: '/setup-backend',
+        name: 'setup_backend',
+        redirect: { name: 'login', params: { backendSetup: 1 } },
+      },
       {
         name: 'about_out',
         path: 'about',
@@ -53,11 +59,6 @@ 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
   {