front update

client/app/pages/login.vue

@@ -1,30 +1,34 @@
 <template>
-  <div class="w-full h-full flex justify-center items-center">
-    <PrimeCard class="w-2/5">
-      <template #content>
-        <form class="flex flex-col gap-3" @submit.prevent="submit">
-          <PrimeInputText v-model="username" type="text" placeholder="Username" />
+  <PrimeCard class="w-2/5">
+    <template #content>
+      <form class="flex flex-col gap-3" @submit.prevent="submit">
+        <PrimeFloatLabel variant="on">
+          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+          <label for="username">Username</label>
+        </PrimeFloatLabel>
 
-          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
-        </form>
-      </template>
-    </PrimeCard>
-  </div>
+        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
+      </form>
+    </template>
+  </PrimeCard>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
   name: 'Login',
-  layout: 'login',
+  layout: 'auth',
 })
 
-const { username } = useGlobalState()
-const { init } = useMediasoup()
+const { username } = usePreferences()
+
+const localUsername = ref<typeof username.value>()
 
 async function submit() {
-  if (!username.value)
+  if (!localUsername.value)
     return
 
+  username.value = localUsername.value
+
   await navigateTo('/')
 }
 </script>