web/satellite: EncryptForm component migrated to use composition api

Change-Id: Iae41d7bd7b44f53c43b4bf2ab552b5f746915469

web/satellite/src/components/accessGrants/modals/EncryptForm.vue

@@ -82,6 +82,7 @@
         >
             <div class="encrypt__footer-container__buttons">
                 <v-button
+                    v-clipboard:copy="passphrase"
                     :label="isPassphraseCopied ? 'Copied' : 'Copy to clipboard'"
                     height="50px"
                     :is-transparent="!isPassphraseCopied"
@@ -111,11 +112,12 @@
             </div>
             <div v-if="isPassphraseDownloaded || isPassphraseCopied" :class="`encrypt__footer-container__acknowledgement-container ${acknowledgementCheck ? 'blue-background' : ''}`">
                 <input
+                    id="acknowledgement"
                     v-model="acknowledgementCheck"
                     type="checkbox"
                     class="encrypt__footer-container__acknowledgement-container__check"
                 >
-                <div class="encrypt__footer-container__acknowledgement-container__text">I understand that Storj does not know or store my encryption passphrase. If I lose it, I won't be able to recover files.</div>
+                <label for="acknowledgement" class="encrypt__footer-container__acknowledgement-container__text">I understand that Storj does not know or store my encryption passphrase. If I lose it, I won't be able to recover files.</label>
             </div>
             <div
                 v-if="isPassphraseDownloaded || isPassphraseCopied"
@@ -142,13 +144,14 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator';
 import { generateMnemonic } from 'bip39';
+import { ref, watch } from 'vue';
 
 import { Download } from '@/utils/download';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { useNotify } from '@/utils/hooks';
 
 import VButton from '@/components/common/VButton.vue';
 
@@ -157,75 +160,64 @@ import DownloadIcon from '@/../static/images/common/download.svg';
 import AccessKeyIcon from '@/../static/images/accessGrants/accessKeyIcon.svg';
 import ThumbPrintIcon from '@/../static/images/accessGrants/thumbPrintIcon.svg';
 
-// @vue/component
+const notify = useNotify();
-@Component({
-    components: {
-        AccessKeyIcon,
-        CopyIcon,
-        DownloadIcon,
-        ThumbPrintIcon,
-        VButton,
-    },
-})
 
-export default class EncryptForm extends Vue {
+const emit = defineEmits(['apply-passphrase', 'create-access', 'close-modal', 'backAction']);
-    private encryptSelect = 'create';
-    private isPassphraseCopied = false;
-    private isPassphraseDownloaded = false;
-    private passphrase = '';
-    private acknowledgementCheck = false;
-    public currentDate = new Date().toISOString();
 
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const encryptSelect = ref<'create' | 'generate'>('create');
+const isPassphraseCopied = ref<boolean>(false);
+const isPassphraseDownloaded = ref<boolean>(false);
+const acknowledgementCheck = ref<boolean>(false);
+const passphrase = ref<string>('');
 
-    @Watch('passphrase')
+const currentDate = new Date().toISOString();
-    public applyPassphrase(): void {
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
-        this.$emit('apply-passphrase', this.passphrase);
-    }
 
-    public createAccessGrant(): void {
+function createAccessGrant(): void {
-        this.$emit('create-access');
+    emit('create-access');
-    }
+}
 
-    public onCloseClick(): void {
+function onCloseClick(): void {
-        this.$emit('close-modal');
+    emit('close-modal');
-    }
+}
 
-    public onRadioInput(): void {
+function onRadioInput(): void {
-        this.isPassphraseCopied = false;
+    isPassphraseCopied.value = false;
-        this.isPassphraseDownloaded = false;
+    isPassphraseDownloaded.value = false;
-        this.passphrase = '';
+    passphrase.value = '';
 
-        if (this.encryptSelect === 'generate') {
+    if (encryptSelect.value === 'generate') {
-            this.passphrase = generateMnemonic();
+        passphrase.value = generateMnemonic();
-        }
-    }
-
-    public backAction(): void {
-        this.$emit('backAction');
-    }
-
-    public resetSavedStatus(): void {
-        this.isPassphraseCopied = false;
-        this.isPassphraseDownloaded = false;
-    }
-
-    public onCopyPassphraseClick(): void {
-        this.$copyText(this.passphrase);
-        this.isPassphraseCopied = true;
-        this.analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
-        this.$notify.success(`Passphrase was copied successfully`);
-    }
-
-    /**
-     * Downloads passphrase to .txt file
-     */
-    public downloadPassphrase(): void {
-        this.isPassphraseDownloaded = true;
-        Download.file(this.passphrase, `passphrase-${this.currentDate}.txt`);
-        this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
     }
 }
+
+function backAction(): void {
+    emit('backAction');
+}
+
+function resetSavedStatus(): void {
+    isPassphraseCopied.value = false;
+    isPassphraseDownloaded.value = false;
+}
+
+function onCopyPassphraseClick(): void {
+    isPassphraseCopied.value = true;
+    analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
+    notify.success(`Passphrase was copied successfully`);
+}
+
+/**
+ * Downloads passphrase to .txt file
+ */
+function downloadPassphrase(): void {
+    isPassphraseDownloaded.value = true;
+    Download.file(passphrase.value, `passphrase-${currentDate}.txt`);
+    analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
+}
+
+watch(passphrase, (newPassphrase) => {
+    emit('apply-passphrase', newPassphrase);
+});
 </script>
 
 <style scoped lang="scss">