web/satellite: Final steps of onb CLI flow
Change-Id: I2c0a48b54347b81655b38f2cd2abd90cb8a84699
This commit is contained in:
Vitalii Shpital
parent
54c60fab47
commit
b86295c500
@ -25,11 +25,15 @@
|
||||
<div v-else class="gateway__container__keys-area">
|
||||
<div class="gateway__container__keys-area__label-area">
|
||||
<h3 class="gateway__container__keys-area__label-area__label">Access Key</h3>
|
||||
<VInfo
|
||||
class="gateway__container__keys-area__label-area__info-button"
|
||||
bold-text="The access key ID uniquely identifies your account."
|
||||
>
|
||||
<InfoIcon class="gateway__container__keys-area__label-area__info-button__image" />
|
||||
<VInfo class="gateway__container__keys-area__label-area__info-button">
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="gateway__container__keys-area__label-area__info-button__message">
|
||||
The access key ID uniquely identifies your account.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="gateway__container__keys-area__key">
|
||||
@ -44,11 +48,15 @@
|
||||
</div>
|
||||
<div class="gateway__container__keys-area__label-area">
|
||||
<h3 class="gateway__container__keys-area__label-area__label">Secret Key</h3>
|
||||
<VInfo
|
||||
class="gateway__container__keys-area__label-area__info-button"
|
||||
bold-text="Secret access keys are—as the name implies—secrets, like your password."
|
||||
>
|
||||
<InfoIcon class="gateway__container__keys-area__label-area__info-button__image" />
|
||||
<VInfo class="gateway__container__keys-area__label-area__info-button">
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="gateway__container__keys-area__label-area__info-button__message">
|
||||
Secret access keys are—as the name implies—secrets, like your password.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="gateway__container__keys-area__key">
|
||||
@ -63,11 +71,15 @@
|
||||
</div>
|
||||
<div class="gateway__container__keys-area__label-area">
|
||||
<h3 class="gateway__container__keys-area__label-area__label">End Point</h3>
|
||||
<VInfo
|
||||
class="gateway__container__keys-area__label-area__info-button"
|
||||
bold-text="The service to which you want to establish the connection."
|
||||
>
|
||||
<InfoIcon class="gateway__container__keys-area__label-area__info-button__image" />
|
||||
<VInfo class="gateway__container__keys-area__label-area__info-button">
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="gateway__container__keys-area__label-area__info-button__message">
|
||||
The service to which you want to establish the connection.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="gateway__container__keys-area__key">
|
||||
@ -312,6 +324,13 @@ export default class GatewayStep extends Vue {
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,11 +18,16 @@
|
||||
<p class="encrypt-container__header__row__gen" :class="{ active: isGenerate }" @click="setToGenerate">Generate Phrase</p>
|
||||
<div class="encrypt-container__header__row__right">
|
||||
<p class="encrypt-container__header__row__right__enter" :class="{ active: !isGenerate }" @click="setToEnter">Enter Your Own Passphrase</p>
|
||||
<VInfo
|
||||
class="encrypt-container__header__row__right__info-button"
|
||||
text="We strongly encourage you to use a mnemonic phrase, which is automatically generated one on the client-side for you. Alternatively, you can enter your own passphrase."
|
||||
>
|
||||
<InfoIcon class="encrypt-container__header__row__right__info-button__image" />
|
||||
<VInfo class="encrypt-container__header__row__right__info-button">
|
||||
<template #icon>
|
||||
<InfoIcon class="encrypt-container__header__row__right__info-button__image" />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="encrypt-container__header__row__right__info-button__message">
|
||||
We strongly encourage you to use a mnemonic phrase, which is automatically generated one
|
||||
on the client-side for you. Alternatively, you can enter your own passphrase.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
</div>
|
||||
@ -290,6 +295,12 @@ export default class GeneratePassphrase extends Vue {
|
||||
&__image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -369,9 +380,5 @@ export default class GeneratePassphrase extends Vue {
|
||||
|
||||
::v-deep .info__box__message {
|
||||
min-width: 440px;
|
||||
|
||||
&__regular-text {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,14 +3,13 @@
|
||||
|
||||
<template>
|
||||
<div class="info" @mouseenter="toggleVisibility" @mouseleave="toggleVisibility">
|
||||
<slot />
|
||||
<slot name="icon" />
|
||||
<div v-if="isVisible" class="info__box">
|
||||
<div v-if="buttonLabel" class="info__box__click-mock" />
|
||||
<div v-if="isClickable" class="info__box__click-mock" />
|
||||
<div class="info__box__arrow" />
|
||||
<div class="info__box__message">
|
||||
<h1 v-if="title" class="info__box__message__title">{{ title }}</h1>
|
||||
<p class="info__box__message__regular-text">{{ text }}</p>
|
||||
<p class="info__box__message__bold-text">{{ boldText }}</p>
|
||||
<slot name="message" />
|
||||
<VButton
|
||||
v-if="buttonLabel"
|
||||
class="info__box__message__button"
|
||||
@ -38,10 +37,8 @@ import VButton from '@/components/common/VButton.vue';
|
||||
export default class VInfo extends Vue {
|
||||
@Prop({default: ''})
|
||||
private readonly title: string;
|
||||
@Prop({default: ''})
|
||||
private readonly text: string;
|
||||
@Prop({default: ''})
|
||||
private readonly boldText: string;
|
||||
@Prop({default: false})
|
||||
private readonly isClickable: boolean;
|
||||
@Prop({default: ''})
|
||||
private readonly buttonLabel: string;
|
||||
@Prop({default: () => false})
|
||||
@ -109,19 +106,6 @@ export default class VInfo extends Vue {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__bold-text,
|
||||
&__regular-text {
|
||||
color: #586c86;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__regular-text {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@ -28,11 +28,18 @@
|
||||
v-if="!isOnboardingTour"
|
||||
class="header-container__right-area__info"
|
||||
title="Need some help?"
|
||||
text="You can always start the onboarding tour and go through all the steps to get you started again."
|
||||
button-label="START TOUR"
|
||||
is-clickable="true"
|
||||
:on-button-click="onStartTourButtonClick"
|
||||
>
|
||||
<InfoIcon />
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="header-container__right-area__info__message">
|
||||
You can always start the onboarding tour and go through all the steps to get you started again.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
<div class="header-container__right-area__satellite-area">
|
||||
<div class="header-container__right-area__satellite-area__checkmark">
|
||||
@ -173,6 +180,13 @@ export default class HeaderArea extends Vue {
|
||||
&__info {
|
||||
max-height: 24px;
|
||||
margin-right: 17px;
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__satellite-area {
|
||||
@ -237,11 +251,6 @@ export default class HeaderArea extends Vue {
|
||||
|
||||
&__message {
|
||||
min-width: 335px;
|
||||
|
||||
&__regular-text {
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,13 +2,80 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="create-bucket" />
|
||||
<CLIFlowContainer
|
||||
:on-back-click="onBackClick"
|
||||
:on-next-click="onNextClick"
|
||||
title="Create a bucket"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon />
|
||||
</template>
|
||||
<template #content class="create-bucket">
|
||||
<p class="create-bucket__msg">
|
||||
Let's create a bucket to store your data.
|
||||
You can name your bucket using only lowercase alphanumeric characters (no spaces), like “cakes”.
|
||||
</p>
|
||||
<OSContainer>
|
||||
<template #windows>
|
||||
<TabWithCopy value="./uplink.exe mb sj://cakes" />
|
||||
</template>
|
||||
<template #linux>
|
||||
<TabWithCopy value="uplink mb sj://cakes" />
|
||||
</template>
|
||||
<template #macos>
|
||||
<TabWithCopy value="uplink mb sj://cakes" />
|
||||
</template>
|
||||
</OSContainer>
|
||||
</template>
|
||||
</CLIFlowContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from "@/router";
|
||||
|
||||
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
|
||||
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
|
||||
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/bucketStep.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class CreateBucket extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
CLIFlowContainer,
|
||||
Icon,
|
||||
OSContainer,
|
||||
TabWithCopy,
|
||||
}
|
||||
})
|
||||
export default class CreateBucket extends Vue {
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.go(-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on next button click logic.
|
||||
*/
|
||||
public async onNextClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.create-bucket {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,79 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="download-object" />
|
||||
<CLIFlowContainer
|
||||
:on-back-click="onBackClick"
|
||||
:on-next-click="onNextClick"
|
||||
title="Download"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon />
|
||||
</template>
|
||||
<template #content class="download-object">
|
||||
<p class="download-object__msg">
|
||||
To download the cheesecake photo, let's use the copy command:
|
||||
</p>
|
||||
<OSContainer>
|
||||
<template #windows>
|
||||
<TabWithCopy value="./uplink.exe cp sj://cakes/cheesecake.jpg <DESTINATION_PATH>/cheesecake.jpg" />
|
||||
</template>
|
||||
<template #linux>
|
||||
<TabWithCopy value="uplink cp sj://cakes/cheesecake.jpg ~/Downloads/cheesecake.jpg" />
|
||||
</template>
|
||||
<template #macos>
|
||||
<TabWithCopy value="uplink cp sj://cakes/cheesecake.jpg ~/Downloads/cheesecake.jpg" />
|
||||
</template>
|
||||
</OSContainer>
|
||||
</template>
|
||||
</CLIFlowContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from "@/router";
|
||||
|
||||
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
|
||||
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
|
||||
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/downloadObjectStep.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class DownloadObject extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
CLIFlowContainer,
|
||||
Icon,
|
||||
OSContainer,
|
||||
TabWithCopy,
|
||||
}
|
||||
})
|
||||
export default class DownloadObject extends Vue {
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on next button click logic.
|
||||
*/
|
||||
public async onNextClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.download-object {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,9 +19,16 @@
|
||||
<VInfo
|
||||
class="generated__download__info-button"
|
||||
title="Download the access grant"
|
||||
text="This will make a text file with the access grant, so that you can easily import it later into the Uplink CLI."
|
||||
>
|
||||
<InfoIcon class="generated__download__info-button__image" />
|
||||
<template #icon>
|
||||
<InfoIcon class="generated__download__info-button__image" />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="generated__download__info-button__message">
|
||||
This will make a text file with the access grant, so that you can easily import it later
|
||||
into the Uplink CLI.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
<h3 class="generated__label">Access Grant</h3>
|
||||
@ -140,6 +147,13 @@ export default class GeneratedAG extends Vue {
|
||||
&__image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -150,10 +164,5 @@ export default class GeneratedAG extends Vue {
|
||||
&__title {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__regular-text {
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,79 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="list-object" />
|
||||
<CLIFlowContainer
|
||||
:on-back-click="onBackClick"
|
||||
:on-next-click="onNextClick"
|
||||
title="Listing a bucket"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon />
|
||||
</template>
|
||||
<template #content class="list-object">
|
||||
<p class="list-object__msg">
|
||||
To view the cheesecake photo in our bucket, let's use the list command:
|
||||
</p>
|
||||
<OSContainer>
|
||||
<template #windows>
|
||||
<TabWithCopy value="./uplink.exe ls sj://cakes" />
|
||||
</template>
|
||||
<template #linux>
|
||||
<TabWithCopy value="uplink ls sj://cakes" />
|
||||
</template>
|
||||
<template #macos>
|
||||
<TabWithCopy value="uplink ls sj://cakes" />
|
||||
</template>
|
||||
</OSContainer>
|
||||
</template>
|
||||
</CLIFlowContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from "@/router";
|
||||
|
||||
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
|
||||
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
|
||||
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/listObjectStep.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class ListObject extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
CLIFlowContainer,
|
||||
Icon,
|
||||
OSContainer,
|
||||
TabWithCopy,
|
||||
}
|
||||
})
|
||||
export default class ListObject extends Vue {
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on next button click logic.
|
||||
*/
|
||||
public async onNextClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-object {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,169 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="share-object" />
|
||||
<CLIFlowContainer
|
||||
:on-back-click="onBackClick"
|
||||
:on-next-click="onNextClick"
|
||||
title="Share a link"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon />
|
||||
</template>
|
||||
<template #content class="share-object">
|
||||
<div class="share-object__msg">
|
||||
You can generate a shareable URL and view the geographic distribution of your object via the Link
|
||||
Sharing Service. Run the
|
||||
<b class="share-object__msg__bold">uplink share --url</b>
|
||||
command.
|
||||
<div class="absolute">
|
||||
<VInfo
|
||||
class="share-object__msg__info-button"
|
||||
title="Check out the documentation for more info"
|
||||
is-clickable="true"
|
||||
>
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="share-object__msg__info-button__message">
|
||||
See
|
||||
<a
|
||||
class="share-object__msg__info-button__message__link"
|
||||
href="https://docs.storj.io/dcs/api-reference/uplink-cli/share-command#link-sharing"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
here
|
||||
</a>
|
||||
for specifications on how to select an auth region and restrict the
|
||||
<b class="share-object__msg__info-button__message__bold">uplink share --url</b>
|
||||
command.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
</div>
|
||||
<OSContainer>
|
||||
<template #windows>
|
||||
<TabWithCopy value="./uplink.exe share --url sj://cakes/cheesecake.jpg" />
|
||||
</template>
|
||||
<template #linux>
|
||||
<TabWithCopy value="uplink share --url sj://cakes/cheesecake.jpg" />
|
||||
</template>
|
||||
<template #macos>
|
||||
<TabWithCopy value="uplink share --url sj://cakes/cheesecake.jpg" />
|
||||
</template>
|
||||
</OSContainer>
|
||||
<p class="share-object__msg">
|
||||
Copy the URL that is returned by the
|
||||
<b class="share-object__msg__bold">uplink share --url</b>
|
||||
command and paste into your browser window.
|
||||
</p>
|
||||
<p class="share-object__msg margin-top">
|
||||
You will see your file and a map with real distribution of your files' pieces uploaded to the network.
|
||||
You can share it with anyone you'd like.
|
||||
</p>
|
||||
</template>
|
||||
</CLIFlowContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from "@/router";
|
||||
|
||||
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
|
||||
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
|
||||
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
|
||||
import VInfo from "@/components/common/VInfo.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/listObjectStep.svg";
|
||||
import InfoIcon from "@/../static/images/common/greyInfo.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class ShareObject extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
CLIFlowContainer,
|
||||
Icon,
|
||||
OSContainer,
|
||||
TabWithCopy,
|
||||
VInfo,
|
||||
InfoIcon,
|
||||
}
|
||||
})
|
||||
export default class ShareObject extends Vue {
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.DownloadObject)).path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on next button click logic.
|
||||
*/
|
||||
public async onNextClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.SuccessScreen)).path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.share-object {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
position: relative;
|
||||
|
||||
&__bold {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
|
||||
&__info-button {
|
||||
max-width: 18px;
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
|
||||
&__link {
|
||||
color: #0068dc;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:visited {
|
||||
color: #0068dc;
|
||||
}
|
||||
}
|
||||
|
||||
&__bold {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
::v-deep .info__box {
|
||||
top: calc(100% - 24px);
|
||||
|
||||
&__message {
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,129 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="success-screen" />
|
||||
<div class="success-screen">
|
||||
<Icon />
|
||||
<h1 class="success-screen__title">Wonderful</h1>
|
||||
<p class="success-screen__msg">
|
||||
This was easy right :)
|
||||
<span v-if="!creditCards.length">
|
||||
Wish you all the best with your projects. To upgrade your account and upload up to
|
||||
75TB, just add your card or STORJ tokens.
|
||||
</span>
|
||||
</p>
|
||||
<div class="success-screen__buttons">
|
||||
<VButton
|
||||
class="success-screen__buttons__back"
|
||||
label="Back"
|
||||
height="64px"
|
||||
border-radius="52px"
|
||||
is-grey-blue="true"
|
||||
:on-press="onBackClick"
|
||||
/>
|
||||
<VButton
|
||||
v-if="!creditCards.length"
|
||||
class="success-screen__buttons__upgrade"
|
||||
label="Upgrade"
|
||||
height="64px"
|
||||
border-radius="52px"
|
||||
:on-press="onUpgradeClick"
|
||||
/>
|
||||
<VButton
|
||||
label="Finish"
|
||||
height="64px"
|
||||
border-radius="52px"
|
||||
is-grey-blue="true"
|
||||
:on-press="onFinishClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { CreditCard } from "@/types/payments";
|
||||
import { RouteConfig } from "@/router";
|
||||
import { PAYMENTS_MUTATIONS } from "@/store/modules/payments";
|
||||
|
||||
import VButton from "@/components/common/VButton.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/successStep.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class SuccessScreen extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
Icon,
|
||||
VButton,
|
||||
}
|
||||
})
|
||||
export default class SuccessScreen extends Vue {
|
||||
/**
|
||||
* Returns credit cards from store.
|
||||
*/
|
||||
public get creditCards(): CreditCard[] {
|
||||
return this.$store.state.paymentsModule.creditCards;
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ShareObject)).path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on upgrade button click logic.
|
||||
*/
|
||||
public async onUpgradeClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.ProjectDashboard.path);
|
||||
this.$store.commit(PAYMENTS_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on finish button click logic.
|
||||
*/
|
||||
public async onFinishClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.ProjectDashboard.path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.success-screen {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
background: #fcfcfc;
|
||||
box-shadow: 0 0 32px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 20px;
|
||||
padding: 48px;
|
||||
max-width: 484px;
|
||||
|
||||
&__title {
|
||||
margin: 20px 0;
|
||||
font-family: 'font_Bold', sans-serif;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1px;
|
||||
color: #14142b;
|
||||
}
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 48px;
|
||||
|
||||
&__back,
|
||||
&__upgrade {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,95 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="upload-object" />
|
||||
<CLIFlowContainer
|
||||
:on-back-click="onBackClick"
|
||||
:on-next-click="onNextClick"
|
||||
title="Ready to upload"
|
||||
>
|
||||
<template #content class="upload-object">
|
||||
<p class="upload-object__msg">
|
||||
Here is an example image you can use for your first upload. Just right-click on it and save as
|
||||
<b class="upload-object__msg__bold">cheesecake.jpg</b>
|
||||
to your
|
||||
<b class="upload-object__msg__bold">Desktop.</b>
|
||||
</p>
|
||||
<Icon class="upload-object__icon" />
|
||||
<p class="upload-object__msg">
|
||||
Now to upload the photo, use the copy command.
|
||||
</p>
|
||||
<OSContainer>
|
||||
<template #windows>
|
||||
<TabWithCopy value="./uplink.exe cp <FILE_PATH> sj://cakes" />
|
||||
</template>
|
||||
<template #linux>
|
||||
<TabWithCopy value="uplink cp ~/Desktop/cheesecake.jpg sj://cakes" />
|
||||
</template>
|
||||
<template #macos>
|
||||
<TabWithCopy value="uplink cp ~/Desktop/cheesecake.jpg sj://cakes" />
|
||||
</template>
|
||||
</OSContainer>
|
||||
</template>
|
||||
</CLIFlowContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import { RouteConfig } from "@/router";
|
||||
|
||||
import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
|
||||
import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
|
||||
import TabWithCopy from "@/components/onboardingTour/steps/common/TabWithCopy.vue";
|
||||
|
||||
import Icon from "@/../static/images/onboardingTour/uploadObjectStep.svg";
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class UploadObject extends Vue {}
|
||||
@Component({
|
||||
components: {
|
||||
CLIFlowContainer,
|
||||
OSContainer,
|
||||
TabWithCopy,
|
||||
Icon,
|
||||
}
|
||||
})
|
||||
export default class UploadObject extends Vue {
|
||||
/**
|
||||
* Holds on back button click logic.
|
||||
*/
|
||||
public async onBackClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds on next button click logic.
|
||||
*/
|
||||
public async onNextClick(): Promise<void> {
|
||||
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ListObject)).path);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-object {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__msg {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.15px;
|
||||
color: #4e4b66;
|
||||
|
||||
&__bold {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin: 20px 0 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .flow-container__title {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,11 +5,15 @@
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<VInfo
|
||||
class="team-header-container__title-area__info-button"
|
||||
bold-text="The only project role currently available is Admin, which gives full access to the project."
|
||||
>
|
||||
<InfoIcon class="team-header-container__title-area__info-button__image" />
|
||||
<VInfo class="team-header-container__title-area__info-button">
|
||||
<template #icon>
|
||||
<InfoIcon />
|
||||
</template>
|
||||
<template #message>
|
||||
<p class="team-header-container__title-area__info-button__message">
|
||||
The only project role currently available is Admin, which gives full access to the project.
|
||||
</p>
|
||||
</template>
|
||||
</VInfo>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
@ -256,6 +260,13 @@ export default class HeaderArea extends Vue {
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: #586c86;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
10
web/satellite/static/images/onboardingTour/bucketStep.svg
Normal file
10
web/satellite/static/images/onboardingTour/bucketStep.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="92" height="80" viewBox="0 0 92 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H10V10H0V0Z" fill="#FF458B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.2856 8H86.2856V22H72.2856V8Z" fill="#0149FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5779 24.585H12L20.6367 73.151H20.6554C21.1141 76.9611 29.9528 80.0001 40.789 80.0001C51.6252 80.0001 60.4639 76.9611 60.9226 73.151H60.9412L69.5779 24.585Z" fill="#0149FF"/>
|
||||
<ellipse cx="40.789" cy="24.2736" rx="28.789" ry="10.2736" fill="#00127F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 34.5384C41.5984 34.5443 41.1947 34.5473 40.789 34.5473C34.5237 34.5473 28.7259 33.8331 24 32.6204V24.4287H42V34.5384Z" fill="#00E567"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1428 3.85742H49.1428V17.8574H35.1428V3.85742Z" fill="#FFC600"/>
|
||||
<circle cx="73.7142" cy="34.2857" r="18.2857" fill="#D9E0EE"/>
|
||||
<path d="M74.961 27.7009C74.961 27.0123 74.4028 26.4541 73.7142 26.4541C73.0256 26.4541 72.4675 27.0123 72.4675 27.7009V33.0385H67.1298C66.4412 33.0385 65.8831 33.5967 65.8831 34.2853C65.8831 34.9738 66.4412 35.532 67.1298 35.532H72.4675V40.8697C72.4675 41.5583 73.0256 42.1164 73.7142 42.1164C74.4028 42.1164 74.961 41.5583 74.961 40.8697V35.532H80.2986C80.9872 35.532 81.5454 34.9738 81.5454 34.2853C81.5454 33.5967 80.9872 33.0385 80.2986 33.0385H74.961V27.7009Z" fill="#00127F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,11 @@
|
||||
<svg width="91" height="108" viewBox="0 0 91 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2515 30.6426L47.1303 50.5213V97.6172H0V30.6426L27.2515 30.6426Z" fill="#0149FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2555 50.5215L27.2555 30.6427L47.1343 50.5215L27.2555 50.5215Z" fill="#00127F"/>
|
||||
<path d="M72.2774 16.4141L81.1709 25.3076L90.0644 16.4141L81.1709 7.52063L72.2774 16.4141Z" fill="#FFC600"/>
|
||||
<path d="M50.1523 26.8998V34.5859H57.8385V26.8998H50.1523Z" fill="#00E567"/>
|
||||
<path d="M30.7741 6.53187L36.209 11.9668L41.6439 6.53187L36.209 1.09694L30.7741 6.53187Z" fill="#FF458B"/>
|
||||
<path d="M14 16.933V21.8242H18.8912V16.933H14Z" fill="#0149FF"/>
|
||||
<circle cx="47.2857" cy="89.3013" r="18.2857" fill="#D9E0EE"/>
|
||||
<path d="M41 90.2168L47 96.2168L53 90.2168" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M47 96.2164V81.8164" stroke="#00127F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,8 @@
|
||||
<svg width="87" height="80" viewBox="0 0 87 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H10V10H0V0Z" fill="#FF458B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.2856 8H86.2856V22H72.2856V8Z" fill="#0149FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5779 24.585H12L20.6367 73.151H20.6554C21.1141 76.9611 29.9528 80.0001 40.789 80.0001C51.6252 80.0001 60.4639 76.9611 60.9226 73.151H60.9412L69.5779 24.585Z" fill="#0149FF"/>
|
||||
<ellipse cx="40.789" cy="24.2736" rx="28.789" ry="10.2736" fill="#00127F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 34.5384C41.5984 34.5443 41.1947 34.5473 40.789 34.5473C34.5237 34.5473 28.7259 33.8331 24 32.6204V24.4287H42V34.5384Z" fill="#00E567"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1428 3.85742H49.1428V17.8574H35.1428V3.85742Z" fill="#FFC600"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 919 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 478 KiB |
@ -0,0 +1,6 @@
|
||||
<svg width="77" height="36" viewBox="0 0 77 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M58.2774 16.501L67.1709 25.3945L76.0644 16.501L67.1709 7.60754L58.2774 16.501Z" fill="#FFC600"/>
|
||||
<path d="M36.1531 26.9877V34.6738H43.8392V26.9877H36.1531Z" fill="#00E567"/>
|
||||
<path d="M16.7741 6.61976L22.209 12.0547L27.6439 6.61976L22.209 1.18483L16.7741 6.61976Z" fill="#FF458B"/>
|
||||
<path d="M0 17.0209L0 21.9121H4.89119V17.0209H0Z" fill="#0149FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 476 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 104 KiB |
@ -4,9 +4,7 @@ exports[`Team HeaderArea renders correctly 1`] = `
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<vinfo-stub title="" text="" boldtext="The only project role currently available is Admin, which gives full access to the project." buttonlabel="" class="team-header-container__title-area__info-button">
|
||||
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
|
||||
</vinfo-stub>
|
||||
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
|
||||
@ -27,9 +25,7 @@ exports[`Team HeaderArea renders correctly with 1 selected user and delete click
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<vinfo-stub title="" text="" boldtext="The only project role currently available is Admin, which gives full access to the project." buttonlabel="" class="team-header-container__title-area__info-button">
|
||||
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
|
||||
</vinfo-stub>
|
||||
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
|
||||
@ -53,9 +49,7 @@ exports[`Team HeaderArea renders correctly with 2 selected users and delete clic
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<vinfo-stub title="" text="" boldtext="The only project role currently available is Admin, which gives full access to the project." buttonlabel="" class="team-header-container__title-area__info-button">
|
||||
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
|
||||
</vinfo-stub>
|
||||
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
|
||||
@ -79,9 +73,7 @@ exports[`Team HeaderArea renders correctly with opened Add team member popup 1`]
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<vinfo-stub title="" text="" boldtext="The only project role currently available is Admin, which gives full access to the project." buttonlabel="" class="team-header-container__title-area__info-button">
|
||||
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
|
||||
</vinfo-stub>
|
||||
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
|
||||
@ -102,9 +94,7 @@ exports[`Team HeaderArea renders correctly with selected users 1`] = `
|
||||
<div class="team-header-container">
|
||||
<div class="team-header-container__title-area">
|
||||
<h1 class="team-header-container__title-area__title">Project Members</h1>
|
||||
<vinfo-stub title="" text="" boldtext="The only project role currently available is Admin, which gives full access to the project." buttonlabel="" class="team-header-container__title-area__info-button">
|
||||
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
|
||||
</vinfo-stub>
|
||||
<vinfo-stub title="" buttonlabel="" class="team-header-container__title-area__info-button"></vinfo-stub>
|
||||
</div>
|
||||
<div class="team-header-container__wrapper">
|
||||
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user