From 1c9449c6f6d9df4fc62b7f1290bab577f7417a65 Mon Sep 17 00:00:00 2001
From: Tobias Hagemann <tobias.hagemann@skymatic.de>
Date: Mon, 4 Sep 2023 17:43:17 +0200
Subject: [PATCH] added simple navigation bar to initial setup, improved
 browser name editing, maintained layout consistency

---
 frontend/src/components/InitialSetup.vue      | 337 +++++++++---------
 .../src/components/SimpleNavigationBar.vue    |  57 +++
 frontend/src/i18n/de-DE.json                  |   7 +-
 frontend/src/i18n/en-US.json                  |   7 +-
 4 files changed, 240 insertions(+), 168 deletions(-)
 create mode 100644 frontend/src/components/SimpleNavigationBar.vue

diff --git a/frontend/src/components/InitialSetup.vue b/frontend/src/components/InitialSetup.vue
index 84ffad86..bab9469a 100644
--- a/frontend/src/components/InitialSetup.vue
+++ b/frontend/src/components/InitialSetup.vue
@@ -1,150 +1,155 @@
 <template>
-  <div class="min-h-screen flex flex-col justify-center py-24 -translate-y-24">
-    <div v-if="state == State.Preparing">
-      <div v-if="onFetchError == null" class="text-center">
-        {{ t('common.loading') }}
-      </div>
-      <div v-else>
-        <FetchError :error="onFetchError" :retry="fetchData"/>
-      </div>
+  <SimpleNavigationBar v-if="me != null" :me="me"/>
+
+  <div v-if="state == State.Preparing" class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
+    <div v-if="onFetchError == null" class="text-center">
+      {{ t('common.loading') }}
+    </div>
+    <div v-else>
+      <FetchError :error="onFetchError" :retry="fetchData"/>
     </div>
+  </div>
 
-    <div v-else-if="state == State.CreateUserKey" class="text-sm text-gray-600">
-      <form @submit.prevent="createUserKey()">
-        <div class="flex justify-center">
-          <div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-left text-base text-gray-600 sm:w-full sm:max-w-lg">
-            <div class="flex justify-center">
-              <img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
-            </div>
-            <div class="mt-3 sm:mt-5">
-              <h3 class="text-lg leading-6 font-medium text-gray-900 text-center">
-                {{ t('initialSetup.title') }}
-              </h3>
-              <p class="mt-2 text-center">
+  <div v-else-if="me != null && state == State.CreateUserKey" class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
+    <form @submit.prevent="createUserKey()">
+      <div class="flex justify-center">
+        <div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-center sm:w-full sm:max-w-lg">
+          <div class="flex justify-center">
+            <img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
+          </div>
+          <div class="mt-3 sm:mt-5">
+            <h3 class="text-lg leading-6 font-medium text-gray-900">
+              {{ t('initialSetup.title') }}
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
                 {{ t('initialSetup.description') }}
               </p>
-              
-              <div class="relative mt-5 sm:mt-6 text-left">
-                <div class="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
-                  <textarea id="setupCode" v-model="setupCode" :aria-label="t('initialSetup.setupCode')" rows="1" name="setupCode" class="block w-full resize-none border-0 py-3 font-mono text-lg text-center focus:ring-0" readonly />
-                  <div class="py-2" aria-hidden="true">
-                    <div class="h-9" />
-                  </div>
+            </div>
+
+            <div class="relative mt-5 sm:mt-6">
+              <div class="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
+                <textarea id="setupCode" v-model="setupCode" :aria-label="t('initialSetup.setupCode')" rows="1" name="setupCode" class="block w-full resize-none border-0 py-3 font-mono text-lg text-center focus:ring-0" readonly />
+                <div class="py-2" aria-hidden="true">
+                  <div class="h-9" />
                 </div>
-                <div class="absolute inset-x-0 bottom-0">
-                  <div class="flex flex-nowrap justify-end space-x-2 py-2 px-2 sm:px-3">
-                    <div class="flex-shrink-0">
-                      <button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 font-medium hover:bg-gray-100 sm:px-3" @click="copySetupCode()">
-                        <ClipboardIcon class="h-5 w-5 flex-shrink-0 text-gray-300 sm:-ml-1" aria-hidden="true" />
-                        <span v-if="!copiedSetupCode" class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copy') }}</span>
-                        <span v-else class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copied') }}</span>
-                      </button>
-                    </div>
+              </div>
+              <div class="absolute inset-x-0 bottom-0">
+                <div class="flex flex-nowrap justify-end space-x-2 py-2 px-2 sm:px-3">
+                  <div class="flex-shrink-0">
+                    <button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" @click="copySetupCode()">
+                      <ClipboardIcon class="h-5 w-5 flex-shrink-0 text-gray-300 sm:-ml-1" aria-hidden="true" />
+                      <span v-if="!copiedSetupCode" class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copy') }}</span>
+                      <span v-else class="hidden truncate sm:ml-2 sm:block text-gray-900">{{ t('common.copied') }}</span>
+                    </button>
                   </div>
                 </div>
               </div>
+            </div>
 
-              <div class="mt-5 flex items-start">
+            <div class="mt-5 sm:mt-6 text-left flex flex-col gap-5">
+              <div class="flex">
                 <div class="mx-3">
                   <KeyIcon class="h-6 w-6 text-primary" aria-hidden="true" />
                 </div>
-                <p>
+                <p class="text-gray-600">
                   {{ t('initialSetup.details.setupCode') }}
                 </p>
               </div>
 
-              <div class="mt-5 flex items-start">
+              <div class="flex">
                 <div class="mx-3">
                   <ListBulletIcon class="h-6 w-6 text-primary" aria-hidden="true" />
                 </div>
-                <p>
+                <p class="text-gray-600">
                   {{ t('initialSetup.details.devicesList') }}
                 </p>
               </div>
 
-              <div class="mt-5 flex items-start">
+              <div class="flex">
                 <div class="mx-3">
                   <ComputerDesktopIcon class="h-6 w-6 text-primary" aria-hidden="true" />
                 </div>
-                <p>
-                  {{ t('initialSetup.details.devicesName.before') }}
-                  <span ref="deviceNameField" :aria-label="t('initialSetup.details.devicesName.label')" contenteditable class="cursor-pointer focus:cursor-text focus:outline-primary focus:selection:bg-primary-l2 focus:selection:text-primary select-all font-mono" @click="editBrowserName()" @keydown.enter.prevent="deviceNameField?.blur()" @blur="changeBrowserName" v-text="deviceName" />
-                  {{ ' ' }}
-                  <PencilIcon class="inline-block h-4 w-4 -mt-1 cursor-pointer" aria-hidden="true" @click="editBrowserName()" />
-                  {{ t('initialSetup.details.devicesName.after') }}
-                </p>
+                <i18n-t keypath="initialSetup.details.devicesName" scope="global" tag="p" class="text-gray-600">
+                  <template #deviceName>
+                    <span class="inline-flex items-center gap-1">
+                      <span ref="deviceNameField" :aria-label="t('initialSetup.details.devicesName.label')" contenteditable class="cursor-pointer focus:cursor-text focus:outline-primary focus:selection:bg-primary-l2 focus:selection:text-primary select-all font-mono" @click="!deviceNameFieldIsActive && editBrowserName()" @blur="deviceNameFieldIsActive && revertBrowserName()" @keydown.enter.prevent="confirmBrowserName()" @keydown.esc.prevent="revertBrowserName()" v-text="deviceName" />
+                      <PencilIcon v-if="!deviceNameFieldIsActive" class="cursor-pointer inline-block h-4 w-4" aria-hidden="true" @click="editBrowserName()" />
+                      <CheckIcon v-else class="cursor-pointer inline-block h-4 w-4 text-primary" aria-hidden="true" @mousedown.prevent="" @click="confirmBrowserName()" />
+                    </span>
+                  </template>
+                </i18n-t>
               </div>
+            </div>
 
-              <div class="text-center mt-5 sm:mt-6">
-                <input id="confirmSetupKey" v-model="confirmSetupKey" name="confirmSetupKey" type="checkbox" class="h-4 w-4 mx-2 rounded border-gray-300 text-primary focus:ring-primary" required>
-                <label for="confirmSetupKey" class="font-medium cursor-pointer">{{ t('initialSetup.confirmSetupKey') }}</label>
+            <div class="relative flex justify-center text-left mt-5 sm:mt-6">
+              <div class="flex h-5 items-center">
+                <input id="confirmSetupKey" v-model="confirmSetupKey" name="confirmSetupKey" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" required>
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="confirmSetupKey" class="font-medium text-gray-700">{{ t('initialSetup.confirmSetupKey') }}</label>
               </div>
+            </div>
 
-              <div class="mt-5 sm:mt-6">
-                <button type="submit" :disabled="!confirmSetupKey || processing" class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
-                  {{ t('initialSetup.submit') }}
-                </button>
-                <div v-if="onCreateError != null">
-                  <p class="text-red-900 mt-2">{{ t('common.unexpectedError', [onCreateError.message]) }}</p>
-                </div>
+            <div class="mt-5 sm:mt-6">
+              <button type="submit" :disabled="!confirmSetupKey || processing" class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
+                {{ t('initialSetup.submit') }}
+              </button>
+              <div v-if="onCreateError != null">
+                <p class="text-red-900 mt-2">{{ t('common.unexpectedError', [onCreateError.message]) }}</p>
               </div>
             </div>
           </div>
         </div>
-      </form>
-
-      <p class="mt-10 text-center text-sm">
-        <router-link to="/app/logout" class="leading-6 text-gray-400 hover:text-gray-700">{{ t('nav.profile.signOut') }}</router-link>
-      </p>
-    </div>
+      </div>
+    </form>
+  </div>
 
-    <div v-else-if="state == State.EnterSetupCode">
-      <form @submit.prevent="recoverUserKey()">
-        <div class="flex flex-col items-center">
-          <div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-center sm:w-full sm:max-w-lg">
-            <div class="flex justify-center">
-              <img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
+  <div v-else-if="me != null && state == State.EnterSetupCode" class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
+    <form @submit.prevent="recoverUserKey()">
+      <div class="flex flex-col items-center">
+        <div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:p-6 text-center sm:w-full sm:max-w-lg">
+          <div class="flex justify-center">
+            <img src="/logo.svg" class="h-12" alt="Logo" aria-hidden="true" />
+          </div>
+          <div class="mt-3 sm:mt-5">
+            <h3 class="text-lg leading-6 font-medium text-gray-900">
+              {{ t('registerDevice.title') }}
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                {{ t('registerDevice.description') }}
+              </p>
             </div>
-            <div class="mt-3 sm:mt-5">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {{ t('registerDevice.title') }}
-              </h3>
-              <div class="mt-2">
-                <p class="text-sm text-gray-500">
-                  {{ t('registerDevice.description') }}
-                </p>
-              </div>
-              <div class="mt-5 sm:mt-6 text-left">      
-                <label for="setupCode" class="block text-sm font-medium text-gray-700">{{ t('registerDevice.setupCode') }}</label>
-                <input id="setupCode" v-model="setupCode" v-focus type="text" name="setupCode" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" aria-describedby="setupCodeDescription" />
-                <p id="setupCodeDescription" class="mt-2 text-sm text-gray-500">{{ t('registerDevice.setupCode.description') }}</p>
-              </div>
-              <div class="mt-5 sm:mt-6 text-left">      
-                <label for="deviceName" class="block text-sm font-medium text-gray-700">{{ t('registerDevice.deviceName') }}</label>
-                <input id="deviceName" v-model="deviceName" type="text" name="deviceName" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" aria-describedby="deviceNameDescription" />
-                <p id="deviceNameDescription" class="mt-2 text-sm text-gray-500">{{ t('registerDevice.deviceName.description') }}</p>
-              </div>
-              <div class="mt-5 sm:mt-6">
-                <button type="submit" :disabled="processing" class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
-                  {{ t('registerDevice.submit') }}
-                </button>
-                <div class="text-sm text-red-900 mt-2">
-                  <p v-if="onRecoverError instanceof UnwrapKeyError">{{ t('registerDevice.error.wrongSetupCode') }}</p>
-                  <p v-else-if="onRecoverError != null">{{ t('common.unexpectedError', [onRecoverError.message]) }}</p>
-                </div>
+            <div class="mt-5 sm:mt-6 text-left">      
+              <label for="setupCode" class="block text-sm font-medium text-gray-700">{{ t('registerDevice.setupCode') }}</label>
+              <input id="setupCode" v-model="setupCode" v-focus type="text" name="setupCode" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" aria-describedby="setupCodeDescription" />
+              <p id="setupCodeDescription" class="mt-2 text-sm text-gray-500">{{ t('registerDevice.setupCode.description') }}</p>
+            </div>
+            <div class="mt-5 sm:mt-6 text-left">      
+              <label for="deviceName" class="block text-sm font-medium text-gray-700">{{ t('registerDevice.deviceName') }}</label>
+              <input id="deviceName" v-model="deviceName" type="text" name="deviceName" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md disabled:bg-gray-200" aria-describedby="deviceNameDescription" />
+              <p id="deviceNameDescription" class="mt-2 text-sm text-gray-500">{{ t('registerDevice.deviceName.description') }}</p>
+            </div>
+            <div class="mt-5 sm:mt-6">
+              <button type="submit" :disabled="processing" class="inline-flex w-full justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:primary focus:ring-offset-2 sm:text-sm disabled:opacity-50 disabled:hover:bg-primary disabled:cursor-not-allowed">
+                {{ t('registerDevice.submit') }}
+              </button>
+              <div class="text-sm text-red-900 mt-2">
+                <p v-if="onRecoverError instanceof UnwrapKeyError">{{ t('registerDevice.error.wrongSetupCode') }}</p>
+                <p v-else-if="onRecoverError != null">{{ t('common.unexpectedError', [onRecoverError.message]) }}</p>
               </div>
             </div>
           </div>
-          <p class="mt-10 text-center text-sm text-gray-500">
-            {{ t('registerDevice.lostSetupCode.title') }}
-            {{ ' ' }}
-            <a role="button" tabindex="0" class="font-medium leading-6 text-red-600 hover:text-red-900" @click="showResetUserAccountDialog()">
-              {{ t('registerDevice.lostSetupCode.resetUserAccount') }}
-            </a>
-          </p>
         </div>
-      </form>
-    </div>
+      </div>
+    </form>
+
+    <i18n-t keypath="registerDevice.lostSetupCode" scope="global" tag="p" class="mt-10 text-center text-sm text-gray-500">
+      <a role="button" tabindex="0" class="font-medium leading-6 text-red-600 hover:text-red-900" @click="showResetUserAccountDialog()">
+        {{ t('registerDevice.lostSetupCode.resetUserAccount') }}
+      </a>
+    </i18n-t>
   </div>
 
   <ResetUserAccountDialog v-if="resettingUserAccount" ref="resetUserAccountDialog" @close="resettingUserAccount = false" />
@@ -152,7 +157,7 @@
 
 <script setup lang="ts">
 import { ClipboardIcon } from '@heroicons/vue/20/solid';
-import { PencilIcon } from '@heroicons/vue/24/outline';
+import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline';
 import { ComputerDesktopIcon, KeyIcon, ListBulletIcon } from '@heroicons/vue/24/solid';
 import { nextTick, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -163,6 +168,7 @@ import { debounce } from '../common/util';
 import router from '../router';
 import FetchError from './FetchError.vue';
 import ResetUserAccountDialog from './ResetUserAccountDialog.vue';
+import SimpleNavigationBar from './SimpleNavigationBar.vue';
 
 enum State {
   Preparing,
@@ -185,10 +191,12 @@ const onRecoverError = ref<Error | null >(null);
 const state = ref(State.Preparing);
 const processing = ref(false);
 
-const user = ref<UserDto>();
+const me = ref<UserDto>();
 const setupCode = ref<string>('');
 const deviceName = ref(guessBrowserName());
+const previousDeviceName = ref(deviceName.value);
 const deviceNameField = ref<HTMLSpanElement>();
+const deviceNameFieldIsActive = ref(false);
 const copiedSetupCode = ref(false);
 const debouncedCopyFinish = debounce(() => copiedSetupCode.value = false, 2000);
 const confirmSetupKey = ref(false);
@@ -197,52 +205,16 @@ const resetUserAccountDialog = ref<typeof ResetUserAccountDialog>();
 
 onMounted(fetchData);
 
-function guessBrowserName(): string {
-  var match = navigator.userAgent.toLowerCase().match(/(android|iphone|opr|edge|chrome|safari|firefox)/) || [''];
-  switch (match[0]) {
-    case 'android': return 'Android';
-    case 'iphone': return 'iPhone';
-    case 'opr': return 'Opera';
-    case 'edge': return 'Edge';
-    case 'chrome': return 'Chrome';
-    case 'safari': return 'Safari';
-    case 'firefox': return 'Firefox';
-    default: return 'Browser';
-  }
-}
-
-function editBrowserName() {
-  const span = deviceNameField.value!;
-  span.focus();
-  const range = document.createRange();
-  range.selectNodeContents(span);
-  const sel = window.getSelection() as Selection;
-  sel.removeAllRanges();
-  sel.addRange(range);
-}
-
-function changeBrowserName(e: Event) {
-  const span = e.target as HTMLElement;
-  let val = span.innerText.trim();
-  if (val == '') {
-    val = guessBrowserName(); // reset to default TODO: or previous value?
-    span.innerText = val;
-    editBrowserName(); // keep editing
-  } else {
-    deviceName.value = val;
-  }
-}
-
 async function fetchData() {
   onFetchError.value = null;
   try {
-    user.value = await backend.users.me();
-    const browserKeys = await BrowserKeys.load(user.value.id);
+    me.value = await backend.users.me();
+    const browserKeys = await BrowserKeys.load(me.value.id);
     const browserId = await browserKeys?.id();
-    if (!user.value.publicKey) {
+    if (!me.value.publicKey) {
       setupCode.value = crypto.randomUUID();
       state.value = State.CreateUserKey;
-    } else if (!browserKeys || user.value.devices.find(d => d.id == browserId) == null) {
+    } else if (!browserKeys || me.value.devices.find(d => d.id == browserId) == null) {
       state.value = State.EnterSetupCode;
     } else {
       throw new Error('Invalid state');
@@ -256,18 +228,17 @@ async function fetchData() {
 async function createUserKey() {
   onCreateError.value = null;
   try {
-    const me = user.value;
-    if (!me) {
+    if (!me.value) {
       throw new Error('Invalid state');
     }
     processing.value = true;
 
     const userKeys = await UserKeys.create();
-    me.publicKey = await userKeys.encodedPublicKey();
-    me.privateKey = await userKeys.encryptedPrivateKey(setupCode.value);
-    me.setupCode = await JWEBuilder.ecdhEs(userKeys.keyPair.publicKey).encrypt({ setupCode: setupCode.value });
-    const browserKeys = await createBrowserKeys(me.id);
-    await submitBrowserKeys(browserKeys, me, userKeys);
+    me.value.publicKey = await userKeys.encodedPublicKey();
+    me.value.privateKey = await userKeys.encryptedPrivateKey(setupCode.value);
+    me.value.setupCode = await JWEBuilder.ecdhEs(userKeys.keyPair.publicKey).encrypt({ setupCode: setupCode.value });
+    const browserKeys = await createBrowserKeys(me.value.id);
+    await submitBrowserKeys(browserKeys, me.value, userKeys);
 
     await router.push('/app/vaults');
   } catch (error) {
@@ -281,15 +252,14 @@ async function createUserKey() {
 async function recoverUserKey() {
   onRecoverError.value = null;
   try {
-    const me = user.value;
-    if (!me || !me.publicKey || !me.privateKey) {
+    if (!me.value || !me.value.publicKey || !me.value.privateKey) {
       throw new Error('Invalid state');
     }
     processing.value = true;
 
-    const userKeys = await UserKeys.recover(me.publicKey, me.privateKey, setupCode.value);
-    const browserKeys = await createBrowserKeys(me.id);
-    await submitBrowserKeys(browserKeys, me, userKeys);
+    const userKeys = await UserKeys.recover(me.value.publicKey, me.value.privateKey, setupCode.value);
+    const browserKeys = await createBrowserKeys(me.value.id);
+    await submitBrowserKeys(browserKeys, me.value, userKeys);
 
     await router.push('/app/vaults');
   } catch (error) {
@@ -319,6 +289,53 @@ async function submitBrowserKeys(browserKeys: BrowserKeys, me: UserDto, userKeys
   await backend.users.putMe(me);
 }
 
+function guessBrowserName(): string {
+  var match = navigator.userAgent.toLowerCase().match(/(android|iphone|opr|edge|chrome|safari|firefox)/) || [''];
+  switch (match[0]) {
+    case 'android': return 'Android';
+    case 'iphone': return 'iPhone';
+    case 'opr': return 'Opera';
+    case 'edge': return 'Edge';
+    case 'chrome': return 'Chrome';
+    case 'safari': return 'Safari';
+    case 'firefox': return 'Firefox';
+    default: return 'Browser';
+  }
+}
+
+function editBrowserName() {
+  deviceNameFieldIsActive.value = true;
+  previousDeviceName.value = deviceName.value;
+  const span = deviceNameField.value!;
+  span.focus();
+  const range = document.createRange();
+  range.selectNodeContents(span);
+  const sel = window.getSelection() as Selection;
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+function confirmBrowserName() {
+  deviceNameFieldIsActive.value = false;
+  const span = deviceNameField.value!;
+  let val = span.innerText.trim();
+  if (val == '') {
+    val = guessBrowserName(); // reset to default
+  }
+  span.innerText = val;
+  span.blur();
+  const sel = window.getSelection() as Selection;
+  sel.removeAllRanges();
+  deviceName.value = val;
+}
+
+function revertBrowserName() {
+  deviceNameFieldIsActive.value = false;
+  const span = deviceNameField.value!;
+  span.innerText = previousDeviceName.value;
+  span.blur();
+}
+
 async function copySetupCode() {
   await navigator.clipboard.writeText(setupCode.value);
   copiedSetupCode.value = true;
diff --git a/frontend/src/components/SimpleNavigationBar.vue b/frontend/src/components/SimpleNavigationBar.vue
new file mode 100644
index 00000000..02d151b4
--- /dev/null
+++ b/frontend/src/components/SimpleNavigationBar.vue
@@ -0,0 +1,57 @@
+<template>
+  <nav class="bg-tertiary2">
+    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+      <div class="relative flex justify-between h-16">
+        <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+          <div class="shrink-0 flex items-center">
+            <img src="/logo.svg" class="h-8" alt="Logo"/>
+            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+          </div>
+        </div>
+
+        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          <!-- Profile dropdown -->
+          <Menu as="div" class="ml-3 relative">
+            <div>
+              <MenuButton class="flex rounded-full bg-tertiary-2 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                <span class="sr-only">Open user menu</span>
+                <img class="h-8 w-8 rounded-full" :src="props.me.pictureUrl" alt="" />
+              </MenuButton>
+            </div>
+            <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class=" opacity-100 scale-100" leave-to-class=" opacity-0 scale-95">
+              <MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div class="px-3.5 py-3 truncate">
+                  <span class="block mb-0.5 text-xs text-gray-500">{{ t('nav.profile.signedInAs') }}</span>
+                  <span class="text-sm font-semibold">{{ me.name }}</span>
+                </div>
+                <div class="py-1.5">
+                  <router-link to="/app/logout">
+                    <MenuItem v-slot="{ active }">
+                      <div :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex items-center px-3.5 py-1.5 text-sm text-gray-700']">
+                        <ArrowRightOnRectangleIcon :class="[active ? 'text-gray-500' : 'text-gray-400', 'flex-none h-5 w-5 mr-3']" aria-hidden="true" />
+                        {{ t('nav.profile.signOut') }}
+                      </div>
+                    </MenuItem>
+                  </router-link>
+                </div>
+              </MenuItems>
+            </transition>
+          </Menu>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { ArrowRightOnRectangleIcon } from '@heroicons/vue/24/outline';
+import { useI18n } from 'vue-i18n';
+import { UserDto } from '../common/backend';
+
+const { t } = useI18n({ useScope: 'global' });
+
+const props = defineProps<{
+  me: UserDto
+}>();
+</script>
diff --git a/frontend/src/i18n/de-DE.json b/frontend/src/i18n/de-DE.json
index 06dd5fcf..d037019b 100644
--- a/frontend/src/i18n/de-DE.json
+++ b/frontend/src/i18n/de-DE.json
@@ -172,10 +172,9 @@
   "initialSetup.setupCode": "Account Key",
   "initialSetup.details.setupCode": "Your Account Key is required to login from other apps or browsers",
   "initialSetup.details.devicesList": "You can see a list of authorized apps on your profile page",
-  "initialSetup.details.devicesName.before": "This browser will be added to this list as:",
+  "initialSetup.details.devicesName": "This browser will be added to this list as: {deviceName}",
   "initialSetup.details.devicesName.label": "Browser Name",
-  "initialSetup.details.devicesName.after": "",
-  "initialSetup.confirmSetupKey": "I stored my Account Key safely",
+  "initialSetup.confirmSetupKey": "I stored my Account Key securely.",
   "initialSetup.submit": "Finish Setup",
 
   "registerDevice.title": "Authorization Required",
@@ -186,7 +185,7 @@
   "registerDevice.deviceName.description": "Benenne diesen Browser, um ihn in deinem Profil wiedererkennen zu können.",
   "registerDevice.submit": "Finish Setup",
   "registerDevice.error.wrongSetupCode": "Wrong Account Key",
-  "registerDevice.lostSetupCode.title": "Lost your Account Key?",
+  "registerDevice.lostSetupCode": "Lost your Account Key? {0}",
   "registerDevice.lostSetupCode.resetUserAccount": "Reset my account",
 
   "userProfile.title": "Profil",
diff --git a/frontend/src/i18n/en-US.json b/frontend/src/i18n/en-US.json
index b327476e..d1fbca88 100644
--- a/frontend/src/i18n/en-US.json
+++ b/frontend/src/i18n/en-US.json
@@ -172,10 +172,9 @@
   "initialSetup.setupCode": "Account Key",
   "initialSetup.details.setupCode": "Your Account Key is required to login from other apps or browsers",
   "initialSetup.details.devicesList": "You can see a list of authorized apps on your profile page",
-  "initialSetup.details.devicesName.before": "This browser will be added to this list as:",
+  "initialSetup.details.devicesName": "This browser will be added to this list as: {deviceName}",
   "initialSetup.details.devicesName.label": "Browser Name",
-  "initialSetup.details.devicesName.after": "",
-  "initialSetup.confirmSetupKey": "I stored my Account Key safely",
+  "initialSetup.confirmSetupKey": "I stored my Account Key securely.",
   "initialSetup.submit": "Finish Setup",
 
   "registerDevice.title": "Authorization Required",
@@ -186,7 +185,7 @@
   "registerDevice.deviceName.description": "Name this browser for easy identification in your authorized devices list.",
   "registerDevice.submit": "Finish Setup",
   "registerDevice.error.wrongSetupCode": "Wrong Account Key",
-  "registerDevice.lostSetupCode.title": "Lost your Account Key?",
+  "registerDevice.lostSetupCode": "Lost your Account Key? {0}",
   "registerDevice.lostSetupCode.resetUserAccount": "Reset my account",
 
   "userProfile.title": "Profile",