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

web/satellite: Minor access grant updates

Browse Source 
This change is a copy of the stale Github PR at https://github.com/storj/storj/pull/4972
It fixes some of the remaining minor issues outlined in https://github.com/storj/storj/issues/4966

Change-Id: Ide973b1b23440bf37a19af8aa6ead39b470ceb25
This commit is contained in:
cl-mitch 2022-08-15 16:44:52 -04:00 committed by Storj Robot
parent cf4bfbcf2d
commit c255d6949f
4 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/satellite/src/components/accessGrants/CreateAccessModal.vue
View File

@ -5,7 +5,7 @@
<div class="access-grant">
<div class="access-grant__modal-container">
<!-- ********* Create Form Modal ********* -->
<form v-if="accessGrantStep === 'create'">
<form v-if="isCreateStep">
<CreateFormModal
:checked-type="checkedType"
@close-modal="onCloseClick"
@ -15,7 +15,7 @@
/>
</form>
<!-- ********* Encrypt Form Modal ********* -->
<form v-if="accessGrantStep === 'encrypt'">
<form v-if="isEncryptStep">
<EncryptFormModal
@close-modal="onCloseClick"
@create-access="createAccessGrant"
@ -23,7 +23,7 @@
/>
</form>
<!-- ********* Grant Created Modal ********* -->
<form v-if="accessGrantStep === 'grantCreated'">
<form v-if="isGrantCreatedStep">
<GrantCreatedModal
:checked-type="checkedType"
:restricted-key="restrictedKey"
@ -288,6 +288,19 @@ export default class CreateAccessModal extends Vue {
private get notAfterPermission(): Date | null {
return this.$store.state.accessGrantsModule.permissionNotAfter;
}
/**
* Returns which step should be rendered.
*/
public get isCreateStep(): boolean {
return this.accessGrantStep === 'create';
}
public get isEncryptStep(): boolean {
return this.accessGrantStep === 'encrypt';
}
public get isGrantCreatedStep(): boolean {
return this.accessGrantStep === 'grantCreated';
}
}
</script>
@ -406,4 +419,4 @@ export default class CreateAccessModal extends Vue {
padding: 350px 0 20px;
}
}
</style>
</style>

23
web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
View File

@ -218,6 +218,17 @@ import DurationSelection from '@/components/accessGrants/permissions/DurationSel
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
type ShowPermissions = {
show: boolean,
position: string
}
type Permissions = {
Read: boolean,
Write: boolean,
List: boolean,
Delete: boolean
}
// @vue/component
@Component({
@ -241,12 +252,12 @@ export default class CreateFormModal extends Vue {
@Prop({ default: '' })
private checkedType: string;
public showAllPermissions = {show: false, position: "up"};
public showAllPermissions: ShowPermissions = {show: false, position: "up"};
private accessName = '';
private selectedPermissions : string[] = [];
private allPermissionsClicked = false;
private permissionsList = ["Read","Write","List","Delete"];
private checkedPermissions = {Read: false, Write: false, List: false, Delete: false};
private permissionsList: string[] = ["Read","Write","List","Delete"];
private checkedPermissions: Permissions = {Read: false, Write: false, List: false, Delete: false};
private accessGrantList = this.accessGrantsList;
private addDateSelected = false;
public tooltipHover = '';
@ -647,7 +658,7 @@ export default class CreateFormModal extends Vue {
}
.s3-tooltip {
top: 175px;
top: 188px;
left: 121px;
@include tooltip-container;
@ -662,7 +673,7 @@ export default class CreateFormModal extends Vue {
}
.api-tooltip {
top: 204px;
top: 215px;
left: 96px;
@include tooltip-container;
@ -688,4 +699,4 @@ export default class CreateFormModal extends Vue {
}
}
}
</style>
</style>

8
web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
View File

@ -6,7 +6,7 @@
<div class="access-grant__modal-container__header-container">
<h2 class="access-grant__modal-container__header-container__title">Select Encryption</h2>
<div
class="access-grant__modal-container__header-container__close-cross-container"
class="access-grant__modal-container__header-container__close-cross-container"
@click="onCloseClick"
>
<CloseCrossIcon />
@ -203,7 +203,7 @@ export default class GrantCreatedModal extends Vue {
this.isPassphraseDownloaded = false;
this.passphrase = '';
if (this.encryptSelect === "generate") {
if (this.encryptSelect === 'generate') {
this.passphrase = generateMnemonic();
}
}
@ -211,7 +211,7 @@ export default class GrantCreatedModal extends Vue {
public backAction(): void {
this.$emit('backAction')
}
public onCopyPassphraseClick(): void {
this.$copyText(this.passphrase);
this.isPassphraseCopied = true;
@ -483,4 +483,4 @@ export default class GrantCreatedModal extends Vue {
}
}
}
</style>
</style>

4
web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
View File

@ -241,7 +241,7 @@ export default class GrantCreatedModal extends Vue {
* Global isLoading Variable
**/
private isLoading = false;
private checkedText = {access: ['Access Grant as it','information icon to learn more.'], s3: ['S3 credentials as they','Learn More button to access the documentation.'],api: ['Satellite Address and API Key as they','information icons to learn more.']};
private checkedText: Record<string, string[]> = {access: ['Access Grant as it','information icon to learn more.'], s3: ['S3 credentials as they','Learn More button to access the documentation.'],api: ['Satellite Address and API Key as they','information icons to learn more.']};
public currentDate = new Date().toISOString();
public satelliteAddress: string = MetaUtils.getMetaContent('satellite-nodeurl');
@ -494,4 +494,4 @@ export default class GrantCreatedModal extends Vue {
}
}
}
</style>
</style>