Toolbar.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <template>
  2. <div>
  3. <md-toolbar id="toolbar" class="md-dense">
  4. <span v-if="currentPath != 'home' && currentPath != 'day' && currentPath != 'days'">
  5. <md-button class="md-icon-button" @click="goBack()">
  6. <md-tooltip md-direction="right">back</md-tooltip>
  7. <md-icon>backspace</md-icon>&nbsp;
  8. </md-button>
  9. </span>
  10. <span v-else class="button-spacer">&nbsp;</span>
  11. <h2 id="toolbar-title" class="md-title">
  12. <router-link :to="{name: 'home'}" class="home-link">ibt2</router-link>
  13. </h2>
  14. <span v-if="loggedInUser.username">
  15. <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toSettingsPage()">
  16. <md-tooltip md-direction="left">global settings</md-tooltip>
  17. <md-icon>settings</md-icon>
  18. </md-button>
  19. <md-button v-if="loggedInUser.isAdmin" id="users-icon" class="md-icon-button" @click="toUsersPage()">
  20. <md-tooltip md-direction="left">list of users</md-tooltip>
  21. <md-icon>people_outline</md-icon>
  22. </md-button>
  23. <md-button id="logged-in-icon" class="md-icon-button" @click="toUserPage()">
  24. <md-tooltip md-direction="left">personal page</md-tooltip>
  25. <md-icon>person_pin</md-icon>
  26. </md-button>
  27. <span id="logged-in" class="md-subheading">
  28. <router-link :to="userUrl" class="username-link">{{ loggedInUser.username }}</router-link>
  29. </span>
  30. <md-button id="logout-icon" class="md-icon-button" @click="logout()">
  31. <md-tooltip md-direction="left">logout</md-tooltip>
  32. <md-icon>exit_to_app</md-icon>
  33. </md-button>
  34. </span>
  35. <span v-else>
  36. <span id="login-form">
  37. <span id="username-input">
  38. <strong id="login-label">Login:</strong>&nbsp;
  39. <md-input-container id="username-input-container" class="login-input" md-inline>
  40. <md-tooltip md-direction="bottom">login name or create a new user if it doesn't exist</md-tooltip>
  41. <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline autocorrect="off" autocapitalize="none" />
  42. </md-input-container>&nbsp;
  43. </span>
  44. <span id="password-block">
  45. <md-input-container id="password-input" class="login-input" md-has-password md-inline>
  46. <md-tooltip md-direction="bottom">login password or create a new user if it doesn't exist</md-tooltip>
  47. <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" type="password" md-line />
  48. </md-input-container>
  49. <md-button id="login-button" class="md-icon-button" @click="login()">
  50. <md-tooltip md-direction="left">login or create a new user if it doesn't exist</md-tooltip>
  51. <md-icon>play_circle_outline</md-icon>
  52. </md-button>
  53. </span>
  54. </span>
  55. </span>
  56. <ibt-snackbar ref="snackbarObj" />
  57. <ibt-dialog ref="dialogObj" />
  58. </md-toolbar>
  59. <vue-markdown v-if="settings.showMotd && settings.motd" class="motd" :source="settings.motd"></vue-markdown>
  60. </div>
  61. </template>
  62. <script>
  63. import VueMarkdown from 'vue-markdown';
  64. import IbtDialog from './IbtDialog.vue';
  65. import IbtSnackbar from './IbtSnackbar.vue';
  66. export default {
  67. data () {
  68. return {
  69. username: '',
  70. password: '',
  71. dialog: {
  72. text: 'some error',
  73. ok: 'ok'
  74. }
  75. }
  76. },
  77. computed: {
  78. userUrl: function() {
  79. var id = this.loggedInUser._id;
  80. if (!id) {
  81. return '';
  82. }
  83. return '/user/' + this.loggedInUser._id;
  84. },
  85. settings() {
  86. return this.$store.state.settings || {};
  87. },
  88. loggedInUser() {
  89. return this.$store.state.loggedInUser;
  90. },
  91. currentPath() {
  92. return this.$route.name;
  93. }
  94. },
  95. beforeCreate: function() {
  96. this.usersUrl = this.$resource('users');
  97. this.currentUserUrl = this.$resource('users/current');
  98. this.loginUrl = this.$resource('login');
  99. this.logoutUrl = this.$resource('logout');
  100. },
  101. mounted: function() {
  102. this.getUserInfo();
  103. },
  104. methods: {
  105. goBack() {
  106. this.$router.back();
  107. },
  108. toUserPage() {
  109. this.$router.push(this.userUrl);
  110. },
  111. toUsersPage() {
  112. this.$router.push('/user/');
  113. },
  114. toSettingsPage() {
  115. this.$router.push('/settings/');
  116. },
  117. focusToPassword() {
  118. this.$refs.passwordInput.$el.focus();
  119. },
  120. login(opt) {
  121. opt = opt || {};
  122. var user_data = {username: this.username, password: this.password};
  123. this.loginUrl.save(user_data).then((response) => {
  124. return response.json();
  125. }, (response) => {
  126. // Unable to login? Let's try to create the user!
  127. if (response.status == 401) {
  128. if (opt.stopHere) {
  129. this.$refs.dialogObj.show({text: 'failed to login and create a new user. Wrong username and password?'});
  130. } else {
  131. this.createUser(user_data);
  132. }
  133. }
  134. }).then((data) => {
  135. this.getUserInfo();
  136. });
  137. },
  138. logout() {
  139. this.logoutUrl.get().then((response) => {
  140. return response.json();
  141. }, (response) => {
  142. this.$refs.dialogObj.show({text: 'failed to logout'});
  143. }).then((json) => {
  144. this.$store.commit('clearLoggedInUser');
  145. this.$refs.snackbarObj.show('logged out');
  146. });
  147. },
  148. createUser(user_data) {
  149. user_data.username = user_data.username || {};
  150. user_data.username = user_data.username || this.username;
  151. user_data.password = user_data.password || this.password;
  152. this.usersUrl.save(user_data).then((response) => {
  153. return response.json();
  154. }, (response) => {
  155. }).then((json) => {
  156. this.login({stopHere: true});
  157. });
  158. },
  159. getUserInfo(callback) {
  160. this.currentUserUrl.get().then((response) => {
  161. return response.json();
  162. }, (response) => {
  163. this.$refs.dialogObj.show({text: 'unable to get user info'});
  164. }).then((data) => {
  165. data = data || {};
  166. this.$store.commit('setLoggedInUser', data);
  167. if (callback) {
  168. callback(data);
  169. }
  170. });
  171. }
  172. },
  173. components: { IbtDialog, IbtSnackbar, VueMarkdown }
  174. }
  175. </script>
  176. <style scoped>
  177. #toolbar-title {
  178. flex: 1;
  179. }
  180. .login-input {
  181. width: 200px;
  182. margin: 0px 0px 0px;
  183. padding-top: 0px;
  184. padding-left: 4px;
  185. min-height: 24px;
  186. line-height: 0px;
  187. }
  188. #login-label {
  189. margin-top: 8px;
  190. }
  191. #username-input {
  192. display: flex;
  193. float: left;
  194. margin-right: 20px;
  195. }
  196. #password-input {
  197. display: inline;
  198. float: left;
  199. }
  200. #password-block {
  201. display: inline;
  202. float: right;
  203. }
  204. #login-button {
  205. height: 32px;
  206. }
  207. #logged-in-icon {
  208. margin-right: 0px;
  209. padding-right: 0px;
  210. color: #f6f72f;
  211. }
  212. #logged-in {
  213. position: relative;
  214. top: 10px;
  215. }
  216. #logout-icon {
  217. margin-left: 0px;
  218. padding-left: 0px;
  219. }
  220. .username-link {
  221. font-weight: bold;
  222. color: #f6f72f !important;
  223. }
  224. .button-spacer {
  225. width: 52px;
  226. }
  227. .home-link {
  228. font-weight: bold;
  229. color: white !important;
  230. }
  231. </style>
  232. <style>
  233. .motd p {
  234. margin-top: 0px;
  235. margin-bottom: 0px;
  236. padding-top: 4px;
  237. padding-bottom: 4px;
  238. text-align: center;
  239. background-color: #ffcdd2;
  240. }
  241. </style>