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

web/satellite: create access grant: generate gateway credentials step

Browse Source 
WHAT:
generate gateway credentials step for create access grant flow

WHY:
part of the flow

Change-Id: I6496712b43f78a818ba0582b586cfae3a44683e6
This commit is contained in:
VitaliiShpital 2020-11-26 15:03:32 +02:00 committed by Vitalii Shpital
parent bb7677a85f
commit 0771cdb0b1
2 changed files with 174 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
satellite/console/consoleweb/server.go
View File

@ -267,7 +267,7 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
cspValues := []string{
"default-src 'self'",
"connect-src 'self' api.segment.io *.google-analytics.com",
"connect-src 'self' api.segment.io *.google-analytics.com " + server.config.GatewayCredentialsRequestURL,
"frame-ancestors " + server.config.FrameAncestors,
"frame-src 'self' *.stripe.com *.googletagmanager.com",
"img-src 'self' data: *.customer.io *.googletagmanager.com *.google-analytics.com",

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

@ -23,31 +23,69 @@
label="Copy"
width="66px"
height="30px"
:on-press="onCopyClick"
:on-press="onCopyGrantClick"
/>
</div>
</div>
<div class="generate-grant__gateway-area">
<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">
<h3 class="generate-grant__gateway-area__container__title">
Using Gateway Credentials Enables Server-Side Encryption.
</h3>
<p class="generate-grant__gateway-area__container__disclaimer">
By generating gateway credentials, you are opting in to Server-side encryption
</p>
<VButton
class="generate-grant__gateway-area__container__button"
label="Generate Gateway Credentials"
width="100%"
height="48px"
:on-press="onGenerateCredentialsClick"
is-disabled="true"
/>
<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="100%"
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
@ -71,6 +109,9 @@ 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 { MetaUtils } from '@/utils/meta';
@Component({
components: {
@ -83,7 +124,10 @@ import { RouteConfig } from '@/router';
})
export default class ResultStep extends Vue {
public access: string = '';
public isGatewayDropdownVisible: boolean = false;
public areGatewayCredentialsVisible: boolean = false;
public areKeysVisible: boolean = false;
public isLoading: boolean = false;
/**
* Lifecycle hook after initial render.
@ -95,6 +139,9 @@ export default class ResultStep extends Vue {
}
this.access = this.$route.params.access;
const requestURL = MetaUtils.getMetaContent('gateway-credentials-request-url');
if (requestURL) this.isGatewayDropdownVisible = true;
}
/**
@ -105,14 +152,41 @@ export default class ResultStep extends Vue {
}
/**
* Holds on copy button click logic.
* Holds on copy access grant button click logic.
* Copies token to clipboard.
*/
public onCopyClick(): void {
public onCopyGrantClick(): void {
this.$copyText(this.access);
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.
@ -154,8 +228,26 @@ export default class ResultStep extends Vue {
* Holds on generate credentials button click logic.
* Generates gateway credentials.
*/
public onGenerateCredentialsClick(): void {
return;
public async onGenerateCredentialsClick(): Promise<void> {
this.isLoading = true;
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, this.access);
await this.$notify.success('Gateway credentials were generated successfully');
this.areKeysVisible = true;
this.isLoading = false;
} catch (error) {
await this.$notify.error(error.message);
this.isLoading = false;
}
}
/**
* Returns generated gateway credentials from store.
*/
public get gatewayCredentials(): GatewayCredentials {
return this.$store.state.accessGrantsModule.gatewayCredentials;
}
/**
@ -266,11 +358,13 @@ export default class ResultStep extends Vue {
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;
@ -282,27 +376,68 @@ export default class ResultStep extends Vue {
}
&__container {
background: #f5f6fa;
border-radius: 6px;
padding: 40px 50px;
width: calc(100% - 100px);
margin-top: 30px;
width: 100%;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 18px;
line-height: 24px;
color: #000;
margin: 0 0 20px 0;
text-align: center;
&__warning {
margin-top: 30px;
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;
}
}
&__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;
}
}
}
}
}