improve user menu

src/app/TopNav.vue

@@ -9,9 +9,21 @@
     <SearchForm/>
 
     <template v-if="username">
-      <b-dropdown variant="link" right :text="username">
+      <b-dropdown variant="link" right no-caret>
+        <template #button-content>
+          <b-avatar variant="secondary">
+            <Icon icon="person-fill"/>
+          </b-avatar>
+        </template>
+        <b-dropdown-text>
+          {{ server }}
+        </b-dropdown-text>
+        <b-dropdown-text>
+          {{ username }}
+        </b-dropdown-text>
+        <b-dropdown-divider/>
         <b-dropdown-item-button @click="logout">
-          <Icon icon="box-arrow-right"/> Logout
+          Log out
         </b-dropdown-item-button>
       </b-dropdown>
     </template>
@@ -27,7 +39,10 @@ import SearchForm from '@/search/SearchForm.vue';
       SearchForm,
     },
     computed: {
-      ...mapState(["username"])
+      ...mapState([
+        "server",
+        "username",
+      ])
     },
     methods: {
       ...mapMutations([

src/auth/Login.vue

@@ -51,7 +51,10 @@ export default Vue.extend({
     this.username = await this.$auth.username;
     const success = await this.$auth.autoLogin();
     if (success) {
-      this.$store.commit("setLoginSuccess", { username: this.username});
+      this.$store.commit("setLoginSuccess", {
+        username: this.username,
+        server: this.server,
+      });
       this.$router.push(this.returnTo);
     } else {
       this.showModal = true;
@@ -62,7 +65,10 @@ export default Vue.extend({
       this.busy = true;
       this.$auth.loginWithPassword(this.server, this.username, this.password, this.rememberLogin)
         .then(() => {
-          this.$store.commit("setLoginSuccess", { username: this.username });
+          this.$store.commit("setLoginSuccess", {
+            username: this.username,
+            server: this.server,
+          });
           this.$router.push(this.returnTo);
         })
         .catch(err => {

src/shared/components/Icon.vue

@@ -19,6 +19,7 @@
     BIconThreeDotsVertical,
     BIconMusicNoteBeamed,
     BIconBoxArrowRight,
+    BIconPersonFill,
   } from 'bootstrap-vue'
 
   export default Vue.extend({
@@ -38,6 +39,7 @@
       BIconThreeDotsVertical,
       BIconMusicNoteBeamed,
       BIconBoxArrowRight,
+      BIconPersonFill,
     },
     props: {
       icon: { type: String }

src/shared/store.ts

@@ -9,6 +9,7 @@ import { API } from './api';
 interface State {
   isLoggedIn: boolean;
   username: null | string;
+  server: null | string;
   showMenu: boolean;
   error: Error | null;
   playlists: any[];
@@ -18,6 +19,7 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
   state: {
     isLoggedIn: false,
     username: null,
+    server: null,
     showMenu: false,
     error: null,
     playlists: [],
@@ -29,9 +31,10 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
     clearError(state) {
       state.error = null;
     },
-    setLoginSuccess(state, { username }) {
+    setLoginSuccess(state, { username, server }) {
       state.isLoggedIn = true;
       state.username = username;
+      state.server = server;
     },
     toggleMenu(state) {
       state.showMenu = !state.showMenu;