From 1a207284f6f685062bba635e8fb5a276faf6d491 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Mon, 10 Jul 2023 18:32:55 +0200
Subject: [PATCH] =?UTF-8?q?account=20switch=20=E2=80=93=20re-enable,=20bro?=
 =?UTF-8?q?adcast=20to=20all=20tabs=20on=20switch=20to=20make=20them=20rel?=
 =?UTF-8?q?oad=20and=20stop=20confusing=20people?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AccountSwitch.vue | 8 +++-----
 components/Header.vue        | 2 +-
 layouts/default.vue          | 7 +++++++
 plugins/auth.js              | 9 +++++++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/AccountSwitch.vue b/components/AccountSwitch.vue
index 5d0127dc0..8331da4d1 100644
--- a/components/AccountSwitch.vue
+++ b/components/AccountSwitch.vue
@@ -1,5 +1,4 @@
 <template>
-    <!--
     <div v-if="accounts !== undefined && (minimumCount === null || Object.keys(accounts).length >= minimumCount)">
         <div class="card">
             <div class="card-body d-flex flex-column flex-lg-row">
@@ -23,10 +22,9 @@
             <T>user.accountSwitch.helper</T>
         </p>
     </div>
-    -->
 </template>
 
-<script>/*
+<script>
 import {mapState} from "vuex";
 
 export default {
@@ -74,7 +72,7 @@ export default {
                     this.$removeToken(username);
                 }
             }
-        }
+        },
     }
 }
-*/</script>
+</script>
diff --git a/components/Header.vue b/components/Header.vue
index 0e16e58f8..066cf0b6c 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -57,7 +57,7 @@
             <NounsNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.nouns.route}`"/>
             <LinksNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.links.route}`"/>
             <CommunityNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.community.route}`"/>
-            <AccountSwitch class="container py-5 hide-if-empty" minimumCount="1" v-if="hoverItem && hoverItem.link === `/${config.user.route}`"/>
+            <AccountSwitch class="container py-5 hide-if-empty" :minimumCount="1" v-if="hoverItem && hoverItem.link === `/${config.user.route}`"/>
         </header>
         <div v-if="config.locale === 'zh' && new Date() < new Date(2022, 0, 1, 0, 0, 0) && $route.path === '/'" class="container">
             <div class="alert alert-info my-3">
diff --git a/layouts/default.vue b/layouts/default.vue
index 0e14dd3fd..8efcc2ffb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -103,6 +103,13 @@
 
             this.loadAds();
             this.loadGTM();
+
+            const bc = new BroadcastChannel('account_switch');
+            bc.onmessage = (ev) => {
+                if (ev.data !== this.$user()?.username) {
+                    window.location.reload();
+                }
+            }
         },
         methods: {
             async confirmAge() {
diff --git a/plugins/auth.js b/plugins/auth.js
index f27acc7be..ee4bfd005 100644
--- a/plugins/auth.js
+++ b/plugins/auth.js
@@ -42,6 +42,8 @@ export default ({app, store}) => {
     Vue.prototype.$setToken = (token) => {
         const accounts = getAccounts();
 
+        const usernameBefore = store.state.user?.username;
+
         store.commit('setToken', token);
         if (token) {
             const account = parseUserJwt(token);
@@ -53,6 +55,13 @@ export default ({app, store}) => {
             app.$cookies.remove('token');
         }
         saveAccounts(accounts);
+
+        const usernameAfter = store.state.user?.username;
+
+        if (usernameBefore !== usernameAfter) {
+            const bc = new BroadcastChannel('account_switch');
+            bc.postMessage(usernameAfter);
+        }
     };
     Vue.prototype.$removeToken = (username = null) => {
         const accounts = getAccounts();