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

web/satellite: split AG wizard's result step into two

Browse Source 
WHAT:
split AG wizard's result step into AG view and s3 gateway credentials view

WHY:
better user experience

Change-Id: I848c5fc99488258bdc9ff1210ba7ba1540f34941
This commit is contained in:
Vitalii Shpital 2021-04-05 22:19:01 +03:00
parent f3df411b41
commit 288a7e8ee7
12 changed files with 475 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,24 +4,25 @@
<template>
<div class="progress-bar">
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }">Name Access</p>
<div class="progress-bar__item__line" :class="{ blue: isNameStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isNameStep }">Name Access</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPermissionsStep || isPassphraseStep || isResultStep }">Permissions</p>
<div class="progress-bar__item__line" :class="{ blue: isPermissionsStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPermissionsStep }">Permissions</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isPassphraseStep || isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPassphraseStep || isResultStep }">Passphrase</p>
<div class="progress-bar__item__line" :class="{ blue: isPassphraseStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPassphraseStep }">Passphrase</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isResultStep }"/>
<div class="progress-bar__item__line" :class="{ blue: isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isResultStep }">Access Grant</p>
</div>
<div class="progress-bar__item" v-if="isGatewayStep">
<div class="progress-bar__item__line" :class="{ blue: isGatewayStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isGatewayStep }">S3 Gateway</p>
</div>
</div>
</template>
@ -59,6 +60,13 @@ export default class ProgressBar extends Vue {
public get isResultStep(): boolean {
return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.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;
}
}
</script>
@ -70,19 +78,18 @@ export default class ProgressBar extends Vue {
align-items: flex-start;
justify-content: flex-start;
background: #f5f6fa;
height: 380px;
border-radius: 6px 0 0 6px;
&__item {
display: flex;
align-items: center;
&__circle {
width: 20px;
height: 20px;
border-radius: 10px;
&__line {
width: 7px;
height: 75px;
border-radius: 40px;
background: #dcdde1;
margin-right: 10px;
margin-right: 20px;
}
&__label {
@ -95,13 +102,6 @@ export default class ProgressBar extends Vue {
white-space: nowrap;
}
}
&__progress {
background: #dcdde1;
width: 4px;
height: 33%;
margin-left: 8px;
}
}
.checked {

15
web/satellite/src/components/accessGrants/steps/CreateAccessNameStep.vue
View File

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

15
web/satellite/src/components/accessGrants/steps/CreateAccessPassphraseStep.vue
View File

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

15
web/satellite/src/components/accessGrants/steps/CreateAccessPermissionsStep.vue
View File

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

13
web/satellite/src/components/accessGrants/steps/CreateAccessUplinkStep.vue
View File

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

389
web/satellite/src/components/accessGrants/steps/GatewayStep.vue Normal file
View File

@ -0,0 +1,389 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="gateway" :class="{ 'border-radius': isOnboardingTour }">
<BackIcon class="gateway__back-icon" @click="onBackClick"/>
<h1 class="gateway__title">S3 Gateway</h1>
<div class="gateway__container">
<h3 class="gateway__container__title">
Generate S3 Gateway Credentials
</h3>
<p class="gateway__container__disclaimer">
By generating gateway credentials, you are opting in to Server-side encryption
</p>
<VButton
v-if="!areKeysVisible"
class="gateway__container__button"
label="Generate Credentials"
width="calc(100% - 4px)"
height="48px"
:is-blue-white="true"
:on-press="onGenerateCredentialsClick"
:is-disabled="isLoading"
/>
<div class="gateway__container__keys-area" v-else>
<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>
</div>
<div class="gateway__container__keys-area__key">
<p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.accessKeyId }}</p>
<VButton
class="gateway__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopyAccessClick"
/>
</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>
</div>
<div class="gateway__container__keys-area__key">
<p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.secretKey }}</p>
<VButton
class="gateway__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopySecretClick"
/>
</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>
</div>
<div class="gateway__container__keys-area__key">
<p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.endpoint }}</p>
<VButton
class="gateway__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopyEndpointClick"
/>
</div>
</div>
</div>
<VButton
label="Done"
width="100%"
height="48px"
:on-press="onDoneClick"
:is-disabled="!gatewayCredentials.accessKeyId"
/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import VInfo from '@/components/common/VInfo.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import InfoIcon from '@/../static/images/accessGrants/info.svg';
import WarningIcon from '@/../static/images/accessGrants/warning.svg';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import HideIcon from '@/../static/images/common/BlackArrowHide.svg';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { GatewayCredentials } from '@/types/accessGrants';
@Component({
components: {
BackIcon,
WarningIcon,
VButton,
ExpandIcon,
HideIcon,
VInfo,
InfoIcon,
},
})
export default class GatewayStep extends Vue {
private key: string = '';
private restrictedKey: string = '';
private access: string = '';
public areKeysVisible: boolean = false;
public isLoading: boolean = false;
/**
* Lifecycle hook after initial render.
* Sets local access from props value.
*/
public mounted(): void {
if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
}
this.access = this.$route.params.access;
this.key = this.$route.params.key;
this.restrictedKey = this.$route.params.restrictedKey;
}
/**
* Holds on copy access key button click logic.
* Copies key to clipboard.
*/
public onCopyAccessClick(): void {
this.$copyText(this.gatewayCredentials.accessKeyId);
this.$notify.success('Key was copied successfully');
}
/**
* Holds on copy secret key button click logic.
* Copies secret to clipboard.
*/
public onCopySecretClick(): void {
this.$copyText(this.gatewayCredentials.secretKey);
this.$notify.success('Secret was copied successfully');
}
/**
* Holds on copy endpoint button click logic.
* Copies endpoint to clipboard.
*/
public onCopyEndpointClick(): void {
this.$copyText(this.gatewayCredentials.endpoint);
this.$notify.success('Endpoint was copied successfully');
}
/**
* Holds on back button click logic.
* 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: {
access: this.access,
key: this.key,
restrictedKey: this.restrictedKey,
},
});
}
/**
* Holds on done button click logic.
* Proceed to upload data step.
*/
public onDoneClick(): void {
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
}
/**
* Holds on generate credentials button click logic.
* Generates gateway credentials.
*/
public async onGenerateCredentialsClick(): Promise<void> {
if (this.isLoading) return;
this.isLoading = true;
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
await this.$notify.success('Gateway credentials were generated successfully');
this.areKeysVisible = true;
} catch (error) {
await this.$notify.error(error.message);
}
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.
*/
public get gatewayCredentials(): GatewayCredentials {
return this.$store.state.accessGrantsModule.gatewayCredentials;
}
}
</script>
<style scoped lang="scss">
.gateway {
height: calc(100% - 60px);
padding: 30px 65px;
max-width: 475px;
min-width: 475px;
font-family: 'font_regular', sans-serif;
font-style: normal;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
background-color: #fff;
border-radius: 0 6px 6px 0;
&__back-icon {
position: absolute;
top: 30px;
left: 65px;
cursor: pointer;
}
&__title {
font-family: 'font_bold', sans-serif;
font-weight: bold;
font-size: 22px;
line-height: 27px;
color: #000;
margin: 0;
}
&__container {
background: #f5f6fa;
border-radius: 6px;
padding: 50px;
margin: 55px 0 40px 0;
width: calc(100% - 100px);
&__title {
font-family: 'font_bold', sans-serif;
font-size: 22px;
line-height: 27px;
color: #000;
margin: 0 0 25px 0;
text-align: center;
}
&__disclaimer {
font-size: 16px;
line-height: 28px;
color: #000;
margin: 0 0 25px 0;
text-align: center;
}
&__keys-area {
display: flex;
flex-direction: column;
align-items: flex-start;
&__label-area {
display: flex;
align-items: center;
margin: 20px 0 10px 0;
&__label {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 21px;
color: #354049;
margin: 0;
}
&__info-button {
max-height: 20px;
cursor: pointer;
margin-left: 10px;
&:hover {
.ag-info-rect {
fill: #fff;
}
.ag-info-path {
fill: #2683ff;
}
}
}
}
&__key {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 9px;
padding: 10px;
width: calc(100% - 20px);
max-width: calc(100% - 20px);
border: 1px solid rgba(56, 75, 101, 0.4);
background-color: #fff;
&__value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
&__button {
min-width: 66px;
min-height: 30px;
margin-left: 10px;
}
}
}
}
}
.border-radius {
border-radius: 6px;
}
/deep/ .info__message-box {
background-image: url('../../../../static/images/accessGrants/MessageBox.png');
background-repeat: no-repeat;
min-height: 65px;
min-width: 200px;
width: 200px;
bottom: 23px;
left: 59px;
padding: 10px 20px 20px 20px;
word-break: break-word;
&__text {
text-align: left;
font-size: 13px;
line-height: 17px;
&__bold-text {
font-family: 'font_medium', sans-serif;
color: #354049;
}
}
}
</style>

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

@ -27,86 +27,16 @@
/>
</div>
</div>
<div class="generate-grant__gateway-area" v-if="isGatewayDropdownVisible">
<div class="generate-grant__gateway-area__toggle" @click="toggleCredentialsVisibility">
<h3 class="generate-grant__gateway-area__toggle__label">Gateway Credentials</h3>
<ExpandIcon v-if="!areGatewayCredentialsVisible"/>
<HideIcon v-else/>
</div>
<div class="generate-grant__gateway-area__container" v-if="areGatewayCredentialsVisible">
<div class="generate-grant__gateway-area__container__beta">
<p class="generate-grant__gateway-area__container__beta__message">This feature is currently in Beta</p>
<a
class="generate-grant__gateway-area__container__beta__link"
href="https://forum.storj.io/t/gateway-mt-beta-looking-for-testers/11324"
target="_blank"
rel="noopener noreferrer"
>
Learn More >
</a>
</div>
<div class="generate-grant__gateway-area__container__warning" v-if="!areKeysVisible">
<h3 class="generate-grant__gateway-area__container__warning__title">
Using Gateway Credentials Enables Server-Side Encryption.
</h3>
<p class="generate-grant__gateway-area__container__warning__disclaimer">
By generating gateway credentials, you are opting in to Server-side encryption
</p>
<VButton
class="generate-grant__gateway-area__container__warning__button"
label="Generate Gateway Credentials"
width="calc(100% - 4px)"
height="48px"
:is-blue-white="true"
:on-press="onGenerateCredentialsClick"
:is-disabled="isLoading"
/>
</div>
<div class="generate-grant__gateway-area__container__keys-area" v-else>
<h3 class="generate-grant__gateway-area__container__keys-area__label">Access Key</h3>
<div class="generate-grant__gateway-area__container__keys-area__key">
<p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.accessKeyId }}</p>
<VButton
class="generate-grant__gateway-area__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopyAccessClick"
/>
</div>
<h3 class="generate-grant__gateway-area__container__keys-area__label">Secret Key</h3>
<div class="generate-grant__gateway-area__container__keys-area__key">
<p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.secretKey }}</p>
<VButton
class="generate-grant__gateway-area__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopySecretClick"
/>
</div>
<h3 class="generate-grant__gateway-area__container__keys-area__label">End Point</h3>
<div class="generate-grant__gateway-area__container__keys-area__key">
<p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.endpoint }}</p>
<VButton
class="generate-grant__gateway-area__container__keys-area__key__button"
label="Copy"
width="66px"
height="30px"
:on-press="onCopyEndpointClick"
/>
</div>
</div>
</div>
</div>
<VButton
class="generate-grant__done-button"
:class="{ 'extra-margin-top': !(isOnboardingTour || areGatewayCredentialsVisible) }"
label="Done"
width="100%"
height="48px"
:on-press="onDoneClick"
/>
<p class="generate-grant__gateway-link" v-if="isGatewayLinkVisible" @click="navigateToGatewayStep">
Generate S3 Gateway Credentials
</p>
</div>
</template>
@ -121,9 +51,6 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import HideIcon from '@/../static/images/common/BlackArrowHide.svg';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { GatewayCredentials } from '@/types/accessGrants';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
import { MetaUtils } from '@/utils/meta';
@Component({
@ -140,10 +67,7 @@ export default class ResultStep extends Vue {
private restrictedKey: string = '';
public access: string = '';
public isGatewayDropdownVisible: boolean = false;
public areGatewayCredentialsVisible: boolean = false;
public areKeysVisible: boolean = false;
public isLoading: boolean = false;
public isGatewayLinkVisible: boolean = false;
/**
* Lifecycle hook after initial render.
@ -161,14 +85,7 @@ export default class ResultStep extends Vue {
this.restrictedKey = this.$route.params.restrictedKey;
const requestURL = MetaUtils.getMetaContent('gateway-credentials-request-url');
if (requestURL) this.isGatewayDropdownVisible = true;
}
/**
* Toggles gateway credentials section visibility.
*/
public toggleCredentialsVisibility(): void {
this.areGatewayCredentialsVisible = !this.areGatewayCredentialsVisible;
if (requestURL) this.isGatewayLinkVisible = true;
}
/**
@ -180,33 +97,6 @@ export default class ResultStep extends Vue {
this.$notify.success('Token was copied successfully');
}
/**
* Holds on copy access key button click logic.
* Copies key to clipboard.
*/
public onCopyAccessClick(): void {
this.$copyText(this.gatewayCredentials.accessKeyId);
this.$notify.success('Key was copied successfully');
}
/**
* Holds on copy secret key button click logic.
* Copies secret to clipboard.
*/
public onCopySecretClick(): void {
this.$copyText(this.gatewayCredentials.secretKey);
this.$notify.success('Secret was copied successfully');
}
/**
* Holds on copy endpoint button click logic.
* Copies endpoint to clipboard.
*/
public onCopyEndpointClick(): void {
this.$copyText(this.gatewayCredentials.endpoint);
this.$notify.success('Endpoint was copied successfully');
}
/**
* Holds on back button click logic.
* Redirects to previous step.
@ -254,30 +144,31 @@ export default class ResultStep extends Vue {
}
/**
* Holds on generate credentials button click logic.
* Generates gateway credentials.
* Holds on link click logic.
* Proceed to gateway step.
*/
public async onGenerateCredentialsClick(): Promise<void> {
this.isLoading = true;
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
await this.$notify.success('Gateway credentials were generated successfully');
this.areKeysVisible = true;
const satelliteName: string = MetaUtils.getMetaContent('satellite-name');
this.$segment.track(SegmentEvent.GENERATE_GATEWAY_CREDENTIALS_CLICKED, {
satelliteName: satelliteName,
email: this.$store.getters.user.email,
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,
},
});
this.isLoading = false;
} catch (error) {
await this.$notify.error(error.message);
this.isLoading = false;
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.GatewayStep)).name,
params: {
access: this.access,
key: this.key,
restrictedKey: this.restrictedKey,
},
});
}
/**
@ -287,13 +178,6 @@ export default class ResultStep extends Vue {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns generated gateway credentials from store.
*/
public get gatewayCredentials(): GatewayCredentials {
return this.$store.state.accessGrantsModule.gatewayCredentials;
}
/**
* Returns amount of access grants from store.
*/
@ -398,130 +282,26 @@ export default class ResultStep extends Vue {
}
}
&__gateway-area {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
&__toggle {
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
&__label {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 23px;
color: #49515c;
margin: 0 15px 0 0;
}
}
&__container {
width: 100%;
&__beta {
background-color: #effff9;
border: 1px solid #1a9666;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
margin-top: 20px;
&__message {
font-weight: bold;
font-size: 14px;
line-height: 19px;
color: #000;
margin: 0;
}
&__link {
font-weight: bold;
font-size: 14px;
line-height: 19px;
color: #1a9666;
}
}
&__warning {
margin-top: 20px;
background: #f5f6fa;
border-radius: 6px;
padding: 40px 50px;
width: calc(100% - 100px);
&__title {
font-family: 'font_bold', sans-serif;
font-size: 18px;
line-height: 24px;
color: #000;
margin: 0 0 20px 0;
text-align: center;
}
&__disclaimer {
font-size: 16px;
line-height: 28px;
color: #000;
margin: 0 0 25px 0;
text-align: center;
}
}
&__keys-area {
display: flex;
flex-direction: column;
align-items: flex-start;
&__label {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 21px;
color: #354049;
margin: 20px 0 10px 0;
}
&__key {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 9px;
padding: 10px;
width: calc(100% - 20px);
border: 1px solid rgba(56, 75, 101, 0.4);
&__value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
&__button {
min-width: 66px;
min-height: 30px;
margin-left: 10px;
}
}
}
}
}
&__done-button {
margin-top: 20px;
}
&__gateway-link {
font-weight: 600;
font-size: 16px;
line-height: 23px;
text-align: center;
color: #0068dc;
margin: 30px 0 0 0;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
.border-radius {
border-radius: 6px;
}
.extra-margin-top {
margin-top: 76px;
}
</style>

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

@ -90,7 +90,7 @@ export default class CreateAccessGrantStep extends Vue {
display: flex;
align-items: center;
justify-content: center;
margin-left: -195px;
margin-left: -205px;
}
}
@ -99,11 +99,11 @@ export default class CreateAccessGrantStep extends Vue {
}
.passphrase-margin {
margin-left: -180px;
margin-left: -190px;
}
.result-margin {
margin-left: -175px;
margin-left: -195px;
}
.cli-margin {

2
web/satellite/src/components/project/ProjectDashboard.vue
View File

@ -81,7 +81,7 @@ export default class ProjectDashboard extends Vue {
<style scoped lang="scss">
.dashboard-area {
padding: 50px 30px 30px 30px;
padding: 50px 30px 60px 30px;
font-family: 'font_regular', sans-serif;
&__title {

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

@ -9,6 +9,7 @@ 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';
@ -78,6 +79,7 @@ export abstract class RouteConfig {
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
@ -89,6 +91,7 @@ export abstract class RouteConfig {
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');
// objects child paths.
public static CreatePassphrase = new NavigationLink('create-passphrase', 'Objects Create Passphrase');
@ -236,6 +239,12 @@ export const router = new Router({
component: ResultStep,
props: true,
},
{
path: RouteConfig.AccessGrantGateway.path,
name: RouteConfig.AccessGrantGateway.name,
component: GatewayStep,
props: true,
},
],
},
],
@ -289,6 +298,12 @@ export const router = new Router({
component: ResultStep,
props: true,
},
{
path: RouteConfig.GatewayStep.path,
name: RouteConfig.GatewayStep.name,
component: GatewayStep,
props: true,
},
{
path: RouteConfig.CLIStep.path,
name: RouteConfig.CLIStep.name,

BIN
web/satellite/static/images/accessGrants/MessageBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

4
web/satellite/static/images/accessGrants/info.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="ag-info-rect" width="18" height="18" rx="9" fill="#93A1AF"/>
<path class="ag-info-path" fill-rule="evenodd" clip-rule="evenodd" d="M9.00293 13.333C9.55522 13.333 10.0029 12.8853 10.0029 12.333L10.0029 8.99968C10.0029 8.44739 9.55522 7.99968 9.00293 7.99968C8.45065 7.99968 8.00293 8.44739 8.00293 8.99968L8.00293 12.333C8.00293 12.8853 8.45065 13.333 9.00293 13.333ZM8.99902 6.99975C9.68938 6.99975 10.249 6.44011 10.249 5.74975C10.249 5.0594 9.68938 4.49975 8.99902 4.49975C8.30867 4.49975 7.74902 5.0594 7.74902 5.74975C7.74902 6.44011 8.30867 6.99975 8.99902 6.99975Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 711 B