move login to a separate page

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 Default from '@/app/layout/Default.vue'
-  import Sidebar from './Sidebar.vue'
+  import Fullscreen from '@/app/layout/Fullscreen.vue'
-  import Player from '@/player/Player.vue'
 
   export default {
     components: {
       ErrorBar,
-      TopNav,
+      Default,
-      Sidebar,
+      Fullscreen,
-      Player,
     },
+    computed: {
+      layout(): string {
+        return (this as any).$route.meta.layout || 'Default'
+      }
+    }
   }
 </script>

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>

src/app/layout/Fullscreen.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="container-fluid">
+    <slot />
+  </main>
+</template>

src/auth/Login.vue

@@ -1,6 +1,11 @@
 <template>
-  <div>
+  <div class="row align-items-center h-100 mt-5">
-    <b-modal size="sm" hide-header hide-footer no-close-on-esc :visible="showModal">
+    <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" />
@@ -20,10 +25,12 @@
               </template>
             </b-alert>
             <button class="btn btn-primary btn-block" :disabled="busy" @click="login">
-          <b-spinner v-show="busy" small type="grow" /> Log in
+              <span v-show="false" class="spinner-border spinner-border-sm" /> Log in
             </button>
           </form>
-    </b-modal>
+        </div>
+      </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.server = this.$auth.server
-      this.username = await this.$auth.username
+      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: {

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 = {

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',