97a5c58ce4
Added API key, CLI setup and Generate AG components. Also some common components were added to reuse in this flow. Change-Id: Ic7b2e33b02b8d2c0e8f989a1ac59c8ebf05830d4
484 lines
23 KiB
TypeScript
484 lines
23 KiB
TypeScript
// Copyright (C) 2019 Storj Labs, Inc.
|
|
// See LICENSE for copying information.
|
|
|
|
import Vue from 'vue';
|
|
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 CreatePassphraseStep from '@/components/accessGrants/steps/CreatePassphraseStep.vue';
|
|
import EnterPassphraseStep from '@/components/accessGrants/steps/EnterPassphraseStep.vue';
|
|
import GatewayStep from '@/components/accessGrants/steps/GatewayStep.vue';
|
|
import NameStep from '@/components/accessGrants/steps/NameStep.vue';
|
|
import PermissionsStep from '@/components/accessGrants/steps/PermissionsStep.vue';
|
|
import ResultStep from '@/components/accessGrants/steps/ResultStep.vue';
|
|
import AccountArea from '@/components/account/AccountArea.vue';
|
|
import AccountBilling from '@/components/account/billing/BillingArea.vue';
|
|
import DetailedHistory from '@/components/account/billing/depositAndBillingHistory/DetailedHistory.vue';
|
|
import AddCouponCode from '@/components/account/billing/coupons/AddCouponCode.vue';
|
|
import CreditsHistory from '@/components/account/billing/coupons/CouponArea.vue';
|
|
import SettingsArea from '@/components/account/SettingsArea.vue';
|
|
import Page404 from '@/components/errors/Page404.vue';
|
|
import BucketsView from '@/components/objects/BucketsView.vue';
|
|
import EncryptData from '@/components/objects/EncryptData.vue';
|
|
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 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';
|
|
import { NavigationLink } from '@/types/navigation';
|
|
|
|
const DashboardArea = () => import('@/views/DashboardArea.vue');
|
|
const ForgotPassword = () => import('@/views/ForgotPassword.vue');
|
|
const LoginArea = () => import('@/views/LoginArea.vue');
|
|
const RegisterArea = () => import('@/views/RegisterArea.vue');
|
|
const ResetPassword = () => import('@/views/ResetPassword.vue');
|
|
|
|
Vue.use(Router);
|
|
|
|
/**
|
|
* RouteConfig contains information about all routes and subroutes
|
|
*/
|
|
export abstract class RouteConfig {
|
|
// root paths
|
|
public static Root = new NavigationLink('/', 'Root');
|
|
public static Login = new NavigationLink('/login', 'Login');
|
|
public static Register = new NavigationLink('/signup', 'Register');
|
|
public static ForgotPassword = new NavigationLink('/forgot-password', 'Forgot Password');
|
|
public static ResetPassword = new NavigationLink('/password-recovery', 'Reset Password');
|
|
public static Account = new NavigationLink('/account', 'Account');
|
|
public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
|
|
public static Users = new NavigationLink('/project-members', 'Users');
|
|
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
|
|
public static CreateProject = new NavigationLink('/create-project', 'Create Project');
|
|
public static EditProjectDetails = new NavigationLink('/edit-project-details', 'Edit Project Details');
|
|
public static AccessGrants = new NavigationLink('/access-grants', 'Access');
|
|
public static ProjectsList = new NavigationLink('/projects', 'Projects');
|
|
public static Objects = new NavigationLink('/objects', 'Objects');
|
|
|
|
// account child paths
|
|
public static Settings = new NavigationLink('settings', 'Settings');
|
|
public static Billing = new NavigationLink('billing', 'Billing');
|
|
public static AddCouponCode = new NavigationLink('add-coupon', 'Get Free Credits');
|
|
public static BillingHistory = new NavigationLink('billing-history', 'Billing History');
|
|
public static DepositHistory = new NavigationLink('deposit-history', 'Deposit History');
|
|
public static CreditsHistory = new NavigationLink('credits-history', 'Credits History');
|
|
|
|
// access grant child paths
|
|
public static CreateAccessGrant = new NavigationLink('create-grant', 'Create Access Grant');
|
|
public static NameStep = new NavigationLink('name', 'Name Access Grant');
|
|
public static PermissionsStep = new NavigationLink('permissions', 'Access Grant Permissions');
|
|
public static CreatePassphraseStep = new NavigationLink('create-passphrase', 'Access Grant Create Passphrase');
|
|
public static EnterPassphraseStep = new NavigationLink('enter-passphrase', 'Access Grant Enter Passphrase');
|
|
public static ResultStep = new NavigationLink('result', 'Access Grant Result');
|
|
public static GatewayStep = new NavigationLink('gateway', 'Access Grant Gateway');
|
|
public static CLIStep = new NavigationLink('cli', 'Access Grant In CLI');
|
|
|
|
// onboarding tour child paths
|
|
public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
|
|
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');
|
|
public static EncryptData = new NavigationLink('encrypt-data', 'Objects Encrypt Data');
|
|
public static BucketsManagement = new NavigationLink('buckets', 'Buckets Management');
|
|
public static UploadFile = new NavigationLink('upload/', 'Objects Upload');
|
|
}
|
|
|
|
export const notProjectRelatedRoutes = [
|
|
RouteConfig.Login.name,
|
|
RouteConfig.Register.name,
|
|
RouteConfig.ForgotPassword.name,
|
|
RouteConfig.ResetPassword.name,
|
|
RouteConfig.Billing.name,
|
|
RouteConfig.BillingHistory.name,
|
|
RouteConfig.DepositHistory.name,
|
|
RouteConfig.CreditsHistory.name,
|
|
RouteConfig.Settings.name,
|
|
];
|
|
|
|
export const router = new Router({
|
|
mode: 'history',
|
|
routes: [
|
|
{
|
|
path: RouteConfig.Login.path,
|
|
name: RouteConfig.Login.name,
|
|
component: LoginArea,
|
|
},
|
|
{
|
|
path: RouteConfig.Register.path,
|
|
name: RouteConfig.Register.name,
|
|
component: RegisterArea,
|
|
},
|
|
{
|
|
path: RouteConfig.ForgotPassword.path,
|
|
name: RouteConfig.ForgotPassword.name,
|
|
component: ForgotPassword,
|
|
},
|
|
{
|
|
path: RouteConfig.ResetPassword.path,
|
|
name: RouteConfig.ResetPassword.name,
|
|
component: ResetPassword,
|
|
},
|
|
{
|
|
path: RouteConfig.Root.path,
|
|
meta: {
|
|
requiresAuth: true,
|
|
},
|
|
component: DashboardArea,
|
|
children: [
|
|
{
|
|
path: RouteConfig.Root.path,
|
|
name: 'default',
|
|
component: ProjectDashboard,
|
|
},
|
|
{
|
|
path: RouteConfig.Account.path,
|
|
name: RouteConfig.Account.name,
|
|
component: AccountArea,
|
|
children: [
|
|
{
|
|
path: RouteConfig.Settings.path,
|
|
name: RouteConfig.Settings.name,
|
|
component: SettingsArea,
|
|
},
|
|
{
|
|
path: RouteConfig.Billing.path,
|
|
name: RouteConfig.Billing.name,
|
|
component: AccountBilling,
|
|
children: [
|
|
{
|
|
path: RouteConfig.AddCouponCode.path,
|
|
name: RouteConfig.AddCouponCode.name,
|
|
component: AddCouponCode,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: RouteConfig.BillingHistory.path,
|
|
name: RouteConfig.BillingHistory.name,
|
|
component: DetailedHistory,
|
|
},
|
|
{
|
|
path: RouteConfig.DepositHistory.path,
|
|
name: RouteConfig.DepositHistory.name,
|
|
component: DetailedHistory,
|
|
},
|
|
{
|
|
path: RouteConfig.CreditsHistory.path,
|
|
name: RouteConfig.CreditsHistory.name,
|
|
component: CreditsHistory,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: RouteConfig.ProjectDashboard.path,
|
|
name: RouteConfig.ProjectDashboard.name,
|
|
component: ProjectDashboard,
|
|
},
|
|
{
|
|
path: RouteConfig.Users.path,
|
|
name: RouteConfig.Users.name,
|
|
component: ProjectMembersArea,
|
|
},
|
|
{
|
|
path: RouteConfig.OnboardingTour.path,
|
|
name: RouteConfig.OnboardingTour.name,
|
|
component: OnboardingTourArea,
|
|
children: [
|
|
{
|
|
path: RouteConfig.OverviewStep.path,
|
|
name: RouteConfig.OverviewStep.name,
|
|
component: OverviewStep,
|
|
},
|
|
{
|
|
path: RouteConfig.OnbCLIStep.path,
|
|
name: RouteConfig.OnbCLIStep.name,
|
|
component: OnbCLIStep,
|
|
children: [
|
|
{
|
|
path: RouteConfig.EncryptYourData.path,
|
|
name: RouteConfig.EncryptYourData.name,
|
|
component: EncryptYourData,
|
|
},
|
|
{
|
|
path: RouteConfig.GeneratedAG.path,
|
|
name: RouteConfig.GeneratedAG.name,
|
|
component: GeneratedAG,
|
|
},
|
|
{
|
|
path: RouteConfig.ImportAG.path,
|
|
name: RouteConfig.ImportAG.name,
|
|
component: ImportAG,
|
|
},
|
|
{
|
|
path: RouteConfig.APIKey.path,
|
|
name: RouteConfig.APIKey.name,
|
|
component: APIKey,
|
|
},
|
|
{
|
|
path: RouteConfig.CLIInstall.path,
|
|
name: RouteConfig.CLIInstall.name,
|
|
component: CLIInstall,
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: RouteConfig.CreateProject.path,
|
|
name: RouteConfig.CreateProject.name,
|
|
component: CreateProject,
|
|
},
|
|
{
|
|
path: RouteConfig.EditProjectDetails.path,
|
|
name: RouteConfig.EditProjectDetails.name,
|
|
component: EditProjectDetails,
|
|
},
|
|
{
|
|
path: RouteConfig.AccessGrants.path,
|
|
name: RouteConfig.AccessGrants.name,
|
|
component: AccessGrants,
|
|
children: [
|
|
{
|
|
path: RouteConfig.CreateAccessGrant.path,
|
|
name: RouteConfig.CreateAccessGrant.name,
|
|
component: CreateAccessGrant,
|
|
children: [
|
|
{
|
|
path: RouteConfig.NameStep.path,
|
|
name: RouteConfig.NameStep.name,
|
|
component: NameStep,
|
|
},
|
|
{
|
|
path: RouteConfig.PermissionsStep.path,
|
|
name: RouteConfig.PermissionsStep.name,
|
|
component: PermissionsStep,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.CreatePassphraseStep.path,
|
|
name: RouteConfig.CreatePassphraseStep.name,
|
|
component: CreatePassphraseStep,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.EnterPassphraseStep.path,
|
|
name: RouteConfig.EnterPassphraseStep.name,
|
|
component: EnterPassphraseStep,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.ResultStep.path,
|
|
name: RouteConfig.ResultStep.name,
|
|
component: ResultStep,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.GatewayStep.path,
|
|
name: RouteConfig.GatewayStep.name,
|
|
component: GatewayStep,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.CLIStep.path,
|
|
name: RouteConfig.CLIStep.name,
|
|
component: CLIStep,
|
|
props: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: RouteConfig.ProjectsList.path,
|
|
name: RouteConfig.ProjectsList.name,
|
|
component: ProjectsList,
|
|
},
|
|
{
|
|
path: RouteConfig.Objects.path,
|
|
name: RouteConfig.Objects.name,
|
|
component: ObjectsArea,
|
|
children: [
|
|
{
|
|
path: RouteConfig.Warning.path,
|
|
name: RouteConfig.Warning.name,
|
|
component: WarningView,
|
|
},
|
|
{
|
|
path: RouteConfig.EncryptData.path,
|
|
name: RouteConfig.EncryptData.name,
|
|
component: EncryptData,
|
|
},
|
|
{
|
|
path: RouteConfig.BucketsManagement.path,
|
|
name: RouteConfig.BucketsManagement.name,
|
|
component: BucketsView,
|
|
props: true,
|
|
},
|
|
{
|
|
path: RouteConfig.UploadFile.path,
|
|
name: RouteConfig.UploadFile.name,
|
|
component: UploadFile,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '*',
|
|
name: '404',
|
|
component: Page404,
|
|
},
|
|
],
|
|
});
|
|
|
|
router.beforeEach(async (to, from, next) => {
|
|
if (from.name === RouteConfig.UploadFile.name && !store.state.appStateModule.appState.isUploadCancelPopupVisible) {
|
|
const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
|
|
if (areUploadsInProgress) return;
|
|
}
|
|
|
|
if (navigateToDefaultSubTab(to.matched, RouteConfig.Account)) {
|
|
next(RouteConfig.Account.with(RouteConfig.Billing).path);
|
|
|
|
return;
|
|
}
|
|
|
|
if (navigateToDefaultSubTab(to.matched, RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant))) {
|
|
next(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).with(RouteConfig.NameStep).path);
|
|
|
|
return;
|
|
}
|
|
|
|
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep))) {
|
|
next(RouteConfig.OnboardingTour.path);
|
|
|
|
return;
|
|
}
|
|
|
|
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
|
|
next(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
|
|
|
|
return;
|
|
}
|
|
|
|
if (navigateToDefaultSubTab(to.matched, RouteConfig.Objects)) {
|
|
next(RouteConfig.Objects.with(RouteConfig.Warning).path);
|
|
|
|
return;
|
|
}
|
|
|
|
if (to.name === 'default') {
|
|
next(RouteConfig.ProjectDashboard.path);
|
|
|
|
return;
|
|
}
|
|
|
|
next();
|
|
});
|
|
|
|
router.afterEach(({ name }, _from) => {
|
|
if (!name) {
|
|
return;
|
|
}
|
|
|
|
if (notProjectRelatedRoutes.includes(name)) {
|
|
document.title = `${router.currentRoute.name} | ${store.state.appStateModule.satelliteName}`;
|
|
|
|
return;
|
|
}
|
|
|
|
const selectedProjectName = store.state.projectsModule.selectedProject.name ?
|
|
`${store.state.projectsModule.selectedProject.name} | ` : '';
|
|
|
|
document.title = `${selectedProjectName + router.currentRoute.name} | ${store.state.appStateModule.satelliteName}`;
|
|
});
|
|
|
|
/**
|
|
* if our route is a tab and has no sub tab route - we will navigate to default subtab.
|
|
* F.E. /account/ -> /account/billing/;
|
|
* @param routes - array of RouteRecord from vue-router
|
|
* @param tabRoute - tabNavigator route
|
|
*/
|
|
function navigateToDefaultSubTab(routes: RouteRecord[], tabRoute: NavigationLink): boolean {
|
|
return (routes.length === 2 && (routes[1].name as string) === tabRoute.name) ||
|
|
(routes.length === 3 && (routes[2].name as string) === tabRoute.name);
|
|
}
|