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

web/satellite: update onboarding flow: create access grant

Browse Source 
WHAT:
create access grant flow for onboarding tour

WHY:
new onboarding tour

Change-Id: I75e84b00edb71cac07f8e6623ce06655ae771894
This commit is contained in:
VitaliiShpital 2020-12-07 00:19:38 +02:00 committed by Vitalii Shpital
parent 55b495faa2
commit 70795c68ff
8 changed files with 235 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/satellite/src/components/accessGrants/ProgressBar.vue
View File

@ -36,28 +36,28 @@ export default class ProgressBar extends Vue {
* Indicates if current route is on name step.
*/
public get isNameStep(): boolean {
return this.$route.name === RouteConfig.NameStep.name;
return this.$route.name === RouteConfig.NameStep.name || this.$route.name === RouteConfig.AccessGrantName.name;
}
/**
* Indicates if current route is on permissions step.
*/
public get isPermissionsStep(): boolean {
return this.$route.name === RouteConfig.PermissionsStep.name;
return this.$route.name === RouteConfig.PermissionsStep.name || this.$route.name === RouteConfig.AccessGrantPermissions.name;
}
/**
* Indicates if current route is on passphrase step.
*/
public get isPassphraseStep(): boolean {
return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name;
return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name || this.$route.name === RouteConfig.AccessGrantPassphrase.name;
}
/**
* Indicates if current route is on result step.
*/
public get isResultStep(): boolean {
return this.$route.name === RouteConfig.ResultStep.name;
return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.name;
}
}
</script>

17
web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
View File

@ -5,6 +5,7 @@
<div class="buckets-selection">
<div
class="buckets-selection__toggle-container"
:class="{ disabled: isOnboardingTour }"
@click.stop="toggleDropdown"
>
<h1 class="buckets-selection__toggle-container__name">{{ selectionLabel }}</h1>
@ -27,6 +28,7 @@ import { Component, Vue } from 'vue-property-decorator';
import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import {RouteConfig} from "@/router";
@Component({
components: {
@ -41,6 +43,8 @@ export default class BucketsSelection extends Vue {
* Toggles dropdown visibility.
*/
public toggleDropdown(): void {
if (this.isOnboardingTour) return;
this.isDropdownShown = !this.isDropdownShown;
}
@ -51,6 +55,13 @@ export default class BucketsSelection extends Vue {
this.isDropdownShown = false;
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns selection options (all or items count).
*/
@ -101,4 +112,10 @@ export default class BucketsSelection extends Vue {
}
}
}
.disabled {
pointer-events: none;
background: #f5f6fa;
border: 1px solid rgba(56, 75, 101, 0.4);
}
</style>

36
web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="create-passphrase">
<div class="create-passphrase" :class="{ 'border-radius': isOnboardingTour }">
<BackIcon class="create-passphrase__back-icon" @click="onBackClick"/>
<h1 class="create-passphrase__title">Encryption Passphrase</h1>
<div class="create-passphrase__warning">
@ -195,6 +195,18 @@ export default class CreatePassphraseStep extends Vue {
setTimeout(() => {
this.isLoading = false;
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
params: {
access: this.access,
key: this.key,
},
});
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
params: {
@ -210,6 +222,17 @@ export default class CreatePassphraseStep extends Vue {
* Redirects to previous step.
*/
public onBackClick(): void {
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
params: {
key: this.key,
},
});
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
params: {
@ -217,6 +240,13 @@ export default class CreatePassphraseStep extends Vue {
},
});
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
}
</script>
@ -363,6 +393,10 @@ export default class CreatePassphraseStep extends Vue {
border-bottom: 3px solid #0068dc;
}
.border-radius {
border-radius: 6px;
}
/deep/ .label-container {
&__main {

29
web/satellite/src/components/accessGrants/steps/NameStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="name-step">
<div class="name-step" :class="{ 'border-radius': isOnboardingTour }">
<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
@ -14,6 +14,7 @@
/>
<div class="name-step__buttons-area">
<VButton
v-if="!isOnboardingTour"
class="cancel-button"
label="Cancel"
width="50%"
@ -84,7 +85,7 @@ export default class NameStep extends Vue {
}
if (!this.name) {
this.errorMessage = 'Access Grant name can`t be empty';
this.errorMessage = 'Access Grant name can\'t be empty';
return;
}
@ -113,6 +114,18 @@ export default class NameStep extends Vue {
}
this.isLoading = false;
if (this.isOnboardingTour) {
await this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
params: {
key: this.key,
},
});
return;
}
await this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
params: {
@ -120,6 +133,13 @@ export default class NameStep extends Vue {
},
});
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
}
</script>
@ -161,6 +181,7 @@ export default class NameStep extends Vue {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 130px;
}
}
@ -168,4 +189,8 @@ export default class NameStep extends Vue {
.cancel-button {
margin-right: 15px;
}
.border-radius {
border-radius: 6px;
}
</style>

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

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="permissions">
<div class="permissions" :class="{ 'border-radius': isOnboardingTour }">
<BackIcon class="permissions__back-icon" @click="onBackClick"/>
<h1 class="permissions__title">Access Permissions</h1>
<p class="permissions__sub-title">
@ -55,7 +55,7 @@
:on-press="onContinueInBrowserClick"
:is-disabled="isLoading"
/>
<p class="permissions__cli-link" @click.stop="onContinueInCLIClick">
<p v-if="!isOnboardingTour" class="permissions__cli-link" @click.stop="onContinueInCLIClick">
Continue in CLI
</p>
</div>
@ -179,6 +179,17 @@ export default class PermissionsStep extends Vue {
setTimeout(() => {
this.isLoading = false;
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
params: {
key: this.restrictedKey,
},
});
return;
}
if (this.accessGrantsAmount > 1) {
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@ -199,6 +210,13 @@ export default class PermissionsStep extends Vue {
}, 1000);
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns stored selected bucket names.
*/
@ -359,4 +377,8 @@ export default class PermissionsStep extends Vue {
color: #0068dc;
}
}
.border-radius {
border-radius: 6px;
}
</style>

34
web/satellite/src/components/accessGrants/steps/ResultStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="generate-grant">
<div class="generate-grant" :class="{ 'border-radius': isOnboardingTour }">
<BackIcon class="generate-grant__back-icon" @click="onBackClick"/>
<h1 class="generate-grant__title">Generate Access Grant</h1>
<div class="generate-grant__warning">
@ -192,6 +192,17 @@ export default class ResultStep extends Vue {
* Redirects to previous step.
*/
public onBackClick(): void {
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
params: {
key: this.$route.params.key,
},
});
return;
}
if (this.accessGrantsAmount > 1) {
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@ -216,6 +227,12 @@ export default class ResultStep extends Vue {
* Proceed to upload data step.
*/
public onDoneClick(): void {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.ProjectDashboard.path);
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.UploadStep)).name,
params: {
@ -243,6 +260,13 @@ export default class ResultStep extends Vue {
}
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns generated gateway credentials from store.
*/
@ -292,7 +316,7 @@ export default class ResultStep extends Vue {
&__warning {
padding: 20px;
width: calc(100% - 40px);
width: calc(100% - 42px);
background: #fff9f7;
border: 1px solid #f84b00;
border-radius: 8px;
@ -336,7 +360,7 @@ export default class ResultStep extends Vue {
align-items: center;
border-radius: 9px;
padding: 10px;
width: calc(100% - 20px);
width: calc(100% - 22px);
border: 1px solid rgba(56, 75, 101, 0.4);
&__value {
@ -446,4 +470,8 @@ export default class ResultStep extends Vue {
margin-top: 30px;
}
}
.border-radius {
border-radius: 6px;
}
</style>

94
web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
View File

@ -1,11 +1,99 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template></template>
<template>
<div class="onboarding-access">
<h1 class="onboarding-access__title">Create an Access Grant</h1>
<p class="onboarding-access__sub-title">
Access Grants are keys that allow access to upload, delete, and view your project’s data.
</p>
<div
class="onboarding-access__content"
:class="{
'permissions-margin': isPermissionsStep,
'passphrase-margin': isPassphraseStep,
'result-margin': isResultStep,
}"
>
<ProgressBar/>
<router-view/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class CreateAccessGrantStep extends Vue {}
import ProgressBar from '@/components/accessGrants/ProgressBar.vue';
import { RouteConfig } from '@/router';
@Component({
components: {
ProgressBar,
},
})
export default class CreateAccessGrantStep extends Vue {
/**
* Indicates if current route is access grant permissions step.
*/
public get isPermissionsStep(): boolean {
return this.$route.name === RouteConfig.AccessGrantPermissions.name;
}
/**
* Indicates if current route is access grant passphrase step.
*/
public get isPassphraseStep(): boolean {
return this.$route.name === RouteConfig.AccessGrantPassphrase.name;
}
/**
* Indicates if current route is access grant result step.
*/
public get isResultStep(): boolean {
return this.$route.name === RouteConfig.AccessGrantResult.name;
}
}
</script>
<style scoped lang="scss">
.onboarding-access {
font-family: 'font_regular', sans-serif;
font-style: normal;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
text-align: center;
color: #1b2533;
margin: 0 0 15px 0;
}
&__sub-title {
font-size: 16px;
line-height: 21px;
color: #000;
margin: 0 0 50px 0;
}
&__content {
display: flex;
align-items: center;
margin-left: -145px;
}
}
.permissions-margin {
margin-left: -210px;
}
.passphrase-margin {
margin-left: -180px;
}
.result-margin {
margin-left: -175px;
}
</style>

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

@ -312,6 +312,12 @@ router.beforeEach((to, from, next) => {
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant))) {
next(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.NameStep).path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
next(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);