@afeefa/vue-app 0.0.349 → 0.0.351

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.349
+0.0.351

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.349",
+  "version": "0.0.351",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src-admin/components/App.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="admin">
+    <div
+      v-if="isImpersonating"
+      class="impersonationBanner"
+    >
+      Angemeldet als {{ impersonatedAccountTitle }}
+      <a
+        class="impersonationBanner-exit ml-2"
+        @click="$auth.logout()"
+      >abmelden</a>
+    </div>
+
     <v-overlay
       fixed
       :value="sidebarsFloating"
@@ -31,12 +42,12 @@
     >
       <navigation-bar
         :has="$has"
-        :class="{showDevSkin}"
+        :class="{ showDevSkin }"
       />
 
       <div
         id="v-main"
-        :class="{marginRight: hasFloatingInformationBar}"
+        :class="{ marginRight: hasFloatingInformationBar }"
       >
         <a-loading-indicator
           :isLoading="!!numLoadingRequests"
@@ -46,13 +57,13 @@
         <sticky-header />
 
         <div class="pa-8 pt-4">
-          <router-view :class="{isLoading: !!numLoadingRequests}" />
+          <router-view :class="{ isLoading: !!numLoadingRequests }" />
         </div>
 
         <sticky-footer-container />
       </div>
 
-      <information-bar :class="{showDevSkin}" />
+      <information-bar :class="{ showDevSkin }" />
     </div>
 
     <a-dialog id="app" />
@@ -123,7 +134,7 @@ export default class App extends Vue {
     this.$events.on(LoadingEvent.START_LOADING, this.startLoading)
     this.$events.on(LoadingEvent.STOP_LOADING, this.stopLoading)
 
-    this.$events.on(SidebarEvent.STATUS, ({payload: {hasFloatingOverlay, mobile, information}}) => {
+    this.$events.on(SidebarEvent.STATUS, ({ payload: { hasFloatingOverlay, mobile, information } }) => {
       this.sidebarsFloating = hasFloatingOverlay
       this.hasFloatingInformationBar = mobile && information
     })
@@ -188,6 +199,16 @@ export default class App extends Vue {
     return adminConfig.app.show_dev_skin
   }
 
+  get isImpersonating () {
+    return this.$auth.isImpersonating
+  }
+
+  get impersonatedAccountTitle () {
+    const account = this.$auth.account
+    const name = [account.first_name, account.last_name].filter(Boolean).join(' ').trim()
+    return name || account.username || account.email
+  }
+
   startLoading () {
     this.numLoadingRequests++
   }
@@ -198,7 +219,6 @@ export default class App extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .isLoading {
   opacity: .6;
@@ -233,4 +253,28 @@ export default class App extends Vue {
   }
 }
 
+.impersonationBanner {
+  // absolute, not sticky: the layout (sidebar) is 100vh — a banner in the flow
+  // would push it down and the sidebar avatar would overflow the viewport.
+  // centered pill at the top, only as wide as its text.
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 500;
+  padding: .375rem 1.25rem;
+  border-radius: 0 0 6px 6px;
+  background: #C62828;
+  color: white;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.impersonationBanner-exit {
+  color: white;
+  font-weight: normal;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 </style>

package/src-admin/plugins/AuthPlugin.js

@@ -14,6 +14,17 @@ class AuthPlugin {
         return authService.getCurrentAccountRoles()
       },
 
+      // login-as: is the current tab acting as another account, and as whom
+      get isImpersonating () {
+        return !!authService.isImpersonating
+      },
+
+      get impersonatedBy () {
+        return authService.impersonatedBy
+      },
+
+      impersonate: accountId => authService.forwardToImpersonateEndpoint(accountId),
+
       logout: () => authService.forwardToLogoutEndpoint()
     }