web/satellite: create access grant name step

WHAT:
name step for create access grant flow

WHY:
give access grant a name

Change-Id: Ic1819dcc6565b2ca20008459f0a33ece61930165

web/satellite/src/components/accessGrants/ProgressBar.vue

@@ -95,7 +95,7 @@ export default class ProgressBar extends Vue {
         }
 
         &__progress {
-            background: #DCDDE1;
+            background: #dcdde1;
             width: 4px;
             height: 33%;
             margin-left: 8px;

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

@@ -2,12 +2,168 @@
 // See LICENSE for copying information.
 
 <template>
-
+    <div class="name-step">
+        <h1 class="name-step__title">Name Your Access Grant</h1>
+        <p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
+        <HeaderedInput
+            class="name-step__input"
+            label="Access Grant Name"
+            placeholder="Enter a name here..."
+            @setData="onChangeName"
+            :error="errorMessage"
+        />
+        <div class="name-step__buttons-area">
+            <VButton
+                class="cancel-button"
+                label="Cancel"
+                width="50%"
+                height="48px"
+                :on-press="onCancelClick"
+                is-white="true"
+                :is-disabled="isLoading"
+            />
+            <VButton
+                label="Next"
+                width="50%"
+                height="48px"
+                :on-press="onNextClick"
+                :is-disabled="isLoading"
+            />
+        </div>
+    </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
-export default class NameStep extends Vue {}
+import HeaderedInput from '@/components/common/HeaderedInput.vue';
+import VButton from '@/components/common/VButton.vue';
+
+import { RouteConfig } from '@/router';
+import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
+import { AccessGrant } from '@/types/accessGrants';
+
+@Component({
+    components: {
+        HeaderedInput,
+        VButton,
+    },
+})
+export default class NameStep extends Vue {
+    private name: string = '';
+    private errorMessage: string = '';
+    private isLoading: boolean = false;
+    private key: string = '';
+
+    private readonly FIRST_PAGE = 1;
+
+    /**
+     * Changes name data from input value.
+     * @param value
+     */
+    public onChangeName(value: string): void {
+        this.name = value.trim();
+        this.errorMessage = '';
+    }
+
+    /**
+     * Holds on cancel button click logic.
+     */
+    public onCancelClick(): void {
+        this.onChangeName('');
+        this.$router.push(RouteConfig.AccessGrants.path);
+    }
+
+    /**
+     * Holds on next button click logic.
+     * Creates AccessGrant common entity.
+     */
+    public async onNextClick(): Promise<void> {
+        if (this.isLoading) {
+            return;
+        }
+
+        if (!this.name) {
+            this.errorMessage = 'Access Grant name can`t be empty';
+
+            return;
+        }
+
+        this.isLoading = true;
+
+        let createdAccessGrant: AccessGrant;
+        try {
+            createdAccessGrant = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, this.name);
+        } catch (error) {
+            await this.$notify.error(error.message);
+            this.isLoading = false;
+
+            return;
+        }
+
+        this.key = createdAccessGrant.secret;
+        this.name = '';
+
+        try {
+            await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
+        } catch (error) {
+            await this.$notify.error(`Unable to fetch Access Grants. ${error.message}`);
+
+            this.isLoading = false;
+        }
+
+        this.isLoading = false;
+        await this.$router.push({
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
+            params: {
+                key: this.key,
+            },
+        });
+    }
+}
 </script>
+
+<style scoped lang="scss">
+    .name-step {
+        height: calc(100% - 60px);
+        padding: 30px 65px;
+        font-family: 'font_regular', sans-serif;
+        font-style: normal;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__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 80px 0;
+        }
+
+        &__input {
+            width: calc(100% - 10px);
+        }
+
+        &__buttons-area {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            margin-top: 100px;
+        }
+    }
+
+    .cancel-button {
+        margin-right: 15px;
+    }
+</style>

web/satellite/src/router/index.ts

@@ -200,6 +200,7 @@ export const router = new Router({
                                     path: RouteConfig.PermissionsStep.path,
                                     name: RouteConfig.PermissionsStep.name,
                                     component: PermissionsStep,
+                                    props: true,
                                 },
                                 {
                                     path: RouteConfig.PassphraseStep.path,