From 1c13065b0bcd2e7ef47c53b8e1257788dfa9f070 Mon Sep 17 00:00:00 2001
From: VitaliiShpital <takur12345@gmail.com>
Date: Tue, 17 Nov 2020 18:01:05 +0200
Subject: [PATCH] web/satellite: create access grant: continue in CLI step

WHAT:
continue in CLI step which returns regular API key

WHY:
in case user wants to create access grants in CLI

Change-Id: I8a0fa15f07e553628bda3a3e871506295230f0a2
---
 .../accessGrants/CreateAccessGrant.vue        |  9 +-
 .../permissions/BucketNameBullet.vue          |  1 +
 .../accessGrants/steps/CLIStep.html           | 33 +++++++
 .../accessGrants/steps/CLIStep.scss           | 89 +++++++++++++++++++
 .../components/accessGrants/steps/CLIStep.vue | 68 ++++++++++++++
 .../accessGrants/steps/PermissionsStep.vue    | 11 ++-
 web/satellite/src/router/index.ts             |  7 ++
 7 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 web/satellite/src/components/accessGrants/steps/CLIStep.html
 create mode 100644 web/satellite/src/components/accessGrants/steps/CLIStep.scss
 create mode 100644 web/satellite/src/components/accessGrants/steps/CLIStep.vue

diff --git a/web/satellite/src/components/accessGrants/CreateAccessGrant.vue b/web/satellite/src/components/accessGrants/CreateAccessGrant.vue
index 7d5bef202..b22d99924 100644
--- a/web/satellite/src/components/accessGrants/CreateAccessGrant.vue
+++ b/web/satellite/src/components/accessGrants/CreateAccessGrant.vue
@@ -4,7 +4,7 @@
 <template>
     <div class="create-grant">
         <div class="create-grant__container">
-            <ProgressBar/>
+            <ProgressBar v-if="!isProgressBarHidden"/>
             <router-view/>
             <div class="create-grant__container__close-cross-container" @click="onCloseClick">
                 <CloseCrossIcon />
@@ -35,6 +35,13 @@ export default class CreateAccessGrant extends Vue {
     public onCloseClick(): void {
         this.$router.push(RouteConfig.AccessGrants.path);
     }
+
+    /**
+     * Indicates if progress bar is hidden.
+     */
+    public get isProgressBarHidden(): boolean {
+        return this.$route.name === RouteConfig.CLIStep.name || this.$route.name === RouteConfig.UploadStep.name;
+    }
 }
 </script>
 
diff --git a/web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue b/web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue
index d68a937dd..c17937909 100644
--- a/web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue
+++ b/web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue
@@ -50,6 +50,7 @@ export default class BucketNameBullet extends Vue {
             line-height: 12px;
             white-space: nowrap;
             text-overflow: ellipsis;
+            overflow: hidden;
             max-width: 190px;
             letter-spacing: 0.05em;
             color: #1b2533;
diff --git a/web/satellite/src/components/accessGrants/steps/CLIStep.html b/web/satellite/src/components/accessGrants/steps/CLIStep.html
new file mode 100644
index 000000000..229fc03b6
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/steps/CLIStep.html
@@ -0,0 +1,33 @@
+<!--Copyright (C) 2020 Storj Labs, Inc.-->
+<!--See LICENSE for copying information.-->
+
+<div class="cli-container">
+    <BackIcon class="cli-container__back-icon" @click="onBackClick"/>
+    <h1 class="cli-container__title">Create Access Grant in CLI</h1>
+    <p class="cli-container__sub-title">
+        Use this token to create your access grant in the CLI tool.
+    </p>
+    <div class="cli-container__token-area">
+        <p class="cli-container__token-area__label">Token</p>
+        <div class="cli-container__token-area__container">
+            <p class="cli-container__token-area__container__token">{{ key }}</p>
+            <VButton
+                class="cli-container__token-area__container__button"
+                label="Copy"
+                width="66px"
+                height="30px"
+                :on-press="onCopyClick"
+            />
+        </div>
+    </div>
+    <VButton
+        class="cli-container__done-button"
+        label="Done"
+        width="100%"
+        height="48px"
+        :on-press="onDoneClick"
+    />
+    <a class="cli-container__docs-link" href="https://documentation.storj.io/" target="_blank" rel="noopener noreferrer">
+        Visit the Docs
+    </a>
+</div>
\ No newline at end of file
diff --git a/web/satellite/src/components/accessGrants/steps/CLIStep.scss b/web/satellite/src/components/accessGrants/steps/CLIStep.scss
new file mode 100644
index 000000000..04566d4b7
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/steps/CLIStep.scss
@@ -0,0 +1,89 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+.cli-container {
+    height: calc(100% - 60px);
+    max-width: 485px;
+    padding: 30px 65px;
+    font-family: 'font_regular', sans-serif;
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    &__back-icon {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        cursor: pointer;
+    }
+
+    &__title {
+        font-family: 'font_bold', sans-serif;
+        font-weight: bold;
+        font-size: 22px;
+        line-height: 27px;
+        color: #000;
+        margin: 0 0 10px 0;
+    }
+
+    &__sub-title {
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 21px;
+        color: #000;
+        text-align: center;
+        margin: 0 0 50px 0;
+    }
+
+    &__token-area {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        margin-bottom: 50px;
+
+        &__label {
+            font-family: 'font_bold', sans-serif;
+            font-size: 16px;
+            line-height: 21px;
+            color: #354049;
+            margin: 0 0 5px 0;
+        }
+
+        &__container {
+            display: flex;
+            align-items: center;
+            padding: 10px 10px 10px 20px;
+            width: calc(100% - 30px);
+            border: 1px solid rgba(56, 75, 101, 0.4);
+            border-radius: 6px;
+
+            &__token {
+                font-size: 16px;
+                line-height: 21px;
+                color: #384b65;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                margin: 0;
+            }
+
+            &__button {
+                min-width: 66px;
+                min-height: 30px;
+                margin-left: 10px;
+            }
+        }
+    }
+
+    &__docs-link {
+        font-family: 'font_medium', sans-serif;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 23px;
+        color: #0068dc;
+        margin: 16px 0;
+    }
+}
diff --git a/web/satellite/src/components/accessGrants/steps/CLIStep.vue b/web/satellite/src/components/accessGrants/steps/CLIStep.vue
new file mode 100644
index 000000000..a6aeb0297
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/steps/CLIStep.vue
@@ -0,0 +1,68 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template src="./CLIStep.html"></template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import VButton from '@/components/common/VButton.vue';
+
+import BackIcon from '@/../static/images/accessGrants/back.svg';
+
+import { RouteConfig } from '@/router';
+
+@Component({
+    components: {
+        BackIcon,
+        VButton,
+    },
+})
+export default class CLIStep extends Vue {
+    public key: string = '';
+
+    /**
+     * Lifecycle hook after initial render.
+     * Sets local key from props value.
+     */
+    public mounted(): void {
+        if (!this.$route.params.key) {
+            this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
+        }
+
+        this.key = this.$route.params.key;
+    }
+
+    /**
+     * Holds on back button click logic.
+     * Redirects to previous step.
+     */
+    public onBackClick(): void {
+        this.$router.push({
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
+            params: {
+                key: this.key,
+            },
+        });
+    }
+
+    /**
+     * Holds on done button click logic.
+     * Redirects to upload step.
+     */
+    public onDoneClick(): void {
+        this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.UploadStep)).path);
+    }
+
+    /**
+     * Holds on copy button click logic.
+     * Copies token to clipboard.
+     */
+    public onCopyClick(): void {
+        this.$copyText(this.key);
+        this.$notify.success('Token was copied successfully');
+    }
+}
+</script>
+
+<style scoped lang="scss" src="./CLIStep.scss"></style>
\ No newline at end of file
diff --git a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
index 70cda34a3..adb6392a1 100644
--- a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
@@ -65,6 +65,7 @@ import VButton from '@/components/common/VButton.vue';
 
 import BackIcon from '@/../static/images/accessGrants/back.svg';
 
+import { RouteConfig } from '@/router';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 
 @Component({
@@ -118,7 +119,6 @@ export default class PermissionsStep extends Vue {
         } catch (error) {
             await this.$notify.error(`Unable to fetch all bucket names. ${error.message}`);
         }
-
     }
 
     /**
@@ -135,8 +135,12 @@ export default class PermissionsStep extends Vue {
      * Holds on continue in CLI button click logic.
      */
     public onContinueInCLIClick(): void {
-        // mock
-        return;
+        this.$router.push({
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.CLIStep)).name,
+            params: {
+                key: this.key,
+            },
+        });
     }
 
     /**
@@ -257,6 +261,7 @@ export default class PermissionsStep extends Vue {
         }
 
         &__cli-link {
+            font-family: 'font_medium', sans-serif;
             cursor: pointer;
             font-weight: 600;
             font-size: 16px;
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 4a8cf74bd..41ab41320 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -6,6 +6,7 @@ import Router, { RouteRecord } from 'vue-router';
 
 import AccessGrants from '@/components/accessGrants/AccessGrants.vue';
 import CreateAccessGrant from '@/components/accessGrants/CreateAccessGrant.vue';
+import CLIStep from '@/components/accessGrants/steps/CLIStep.vue';
 import NameStep from '@/components/accessGrants/steps/NameStep.vue';
 import PassphraseStep from '@/components/accessGrants/steps/PassphraseStep.vue';
 import PermissionsStep from '@/components/accessGrants/steps/PermissionsStep.vue';
@@ -62,6 +63,7 @@ export abstract class RouteConfig {
     public static PermissionsStep = new NavigationLink('permissions', 'Access Grant Permissions');
     public static PassphraseStep = new NavigationLink('passphrase', 'Access Grant Passphrase');
     public static ResultStep = new NavigationLink('result', 'Access Grant Result');
+    public static CLIStep = new NavigationLink('cli', 'Access Grant In CLI');
     public static UploadStep = new NavigationLink('upload', 'Access Grant Upload Data');
 
     // TODO: disabled until implementation
@@ -212,6 +214,11 @@ export const router = new Router({
                                     name: RouteConfig.ResultStep.name,
                                     component: ResultStep,
                                 },
+                                {
+                                    path: RouteConfig.CLIStep.path,
+                                    name: RouteConfig.CLIStep.name,
+                                    component: CLIStep,
+                                },
                                 {
                                     path: RouteConfig.UploadStep.path,
                                     name: RouteConfig.UploadStep.name,