web/satellite: satellite address field was added to continue in CLI step

WHAT:
satellite node url is now shown on continue in CLI step

WHY:
to make it usable

Change-Id: Iaf5fcbe3b9cfbebff904a16781ecd0225f3d4ba5

web/satellite/src/components/accessGrants/steps/CLIStep.html

@@ -8,6 +8,17 @@
         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">Satellite Address</p>
+        <div class="cli-container__token-area__container">
+            <p ref="addressContainer" class="cli-container__token-area__container__token" @click="selectAddress">{{ satelliteAddress }}</p>
+            <VButton
+                class="cli-container__token-area__container__button"
+                label="Copy"
+                width="66px"
+                height="30px"
+                :on-press="onCopyAddressClick"
+            />
+        </div>
         <p class="cli-container__token-area__label">Token</p>
         <div class="cli-container__token-area__container">
             <p class="cli-container__token-area__container__token">{{ restrictedKey }}</p>
@@ -16,7 +27,7 @@
                 label="Copy"
                 width="66px"
                 height="30px"
-                :on-press="onCopyClick"
+                :on-press="onCopyTokenClick"
             />
         </div>
     </div>

web/satellite/src/components/accessGrants/steps/CLIStep.scss

@@ -44,7 +44,7 @@
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
-        margin-bottom: 50px;
+        margin-bottom: 30px;
 
         &__label {
             font-family: 'font_bold', sans-serif;
@@ -61,6 +61,7 @@
             width: calc(100% - 30px);
             border: 1px solid rgba(56, 75, 101, 0.4);
             border-radius: 6px;
+            margin-bottom: 20px;
 
             &__token {
                 font-size: 16px;

web/satellite/src/components/accessGrants/steps/CLIStep.vue

@@ -11,6 +11,7 @@ import VButton from '@/components/common/VButton.vue';
 import BackIcon from '@/../static/images/accessGrants/back.svg';
 
 import { RouteConfig } from '@/router';
+import { MetaUtils } from '@/utils/meta';
 
 @Component({
     components: {
@@ -21,6 +22,11 @@ import { RouteConfig } from '@/router';
 export default class CLIStep extends Vue {
     public key: string = '';
     public restrictedKey: string = '';
+    public satelliteAddress: string = MetaUtils.getMetaContent('satellite-nodeurl');
+
+    public $refs!: {
+        addressContainer: HTMLElement;
+    };
 
     /**
      * Lifecycle hook after initial render.
@@ -80,11 +86,35 @@ export default class CLIStep extends Vue {
         });
     }
 
+    /**
+     * Holds selecting address logic for click event.
+     */
+    public selectAddress(): void {
+        const range: Range = document.createRange();
+        const selection: Selection | null = window.getSelection();
+
+        range.selectNodeContents(this.$refs.addressContainer);
+
+        if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
+
+    /**
+     * Holds on copy button click logic.
+     * Copies satellite address to clipboard.
+     */
+    public onCopyAddressClick(): void {
+        this.$copyText(this.satelliteAddress);
+        this.$notify.success('Satellite address was copied successfully');
+    }
+
     /**
      * Holds on copy button click logic.
      * Copies token to clipboard.
      */
-    public onCopyClick(): void {
+    public onCopyTokenClick(): void {
         this.$copyText(this.restrictedKey);
         this.$notify.success('Token was copied successfully');
     }