fixes #18: introduce motd

src/GlobalSettings.vue

@@ -21,6 +21,18 @@
                     <md-switch v-model="shownSettings.protectDayNotes" class="md-warn">day notes</md-switch>
 
                 </div>
+
+                <br />
+                <div class="md-headline">
+                    Message of the day
+                </div>
+                <md-switch v-model="shownSettings.showMotd" class="md-warn">show motd</md-switch>
+
+                <md-input-container>
+                    <label>message</label>
+                    <md-textarea v-model="shownSettings.motd"></md-textarea>
+                </md-input-container>
+
                 <br />
                 <md-button id="save-button" class="md-raised md-primary" @click="save()">Save</md-button>
             </md-card-content>

src/Toolbar.vue

@@ -1,60 +1,64 @@
 <template>
-    <md-toolbar id="toolbar" class="md-dense">
-        <span v-if="currentPath != 'home' && currentPath != 'day' && currentPath != 'days'">
-            <md-button class="md-icon-button" @click="goBack()">
-                <md-tooltip md-direction="right">back</md-tooltip>
-                <md-icon>backspace</md-icon>&nbsp;
-            </md-button>
-        </span>
-        <span v-else class="button-spacer">&nbsp;</span>
-        <h2 id="toolbar-title" class="md-title">
-            <router-link :to="{name: 'home'}" class="home-link">ibt2</router-link>
-        </h2>
-        <span v-if="loggedInUser.username">
-            <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toSettingsPage()">
-                <md-tooltip md-direction="left">global settings</md-tooltip>
-                <md-icon>settings</md-icon>
-            </md-button>
-            <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toUsersPage()">
-                <md-tooltip md-direction="left">list of users</md-tooltip>
-                <md-icon>people_outline</md-icon>
-            </md-button>
-            <md-button id="logged-in-icon" class="md-icon-button" @click="toUserPage()">
-                <md-tooltip md-direction="left">personal page</md-tooltip>
-                <md-icon>person_pin</md-icon>
-            </md-button>
-            <span id="logged-in" class="md-subheading">
-                <router-link :to="userUrl" class="username-link">{{ loggedInUser.username }}</router-link>
+    <div>
+        <md-toolbar id="toolbar" class="md-dense">
+            <span v-if="currentPath != 'home' && currentPath != 'day' && currentPath != 'days'">
+                <md-button class="md-icon-button" @click="goBack()">
+                    <md-tooltip md-direction="right">back</md-tooltip>
+                    <md-icon>backspace</md-icon>&nbsp;
+                </md-button>
             </span>
-            <md-button id="logout-icon" class="md-icon-button" @click="logout()">
-                <md-tooltip md-direction="left">logout</md-tooltip>
-                <md-icon>exit_to_app</md-icon>
-            </md-button>
-        </span>
-        <span v-else>
-            <span id="login-form">
-                <md-input-container id="username-input" class="login-input" md-inline>
-                    <md-tooltip md-direction="bottom">login name or create a new user if it doesn't exist</md-tooltip>
-                    <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />
-                </md-input-container>&nbsp;
-                <span id="password-block">
-                    <md-input-container id="password-input" class="login-input" md-has-password md-inline>
-                    <md-tooltip md-direction="bottom">login password or create a new user if it doesn't exist</md-tooltip>
-                        <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
-                    </md-input-container>
-                    <md-button id="login-button" class="md-icon-button" @click="login()">
-                        <md-tooltip md-direction="left">login or create a new user if it doesn't exist</md-tooltip>
-                        <md-icon>play_circle_outline</md-icon>
-                    </md-button>
+            <span v-else class="button-spacer">&nbsp;</span>
+            <h2 id="toolbar-title" class="md-title">
+                <router-link :to="{name: 'home'}" class="home-link">ibt2</router-link>
+            </h2>
+            <span v-if="loggedInUser.username">
+                <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toSettingsPage()">
+                    <md-tooltip md-direction="left">global settings</md-tooltip>
+                    <md-icon>settings</md-icon>
+                </md-button>
+                <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toUsersPage()">
+                    <md-tooltip md-direction="left">list of users</md-tooltip>
+                    <md-icon>people_outline</md-icon>
+                </md-button>
+                <md-button id="logged-in-icon" class="md-icon-button" @click="toUserPage()">
+                    <md-tooltip md-direction="left">personal page</md-tooltip>
+                    <md-icon>person_pin</md-icon>
+                </md-button>
+                <span id="logged-in" class="md-subheading">
+                    <router-link :to="userUrl" class="username-link">{{ loggedInUser.username }}</router-link>
                 </span>
+                <md-button id="logout-icon" class="md-icon-button" @click="logout()">
+                    <md-tooltip md-direction="left">logout</md-tooltip>
+                    <md-icon>exit_to_app</md-icon>
+                </md-button>
             </span>
-        </span>
-        <ibt-snackbar ref="snackbarObj" />
-        <ibt-dialog ref="dialogObj" />
-    </md-toolbar>
+            <span v-else>
+                <span id="login-form">
+                    <md-input-container id="username-input" class="login-input" md-inline>
+                        <md-tooltip md-direction="bottom">login name or create a new user if it doesn't exist</md-tooltip>
+                        <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />
+                    </md-input-container>&nbsp;
+                    <span id="password-block">
+                        <md-input-container id="password-input" class="login-input" md-has-password md-inline>
+                        <md-tooltip md-direction="bottom">login password or create a new user if it doesn't exist</md-tooltip>
+                            <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
+                        </md-input-container>
+                        <md-button id="login-button" class="md-icon-button" @click="login()">
+                            <md-tooltip md-direction="left">login or create a new user if it doesn't exist</md-tooltip>
+                            <md-icon>play_circle_outline</md-icon>
+                        </md-button>
+                    </span>
+                </span>
+            </span>
+            <ibt-snackbar ref="snackbarObj" />
+            <ibt-dialog ref="dialogObj" />
+        </md-toolbar>
+        <vue-markdown v-if="settings.showMotd && settings.motd" class="motd" :source="settings.motd"></vue-markdown>
+    </div>
 </template>
 <script>
 
+import VueMarkdown from 'vue-markdown';
 import IbtDialog from './IbtDialog.vue';
 import IbtSnackbar from './IbtSnackbar.vue';
 
@@ -79,6 +83,10 @@ export default {
             return '/user/' + this.loggedInUser._id;
         },
 
+        settings() {
+            return this.$store.state.settings || {};
+        },
+
         loggedInUser() {
             return this.$store.state.loggedInUser;
         },
@@ -183,7 +191,7 @@ export default {
         }
     },
 
-    components: { IbtDialog, IbtSnackbar }
+    components: { IbtDialog, IbtSnackbar, VueMarkdown }
 }
 
 </script>
@@ -254,4 +262,13 @@ export default {
     color: white !important;
 }
 
+.motd p {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    text-align: center;
+    background-color: #ffcdd2;
+}
+
 </style>