You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by sm...@apache.org on 2020/05/01 03:07:28 UTC
[airavata-custos-portal] 17/20: Add copy buttosn for custos creds
This is an automated email from the ASF dual-hosted git repository.
smarru pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-custos-portal.git
commit 498db80db74a92ee4bca8d6591c2bc064b5b1bbe
Author: Shivam Rastogi <sh...@yahoo.com>
AuthorDate: Sat Apr 18 11:49:15 2020 -0400
Add copy buttosn for custos creds
---
.../apps/workspace/ViewTenantRequestContainer.vue | 26 ++++++++++-
.../common/js/components/ClipboardCopyButton.vue | 53 ++++++++++++++++++++++
2 files changed, 77 insertions(+), 2 deletions(-)
diff --git a/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue b/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
index b4e89b2..68f30d5 100644
--- a/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
+++ b/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
@@ -11,6 +11,7 @@
<div class="card-body">
<table class="table">
<tbody>
+
<tr>
<th scope="row">Request Id</th>
<td>
@@ -63,8 +64,22 @@
<th scope="row">Comment</th>
<td>{{request.comment}}</td>
</tr>
-
-
+ <tr>
+ <th scope="row">Custos Key</th>
+ <td>{{custosKey}}</td>
+ <td>
+ <clipboard-copy-button variant="secondary" :text="custosKey">
+ </clipboard-copy-button>
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">Custos Secret</th>
+ <td>{{custosSecret}}</td>
+ <td>
+ <clipboard-copy-button variant="secondary" :text="custosSecret">
+ </clipboard-copy-button>
+ </td>
+ </tr>
</tbody>
</table>
</div>
@@ -75,14 +90,21 @@
</template>
<script>
+ import ClipboardCopyButton from "../../components/ClipboardCopyButton";
+
export default {
props: {
tenantRequestId: {
required: true
}
},
+ components: {
+ "clipboard-copy-button": ClipboardCopyButton
+ },
data() {
return {
+ custosKey: "342342345kjfgoudsfrtg",
+ custosSecret: "837459823jsdnfjhfd8gf",
request: {
client_name: "Test Client",
requester_email: "tmp@gmail.com",
diff --git a/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue b/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue
new file mode 100644
index 0000000..2022503
--- /dev/null
+++ b/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue
@@ -0,0 +1,53 @@
+<template>
+ <b-button ref="copyButton" :variant="variant" :disabled="disabled" :data-clipboard-text="text">
+ <slot></slot>
+ <slot name="icon">
+ <i class="far fa-clipboard"></i>
+ </slot>
+ <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyButton">
+ <slot name="tooltip">Copied!</slot>
+ </b-tooltip>
+ </b-button>
+</template>
+
+<script>
+import ClipboardJS from "clipboard";
+
+export default {
+ name: "clipboard-copy-button",
+ props: {
+ text: {
+ type: String,
+ },
+ variant: {
+ type: String,
+ default: "secondary"
+ },
+ },
+ data() {
+ return {
+ show: false
+ };
+ },
+ computed: {
+ disabled() {
+ return !this.text;
+ }
+ },
+ mounted() {
+ let clipboard = new ClipboardJS(this.$refs.copyButton);
+ clipboard.on("success", this.onCopySuccess);
+ },
+ beforeDestroy() {
+ let clipboard = new ClipboardJS(this.$refs.copyButton);
+ clipboard.destroy();
+ },
+ methods: {
+ onCopySuccess() {
+ this.show = true;
+ setTimeout(() => (this.show = false), 2000);
+ }
+ }
+};
+</script>
+