WIP Auth redesign.

web/src/views/Measures.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="measures">
-    <h1>Things You Are Measuring</h1>
+  <div id="measures">
+    <div class=header-action>
+      <h1>Things You Are Measuring</h1>
+      <button class=btn-action>Add Measure</button>
+    </div>
+    <div v-for="(measure, slug) in measures">
+      <h2>{{measure.name}}</h2>
+    </div>
   </div>
 </template>
 <script lang="ts" src="./measures.ts"></script>
+<style lang="scss" src="./measures.scss"></style>

web/src/views/NavBar.vue

@@ -4,13 +4,19 @@
       <span class=expanded>Personal Measure</span>
       <span class=collapsed>PM</span>
     </h1>
-    <router-link to="/dashboard">
+    <!--<router-link to="/dashboard">
       <fa-icon icon=home></fa-icon>
       <span class=expanded>Dashboard</span>
-    </router-link>
+    </router-link>-->
     <router-link to="/measures">
       <fa-icon icon=pencil-ruler></fa-icon>
       <span class=expanded>Measures</span>
+      <div class="submenu expanded">
+        <router-link v-for="(measure, slug) in measures" :key="slug"
+                     :to="'/measures/' + slug">
+          {{measure.name}}
+        </router-link>
+      </div>
     </router-link>
     <router-link to="/quick-panels">
       <fa-icon icon=th-large></fa-icon>

web/src/views/login.ts

@@ -1,7 +1,7 @@
 import { Route } from 'vue-router';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { LoginSubmit } from '@/models';
-import userStore from '@/store-modules/user';
+import authStore from '@/store-modules/auth';
 
 @Component({})
 export default class Login extends Vue {
@@ -19,9 +19,10 @@ export default class Login extends Vue {
     this.waiting = true;
     this.flashMessage = '';
     try {
-      await userStore.login(this.loginForm);
+      await authStore.login(this.loginForm);
       this.$router.push({ path: this.redirect || '/' });
     } catch (e) {
+      console.log(e);
       if (e.response.status === 401) {
         this.flashMessage = 'invlid username or password';
       }

web/src/views/measures.scss

@@ -0,0 +1,3 @@
+#measures {
+  flex-grow: 1;
+}

web/src/views/measures.ts

@@ -1,6 +1,9 @@
 import { Component, Vue } from 'vue-property-decorator';
+import measureStore from '@/store-modules/measure';
 
 @Component({
   components: { }
 })
-export default class Measures extends Vue {}
+export default class Measures extends Vue {
+  private get measures() { return measureStore.measures; }
+}

web/src/views/nav-bar.scss

@@ -21,14 +21,16 @@ nav {
   a {
     color: inherit;
     display: block;
-    font-size: 1.5rem;
-    padding: .5rem 0;
     text-decoration: none;
     width: 100%;
 
     &.router-link-active { color: $color4; }
-
     &:hover { color: $color4; }
+  }
+
+  & > a {
+    font-size: 1.5rem;
+    padding: .5rem 0;
 
     svg {
       display: inline-block;
@@ -40,9 +42,21 @@ nav {
     padding: 0 0 1rem;
   }
 
-  .collapse-handle {
+  & > .collapse-handle {
     cursor: pointer;
     font-size: 1.5rem;
     margin-top: auto;
   }
+
+  .submenu {
+    margin: .5em 0 0 1.6em;
+
+    a {
+      color: $color3;
+      font-size: 1.2rem;
+
+      &.router-link-active { color: $color4; }
+      &:hover { color: $color4; }
+    }
+  }
 }

web/src/views/nav-bar.ts

@@ -1,8 +1,10 @@
 import { Component, Vue } from 'vue-property-decorator';
+import { Route, RawLocation } from 'vue-router';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faAngleDoubleLeft, faAngleDoubleRight,
          faHome, faPencilRuler, faThLarge, faUser } from '@fortawesome/free-solid-svg-icons';
 import userStore from '@/store-modules/user';
+import measureStore from '@/store-modules/measure';
 // import UiIconButton from 'keen-ui/src/UiIconButton.vue';
 
 library.add(faAngleDoubleLeft, faAngleDoubleRight, faHome, faPencilRuler, faThLarge, faUser);
@@ -25,7 +27,6 @@ export default class NavBar extends Vue {
     return this.collapsed;
   }
 
-  public get user() {
-    return userStore.user;
-  }
+  public get user()     { return userStore.user;        }
+  public get measures() { return measureStore.measures; }
 }