From 1998bf2b64ff484c4b6927b15443c4eca9087725 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 19 Jul 2024 10:50:34 +0200
Subject: [PATCH] Select whole name on focus when choosing identity

---
 src/components/CreateRoom.vue | 26 +++++++++++++++++++++++---
 src/components/Join.vue       | 10 ++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 7835d2d..662a00b 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -105,6 +105,9 @@
 
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
       accept="image/*" class="d-none" />
+
+    <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar" @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
+
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
       <v-card>
         <v-container v-if="canEditProfile" class="pa-10">
@@ -112,9 +115,11 @@
             <v-col class="py-0">
               <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
               <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
-                :value="availableAvatars[0]" single-line autofocus>
+                :value="selectedProfile">
                 <template v-slot:selection>
-                  <v-text-field background-color="transparent" solo flat hide-details @click.native.stop="{}"
+                  <v-text-field background-color="transparent" solo flat hide-details   
+                    @click.native.stop="(event) => event.target.focus()"                 
+                    @focus="$event.target.select()"
                     v-model="selectedProfile.name"></v-text-field>
                 </template>
                 <template v-slot:item="data">
@@ -126,7 +131,7 @@
               </v-select>
             </v-col>
             <v-col cols="2" class="py-0">
-              <v-avatar @click="showAvatarPickerList">
+              <v-avatar @click="showUserAvatarPicker">
                 <v-img v-if="selectedProfile" :src="selectedProfile.image" />
               </v-avatar>
             </v-col>
@@ -586,6 +591,21 @@ export default {
     showAvatarPickerList() {
       this.$refs.avatar.$refs.input.click();
     },
+
+    /**
+     * Show picker to select user avatar file
+     */
+     showUserAvatarPicker() {
+      if (this.step == steps.INITIAL) {
+        this.$refs.useravatar.click();
+      }
+    },
+
+    handlePickedUserAvatar(event) {
+      util.loadAvatarFromFile(event, (image) => {
+        this.selectedProfile.image = image;
+      });
+    },
   }
 };
 </script>
diff --git a/src/components/Join.vue b/src/components/Join.vue
index 3ca310d..938952b 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -18,7 +18,7 @@
         </div>
 
         <hr class="my-10 join-line" />
-        <div class="font-weight-black mb-4" v-if="!currentUser">Choose a name to use.</div>
+        <div class="font-weight-black mb-4" v-if="!currentUser">{{ $t("join.choose_name") }}</div>
 
         <v-row v-if="canEditProfile">
           <v-col cols="10" sm="7" class="py-0">
@@ -29,7 +29,7 @@
               outlined
               dense
               @change="selectAvatar"
-              :value="availableAvatars[0]"
+              :value="selectedProfile"
               single-line
               autofocus
             >
@@ -39,10 +39,8 @@
                   solo
                   flat
                   hide-details
-                  @click.native.stop="
-                    {
-                    }
-                  "
+                  @click.native.stop="(event) => event.target.focus()"                 
+                  @focus="$event.target.select()"
                   v-model="selectedProfile.name"
                 ></v-text-field>
               </template>