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

web/satellite: initial setup for onboarding CLI flow

Browse Source 
Added components for the new flow.
Removed onboarding logic from regular access grant wizard.
Updated routes to include new flow.

Change-Id: I52ca6eb3da1e4e3a4b465ed58cd45398d10fd268
This commit is contained in:
Vitalii Shpital 2021-08-12 15:45:44 +03:00
parent cd973fcb78
commit 7a08c19c53
25 changed files with 302 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,35 +38,35 @@ 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 || this.$route.name === RouteConfig.AccessGrantName.name;
return this.$route.name === RouteConfig.NameStep.name;
}
/**
* Indicates if current route is on permissions step.
*/
public get isPermissionsStep(): boolean {
return this.$route.name === RouteConfig.PermissionsStep.name || this.$route.name === RouteConfig.AccessGrantPermissions.name;
return this.$route.name === RouteConfig.PermissionsStep.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 || this.$route.name === RouteConfig.AccessGrantPassphrase.name;
return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name;
}
/**
* Indicates if current route is on result step.
*/
public get isResultStep(): boolean {
return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.name;
return this.$route.name === RouteConfig.ResultStep.name;
}
/**
* Indicates if current route is on gateway step.
*/
public get isGatewayStep(): boolean {
return this.$route.name === RouteConfig.GatewayStep.name || this.$route.name === RouteConfig.AccessGrantGateway.name;
return this.$route.name === RouteConfig.GatewayStep.name;
}
}
</script>

28
web/satellite/src/components/accessGrants/steps/CLIStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="cli-container" :class="{ 'border-radius': isOnboardingTour }">
<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">
@ -82,12 +82,6 @@ export default class CLIStep extends Vue {
*/
public mounted(): void {
if (!this.$route.params.key && !this.$route.params.restrictedKey) {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
return;
}
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
@ -102,17 +96,6 @@ export default class CLIStep 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: {
@ -126,7 +109,7 @@ export default class CLIStep extends Vue {
* Redirects to upload step.
*/
public onDoneClick(): void {
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
this.$router.push(RouteConfig.AccessGrants.path);
}
/**
@ -161,13 +144,6 @@ export default class CLIStep extends Vue {
this.$copyText(this.restrictedKey);
this.$notify.success('Token was copied successfully');
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
}
</script>

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

@ -44,12 +44,6 @@ export default class CreatePassphraseStep extends Vue {
*/
public async mounted(): Promise<void> {
if (!this.$route.params.key && !this.$route.params.restrictedKey) {
if (this.isOnboardingTour) {
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
return;
}
await this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
@ -113,19 +107,6 @@ export default class CreatePassphraseStep extends Vue {
this.isLoading = false;
if (this.isOnboardingTour) {
await this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
params: {
access: this.access,
key: this.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
await this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
params: {
@ -141,17 +122,6 @@ 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: {
@ -159,13 +129,6 @@ export default class CreatePassphraseStep extends Vue {
},
});
}
/**
* Indicates if current route is onboarding tour.
*/
private get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
}
</script>

2
web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="enter-passphrase" :class="{ 'border-radius': isOnboardingTour }">
<div class="enter-passphrase">
<BackIcon class="enter-passphrase__back-icon" @click="onBackClick" />
<h1 class="enter-passphrase__title">Enter Encryption Passphrase</h1>
<p class="enter-passphrase__sub-title">Enter the passphrase you most recently generated for Access Grants</p>

30
web/satellite/src/components/accessGrants/steps/GatewayStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="gateway" :class="{ 'border-radius': isOnboardingTour }">
<div class="gateway">
<BackIcon class="gateway__back-icon" @click="onBackClick" />
<h1 class="gateway__title">S3 Gateway</h1>
<div class="gateway__container">
@ -131,12 +131,6 @@ export default class GatewayStep extends Vue {
*/
public mounted(): void {
if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
return;
}
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
@ -179,19 +173,6 @@ export default class GatewayStep extends Vue {
* Redirects to previous step.
*/
public onBackClick(): void {
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
params: {
access: this.access,
key: this.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
params: {
@ -207,7 +188,7 @@ export default class GatewayStep extends Vue {
* Proceed to upload data step.
*/
public onDoneClick(): void {
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
this.$router.push(RouteConfig.AccessGrants.path);
}
/**
@ -234,13 +215,6 @@ export default class GatewayStep extends Vue {
this.isLoading = false;
}
/**
* 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.
*/

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

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="name-step" :class="{ 'border-radius': isOnboardingTour }">
<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
@ -14,7 +14,6 @@
/>
<div class="name-step__buttons-area">
<VButton
v-if="!isOnboardingTour"
class="cancel-button"
label="Cancel"
width="50%"
@ -130,17 +129,6 @@ 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: {
@ -148,13 +136,6 @@ 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>

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

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="permissions" :class="{ 'border-radius': isOnboardingTour }">
<div class="permissions">
<BackIcon class="permissions__back-icon" @click="onBackClick" />
<h1 class="permissions__title">Access Permissions</h1>
<p class="permissions__sub-title">
@ -112,12 +112,6 @@ export default class PermissionsStep extends Vue {
*/
public async mounted(): Promise<void> {
if (!this.$route.params.key) {
if (this.isOnboardingTour) {
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
return;
}
this.onBackClick();
return;
@ -143,9 +137,7 @@ export default class PermissionsStep extends Vue {
* Redirects to previous step.
*/
public onBackClick(): void {
this.isOnboardingTour ?
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path) :
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
}
/**
@ -178,18 +170,6 @@ export default class PermissionsStep extends Vue {
this.isLoading = false;
if (this.isOnboardingTour) {
await this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantCLI)).name,
params: {
key: this.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
await this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.CLIStep)).name,
params: {
@ -218,18 +198,6 @@ export default class PermissionsStep extends Vue {
this.isLoading = false;
if (this.isOnboardingTour) {
await this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
params: {
key: this.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
if (this.accessGrantsAmount > 1) {
await this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@ -258,13 +226,6 @@ export default class PermissionsStep extends Vue {
return this.$store.state.accessGrantsModule.isAccessGrantsWebWorkerReady;
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns selected bucket names.
*/

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

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="generate-grant" :class="{ 'border-radius': isOnboardingTour }">
<div class="generate-grant">
<BackIcon class="generate-grant__back-icon" @click="onBackClick" />
<h1 class="generate-grant__title">Generate Access Grant</h1>
<div class="generate-grant__warning">
@ -79,12 +79,6 @@ export default class ResultStep extends Vue {
*/
public mounted(): void {
if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
return;
}
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
@ -137,18 +131,6 @@ 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.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
if (this.accessGrantsAmount > 1) {
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@ -175,7 +157,7 @@ export default class ResultStep extends Vue {
* Proceed to upload data step.
*/
public onDoneClick(): void {
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
this.$router.push(RouteConfig.AccessGrants.path);
}
/**
@ -183,19 +165,6 @@ export default class ResultStep extends Vue {
* Proceed to gateway step.
*/
public navigateToGatewayStep(): void {
if (this.isOnboardingTour) {
this.$router.push({
name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantGateway)).name,
params: {
access: this.access,
key: this.key,
restrictedKey: this.restrictedKey,
},
});
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.GatewayStep)).name,
params: {
@ -206,13 +175,6 @@ 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 amount of access grants from store.
*/

18
web/satellite/src/components/onboardingTour/steps/CLIStep.vue Normal file
View File

@ -0,0 +1,18 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="onboarding-cli">
<div class="onboarding-cli__container">
<router-view />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class OnbCLIStep extends Vue {}
</script>

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

@ -1,113 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<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,
'cli-margin': isCLIStep,
}"
>
<ProgressBar v-if="!isCLIStep" />
<router-view />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProgressBar from '@/components/accessGrants/ProgressBar.vue';
import { RouteConfig } from '@/router';
// @vue/component
@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 CLI step.
*/
public get isCLIStep(): boolean {
return this.$route.name === RouteConfig.AccessGrantCLI.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;
justify-content: center;
margin-left: -205px;
}
}
.permissions-margin {
margin-left: -210px;
}
.passphrase-margin {
margin-left: -190px;
}
.result-margin {
margin-left: -195px;
}
.cli-margin {
margin-left: 0;
}
</style>

2
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -75,7 +75,7 @@ export default class OverviewStep extends Vue {
this.isLoading = true;
await this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, 'CLI');
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.AccessGrantName).path);
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.CLIStep).with(RouteConfig.EncryptYourData).path);
this.isLoading = false;
}

14
web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="key" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class APIKey extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="cli-install" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class CLIInstall extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="cli-setup" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class CLISetup extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="create-bucket" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class CreateBucket extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="download-object" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class DownloadObject extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/EncryptYourData.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="encrypt" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class EncryptYourData extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="generate-ag" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class GenerateAG extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/GeneratedAG.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="generated" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class GeneratedAG extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="import" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class ImportAG extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="list-object" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class ListObject extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="share-object" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class ShareObject extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="success-screen" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class SuccessScreen extends Vue {}
</script>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="upload-object" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class UploadObject extends Vue {}
</script>

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

@ -26,13 +26,26 @@ import ObjectsArea from '@/components/objects/ObjectsArea.vue';
import UploadFile from '@/components/objects/UploadFile.vue';
import WarningView from '@/components/objects/WarningView.vue';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
import CreateAccessGrantStep from '@/components/onboardingTour/steps/CreateAccessGrantStep.vue';
import OnbCLIStep from '@/components/onboardingTour/steps/CLIStep.vue';
import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import CreateProject from '@/components/project/CreateProject.vue';
import EditProjectDetails from '@/components/project/EditProjectDetails.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import ProjectsList from '@/components/projectsList/ProjectsList.vue';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import CLIInstall from "@/components/onboardingTour/steps/cliFlow/CLIInstall.vue";
import APIKey from "@/components/onboardingTour/steps/cliFlow/APIKey.vue";
import CLISetup from "@/components/onboardingTour/steps/cliFlow/CLISetup.vue";
import GenerateAG from "@/components/onboardingTour/steps/cliFlow/GenerateAG.vue";
import CreateBucket from "@/components/onboardingTour/steps/cliFlow/CreateBucket.vue";
import UploadObject from "@/components/onboardingTour/steps/cliFlow/UploadObject.vue";
import ListObject from "@/components/onboardingTour/steps/cliFlow/ListObject.vue";
import DownloadObject from "@/components/onboardingTour/steps/cliFlow/DownloadObject.vue";
import ShareObject from "@/components/onboardingTour/steps/cliFlow/ShareObject.vue";
import SuccessScreen from "@/components/onboardingTour/steps/cliFlow/SuccessScreen.vue";
import EncryptYourData from "@/components/onboardingTour/steps/cliFlow/EncryptYourData.vue";
import GeneratedAG from "@/components/onboardingTour/steps/cliFlow/GeneratedAG.vue";
import ImportAG from "@/components/onboardingTour/steps/cliFlow/ImportAG.vue";
import store from '@/store';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
@ -86,13 +99,20 @@ export abstract class RouteConfig {
// onboarding tour child paths
public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
public static AccessGrant = new NavigationLink('access', 'Onboarding Access Grant');
public static AccessGrantName = new NavigationLink('name', 'Onboarding Name Access Grant');
public static AccessGrantPermissions = new NavigationLink('permissions', 'Onboarding Access Grant Permissions');
public static AccessGrantCLI = new NavigationLink('cli', 'Onboarding Access Grant CLI');
public static AccessGrantPassphrase = new NavigationLink('create-passphrase', 'Onboarding Access Grant Create Passphrase');
public static AccessGrantResult = new NavigationLink('result', 'Onboarding Access Grant Result');
public static AccessGrantGateway = new NavigationLink('gateway', 'Onboarding Access Grant Gateway');
public static OnbCLIStep = new NavigationLink('cli', 'Onboarding CLI');
public static EncryptYourData = new NavigationLink('encrypt', 'Onboarding Encrypt Data');
public static GeneratedAG = new NavigationLink('generated-ag', 'Onboarding Generated AG');
public static APIKey = new NavigationLink('api-key', 'Onboarding API Key');
public static CLIInstall = new NavigationLink('cli-install', 'Onboarding CLI Install');
public static CLISetup = new NavigationLink('cli-setup', 'Onboarding CLI Setup');
public static ImportAG = new NavigationLink('import', 'Onboarding Import AG');
public static GenerateAG = new NavigationLink('generate-ag', 'Onboarding Generate AG');
public static CreateBucket = new NavigationLink('create-bucket', 'Onboarding Create Bucket');
public static UploadObject = new NavigationLink('upload-object', 'Onboarding Upload Object');
public static ListObject = new NavigationLink('list-object', 'Onboarding List Object');
public static DownloadObject = new NavigationLink('download-object', 'Onboarding Download Object');
public static ShareObject = new NavigationLink('share-object', 'Onboarding Share Object');
public static SuccessScreen = new NavigationLink('success', 'Onboarding Success Screen');
// objects child paths.
public static Warning = new NavigationLink('warning', 'Objects Warning');
@ -208,44 +228,74 @@ export const router = new Router({
component: OverviewStep,
},
{
path: RouteConfig.AccessGrant.path,
name: RouteConfig.AccessGrant.name,
component: CreateAccessGrantStep,
path: RouteConfig.OnbCLIStep.path,
name: RouteConfig.OnbCLIStep.name,
component: OnbCLIStep,
children: [
{
path: RouteConfig.AccessGrantName.path,
name: RouteConfig.AccessGrantName.name,
component: NameStep,
path: RouteConfig.EncryptYourData.path,
name: RouteConfig.EncryptYourData.name,
component: EncryptYourData,
},
{
path: RouteConfig.AccessGrantPermissions.path,
name: RouteConfig.AccessGrantPermissions.name,
component: PermissionsStep,
props: true,
path: RouteConfig.GeneratedAG.path,
name: RouteConfig.GeneratedAG.name,
component: GeneratedAG,
},
{
path: RouteConfig.AccessGrantCLI.path,
name: RouteConfig.AccessGrantCLI.name,
component: CLIStep,
props: true,
path: RouteConfig.ImportAG.path,
name: RouteConfig.ImportAG.name,
component: ImportAG,
},
{
path: RouteConfig.AccessGrantPassphrase.path,
name: RouteConfig.AccessGrantPassphrase.name,
component: CreatePassphraseStep,
props: true,
path: RouteConfig.APIKey.path,
name: RouteConfig.APIKey.name,
component: APIKey,
},
{
path: RouteConfig.AccessGrantResult.path,
name: RouteConfig.AccessGrantResult.name,
component: ResultStep,
props: true,
path: RouteConfig.CLIInstall.path,
name: RouteConfig.CLIInstall.name,
component: CLIInstall,
},
{
path: RouteConfig.AccessGrantGateway.path,
name: RouteConfig.AccessGrantGateway.name,
component: GatewayStep,
props: true,
path: RouteConfig.CLISetup.path,
name: RouteConfig.CLISetup.name,
component: CLISetup,
},
{
path: RouteConfig.GenerateAG.path,
name: RouteConfig.GenerateAG.name,
component: GenerateAG,
},
{
path: RouteConfig.CreateBucket.path,
name: RouteConfig.CreateBucket.name,
component: CreateBucket,
},
{
path: RouteConfig.UploadObject.path,
name: RouteConfig.UploadObject.name,
component: UploadObject,
},
{
path: RouteConfig.ListObject.path,
name: RouteConfig.ListObject.name,
component: ListObject,
},
{
path: RouteConfig.DownloadObject.path,
name: RouteConfig.DownloadObject.name,
component: DownloadObject,
},
{
path: RouteConfig.ShareObject.path,
name: RouteConfig.ShareObject.name,
component: ShareObject,
},
{
path: RouteConfig.SuccessScreen.path,
name: RouteConfig.SuccessScreen.name,
component: SuccessScreen,
},
],
},
@ -377,8 +427,8 @@ router.beforeEach(async (to, from, next) => {
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant))) {
next(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.NameStep).path);
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.CLIStep))) {
next(RouteConfig.OnboardingTour.path);
return;
}