From 7869e40c9443583849a808f79d125e6423ee919f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Martin?= <ln@getodk.org>
Date: Wed, 20 Mar 2024 16:54:35 -0700
Subject: [PATCH 1/8] Add feedback button

---
 src/components/app.vue             |  4 +-
 src/components/feedback-button.vue | 70 ++++++++++++++++++++++++++++++
 transifex/strings_en.json          |  6 +++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/components/feedback-button.vue

diff --git a/src/components/app.vue b/src/components/app.vue
index 47224287b..e9ff0be1a 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -15,6 +15,7 @@ except according to the terms contained in the LICENSE file.
     will affect how the navbar is rendered. -->
     <navbar v-show="routerReady"/>
     <alert id="app-alert"/>
+    <feedback-button/>
     <!-- Specifying .capture so that an alert is not hidden immediately if it
     was shown after the click. -->
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
@@ -30,6 +31,7 @@ import { START_LOCATION } from 'vue-router';
 
 import Alert from './alert.vue';
 import Navbar from './navbar.vue';
+import FeedbackButton from './feedback-button.vue';
 
 import useCallWait from '../composables/call-wait';
 import useDisabled from '../composables/disabled';
@@ -38,7 +40,7 @@ import { useSessions } from '../util/session';
 
 export default {
   name: 'App',
-  components: { Alert, Navbar },
+  components: { Alert, Navbar, FeedbackButton },
   inject: ['alert'],
   setup() {
     useSessions();
diff --git a/src/components/feedback-button.vue b/src/components/feedback-button.vue
new file mode 100644
index 000000000..700223e2a
--- /dev/null
+++ b/src/components/feedback-button.vue
@@ -0,0 +1,70 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+    <div id="feedback-button">
+      <a :href="surveyLink" target="_blank"><span>{{ $t('feedback') }}</span></a>
+    </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'FeedbackButton'
+});
+
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const surveyLink = computed(() => `https://data.getodk.cloud/-/single/JLdODTs84WWsgibw4JOh0krbDenObgi?st=9hflqGrodnpWyS8g69dbORJ3RD8jSQChTBMaf7zpE5gaPElyDtKgAjI79y$zqctG&d[/data/host]=${window.location.host}&d[/data/page]=${useRoute().name}`);
+</script>
+
+<style lang="scss">
+@import '../assets/scss/variables';
+
+#feedback-button span {
+  display: block;
+  background-color: white;
+  position: fixed;
+  z-index: 99999;
+  right: 0;
+  bottom: 100px;
+  height: 4em;
+  border: 2px solid;
+  border-color: #e3e4e4;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  text-align: center;
+  line-height: 2em;
+  cursor: pointer;
+  transform-origin: 50% 50%;
+  transform: translateX(50%) rotate(-90deg);
+  transition: right 0.25s;
+
+  color: $color-accent-primary;
+  font-size: 1em;
+  padding: 0em 1.25em 0 1.25em;
+}
+
+#feedback-button span:hover,
+#feedback-button span:focus {
+  right: 10px;
+}
+</style>
+
+  <i18n lang="json5">
+  {
+    "en": {
+      // Text for a hovering feedback button shown anchored to right of screen. If your language doesn't have a single word or short
+      // phrase for "feedback", consider something like "comments" or "reactions".
+      "feedback": "Feedback"
+    }
+  }
+  </i18n>
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index aa178ea15..5c5308c7b 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -2011,6 +2011,12 @@
         "developer_comment": "This refers to creation of an Entity. {filename} is the name of an uploaded file containing the Entity. {name} is the name of a Web User."
       }
     },
+    "FeedbackButton": {
+      "feedback": {
+        "string": "Feedback",
+        "developer_comment": "Text for a hovering feedback button shown anchored to right of screen. If your language doesn't have a single word or short phrase for \"feedback\", consider something like \"comments\" or \"reactions\"."
+      }
+    },
     "FieldKeyList": {
       "action": {
         "create": {

From f229b261b7ad83bc7060354625bef043e9d57a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Martin?= <ln@getodk.org>
Date: Wed, 20 Mar 2024 17:12:44 -0700
Subject: [PATCH 2/8] Don't show feedback button on login screen

---
 src/components/app.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/app.vue b/src/components/app.vue
index e9ff0be1a..1a614acd2 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -15,7 +15,7 @@ except according to the terms contained in the LICENSE file.
     will affect how the navbar is rendered. -->
     <navbar v-show="routerReady"/>
     <alert id="app-alert"/>
-    <feedback-button/>
+    <feedback-button v-if="loggedIn"/>
     <!-- Specifying .capture so that an alert is not hidden immediately if it
     was shown after the click. -->
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
@@ -53,6 +53,10 @@ export default {
   computed: {
     routerReady() {
       return this.$route !== START_LOCATION;
+    },
+
+    loggedIn() {
+      return useRequestData().currentUser.dataExists && this.$route.path !== '/login';
     }
   },
   created() {

From 5dc81c590c879212dd49efcb3ac967f754091a12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Martin?= <ln@getodk.org>
Date: Wed, 17 Apr 2024 16:24:38 -0700
Subject: [PATCH 3/8] Respond to review feedback

---
 src/components/app.vue             | 19 ++++++++++--------
 src/components/feedback-button.vue | 17 +++++++++++++---
 src/config.js                      |  3 ++-
 src/util/load-async.js             |  4 ++++
 test/components/app.spec.js        | 32 ++++++++++++++++++++++++++++++
 5 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/src/components/app.vue b/src/components/app.vue
index 1a614acd2..7e4b5dbcb 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -15,7 +15,7 @@ except according to the terms contained in the LICENSE file.
     will affect how the navbar is rendered. -->
     <navbar v-show="routerReady"/>
     <alert id="app-alert"/>
-    <feedback-button v-if="loggedIn"/>
+    <feedback-button v-if="showsFeedbackButton"/>
     <!-- Specifying .capture so that an alert is not hidden immediately if it
     was shown after the click. -->
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
@@ -27,6 +27,8 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue';
+
 import { START_LOCATION } from 'vue-router';
 
 import Alert from './alert.vue';
@@ -37,27 +39,28 @@ import useCallWait from '../composables/call-wait';
 import useDisabled from '../composables/disabled';
 import { useRequestData } from '../request-data';
 import { useSessions } from '../util/session';
+import { loadAsync } from '../util/load-async';
 
 export default {
   name: 'App',
-  components: { Alert, Navbar, FeedbackButton },
-  inject: ['alert'],
+  components: { Alert, Navbar, FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton')) },
+  inject: ['alert', 'config'],
   setup() {
     useSessions();
     useDisabled();
 
-    const { centralVersion } = useRequestData();
+    const { centralVersion, currentUser } = useRequestData();
     const { callWait } = useCallWait();
-    return { centralVersion, callWait };
+    return { centralVersion, currentUser, callWait };
   },
   computed: {
     routerReady() {
       return this.$route !== START_LOCATION;
     },
 
-    loggedIn() {
-      return useRequestData().currentUser.dataExists && this.$route.path !== '/login';
-    }
+    showsFeedbackButton() {
+      return this.config.showsFeedbackButton && this.currentUser.dataExists && this.$route.path !== '/login'
+    },
   },
   created() {
     this.callWait('checkVersion', this.checkVersion, (tries) =>
diff --git a/src/components/feedback-button.vue b/src/components/feedback-button.vue
index 700223e2a..16953b713 100644
--- a/src/components/feedback-button.vue
+++ b/src/components/feedback-button.vue
@@ -16,14 +16,25 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { queryString } from '../util/request';
+
 defineOptions({
   name: 'FeedbackButton'
 });
 
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+const route = useRoute();
+
+const surveyLink = computed(() => {
+  const query = queryString({
+    'st': '9hflqGrodnpWyS8g69dbORJ3RD8jSQChTBMaf7zpE5gaPElyDtKgAjI79y$zqctG',
+    'd[/data/host]': window.location.host,
+    'd[/data/page]': route.name
+  });
 
-const surveyLink = computed(() => `https://data.getodk.cloud/-/single/JLdODTs84WWsgibw4JOh0krbDenObgi?st=9hflqGrodnpWyS8g69dbORJ3RD8jSQChTBMaf7zpE5gaPElyDtKgAjI79y$zqctG&d[/data/host]=${window.location.host}&d[/data/page]=${useRoute().name}`);
+ return `https://data.getodk.cloud/-/single/JLdODTs84WWsgibw4JOh0krbDenObgi${query}`;
+});
 </script>
 
 <style lang="scss">
diff --git a/src/config.js b/src/config.js
index 558189f58..4207aa475 100644
--- a/src/config.js
+++ b/src/config.js
@@ -16,5 +16,6 @@ export default {
     title: null,
     body: null
   },
-  oidcEnabled: process.env.VUE_APP_OIDC_ENABLED === 'true'
+  oidcEnabled: process.env.VUE_APP_OIDC_ENABLED === 'true',
+  showsFeedbackButton: true
 };
diff --git a/src/util/load-async.js b/src/util/load-async.js
index d8f007f7f..b25f088b7 100644
--- a/src/util/load-async.js
+++ b/src/util/load-async.js
@@ -87,6 +87,10 @@ const loaders = new Map()
     /* webpackChunkName: "component-entity-upload" */
     '../components/entity/upload.vue'
   )))
+  .set('FeedbackButton', loader(() => import(
+    /* webpackChunkName: "component-feedback-button" */
+    '../components/feedback-button.vue'
+  )))
   .set('FieldKeyList', loader(() => import(
     /* webpackChunkName: "component-field-key-list" */
     '../components/field-key/list.vue'
diff --git a/test/components/app.spec.js b/test/components/app.spec.js
index 02f6604d0..777c2b450 100644
--- a/test/components/app.spec.js
+++ b/test/components/app.spec.js
@@ -6,6 +6,7 @@ import { logOut } from '../../src/util/session';
 
 import { load } from '../util/http';
 import { mockLogin } from '../util/session';
+import FeedbackButton from '../../src/components/feedback-button.vue';
 
 describe('App', () => {
   describe('change in Central version', () => {
@@ -221,4 +222,35 @@ describe('App', () => {
       app.should.alert();
     });
   });
+
+  describe('feedback button', () => {
+    it('is shown if a user is logged in and config is true', async () => {
+      const container = {
+        config: { showsFeedbackButton: true }
+      };
+      mockLogin();
+
+      const app = await load('/', { container })
+      app.findComponent(FeedbackButton).exists().should.be.true();
+    });
+
+    it('is hidden if a user is logged in and config is false', async () => {
+      const container = {
+        config: { showsFeedbackButton: false }
+      };
+      mockLogin();
+
+      const app = await load('/', { container })
+      app.findComponent(FeedbackButton).exists().should.be.false();
+    });
+
+    it('is hidden if no user is logged in and config is true', async () => {
+      const container = {
+        config: { showsFeedbackButton: true }
+      };
+
+      const app = await load('/', { container })
+      app.findComponent(FeedbackButton).exists().should.be.false();
+    });
+  })
 });

From 6b8e0fdb91de7c9fad53682395e1f0e22dae162e Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:15:33 -0400
Subject: [PATCH 4/8] Resolve lint errors

---
 src/components/app.vue             | 1 -
 src/components/feedback-button.vue | 4 ++--
 test/components/app.spec.js        | 8 ++++----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/app.vue b/src/components/app.vue
index 7e4b5dbcb..d19c8eaa7 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -33,7 +33,6 @@ import { START_LOCATION } from 'vue-router';
 
 import Alert from './alert.vue';
 import Navbar from './navbar.vue';
-import FeedbackButton from './feedback-button.vue';
 
 import useCallWait from '../composables/call-wait';
 import useDisabled from '../composables/disabled';
diff --git a/src/components/feedback-button.vue b/src/components/feedback-button.vue
index 16953b713..3fd3b010d 100644
--- a/src/components/feedback-button.vue
+++ b/src/components/feedback-button.vue
@@ -28,12 +28,12 @@ const route = useRoute();
 
 const surveyLink = computed(() => {
   const query = queryString({
-    'st': '9hflqGrodnpWyS8g69dbORJ3RD8jSQChTBMaf7zpE5gaPElyDtKgAjI79y$zqctG',
+    st: '9hflqGrodnpWyS8g69dbORJ3RD8jSQChTBMaf7zpE5gaPElyDtKgAjI79y$zqctG',
     'd[/data/host]': window.location.host,
     'd[/data/page]': route.name
   });
 
- return `https://data.getodk.cloud/-/single/JLdODTs84WWsgibw4JOh0krbDenObgi${query}`;
+  return `https://data.getodk.cloud/-/single/JLdODTs84WWsgibw4JOh0krbDenObgi${query}`;
 });
 </script>
 
diff --git a/test/components/app.spec.js b/test/components/app.spec.js
index 777c2b450..1fc516692 100644
--- a/test/components/app.spec.js
+++ b/test/components/app.spec.js
@@ -230,7 +230,7 @@ describe('App', () => {
       };
       mockLogin();
 
-      const app = await load('/', { container })
+      const app = await load('/', { container });
       app.findComponent(FeedbackButton).exists().should.be.true();
     });
 
@@ -240,7 +240,7 @@ describe('App', () => {
       };
       mockLogin();
 
-      const app = await load('/', { container })
+      const app = await load('/', { container });
       app.findComponent(FeedbackButton).exists().should.be.false();
     });
 
@@ -249,8 +249,8 @@ describe('App', () => {
         config: { showsFeedbackButton: true }
       };
 
-      const app = await load('/', { container })
+      const app = await load('/', { container });
       app.findComponent(FeedbackButton).exists().should.be.false();
     });
-  })
+  });
 });

From fa7c8cd3eb024101ee517ca61e26df18551b439d Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:15:36 -0400
Subject: [PATCH 5/8] Fix test of FeedbackButton

---
 test/components/app.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/app.spec.js b/test/components/app.spec.js
index 1fc516692..0551fad7b 100644
--- a/test/components/app.spec.js
+++ b/test/components/app.spec.js
@@ -249,7 +249,7 @@ describe('App', () => {
         config: { showsFeedbackButton: true }
       };
 
-      const app = await load('/', { container });
+      const app = await load('/login', { container }).restoreSession(false);
       app.findComponent(FeedbackButton).exists().should.be.false();
     });
   });

From 1bbb612954a6b81e1ddf2b37a7a038d0ec90c9ca Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:15:38 -0400
Subject: [PATCH 6/8] Change default value of showsFeedbackButton to false

---
 src/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.js b/src/config.js
index 4207aa475..407ed3b69 100644
--- a/src/config.js
+++ b/src/config.js
@@ -17,5 +17,5 @@ export default {
     body: null
   },
   oidcEnabled: process.env.VUE_APP_OIDC_ENABLED === 'true',
-  showsFeedbackButton: true
+  showsFeedbackButton: false
 };

From 93480a9d5ef5fcf6e4f53558f126dbd9d6da547d Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:15:39 -0400
Subject: [PATCH 7/8] useSessions(): return whether user is visibly logged in

---
 src/components/app.vue                 |  9 ++---
 src/components/navbar.vue              | 16 ++------
 src/components/navbar/actions.vue      | 10 +----
 src/util/session.js                    | 27 +++++++++++---
 test/components/navbar/actions.spec.js | 30 +++++----------
 test/components/navbar/links.spec.js   | 18 ++++-----
 test/unit/session.spec.js              | 51 +++++++++++++++++++++++++-
 7 files changed, 97 insertions(+), 64 deletions(-)

diff --git a/src/components/app.vue b/src/components/app.vue
index d19c8eaa7..a5dae94d0 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -45,20 +45,19 @@ export default {
   components: { Alert, Navbar, FeedbackButton: defineAsyncComponent(loadAsync('FeedbackButton')) },
   inject: ['alert', 'config'],
   setup() {
-    useSessions();
+    const { visiblyLoggedIn } = useSessions();
     useDisabled();
 
-    const { centralVersion, currentUser } = useRequestData();
+    const { centralVersion } = useRequestData();
     const { callWait } = useCallWait();
-    return { centralVersion, currentUser, callWait };
+    return { visiblyLoggedIn, centralVersion, callWait };
   },
   computed: {
     routerReady() {
       return this.$route !== START_LOCATION;
     },
-
     showsFeedbackButton() {
-      return this.config.showsFeedbackButton && this.currentUser.dataExists && this.$route.path !== '/login'
+      return this.config.showsFeedbackButton && this.visiblyLoggedIn;
     },
   },
   created() {
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 45eccc529..5ed15fb8e 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -25,7 +25,7 @@ except according to the terms contained in the LICENSE file.
           <router-link to="/" class="navbar-brand">ODK Central</router-link>
         </div>
         <div class="collapse navbar-collapse">
-          <navbar-links v-if="loggedIn"/>
+          <navbar-links v-if="visiblyLoggedIn"/>
           <div class="navbar-right">
             <a v-show="showsAnalyticsNotice" id="navbar-analytics-notice"
               href="#" @click.prevent="analyticsIntroduction.show()">
@@ -34,7 +34,7 @@ except according to the terms contained in the LICENSE file.
             <ul class="nav navbar-nav">
               <navbar-help-dropdown/>
               <navbar-locale-dropdown/>
-              <navbar-actions :logged-in="loggedIn"/>
+              <navbar-actions/>
             </ul>
           </div>
         </div>
@@ -67,7 +67,7 @@ export default {
     NavbarLinks,
     NavbarLocaleDropdown
   },
-  inject: ['config'],
+  inject: ['config', 'visiblyLoggedIn'],
   setup() {
     // The component does not assume that this data will exist when the
     // component is created.
@@ -81,16 +81,8 @@ export default {
     };
   },
   computed: {
-    // Usually once the user is logged in (either after their session has been
-    // restored or after they have submitted the login form), we render a fuller
-    // navbar. However, if after submitting the login form, the user is
-    // redirected to outside Frontend, they will remain on /login until they are
-    // redirected. In that case, we do not render the fuller navbar.
-    loggedIn() {
-      return this.currentUser.dataExists && this.$route.path !== '/login';
-    },
     showsAnalyticsNotice() {
-      return this.config.showsAnalytics && this.loggedIn &&
+      return this.config.showsAnalytics && this.visiblyLoggedIn &&
         this.canRoute('/system/analytics') && this.analyticsConfig.dataExists &&
         this.analyticsConfig.isEmpty() &&
         Date.now() - Date.parse(this.currentUser.createdAt) >= /* 14 days */ 1209600000;
diff --git a/src/components/navbar/actions.vue b/src/components/navbar/actions.vue
index 2b3918930..23bd16351 100644
--- a/src/components/navbar/actions.vue
+++ b/src/components/navbar/actions.vue
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <li v-if="!loggedIn" id="navbar-actions">
+  <li v-if="!visiblyLoggedIn" id="navbar-actions">
     <a href="#" @click.prevent>
       <span class="icon-user-circle-o"></span>{{ $t('notLoggedIn') }}
     </a>
@@ -44,13 +44,7 @@ import { useRequestData } from '../../request-data';
 
 export default {
   name: 'NavbarActions',
-  inject: ['container', 'alert', 'unsavedChanges'],
-  props: {
-    loggedIn: {
-      type: Boolean,
-      default: false
-    }
-  },
+  inject: ['container', 'alert', 'unsavedChanges', 'visiblyLoggedIn'],
   setup() {
     // The component does not assume that this data will exist when the
     // component is created.
diff --git a/src/util/session.js b/src/util/session.js
index 9100f8dd5..1c5beb52e 100644
--- a/src/util/session.js
+++ b/src/util/session.js
@@ -65,7 +65,7 @@ hand-in-hand.
 */
 
 import { START_LOCATION } from 'vue-router';
-import { inject, onBeforeUnmount } from 'vue';
+import { computed, inject, onBeforeUnmount, provide } from 'vue';
 
 import { afterNextNavigation, forceReplace } from './router';
 import { apiPaths, isProblem, requestAlertMessage } from './request';
@@ -194,13 +194,28 @@ const logOutAfterStorageChange = (container) => (event) => {
 
 export const useSessions = () => {
   const container = inject('container');
-  const id = setInterval(logOutBeforeSessionExpires(container), 15000);
-  const handler = logOutAfterStorageChange(container);
-  window.addEventListener('storage', handler);
+  const intervalId = setInterval(logOutBeforeSessionExpires(container), 15000);
+  const storageHandler = logOutAfterStorageChange(container);
+  window.addEventListener('storage', storageHandler);
   onBeforeUnmount(() => {
-    clearInterval(id);
-    window.removeEventListener('storage', handler);
+    clearInterval(intervalId);
+    window.removeEventListener('storage', storageHandler);
   });
+
+  /* visiblyLoggedIn.value is `true` if the user not only has all the data from
+  login, but is also visibly logged in. An example of when the user has data,
+  but isn't visibly logged in is if the user has submitted the login form and is
+  being redirected to outside Frontend (which isn't instant). In that case, they
+  will remain on /login until the redirect is complete, and the navbar will not
+  change to reflect their login. */
+  const { router, requestData } = container;
+  const { currentUser } = requestData;
+  const visiblyLoggedIn = computed(() => currentUser.dataExists &&
+    router.currentRoute.value !== START_LOCATION &&
+    router.currentRoute.value.path !== '/login');
+  provide('visiblyLoggedIn', visiblyLoggedIn);
+
+  return { visiblyLoggedIn };
 };
 
 export const restoreSession = (session) =>
diff --git a/test/components/navbar/actions.spec.js b/test/components/navbar/actions.spec.js
index 94fe6b086..012aca3d3 100644
--- a/test/components/navbar/actions.spec.js
+++ b/test/components/navbar/actions.spec.js
@@ -1,35 +1,23 @@
 import sinon from 'sinon';
 
-import Navbar from '../../../src/components/navbar.vue';
 import NavbarActions from '../../../src/components/navbar/actions.vue';
 
 import { load } from '../../util/http';
 import { mockLogin } from '../../util/session';
-import { mockRouter } from '../../util/router';
-import { mount } from '../../util/lifecycle';
 
 describe('NavbarActions', () => {
-  it('indicates if the user is not logged in', () => {
-    const navbar = mount(Navbar, {
-      container: { router: mockRouter('/login') },
-      global: {
-        // Stubbing AnalyticsIntroduction because of its custom <router-link>
-        stubs: { AnalyticsIntroduction: true }
-      }
-    });
-    const text = navbar.getComponent(NavbarActions).get('a').text();
-    text.should.equal('Not logged in');
-  });
+  it('indicates if the user is not logged in', () =>
+    load('/login')
+      .restoreSession(false)
+      .afterResponses(app => {
+        const text = app.getComponent(NavbarActions).get('a').text();
+        text.should.equal('Not logged in');
+      }));
 
   it("shows the user's display name", async () => {
     mockLogin({ displayName: 'Alice Allison' });
-    const navbar = mount(Navbar, {
-      container: { router: mockRouter('/') },
-      global: {
-        stubs: { AnalyticsIntroduction: true }
-      }
-    });
-    const a = navbar.getComponent(NavbarActions).get('a');
+    const app = await load('/');
+    const a = app.getComponent(NavbarActions).get('a');
     a.text().should.equal('Alice Allison');
     await a.get('span:nth-child(2)').should.have.textTooltip();
   });
diff --git a/test/components/navbar/links.spec.js b/test/components/navbar/links.spec.js
index c06f3cb1b..bf81187dd 100644
--- a/test/components/navbar/links.spec.js
+++ b/test/components/navbar/links.spec.js
@@ -1,23 +1,19 @@
 import { RouterLinkStub } from '@vue/test-utils';
 
-import Navbar from '../../../src/components/navbar.vue';
 import NavbarLinks from '../../../src/components/navbar/links.vue';
 
+import { load } from '../../util/http';
 import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 
 describe('NavbarLinks', () => {
-  it('does not render the links before login', () => {
-    const navbar = mount(Navbar, {
-      container: { router: mockRouter('/login') },
-      global: {
-        // Stubbing AnalyticsIntroduction because of its custom <router-link>
-        stubs: { AnalyticsIntroduction: true }
-      }
-    });
-    navbar.findComponent(NavbarLinks).exists().should.be.false();
-  });
+  it('does not render the links before login', () =>
+    load('/login')
+      .restoreSession(false)
+      .afterResponses(app => {
+        app.findComponent(NavbarLinks).exists().should.be.false();
+      }));
 
   it('renders the correct links for a sitewide administrator', () => {
     mockLogin();
diff --git a/test/unit/session.spec.js b/test/unit/session.spec.js
index 593e92ad8..e6ea384ab 100644
--- a/test/unit/session.spec.js
+++ b/test/unit/session.spec.js
@@ -7,7 +7,7 @@ import createTestContainer from '../util/container';
 import testData from '../data';
 import { load, mockHttp } from '../util/http';
 import { mockLogin } from '../util/session';
-import { mockRouter } from '../util/router';
+import { mockRouter, testRouter } from '../util/router';
 import { setRequestData } from '../util/request-data';
 import { withSetup } from '../util/lifecycle';
 
@@ -872,4 +872,53 @@ describe('util/session', () => {
         });
     });
   });
+
+  describe('visiblyLoggedIn', () => {
+    it('equals true after navigation from /login', () => {
+      const user = testData.extendedUsers.createPast(1).last();
+      const container = {
+        // Prevent a request for the analytics config.
+        config: { showsAnalytics: false }
+      };
+      let correctBeforeNavigation = false;
+      return load('/login', { container })
+        .restoreSession(false)
+        .afterResponses(app => {
+          app.vm.visiblyLoggedIn.should.be.false();
+        })
+        .request(async (app) => {
+          const form = app.get('#account-login form');
+          await form.get('input[type="email"]').setValue('alice@getodk.org');
+          await form.get('input[type="password"]').setValue('foo');
+          app.vm.$router.beforeEach(() => {
+            const { currentUser } = app.vm.$container.requestData;
+            // Even though data exists from login, the user shouldn't be visibly
+            // logged in until after the navigation.
+            correctBeforeNavigation = currentUser.dataExists && !app.vm.visiblyLoggedIn;
+          });
+          return form.trigger('submit');
+        })
+        .respondWithData(() => testData.sessions.createNew())
+        .respondWithData(() => user)
+        .respondFor('/')
+        .afterResponses(app => {
+          correctBeforeNavigation.should.be.true();
+          app.vm.visiblyLoggedIn.should.be.true();
+        });
+    });
+
+    it('equals false during the initial navigation', async () => {
+      mockLogin();
+      const container = createTestContainer({ router: testRouter() });
+      const { visiblyLoggedIn } = withSetup(useSessions, { container });
+      const { router, requestData: { currentUser } } = container;
+      let correctBeforeNavigation = false;
+      router.beforeEach(() => {
+        correctBeforeNavigation = currentUser.dataExists && !visiblyLoggedIn.value;
+      });
+      await router.push('/');
+      correctBeforeNavigation.should.be.true();
+      visiblyLoggedIn.value.should.be.true();
+    });
+  });
 });

From 2ec741fabd13ba40932dbbc3ba18b329cb9809d1 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Apr 2024 18:58:22 -0400
Subject: [PATCH 8/8] Fix focus animation

---
 src/components/feedback-button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feedback-button.vue b/src/components/feedback-button.vue
index 3fd3b010d..f6f7794ef 100644
--- a/src/components/feedback-button.vue
+++ b/src/components/feedback-button.vue
@@ -65,7 +65,7 @@ const surveyLink = computed(() => {
 }
 
 #feedback-button span:hover,
-#feedback-button span:focus {
+#feedback-button:focus-within span {
   right: 10px;
 }
 </style>