Confirmation dialog ux: Logout, set password and change name

src/assets/translations/en.json

@@ -253,6 +253,7 @@
     "title": "My Profile",
     "temporary_identity": "This identity is temporary. Set a password to use it again",
     "set_password": "Set password",
+    "set_password_desc": "Convene does not store passwords and cannot recover them. We recommend storing your password in a secure location before clicking save.",
     "change_name": "Change name",
     "change_password": "Change password",
     "my_rooms": "My rooms",
@@ -323,7 +324,8 @@
     "copy_credentials": "Copy Username & Password",
     "copied_credentials": "Copied Username & Password",
     "copied_credentials_value": "Username: {userId} \nPassword: {password}",
-    "copy_credentials_desc": "Your username and password are required to regain access to your chats from a new device or browser. We recommend storing these credentials in a secure location."
+    "copy_credentials_desc": "Your username and password are required to regain access to your chats from a new device or browser. We recommend storing these credentials in a secure location.",
+    "copy_credentials_desc_for_real_user": "Your username (ex: {'@user:server'}) and your password are required to regain access to your chats from a new device or browser."
   },
   "delete_post": {
     "confirm_text": "Are you sure you want to delete this message?",

src/components/LogoutRoomDialog.vue

@@ -4,8 +4,8 @@
     @click:outside="$emit('onOutsideLogoutPopupClicked')">
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("logout.confirm_text") }}</h2>
-      <div class="dialog-text">{{ $t("logout.copy_credentials_desc") }}</div>
-      <v-row>
+      <div class="dialog-text">{{ copyCredentialsSubText }}</div>
+      <v-row v-if="this.$matrix.currentUser.is_guest">
         <v-col sm="12" md="6" offset-md="3" class="d-flex justify-center">
           <v-btn
             ref="copyCredentialsBtn"
@@ -59,7 +59,10 @@ export default {
     ]),
     credentials() {
       return this.$t(`logout.copied_credentials_value`, { userId: this.auth.user.user_id, password: this.auth.user.password})
-    }
+    },
+    copyCredentialsSubText() {
+      return this.$t(`${this.$matrix.currentUser.is_guest ? 'logout.copy_credentials_desc': 'logout.copy_credentials_desc_for_real_user'}`)
+    },
   },
   methods: {
     onCopyCredentials() {

src/components/Profile.vue

@@ -116,6 +116,7 @@
     >
       <v-card :disabled="settingPassword" class="dialog-content">
         <h2 class="dialog-title">{{ $matrix.currentUser.is_guest ? $t("profile.set_password") : $t("profile.change_password") }}</h2>
+        <div class="dialog-text mb-4">{{ $t("profile.set_password_desc") }}</div>
         <div class="dialog-text">
           <v-text-field
             v-if="!$matrix.currentUser.is_guest"
@@ -149,17 +150,19 @@
             {{ passwordErrorMessage }}
           </div>
         </div>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn id="btn-password-cancel" variant="text" @click="closeEditPasswordDialog">{{
-            $t("menu.cancel")
-          }}</v-btn>
+        <v-container fluid>
+          <v-row cols="12">
+            <v-col cols="6">
+              <v-btn variant="flat" block class="text-button" @click.stop="closeEditPasswordDialog">{{
+                $t("menu.cancel") }}</v-btn>
+            </v-col>
+            <v-col cols="6" align="center">
               <v-btn
-            id="btn-password-set"
                 :disabled="!passwordsMatch"
-            color="primary"
-            variant="text"
+                color="#4642F1"
+                variant="flat"
+                block
+                class="filled-button"
                 @click="
                   setPassword(
                     $matrix.currentUser.is_guest
@@ -167,10 +170,10 @@
                       : password,
                     newPassword1
                   )
-            "
-            >{{ $t("global.save") }}</v-btn
-          >
-        </v-card-actions>
+                ">{{ $t("global.save") }}</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
       </v-card>
     </v-dialog>
 
@@ -180,33 +183,35 @@
       class="ma-0 pa-0"
       :width="$vuetify.display.smAndUp ? '940px' : '80%'"
     >
-      <v-card>
+      <v-card class="dialog-content">
         <v-card-title>{{ $t("profile.display_name") }}</v-card-title>
-        <v-card-text>
+        <div class="dialog-text">
           <v-text-field
             v-model="editValue"
             :rules="[(v) => !!v || $t('profile.display_name_required')]"
             required
           />
-        </v-card-text>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn id="btn-displayname-cancel" variant="text" @click="showEditDisplaynameDialog = false">{{
-            $t("menu.cancel")
-          }}</v-btn>
+          <v-container fluid>
+            <v-row cols="12">
+              <v-col cols="6">
+                <v-btn variant="flat" block class="text-button" @click="showEditDisplaynameDialog = false">{{
+                  $t("menu.cancel") }}</v-btn>
+              </v-col>
+              <v-col cols="6" align="center">
                 <v-btn
-            id="btn-displayname-set"
-            color="primary"
-            variant="text"
+                  :disabled="!editValue"
+                  color="#4642F1"
+                  variant="flat"
+                  block
+                  class="filled-button"
                   @click="
                     updateDisplayName(editValue);
                     showEditDisplaynameDialog = false;
-            "
-            :disabled="!editValue"
-            >{{ $t("global.save") }}</v-btn
-          >
-        </v-card-actions>
+                  ">{{ $t("global.save") }}</v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+        </div>
       </v-card>
     </RoundedDialog>