web/satellite: CLI access step for new access grant flow

Added CLI access created step for new access grant flow. We show satellite address and restricted key there. They can be copied to clipboard or downloaded. Change-Id: Ic1942abfa575017fbb57abb9f09e8de66039bb8d
2023-02-17 14:30:20 +02:00 · 2023-02-17 14:30:20 +02:00 · bd0ad21c24
commit bd0ad21c24
parent 1f439f5ae9
5 changed files with 232 additions and 86 deletions
--- a/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
@ -84,6 +84,11 @@
                    :name="accessName"
                    :access-types="selectedAccessTypes"
                />
+                <CLIAccessCreatedStep
+                    v-if="step === CreateAccessStep.CLIAccessCreated"
+                    :api-key="cliAccess"
+                    :name="accessName"
+                />
                <div v-if="isLoading" class="modal__blur" />
            </div>
        </template>
@ -121,6 +126,7 @@ import EnterPassphraseStep from '@/components/accessGrants/newCreateFlow/steps/E
 import PassphraseGeneratedStep from '@/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue';
 import EncryptionInfoStep from '@/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue';
 import AccessCreatedStep from '@/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue';
+import CLIAccessCreatedStep from '@/components/accessGrants/newCreateFlow/steps/CLIAccessCreatedStep.vue';

 const router = useRouter();
 const route = useRoute();
--- a/web/satellite/src/components/accessGrants/newCreateFlow/components/LinkButton.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/components/LinkButton.vue
@ -0,0 +1,61 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <a
+        class="link-button"
+        :href="link"
+        target="_blank"
+        rel="noopener noreferrer"
+    >
+        <LearnIcon v-if="withIcon" />
+        <p class="link-button__label">{{ label }}</p>
+    </a>
+</template>
+
+<script setup lang="ts">
+import LearnIcon from '@/../static/images/accessGrants/newCreateFlow/learn.svg';
+
+const props = withDefaults(defineProps<{
+    label: string;
+    link: string;
+    withIcon?: boolean;
+}>(), {
+    withIcon: false,
+});
+</script>
+
+<style scoped lang="scss">
+.link-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 48px;
+    background: #fff;
+    border: 1px solid #d8dee3;
+    border-radius: 8px;
+
+    &__label {
+        font-family: 'font_medium', sans-serif;
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+        color: #56606d;
+        margin-left: 8px;
+    }
+
+    &:hover {
+        border-color: #2683ff;
+        background-color: #2683ff;
+
+        p {
+            color: #fff;
+        }
+
+        :deep(svg path) {
+            fill: #fff;
+        }
+    }
+}
+</style>
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue
@ -43,16 +43,10 @@
        </div>
        <ButtonsContainer>
            <template #leftButton>
-                <a
-                    class="access-created__button-link"
-                    href="https://docs.storj.io/dcs/concepts/access/access-grants"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <p class="access-created__button-link__label">
-                        Learn More
-                    </p>
-                </a>
+                <LinkButton
+                    label="Learn More"
+                    link="https://docs.storj.io/dcs/concepts/access/access-grants"
+                />
            </template>
            <template #rightButton>
                <VButton
@ -80,6 +74,7 @@ import { RouteConfig } from '@/router';
 import VButton from '@/components/common/VButton.vue';
 import ButtonsContainer from '@/components/accessGrants/newCreateFlow/components/ButtonsContainer.vue';
 import ValueWithBlur from '@/components/accessGrants/newCreateFlow/components/ValueWithBlur.vue';
+import LinkButton from '@/components/accessGrants/newCreateFlow/components/LinkButton.vue';

 const props = defineProps<{
    accessTypes: AccessType[];
@ -149,35 +144,6 @@ function onNextButtonClick(): void {
        text-align: left;
    }

-    &__button-link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 48px;
-        background: #fff;
-        border: 1px solid #d8dee3;
-        border-radius: 8px;
-
-        &__label {
-            font-family: 'font_medium', sans-serif;
-            font-size: 14px;
-            line-height: 24px;
-            letter-spacing: -0.02em;
-            color: #56606d;
-            margin-left: 8px;
-        }
-
-        &:hover {
-            border-color: #2683ff;
-            background-color: #2683ff;
-
-            p {
-                color: #fff;
-            }
-        }
-    }
-
    &__blurred {
        margin-top: 16px;
        padding: 16px 0;
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/CLIAccessCreatedStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/CLIAccessCreatedStep.vue
@ -0,0 +1,154 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="cli-access">
+        <p class="cli-access__info">
+            Now copy and save the Satellite Address and API Key as they will only appear once.
+        </p>
+        <ButtonsContainer label="Save your CLI access">
+            <template #leftButton>
+                <VButton
+                    v-clipboard:copy="`${satelliteAddress} ${apiKey}`"
+                    :label="isCopied ? 'Copied' : 'Copy all'"
+                    width="100%"
+                    height="40px"
+                    font-size="14px"
+                    :on-press="onCopy"
+                    :icon="isCopied ? 'none' : 'copy'"
+                    :is-white="!isCopied"
+                    :is-white-green="isCopied"
+                />
+            </template>
+            <template #rightButton>
+                <VButton
+                    :label="isDownloaded ? 'Downloaded' : 'Download all'"
+                    width="100%"
+                    height="40px"
+                    font-size="14px"
+                    :on-press="onDownload"
+                    :icon="isDownloaded ? 'none' : 'download'"
+                    :is-white="!isDownloaded"
+                    :is-green-white="isDownloaded"
+                />
+            </template>
+        </ButtonsContainer>
+        <div class="cli-access__blurred">
+            <ValueWithBlur
+                class="cli-access__blurred__address"
+                button-label="Show Address"
+                :is-mnemonic="false"
+                :value="satelliteAddress"
+                title="Satellite Address"
+            />
+            <ValueWithBlur
+                button-label="Show API Key"
+                :is-mnemonic="false"
+                :value="apiKey"
+                title="API Key"
+            />
+        </div>
+        <ButtonsContainer>
+            <template #leftButton>
+                <LinkButton
+                    label="Learn More"
+                    link="https://docs.storj.io/dcs/concepts/access/access-grants/api-key"
+                />
+            </template>
+            <template #rightButton>
+                <VButton
+                    label="Finish"
+                    width="100%"
+                    height="48px"
+                    font-size="14px"
+                    :on-press="onFinishButtonClick"
+                />
+            </template>
+        </ButtonsContainer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useNotify, useRouter, useStore } from '@/utils/hooks';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { Download } from '@/utils/download';
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { RouteConfig } from '@/router';
+import { MetaUtils } from '@/utils/meta';
+
+import VButton from '@/components/common/VButton.vue';
+import ButtonsContainer from '@/components/accessGrants/newCreateFlow/components/ButtonsContainer.vue';
+import ValueWithBlur from '@/components/accessGrants/newCreateFlow/components/ValueWithBlur.vue';
+import LinkButton from '@/components/accessGrants/newCreateFlow/components/LinkButton.vue';
+
+const props = defineProps<{
+    name: string;
+    apiKey: string;
+}>();
+
+const store = useStore();
+const notify = useNotify();
+const router = useRouter();
+
+const isCopied = ref<boolean>(false);
+const isDownloaded = ref<boolean>(false);
+
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+const satelliteAddress = MetaUtils.getMetaContent('satellite-nodeurl');
+
+/**
+ * Saves CLI access to clipboard.
+ */
+function onCopy(): void {
+    isCopied.value = true;
+    analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
+    notify.success(`CLI access was copied successfully`);
+}
+
+/**
+ * Downloads CLI access into .txt file.
+ */
+function onDownload(): void {
+    isDownloaded.value = true;
+
+    const fileContent = `Satellite address:\n${satelliteAddress}\n\nAPI Key:\n${props.apiKey}`;
+    Download.file(fileContent, `Storj-CLI-access-${props.name}-${new Date().toISOString()}.txt`);
+    analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
+}
+
+/**
+ * Holds on Finish button click logic.
+ */
+function onFinishButtonClick(): void {
+    router.push(RouteConfig.AccessGrants.path);
+}
+</script>
+
+<style lang="scss" scoped>
+.cli-access {
+    font-family: 'font_regular', sans-serif;
+
+    &__info {
+        font-size: 14px;
+        line-height: 20px;
+        color: #091c45;
+        padding: 16px 0;
+        margin-bottom: 16px;
+        border-bottom: 1px solid #ebeef1;
+        text-align: left;
+    }
+
+    &__blurred {
+        margin-top: 16px;
+        padding: 16px 0;
+        border-top: 1px solid #ebeef1;
+        border-bottom: 1px solid #ebeef1;
+
+        &__address {
+            margin-bottom: 16px;
+        }
+    }
+}
+</style>
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/CreateNewAccessStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/CreateNewAccessStep.vue
@ -72,17 +72,11 @@
        </ContainerWithIcon>
        <ButtonsContainer>
            <template #leftButton>
-                <a
-                    class="create__button-link"
-                    href="https://docs.storj.io/dcs/concepts/access/access-grants/api-key"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <LearnIcon />
-                    <p class="create__button-link__label">
-                        Learn more
-                    </p>
-                </a>
+                <LinkButton
+                    label="Learn more"
+                    link="https://docs.storj.io/dcs/concepts/access/access-grants/api-key"
+                    :with-icon="true"
+                />
            </template>
            <template #rightButton>
                <VButton
@ -105,12 +99,11 @@ import { AccessType, FUNCTIONAL_CONTAINER_ICON_AND_TITLE, FunctionalContainer }

 import ContainerWithIcon from '@/components/accessGrants/newCreateFlow/components/ContainerWithIcon.vue';
 import ButtonsContainer from '@/components/accessGrants/newCreateFlow/components/ButtonsContainer.vue';
+import LinkButton from '@/components/accessGrants/newCreateFlow/components/LinkButton.vue';
 import Toggle from '@/components/accessGrants/newCreateFlow/components/Toggle.vue';
 import VInput from '@/components/common/VInput.vue';
 import VButton from '@/components/common/VButton.vue';

-import LearnIcon from '@/../static/images/accessGrants/newCreateFlow/learn.svg';
-
 const props = defineProps<{
    name: string;
    setName: (value: string) => void;
@ -154,40 +147,6 @@ const isButtonDisabled = computed((): boolean => {
    &__input {
        margin-top: 0;
    }
-
-    &__button-link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 48px;
-        background: var(--c-white);
-        border: 1px solid var(--c-grey-3);
-        box-shadow: 0 0 3px rgb(0 0 0 / 8%);
-        border-radius: 8px;
-
-        &__label {
-            font-family: 'font_medium', sans-serif;
-            font-size: 14px;
-            line-height: 24px;
-            letter-spacing: -0.02em;
-            color: var(--c-grey-6);
-            margin-left: 8px;
-        }
-
-        &:hover {
-            border-color: var(--c-light-blue-6);
-            background-color: var(--c-light-blue-6);
-
-            p {
-                color: var(--c-white);
-            }
-
-            :deep(svg path) {
-                fill: var(--c-white);
-            }
-        }
-    }
 }

 :deep(.label-container) {