[core] Improved backend setup on login page

src/pages/Backend.vue

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

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>
-
+      <div v-if="!backendSetup">
-      <q-card-section>
+        <q-card-section>
-        <q-form @submit="doLogin">
+          <q-form @submit="doLogin">
-          <q-input
+            <q-input
-            v-model="userid"
+              v-model="userid"
-            class="q-pa-md"
+              class="q-pa-md"
-            filled
+              filled
-            label="Benutzername oder E-Mail"
+              label="Benutzername oder E-Mail"
-            autocomplete="username"
+              autocomplete="username"
-            :rules="[notEmpty]"
+              :rules="[notEmpty]"
-            tabindex="1"
+              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>
+            <password-input
-          <div class="full-width row justify-end q-px-md q-pt-md">
+              v-model="password"
-            <q-btn label="Login" type="submit" color="primary" tabindex="3" />
+              class="q-px-md q-pt-md q-pb-none"
-          </div>
+              filled
-        </q-form>
+              label="Passwort"
-      </q-card-section>
+              autocomplete="cureent-password"
-      <div class="row justify-end">
+              :rules="[notEmpty]"
-        <q-btn
+              tabindex="2"
-          v-if="$q.platform.is.capacitor || $q.platform.is.electron"
+            />
-          flat
+            <div class="full-width row justify-end q-px-md">
-          round
+              <q-btn
-          icon="mdi-menu-down"
+                label="Passwort vergessen?"
-          :to="{ name: 'setup_backend' }"
+                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,
     };
   },
 });

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
   {