multi-layout routing

5 years ago · f870ce420d
11 changed files with 313 additions and 100 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,7 @@
 <template>
  <div id="app">
-    <router-view />
+    <!-- component matched by the route will render here -->
+    <router-view></router-view>
  </div>
 </template>

--- a/src/components/AuthenticatedVerticalNavbar.vue
+++ b/src/components/AuthenticatedVerticalNavbar.vue
@ -15,7 +15,7 @@
      </div>
      <!-- <div class="py-2"></div> -->
      <b-nav vertical class="px-1">
-        <b-nav-item class="my-1" active>
+        <b-nav-item to="/dashboard" class="my-1" exact-active-class="active">
          <svg
            width="24"
            height="24"
@ -34,7 +34,7 @@
          </svg>
          Home
        </b-nav-item>
-        <b-nav-item href="#" class="my-1">
+        <b-nav-item to="/bitcoin" class="my-1" exact-active-class="active">
          <svg
            width="24"
            height="24"
@ -50,7 +50,7 @@
          </svg>
          Bitcoin
        </b-nav-item>
-        <b-nav-item class="my-1">
+        <b-nav-item to="/lightning" class="my-1" exact-active-class="active">
          <svg
            width="24"
            height="24"
@ -67,7 +67,7 @@
          Lightning
        </b-nav-item>

-        <b-nav-item class="my-1" v-if="isMobileMenu">
+        <b-nav-item to="/settings" class="my-1" v-if="isMobileMenu" exact-active-class="active">
          <svg
            width="24"
            height="24"
@ -87,7 +87,7 @@
    </div>
    <div>
      <b-nav vertical class="px-1">
-        <b-nav-item class="my-1" v-if="isMobileMenu">
+        <b-nav-item to="/logout" class="my-1" v-if="isMobileMenu" exact-active-class="active">
          <svg
            width="24"
            height="24"
@ -107,7 +107,7 @@
          </svg>
          Log out
        </b-nav-item>
-        <b-nav-item class="my-1" v-else>
+        <b-nav-item to="/settings" class="my-1" v-else exact-active-class="active">
          <svg
            width="24"
            height="24"
--- a/src/components/LightningWallet.vue
+++ b/src/components/LightningWallet.vue
@ -536,6 +536,18 @@ export default {
  transition: transform 0.3s, opacity 0.3s linear;
 }

+//reverse delay in check mark when leaving (first tick contracts, then the circle)
+.lightning-mode-change-leave-active {
+  .checkmark {
+    &:before {
+      transition-delay: 0.2s;
+    }
+    .checkmark-icon {
+      transition-delay: 0s;
+    }
+  }
+}
+
 .lightning-mode-change-enter {
  transform: translate3d(20px, 0, 0);
  opacity: 0;
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@ -34,7 +34,7 @@
        <b-nav-item-dropdown class="d-none d-lg-block d-xl-block" right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>Satoshi</template>
-          <b-dropdown-item href="#">Log out</b-dropdown-item>
+          <b-dropdown-item to="/logout">Log out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-navbar>
@ -49,12 +49,17 @@
    <transition name="mobile-vertical-menu-fader">
      <div class="mobile-vertical-menu-fader d-lg-none d-xl-none" v-if="state.isMobileMenuOpen"></div>
    </transition>
+
    <b-row class="mx-0">
      <b-col col lg="3" xl="2" class="d-none d-lg-block d-xl-block pl-0">
        <authenticated-vertical-navbar />
      </b-col>
+
      <b-col col lg="9" xl="10">
-        <slot :style="{overflow: 'hidden'}"></slot>
+        <!-- Content -->
+        <router-view></router-view>
+
+        <!-- Footer -->
        <footer class="d-flex justify-content-end text-muted pr-3">
          <p>
            <small>
@ -68,7 +73,7 @@
 </template>

 <script>
-import AuthenticatedVerticalNavbar from "@/layouts/AuthenticatedVerticalNavbar";
+import AuthenticatedVerticalNavbar from "@/components/AuthenticatedVerticalNavbar";

 export default {
  data() {
--- a/src/layouts/SimpleLayout.vue
+++ b/src/layouts/SimpleLayout.vue
@ -0,0 +1,12 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: "SimpleLayout"
+};
+</script>
+
+<style>
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,7 +1,15 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+
+import SimpleLayout from "../layouts/SimpleLayout.vue";
+import DashboardLayout from "../layouts/DashboardLayout.vue";
+
 import Home from "../views/Home.vue";
 import Dashboard from "../views/Dashboard.vue";
+import Bitcoin from "../views/Bitcoin.vue";
+import Lightning from "../views/Lightning.vue";
+import Settings from "../views/Settings.vue";
+import Logout from "../views/Logout.vue";

 Vue.use(VueRouter);

@ -9,12 +17,74 @@ const routes = [
  {
    path: "/",
    name: "home",
-    component: Home
+    component: SimpleLayout,
+    meta: { requiresAuth: false },
+    children: [
+      {
+        path: '',
+        component: Home,
+      },
+    ]
  },
  {
    path: "/dashboard",
    name: "dashboard",
-    component: Dashboard
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        component: Dashboard,
+      },
+    ]
+  },
+  {
+    path: "/bitcoin",
+    name: "bitcoin",
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        component: Bitcoin,
+      },
+    ]
+  },
+  {
+    path: "/lightning",
+    name: "lightning",
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        component: Lightning,
+      },
+    ]
+  },
+  {
+    path: "/settings",
+    name: "settings",
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        component: Settings,
+      },
+    ]
+  },
+  {
+    path: "/logout",
+    name: "logout",
+    component: SimpleLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        component: Logout,
+      },
+    ]
  }
 ];

@ -24,4 +94,25 @@ const router = new VueRouter({
  routes
 });

+//Fake for now
+const isLoggedIn = () => true;
+
+//Authentication Check
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // this route requires auth, check if logged in
+    // if not, redirect to login page.
+    if (!isLoggedIn()) {
+      next({
+        path: '/',
+        query: { redirect: to.fullPath }
+      })
+    } else {
+      next()
+    }
+  } else {
+    next() // always call next()!
+  }
+})
+
 export default router;
--- a/src/views/Bitcoin.vue
+++ b/src/views/Bitcoin.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="p-2">
+    <div class="my-3 pb-2">
+      <h1>bitcoin</h1>
+      <p class="text-muted">🛠 Under heavy development</p>
+    </div>
+    <b-row>
+      <b-col col cols="12" md="6" xl="4">
+        <card-widget
+          header="Bitcoin Core"
+          status="Running"
+          status-type="success"
+          title="100%"
+          sub-title="Synchronized"
+          icon="icon-app-bitcoin.svg"
+        >
+          <div class>
+            <!-- <div class="d-flex w-100 justify-content-between px-4">
+                <p class="mb-1">Connected Peers</p>
+                <p>8</p>
+            </div>-->
+            <!-- <p class="px-4">Latest Blocks</p> -->
+            <blockchain></blockchain>
+            <div class="px-4 py-3">
+              <a href="#" class="card-link">Manage</a>
+            </div>
+          </div>
+        </card-widget>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+// import Vue from "vue";
+import CardWidget from "@/components/CardWidget";
+import Blockchain from "@/components/Blockchain";
+
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    isDarkMode() {
+      return this.$store.getters.isDarkMode;
+    }
+  },
+  methods: {},
+  mounted() {
+    // disable dark mode on dashboard
+    if (this.$store.getters.isDarkMode) {
+      this.$store.commit("toggleDarkMode");
+    }
+  },
+  components: {
+    CardWidget,
+    Blockchain
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@ -1,38 +1,37 @@
 <template>
-  <authenticated>
-    <div class="p-2">
-      <div class="my-3 pb-2">
-        <h1>welcome back, satoshi</h1>
-        <p class="text-muted">This is your Umbrel's dashboard</p>
-      </div>
-      <b-row>
-        <b-col col cols="12" md="6" xl="4">
-          <lightning-wallet></lightning-wallet>
-        </b-col>
-        <b-col col cols="12" md="6" xl="4">
-          <card-widget
-            header="Bitcoin Core"
-            status="Running"
-            status-type="success"
-            title="100%"
-            sub-title="Synchronized"
-            icon="icon-app-bitcoin.svg"
-          >
-            <div class>
-              <!-- <div class="d-flex w-100 justify-content-between px-4">
+  <div class="p-2">
+    <div class="my-3 pb-2">
+      <h1>welcome back, satoshi</h1>
+      <p class="text-muted">This is your Umbrel's dashboard</p>
+    </div>
+    <b-row>
+      <b-col col cols="12" md="6" xl="4">
+        <lightning-wallet></lightning-wallet>
+      </b-col>
+      <b-col col cols="12" md="6" xl="4">
+        <card-widget
+          header="Bitcoin Core"
+          status="Running"
+          status-type="success"
+          title="100%"
+          sub-title="Synchronized"
+          icon="icon-app-bitcoin.svg"
+        >
+          <div class>
+            <!-- <div class="d-flex w-100 justify-content-between px-4">
                <p class="mb-1">Connected Peers</p>
                <p>8</p>
-              </div>-->
-              <!-- <p class="px-4">Latest Blocks</p> -->
-              <blockchain></blockchain>
-              <div class="px-4 py-3">
-                <a href="#" class="card-link">Manage</a>
-              </div>
+            </div>-->
+            <!-- <p class="px-4">Latest Blocks</p> -->
+            <blockchain></blockchain>
+            <div class="px-4 py-3">
+              <a href="#" class="card-link">Manage</a>
            </div>
-          </card-widget>
-        </b-col>
-        <b-col col cols="12" md="6" xl="4">
-          <!-- <card-widget
+          </div>
+        </card-widget>
+      </b-col>
+      <b-col col cols="12" md="6" xl="4">
+        <!-- <card-widget
            header="BTCPay Server"
            status="Running"
            status-type="success"
@ -43,36 +42,34 @@
            <div class="px-4 pt-2 pb-3">
              <a href="#" class="card-link">Manage</a>
            </div>
-          </card-widget>-->
-          <card-widget
-            header="Tor"
-            status="Running"
-            status-type="success"
-            title="100%"
-            sub-title="Traffic relayed over Tor"
-            icon="icon-app-tor.svg"
-          >
-            <div class="px-4 pt-2 pb-3">
-              <a href="#" class="card-link">Manage</a>
-            </div>
-          </card-widget>
-          <!-- <card-widget
+        </card-widget>-->
+        <card-widget
+          header="Tor"
+          status="Running"
+          status-type="success"
+          title="100%"
+          sub-title="Traffic relayed over Tor"
+          icon="icon-app-tor.svg"
+        >
+          <div class="px-4 pt-2 pb-3">
+            <a href="#" class="card-link">Manage</a>
+          </div>
+        </card-widget>
+        <!-- <card-widget
            header="Example App"
            status="Running"
            status-type="success"
            title="Title"
            sub-title="Subtitle"
            icon="icon-app-chaind.svg"
-          ></card-widget>-->
-        </b-col>
-      </b-row>
-    </div>
-  </authenticated>
+        ></card-widget>-->
+      </b-col>
+    </b-row>
+  </div>
 </template>

 <script>
 // import Vue from "vue";
-import Authenticated from "@/layouts/Authenticated";
 import CardWidget from "@/components/CardWidget";
 import Blockchain from "@/components/Blockchain";
 import LightningWallet from "@/components/LightningWallet";
@ -94,7 +91,6 @@ export default {
    }
  },
  components: {
-    Authenticated,
    CardWidget,
    Blockchain,
    LightningWallet
@ -103,40 +99,4 @@ export default {
 </script>

 <style lang="scss" scoped>
-.nav-horizontal,
-.nav-vertical {
-  background: #fff;
-}
-
-.nav-vertical {
-  // width: 280px;
-  height: calc(100vh - 84px);
-}
-
-.balance-container {
-  border-top: solid 1px #eeeff3;
-  border-bottom: solid 1px #eeeff3;
-}
-
-.input-search {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  width: 60vw;
-  max-width: 600px;
-  font-size: 1em;
-}
-::-webkit-input-placeholder {
-  /* Edge */
-  color: #c3c6d1;
-}
-
-:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: #c3c6d1;
-}
-
-::placeholder {
-  color: #c3c6d1;
-}
 </style>
--- a/src/views/Lightning.vue
+++ b/src/views/Lightning.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="p-2">
+    <div class="my-3 pb-2">
+      <h1>lightning</h1>
+      <p class="text-muted">⚡️ Work in progress</p>
+    </div>
+    <b-row></b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  components: {}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/Logout.vue
+++ b/src/views/Logout.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="p-2">
+    <div class="my-3 pb-2">
+      <h1>logout screen</h1>
+      <p class="text-muted">This is your logout screen</p>
+    </div>
+    <b-row></b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  components: {}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="p-2">
+    <div class="my-3 pb-2">
+      <h1>settings</h1>
+      <p class="text-muted">⚙️ Coming soon</p>
+    </div>
+    <b-row></b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+  components: {}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>