PRO-5940: working PoC of distinct guest admin bar experience #55
Conversation
| @@ -0,0 +1,153 @@ | |||
| <template> | |||
| <div | |||
There was a problem hiding this comment.
Conditionally emit different markup when the user is a guest.
| > | ||
| <button @click="logout">Log Out</button> | ||
| </div> | ||
| <div v-else |
There was a problem hiding this comment.
The HTML from here down is unmodified. There are a few changes separately called out in the script section.
| moduleOptions() { | ||
| return window.apos.adminBar; | ||
| }, | ||
| guest() { |
There was a problem hiding this comment.
Exposes the fact that the user is a guest. See also the getBrowserData extension below.
| } | ||
| }, | ||
| mounted() { | ||
| if (!this.guest) { |
There was a problem hiding this comment.
The last change in this file: don't invoke a method that manipulates markup we won't have for guests.
| getBrowserData(_super, req) { | ||
| const data = _super(req); | ||
| if (data.user) { | ||
| data.user.role = req.user.role; |
There was a problem hiding this comment.
We don't expose the logged-in user's role on the front end by default, so add that information.
| @@ -0,0 +1,153 @@ | |||
| <template> | |||
There was a problem hiding this comment.
99% of this file is directly copied from the original in the apostrophe module, see below for the changes.
There was a problem hiding this comment.
You could place this file in any module, as long as it is in the ui/apos/components subdirectory of that module. I chose the project-level modules/@apostrophecms/admin-bar folder to make it easier to find this override later.
Demonstrates how to distinguish the guest admin bar experience e.g. just show a logout button with custom (in this case very minimal) markup.
PoC only, do not merge.