WIP UI implementation: fixed store dependencies, login flow.

web/src/views/Dashboard.vue

@@ -1,6 +0,0 @@
-<template>
-  <div class="dashboard">
-    <h1>Dashboard</h1>
-  </div>
-</template>
-<script lang="ts" src="./dashboard.ts"></script>

web/src/views/UserAccount.vue

@@ -1,9 +1,13 @@
 <template>
   <div class=user-account>
     <h1>Your Account</h1>
-    <section class=user-info>
-      <h2>About You</h2>
-    </section>
+    <fieldset>
+      <legend>About You</legend>
+      <label for=name>Name: </label>
+      <input name=name type=text :value="user.displayName"></input>
+      <label for=name>Email Address: </label>
+      <input name=name type=text :value="user.email"></input>
+    </fieldset>
     <section class=api-tokens>
       <h2>API Tokens</h2>
     </section>

web/src/views/dashboard.ts

@@ -1,17 +0,0 @@
-import { Component, Vue } from 'vue-property-decorator';
-import { Route, RawLocation } from 'vue-router';
-import userStore from '@/store-modules/user';
-import { NavNext } from '@/types';
-
-@Component({})
-export default class Dashboard extends Vue {
-
-  public get user() {
-    return userStore.user;
-  }
-
-  public beforeRouteEnter<V extends Vue>( to: Route, from: Route, next: NavNext): void {
-
-    next();
-  }
-}

web/src/views/login.ts

@@ -1,7 +1,10 @@
 import { Route } from 'vue-router';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { LoginSubmit } from '@/models';
-import authStore from '@/store-modules/auth';
+import { authStore } from '@/store';
+import { logService } from '@/services/logging';
+
+const log = logService.getLogger('/views/login');
 
 @Component({})
 export default class Login extends Vue {
@@ -22,9 +25,11 @@ export default class Login extends Vue {
       await authStore.login(this.loginForm);
       this.$router.push({ path: this.redirect || '/' });
     } catch (e) {
-      console.log(e);
-      if (e.response.status === 401) {
+      if (e.response && e.response.status === 401) {
         this.flashMessage = 'invlid username or password';
+      } else {
+        this.flashMessage = 'unable to log you in';
+        log.error(e);
       }
     }
     this.waiting = false;

web/src/views/measures.ts

@@ -1,5 +1,5 @@
 import { Component, Vue } from 'vue-property-decorator';
-import measureStore from '@/store-modules/measure';
+import { measureStore } from '@/store';
 
 @Component({
   components: { }

web/src/views/nav-bar.ts

@@ -3,8 +3,7 @@ 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 { measureStore, userStore } from '@/store';
 // import UiIconButton from 'keen-ui/src/UiIconButton.vue';
 
 library.add(faAngleDoubleLeft, faAngleDoubleRight, faHome, faPencilRuler, faThLarge, faUser);

web/src/views/user-account.ts

@@ -1,4 +1,16 @@
 import { Component, Vue } from 'vue-property-decorator';
+import { apiTokenStore, userStore } from '@/store';
 
 @Component({})
-export default class UserAccount extends Vue {}
+export default class UserAccount extends Vue {
+
+  private get user() { return userStore.user; }
+
+  private get apiTokens() { return apiTokenStore.apiTokens; }
+
+  private created() {
+    if (apiTokenStore.apiTokens.length === 0) {
+      apiTokenStore.fetchAllApiTokens();
+    }
+  }
+}