123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <template>
- <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>
- </md-button>
- </span>
- <span v-else class="button-spacer"> </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 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>
- <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';
- export default {
- data () {
- return {
- username: '',
- password: '',
- dialog: {
- text: 'some error',
- ok: 'ok'
- }
- }
- },
- computed: {
- userUrl: function() {
- var id = this.loggedInUser._id;
- if (!id) {
- return '';
- }
- return '/user/' + this.loggedInUser._id;
- },
- settings() {
- return this.$store.state.settings || {};
- },
- loggedInUser() {
- return this.$store.state.loggedInUser;
- },
- currentPath() {
- return this.$route.name;
- }
- },
- beforeCreate: function() {
- this.usersUrl = this.$resource('users');
- this.currentUserUrl = this.$resource('users/current');
- this.loginUrl = this.$resource('login');
- this.logoutUrl = this.$resource('logout');
- },
- mounted: function() {
- this.getUserInfo();
- },
- methods: {
- goBack() {
- this.$router.back();
- },
- toUserPage() {
- this.$router.push(this.userUrl);
- },
- toUsersPage() {
- this.$router.push('/user/');
- },
- toSettingsPage() {
- this.$router.push('/settings/');
- },
- focusToLoginForm() {
- var that = this;
- setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
- },
- focusToPassword() {
- this.$refs.passwordInput.$el.focus();
- },
- login(opt) {
- opt = opt || {};
- var user_data = {username: this.username, password: this.password};
- this.loginUrl.save(user_data).then((response) => {
- return response.json();
- }, (response) => {
- // Unable to login? Let's try to create the user!
- if (response.status == 401) {
- if (opt.stopHere) {
- this.$refs.dialogObj.show({text: 'failed to login and create a new user. Wrong username and password?'});
- } else {
- this.createUser(user_data);
- }
- }
- }).then((data) => {
- this.getUserInfo();
- });
- },
- logout() {
- this.logoutUrl.get().then((response) => {
- return response.json();
- }, (response) => {
- this.$refs.dialogObj.show({text: 'failed to logout'});
- }).then((json) => {
- this.$store.commit('clearLoggedInUser');
- this.$refs.snackbarObj.show('logged out');
- });
- },
- createUser(user_data) {
- user_data.username = user_data.username || {};
- user_data.username = user_data.username || this.username;
- user_data.password = user_data.password || this.password;
- this.usersUrl.save(user_data).then((response) => {
- return response.json();
- }, (response) => {
- }).then((json) => {
- this.login({stopHere: true});
- });
- },
- getUserInfo(callback) {
- this.currentUserUrl.get().then((response) => {
- return response.json();
- }, (response) => {
- this.$refs.dialogObj.show({text: 'unable to get user info'});
- }).then((data) => {
- data = data || {};
- this.$store.commit('setLoggedInUser', data);
- if (callback) {
- callback(data);
- }
- });
- }
- },
- components: { IbtDialog, IbtSnackbar, VueMarkdown }
- }
- </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;
- background-color: white;
- }
- #username-input {
- display: inline;
- float: left;
- margin-right: 20px;
- }
- #password-input {
- display: inline;
- float: left;
- }
- #password-block {
- display: inline;
- float: right;
- }
- #login-button {
- height: 32px;
- }
- #logged-in-icon {
- margin-right: 0px;
- padding-right: 0px;
- color: #f6f72f !important;
- }
- #logged-in {
- position: relative;
- top: 10px;
- }
- #logout-icon {
- margin-left: 0px;
- padding-left: 0px;
- }
- .username-link {
- font-weight: bold;
- color: #f6f72f !important;
- }
- .button-spacer {
- width: 52px;
- }
- .home-link {
- font-weight: bold;
- color: white !important;
- }
- .motd p {
- margin-top: 0px;
- margin-bottom: 0px;
- padding-top: 4px;
- padding-bottom: 4px;
- text-align: center;
- background-color: #ffcdd2;
- }
- </style>
|