From f11add00d95f2d07680bd46b346428d8f30299fa Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 13 Dec 2020 11:05:36 +0100
Subject: [PATCH] move login to a separate page

---
 src/app/App.vue                | 33 +++++++-----------
 src/app/layout/Default.vue     | 31 +++++++++++++++++
 src/app/layout/Fullscreen.vue  |  5 +++
 src/auth/Login.vue             | 63 +++++++++++++++++++---------------
 src/shared/components/index.ts |  4 +--
 src/shared/router.ts           |  5 ++-
 6 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 src/app/layout/Default.vue
 create mode 100644 src/app/layout/Fullscreen.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 86f28d0..0927e8b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,35 +1,26 @@
 <template>
   <div>
-    <div class="min-vh-100 d-flex -align-items-stretch -justify-spcace-between">
-      <Sidebar />
-      <main class="container-fluid pt-3 pb-3">
-        <TopNav />
-        <router-view />
-      </main>
-    </div>
     <ErrorBar />
-    <Player />
+    <component :is="layout">
+      <router-view />
+    </component>
   </div>
 </template>
-<style lang="scss">
-  main {
-    margin-bottom: 80px;
-    overflow-x: hidden;
-  }
-
-</style>
 <script lang="ts">
   import ErrorBar from './ErrorBar.vue'
-  import TopNav from './TopNav.vue'
-  import Sidebar from './Sidebar.vue'
-  import Player from '@/player/Player.vue'
+  import Default from '@/app/layout/Default.vue'
+  import Fullscreen from '@/app/layout/Fullscreen.vue'
 
   export default {
     components: {
       ErrorBar,
-      TopNav,
-      Sidebar,
-      Player,
+      Default,
+      Fullscreen,
     },
+    computed: {
+      layout(): string {
+        return (this as any).$route.meta.layout || 'Default'
+      }
+    }
   }
 </script>
diff --git a/src/app/layout/Default.vue b/src/app/layout/Default.vue
new file mode 100644
index 0000000..125c9a9
--- /dev/null
+++ b/src/app/layout/Default.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="min-vh-100 d-flex">
+      <Sidebar />
+      <main class="container-fluid pt-3 pb-3">
+        <TopNav />
+        <slot />
+      </main>
+    </div>
+    <Player />
+  </div>
+</template>
+<style lang="scss">
+  main {
+    margin-bottom: 80px;
+    overflow-x: hidden;
+  }
+</style>
+<script lang="ts">
+  import TopNav from '@/app/TopNav.vue'
+  import Sidebar from '@/app/Sidebar.vue'
+  import Player from '@/player/Player.vue'
+
+  export default {
+    components: {
+      TopNav,
+      Sidebar,
+      Player,
+    },
+  }
+</script>
diff --git a/src/app/layout/Fullscreen.vue b/src/app/layout/Fullscreen.vue
new file mode 100644
index 0000000..027c815
--- /dev/null
+++ b/src/app/layout/Fullscreen.vue
@@ -0,0 +1,5 @@
+<template>
+  <main class="container-fluid">
+    <slot />
+  </main>
+</template>
diff --git a/src/auth/Login.vue b/src/auth/Login.vue
index cade69f..6e57388 100644
--- a/src/auth/Login.vue
+++ b/src/auth/Login.vue
@@ -1,29 +1,36 @@
 <template>
-  <div>
-    <b-modal size="sm" hide-header hide-footer no-close-on-esc :visible="showModal">
-      <form @submit.prevent="login">
-        <div style="font-size: 4rem; color: #fff;" class="text-center">
-          <Icon icon="person-circle" />
+  <div class="row align-items-center h-100 mt-5">
+    <div v-if="!displayForm" class="mx-auto">
+      <span class="spinner-border " />
+    </div>
+    <div v-else class="mx-auto card " style="width: 22rem;">
+      <b-overlay rounded :show="busy" opacity="0.1">
+        <div class="card-body">
+          <form @submit.prevent="login">
+            <div style="font-size: 4rem; color: #fff;" class="text-center">
+              <Icon icon="person-circle" />
+            </div>
+            <b-form-group v-if="!config.serverUrl" label="Server">
+              <b-form-input v-model="server" name="server" type="text" :state="valid" />
+            </b-form-group>
+            <b-form-group label="Username">
+              <b-form-input v-model="username" name="username" type="text" :state="valid" />
+            </b-form-group>
+            <b-form-group label="Password">
+              <b-form-input v-model="password" name="password" type="password" :state="valid" />
+            </b-form-group>
+            <b-alert :show="error != null" variant="danger">
+              <template v-if="error != null">
+                Could not log in. ({{ error.message }})
+              </template>
+            </b-alert>
+            <button class="btn btn-primary btn-block" :disabled="busy" @click="login">
+              <span v-show="false" class="spinner-border spinner-border-sm" /> Log in
+            </button>
+          </form>
         </div>
-        <b-form-group v-if="!config.serverUrl" label="Server">
-          <b-form-input v-model="server" name="server" type="text" :state="valid" />
-        </b-form-group>
-        <b-form-group label="Username">
-          <b-form-input v-model="username" name="username" type="text" :state="valid" />
-        </b-form-group>
-        <b-form-group label="Password">
-          <b-form-input v-model="password" name="password" type="password" :state="valid" />
-        </b-form-group>
-        <b-alert :show="error != null" variant="danger">
-          <template v-if="error != null">
-            Could not log in. ({{ error.message }})
-          </template>
-        </b-alert>
-        <button class="btn btn-primary btn-block" :disabled="busy" @click="login">
-          <b-spinner v-show="busy" small type="grow" /> Log in
-        </button>
-      </form>
-    </b-modal>
+      </b-overlay>
+    </div>
   </div>
 </template>>
 <script lang="ts">
@@ -42,7 +49,7 @@
         rememberLogin: true,
         busy: false,
         error: null,
-        showModal: false,
+        displayForm: false,
       }
     },
     computed: {
@@ -52,8 +59,8 @@
       config: () => config
     },
     async created() {
-      this.server = await this.$auth.server
-      this.username = await this.$auth.username
+      this.server = this.$auth.server
+      this.username = this.$auth.username
       const success = await this.$auth.autoLogin()
       if (success) {
         this.$store.commit('setLoginSuccess', {
@@ -62,7 +69,7 @@
         })
         this.$router.replace(this.returnTo)
       } else {
-        this.showModal = true
+        this.displayForm = true
       }
     },
     methods: {
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index 9d8130b..22e8fb0 100644
--- a/src/shared/components/index.ts
+++ b/src/shared/components/index.ts
@@ -14,9 +14,9 @@ import {
   BFormGroup,
   BFormInput,
   BModal,
+  BOverlay,
   BProgress,
   BSidebar,
-  BSpinner,
   DropdownPlugin,
 } from 'bootstrap-vue'
 
@@ -29,7 +29,7 @@ Vue.component('BFormInput', BFormInput)
 Vue.component('BFormCheckbox', BFormCheckbox)
 Vue.component('BButton', BButton)
 Vue.component('BProgress', BProgress)
-Vue.component('BSpinner', BSpinner)
+Vue.component('BOverlay', BOverlay)
 Vue.use(DropdownPlugin)
 
 const components = {
diff --git a/src/shared/router.ts b/src/shared/router.ts
index f7771b4..e7700e5 100644
--- a/src/shared/router.ts
+++ b/src/shared/router.ts
@@ -33,7 +33,10 @@ export function setupRouter(auth: AuthService) {
         component: Login,
         props: (route) => ({
           returnTo: route.query.returnTo,
-        })
+        }),
+        meta: {
+          layout: 'fullscreen'
+        }
       },
       {
         name: 'queue',