Logout confirmation: copy username & password

src/assets/icons/ic_copy.vue

@@ -1,8 +1,7 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor"  fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5 2H9.73333C11.2268 2 11.9735 2 12.544 2.29065C13.0457 2.54631 13.4537 2.95426 13.7094 3.45603C14 4.02646 14 4.77319 14 6.26667V11M4.13333 14H9.53333C10.2801 14 10.6534 14 10.9387 13.8547C11.1895 13.7268 11.3935 13.5229 11.5213 13.272C11.6667 12.9868 11.6667 12.6134 11.6667 11.8667V6.46667C11.6667 5.71993 11.6667 5.34656 11.5213 5.06135C11.3935 4.81046 11.1895 4.60649 10.9387 4.47866C10.6534 4.33333 10.2801 4.33333 9.53333 4.33333H4.13333C3.3866 4.33333 3.01323 4.33333 2.72801 4.47866C2.47713 4.60649 2.27316 4.81046 2.14532 5.06135C2 5.34656 2 5.71993 2 6.46667V11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14Z"
-      stroke="white"
       stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"

src/assets/translations/en.json

@@ -319,7 +319,11 @@
     "leave": "Leave"
   },
   "logout": {
-    "confirm_text": "Are you sure you want to logout ?"
+    "confirm_text": "Are you sure you want to logout ?",
+    "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."
   },
   "purge_room": {
     "title": "Delete room?",

src/components/LogoutRoomDialog.vue

@@ -4,6 +4,22 @@
     @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>
+        <v-col sm="12" md="6" offset-md="3" class="d-flex justify-center">
+          <v-btn
+            ref="copyCredentialsBtn"
+            :color="credentialsCopied ? '#DEE6FF' : 'grey-lighten-4'"
+            class="text-none mb-2	mt-2 pa-5 d-flex justify-space-between"
+            append-icon="$vuetify.icons.ic_copy"
+            @click.stop="onCopyCredentials">
+            {{ $t(`logout.${credentialsCopied?'copied':'copy'}_credentials`)}}
+            <template v-slot:append>
+              <v-icon color="black"></v-icon>
+            </template>
+          </v-btn>
+        </v-col>
+      </v-row>
       <v-container fluid>
         <v-row cols="12">
           <v-col cols="6">
@@ -21,6 +37,7 @@
 </template>
 <script>
 import profileInfoMixin from "./profileInfoMixin";
+import { mapState } from 'vuex'
 
 export default {
   name: "LogoutRoomDialog",
@@ -31,5 +48,35 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      credentialsCopied: false
+    }
+  },
+  computed: {
+    ...mapState([
+      'auth'
+    ]),
+    credentials() {
+      return this.$t(`logout.copied_credentials_value`, { userId: this.auth.user.user_id, password: this.auth.user.password})
+    }
+  },
+  methods: {
+    onCopyCredentials() {
+      if(this.credentialsCopied) return
+      const self = this;
+      this.$copyText(this.credentials, this.$refs.copyCredentialsBtn.$el).then(
+        function (ignored) {
+          self.credentialsCopied = true;
+          setInterval(() => {
+            self.credentialsCopied = false;
+          }, 3000);
+        },
+        function (e) {
+          console.log(e);
+        }
+      )
+    }
+  }
 };
 </script>

src/components/Profile.vue

@@ -213,7 +213,7 @@
     <SelectLanguageDialog
       v-model="showSelectLanguageDialog"
     />
-    
+
     <!-- Dialog for request Notification -->
     <v-dialog
       v-model="notificationDialog"

src/components/content-credentials/C2PAInfo.vue

@@ -16,7 +16,7 @@
     <i18n-t keypath="cc.cc_info" tag="span">
       <template v-slot:link>
         <a href="https://contentcredentials.org/verify" target="_blank">{{ $t("cc.cc_info_link") }}</a>
-        <v-icon>$vuetify.icons.ic_copy</v-icon>
+        <v-icon color="white">$vuetify.icons.ic_copy</v-icon>
       </template>
     </i18n-t>
   </div>