куча говна

client/app/pages/preferences.vue

@@ -4,12 +4,16 @@
 
     <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
       <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
         <label for="username">Username</label>
       </PrimeFloatLabel>
 
-      <PrimeButton label="Save" type="submit" :disabled="!localUsername || localUsername === username" />
+      <PrimeButton label="Save" type="submit" :disabled="!valid" />
     </form>
+
+    <div class="p-3">
+      <PrimeButton label="Logout" fluid severity="danger" @click="logout" />
+    </div>
   </div>
 </template>
 
@@ -18,22 +22,33 @@ definePageMeta({
   name: 'Preferences',
 })
 
+const { me, setMe, logout } = useAuth()
+
 const signaling = useSignaling()
-const { username } = usePreferences()
 const toast = useToast()
 
-const localUsername = ref(username.value)
+const displayName = ref(me.value?.displayName || '')
+
+const valid = computed(() => {
+  if (!displayName.value || !me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
 
 async function save() {
-  if (!localUsername.value || localUsername.value === username.value)
+  if (!valid.value)
     return
 
-  username.value = localUsername.value
-
-  await signaling.socket.value?.emitWithAck('updateClient', {
-    username: username.value,
+  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+    displayName: displayName.value,
   })
 
+  setMe({ ...me.value, displayName: updatedMe.displayName })
+
   toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
 }
 </script>