Logout confirmation: copy username & password

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>