JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: create access grant: continue in CLI step

Browse Source 
WHAT:
continue in CLI step which returns regular API key

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

Change-Id: I8a0fa15f07e553628bda3a3e871506295230f0a2
This commit is contained in:
VitaliiShpital 2020-11-17 18:01:05 +02:00 committed by Vitalii Shpital
parent 6f35ee98e6
commit 1c13065b0b
7 changed files with 214 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/satellite/src/components/accessGrants/CreateAccessGrant.vue
View File

@ -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>

1
web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue
View File

@ -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;

33
web/satellite/src/components/accessGrants/steps/CLIStep.html Normal file
View File

@ -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>

89
web/satellite/src/components/accessGrants/steps/CLIStep.scss Normal file
View File

@ -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;
}
}

68
web/satellite/src/components/accessGrants/steps/CLIStep.vue Normal file
View File

@ -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>

11
web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
View File

@ -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;

7
web/satellite/src/router/index.ts
View File

@ -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,