draft of user page

src/App.vue

@@ -1,29 +1,5 @@
 <template>
-    <div id="app">
+    <div id="main-attendees">
-        <md-toolbar class="md-dense">
-            <h2 id="toolbar-title" class="md-title">ibt2</h2>
-            <span v-if="loggedInUser.username">
-                <span id="logged-in">
-                    Logged in: {{ loggedInUser.username }}
-                </span>
-                <md-button class="md-icon-button" @click="logout()">
-                    <md-icon>exit_to_app</md-icon>
-                </md-button>
-            </span>
-            <span v-else>
-                <md-button v-show="!showLoginForm" class="md-icon-button" @click="focusToLoginForm()">
-                    <md-icon>power_settings_new</md-icon>
-                </md-button>
-                <span v-show="showLoginForm" id="login-form">
-                    <md-input-container id="username-input" class="login-input" md-inline>
-                        <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />&nbsp;
-                    </md-input-container>
-                    <md-input-container id="password-input" class="login-input" md-inline>
-                        <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
-                    </md-input-container>
-                </span>
-            </span>
-        </md-toolbar>
         <md-layout md-gutter md-row>
             <md-layout md-column md-flex="20" md-gutter>
                 <datepicker id="datepicker" :value="date" :inline="true" @selected="getDay"></datepicker>
@@ -47,11 +23,7 @@ export default {
         return {
             date: null, // a Date object representing the selected date
             day: {},
-            daysSummary: {},
+            daysSummary: {}
-            username: '',
-            password: '',
-            showLoginForm: false,
-            loggedInUser: {username: ''}
         }
     },
 
@@ -64,7 +36,6 @@ export default {
     },
 
     mounted: function() {
-        this.getUserInfo();
         var [year, month, day] = (this.$route.params.day || '').split('-');
         year = parseInt(year);
         month = parseInt(month) - 1;
@@ -79,16 +50,6 @@ export default {
     },
 
     methods: {
-        focusToLoginForm() {
-            this.showLoginForm = true;
-            var that = this;
-            setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
-        },
-
-        focusToPassword() {
-            this.$refs.passwordInput.$el.focus();
-        },
-
         reload() {
             var ym = this.dateToString(this.date, true);
             this.getSummary({start: ym, end: ym});
@@ -144,40 +105,6 @@ export default {
                 }
                 this.day = dayData;
             });
-        },
-
-        login() {
-            this.loginUrl.save({username: this.username, password: this.password}).then((response) => {
-                return response.json();
-            }, (response) => {
-                alert('login: failed to get resource');
-            }).then((data) => {
-                this.showLoginForm = false;
-                this.getUserInfo();
-            });
-        },
-
-        logout() {
-            this.logoutUrl.get().then((response) => {
-                return response.json();
-            }, (response) => {
-                alert('logout: failed to get resource');
-            }).then((json) => {
-                this.loggedInUser = {};
-            });
-        },
-
-        getUserInfo(callback) {
-            this.currentUserUrl.get().then((response) => {
-                return response.json();
-            }, (response) => {
-                alert('getUserInfo: failed to get resource');
-            }).then((data) => {
-                this.loggedInUser = data || {};
-                if (callback) {
-                    callback(this.loggedInUser);
-                }
-            });
         }
     },
 
@@ -188,7 +115,7 @@ export default {
 </script>
 
 <style>
-#app {
+#main-attendees {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -218,20 +145,4 @@ export default {
     margin-right: 20px;
     background-color: white;
 }
-
-#username-input {
-    display: inline;
-    float: left;
-}
-
-#password-input {
-    display: inline;
-    float: right;
-}
-
-#logged-in {
-    position: relative;
-    top: 10px;
-
-}
 </style>

src/Toolbar.vue

@@ -0,0 +1,139 @@
+<template>
+    <md-toolbar id="toolbar" class="md-dense">
+        <h2 id="toolbar-title" class="md-title">ibt2</h2>
+        <span v-if="loggedInUser.username">
+            <span id="logged-in">
+                Logged in: <router-link :to="userUrl">{{ loggedInUser.username }}</router-link>
+            </span>
+            <md-button class="md-icon-button" @click="logout()">
+                <md-icon>exit_to_app</md-icon>
+            </md-button>
+        </span>
+        <span v-else>
+            <md-button v-show="!showLoginForm" class="md-icon-button" @click="focusToLoginForm()">
+                <md-icon>power_settings_new</md-icon>
+            </md-button>
+            <span v-show="showLoginForm" id="login-form">
+                <md-input-container id="username-input" class="login-input" md-inline>
+                    <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />&nbsp;
+                </md-input-container>
+                <md-input-container id="password-input" class="login-input" md-inline>
+                    <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
+                </md-input-container>
+            </span>
+        </span>
+    </md-toolbar>
+</template>
+<script>
+
+export default {
+    data () {
+        return {
+            username: '',
+            password: '',
+            showLoginForm: false,
+            loggedInUser: {username: ''}
+        }
+    },
+
+    computed: {
+        userUrl: function() {
+            var id = this.loggedInUser._id;
+            if (!id) {
+                return '';
+            }
+            return '/user/' + this.loggedInUser._id;
+        }
+    },
+
+    beforeCreate: function() {
+        this.currentUserUrl = this.$resource('users/current');
+        this.loginUrl = this.$resource('login');
+        this.logoutUrl = this.$resource('logout');
+    },
+
+    mounted: function() {
+        this.getUserInfo();
+    },
+
+    methods: {
+        focusToLoginForm() {
+            this.showLoginForm = true;
+            var that = this;
+            setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
+        },
+
+        focusToPassword() {
+            this.$refs.passwordInput.$el.focus();
+        },
+
+        login() {
+            this.loginUrl.save({username: this.username, password: this.password}).then((response) => {
+                return response.json();
+            }, (response) => {
+                alert('login: failed to get resource');
+            }).then((data) => {
+                this.showLoginForm = false;
+                this.getUserInfo();
+            });
+        },
+
+        logout() {
+            this.logoutUrl.get().then((response) => {
+                return response.json();
+            }, (response) => {
+                alert('logout: failed to get resource');
+            }).then((json) => {
+                this.loggedInUser = {};
+            });
+        },
+
+        getUserInfo(callback) {
+            this.currentUserUrl.get().then((response) => {
+                return response.json();
+            }, (response) => {
+                alert('getUserInfo: failed to get resource');
+            }).then((data) => {
+                this.loggedInUser = data || {};
+                if (callback) {
+                    callback(this.loggedInUser);
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style>
+
+#toolbar-title {
+    flex: 1;
+}
+
+.login-input {
+    width: 200px;
+    margin: 0px 0px 0px;
+    padding-top: 0px;
+    padding-left: 4px;
+    min-height: 24px;
+    line-height: 0px;
+    margin-right: 20px;
+    background-color: white;
+}
+
+#username-input {
+    display: inline;
+    float: left;
+}
+
+#password-input {
+    display: inline;
+    float: right;
+}
+
+#logged-in {
+    position: relative;
+    top: 10px;
+
+}
+</style>

src/User.vue

@@ -0,0 +1,42 @@
+<template>
+    <div id="user">
+        User
+    </div>
+</template>
+<script>
+
+export default {
+    data () {
+        return {
+        }
+    },
+
+    beforeCreate: function() {
+        this.userUrl = this.$resource('users');
+    },
+
+    mounted: function() {
+    },
+
+    methods: {
+        getUserInfo(callback) {
+            this.currentUserUrl.get().then((response) => {
+                return response.json();
+            }, (response) => {
+                alert('getUserInfo: failed to get resource');
+            }).then((data) => {
+                this.loggedInUser = data || {};
+                if (callback) {
+                    callback(this.loggedInUser);
+                }
+            });
+        }
+    },
+
+    components: {
+    }
+}
+</script>
+
+<style>
+</style>

src/main.js

@@ -9,20 +9,25 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import 'material-design-icons/iconfont/material-icons.css';
 import jQuery from 'jquery';
 import App from './App';
+import User from './User';
+import Toolbar from './Toolbar';
 
 Vue.use(VueRouter);
 Vue.use(VueResource);
 Vue.use(VueMaterial);
 
 var routes = [
-    {path: '/day/:day', component: App}
+    {path: '/', component: App},
+    {path: '/day/', component: App},
+    {path: '/day/:day', component: App},
+    {path: '/user/:user', component: User}
 ];
 
 const router = new VueRouter({routes});
 
 var vue = new Vue({
     el: '#app',
-    template: '<App/>',
+    template: '<div id="app"><Toolbar /><router-view class="view"></router-view></div>',
     router: router,
-    components: { App }
+    components: { App, Toolbar, User }
 });