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 <shivam_r...@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: "t...@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> +