web/satellite/vuetify-poc: improve the share dialog

This change makes several minor improvements to the Share dialog:
- The "Copy" button has been renamed to "Copy Link".
- A copy icon button has been added to the linksharing URL text field.
- An alert has been added notifying that anyone with the link will be
  able to see the shared data.

Resolves #6381

Change-Id: Idf4c2b2963d7174173c1fa479c90a4fb6c1bf24c

web/satellite/vuetify-poc/src/components/InputCopyButton.vue

@@ -0,0 +1,57 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-tooltip v-model="isTooltip" location="start">
+        <template #activator="{ props: activatorProps }">
+            <v-btn
+                v-bind="activatorProps"
+                :icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
+                variant="text"
+                density="compact"
+                :color="justCopied ? 'success' : 'default'"
+                @click="onCopy"
+            />
+        </template>
+        {{ justCopied ? 'Copied!' : 'Copy' }}
+    </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { VTooltip, VBtn } from 'vuetify/components';
+
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+
+const props = defineProps<{
+    value: string;
+    tooltipDisabled?: boolean;
+}>();
+
+const copiedTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const justCopied = computed<boolean>(() => copiedTimeout.value !== null);
+
+const isTooltip = (() => {
+    const internal = ref<boolean>(false);
+    return computed<boolean>({
+        get: () => (internal.value || justCopied.value) && !props.tooltipDisabled,
+        set: v => internal.value = v,
+    });
+})();
+
+const analyticsStore = useAnalyticsStore();
+
+/**
+ * Saves value to clipboard.
+ */
+function onCopy(): void {
+    navigator.clipboard.writeText(props.value);
+    analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
+
+    if (copiedTimeout.value) clearTimeout(copiedTimeout.value);
+    copiedTimeout.value = setTimeout(() => {
+        copiedTimeout.value = null;
+    }, 750);
+}
+</script>

web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue

@@ -21,7 +21,7 @@
                     </v-sheet>
                 </template>
                 <v-card-title class="font-weight-bold">
-                    Share {{ !file ? 'Bucket' : file.type == 'folder' ? 'Folder' : 'File' }}
+                    Share {{ shareText }}
                 </v-card-title>
                 <template #append>
                     <v-btn
@@ -39,6 +39,12 @@
 
             <div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
                 <v-row>
+                    <v-col cols="12">
+                        <v-alert class="mt-3" density="compact" type="warning">
+                            Sharing a {{ shareText.toLowerCase() }} will create a publicly shareable URL.
+                            Anyone with this link will be able to access your shared {{ shareText.toLowerCase() }}.
+                        </v-alert>
+                    </v-col>
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-4">Share via</p>
                         <div class="ma-n2">
@@ -64,7 +70,11 @@
 
                     <v-col cols="12">
                         <p class="text-subtitle-2 font-weight-bold mb-2">Copy link</p>
-                        <v-textarea :model-value="link" variant="solo-filled" rows="1" auto-grow no-resize flat readonly />
+                        <v-textarea :model-value="link" variant="solo-filled" rows="1" auto-grow no-resize flat readonly>
+                            <template #append-inner>
+                                <input-copy-button :value="link" />
+                            </template>
+                        </v-textarea>
                     </v-col>
                 </v-row>
             </div>
@@ -87,7 +97,7 @@
                             block
                             @click="onCopy"
                         >
-                            {{ justCopied ? 'Copied' : 'Copy' }}
+                            {{ justCopied ? 'Copied' : 'Copy Link' }}
                         </v-btn>
                     </v-col>
                 </v-row>
@@ -111,6 +121,7 @@ import {
     VBtn,
     VChip,
     VTextarea,
+    VAlert,
 } from 'vuetify/components';
 
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@@ -122,6 +133,7 @@ import { BrowserObject } from '@/store/modules/objectBrowserStore';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 
 import IconShare from '@poc/components/icons/IconShare.vue';
+import InputCopyButton from '@poc/components/InputCopyButton.vue';
 
 const props = defineProps<{
     modelValue: boolean,
@@ -154,6 +166,8 @@ const justCopied = computed<boolean>(() => copiedTimeout.value !== null);
 
 const filePath = computed<string>(() => bucketsStore.state.fileComponentPath);
 
+const shareText = computed<string>(() => !props.file ? 'Bucket' : props.file.type === 'folder' ? 'Folder' : 'File');
+
 /**
  * Saves link to clipboard.
  */

web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue

@@ -36,29 +36,16 @@
         </template>
 
         <template v-if="showCopy" #append-inner>
-            <v-tooltip v-model="isTooltip" location="start">
-                <template #activator="{ props: activatorProps }">
-                    <v-btn
-                        v-bind="activatorProps"
-                        :icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
-                        variant="text"
-                        density="compact"
-                        :color="justCopied ? 'success' : 'default'"
-                        @click="onCopy"
-                    />
-                </template>
-                {{ justCopied ? 'Copied!' : 'Copy' }}
-            </v-tooltip>
+            <input-copy-button :value="value" :tooltip-disabled="tooltipDisabled" />
         </template>
     </v-textarea>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { VTextarea, VFadeTransition, VBtn, VTooltip } from 'vuetify/components';
+import { ref } from 'vue';
+import { VTextarea, VFadeTransition, VBtn } from 'vuetify/components';
 
-import { useAnalyticsStore } from '@/store/modules/analyticsStore';
-import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import InputCopyButton from '@poc/components/InputCopyButton.vue';
 
 const props = defineProps<{
     label: string;
@@ -69,32 +56,6 @@ const props = defineProps<{
 }>();
 
 const isBlurred = ref<boolean>(true);
-
-const copiedTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const justCopied = computed<boolean>(() => copiedTimeout.value !== null);
-
-const isTooltip = (() => {
-    const internal = ref<boolean>(false);
-    return computed<boolean>({
-        get: () => (internal.value || justCopied.value) && !props.tooltipDisabled,
-        set: v => internal.value = v,
-    });
-})();
-
-const analyticsStore = useAnalyticsStore();
-
-/**
- * Saves value to clipboard.
- */
-function onCopy(): void {
-    navigator.clipboard.writeText(props.value);
-    analyticsStore.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
-
-    if (copiedTimeout.value) clearTimeout(copiedTimeout.value);
-    copiedTimeout.value = setTimeout(() => {
-        copiedTimeout.value = null;
-    }, 750);
-}
 </script>
 
 <style scoped lang="scss">