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

web/satellite: encryption info step for new access grant flow

Browse Source 
Added middleware info step in case if 'S3' access type is selected.
It's possible to toggle checkbox to not show it again in current browser,

Change-Id: I78b297b373f14715dc67b247baa8e684bea3a265
This commit is contained in:
Vitalii 2023-02-16 13:17:40 +02:00 committed by Storj Robot
parent f3c5cd9df2
commit fa2f7336cd
5 changed files with 166 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
View File

@ -15,13 +15,18 @@
:selected-access-types="selectedAccessTypes"
:name="accessName"
:set-name="setAccessName"
:on-continue="setSecondStepBasedOnAccessType"
/>
<EncryptionInfoStep
v-if="step === CreateAccessStep.EncryptionInfo"
:on-back="() => setStep(CreateAccessStep.CreateNewAccess)"
:on-continue="() => setStep(CreateAccessStep.ChoosePermission)"
/>
<ChoosePermissionStep
v-if="step === CreateAccessStep.ChoosePermission"
:on-select-permission="selectPermissions"
:selected-permissions="selectedPermissions"
:on-back="() => setStep(CreateAccessStep.CreateNewAccess)"
:on-back="setFirstStepBasedOnAccessType"
:on-continue="() => setStep(CreateAccessStep.AccessEncryption)"
:selected-buckets="selectedBuckets"
:on-select-bucket="selectBucket"
@ -85,6 +90,7 @@ import {
} from '@/types/createAccessGrant';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import VModal from '@/components/common/VModal.vue';
import CreateNewAccessStep from '@/components/accessGrants/newCreateFlow/steps/CreateNewAccessStep.vue';
@ -92,6 +98,7 @@ import ChoosePermissionStep from '@/components/accessGrants/newCreateFlow/steps/
import AccessEncryptionStep from '@/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue';
import EnterPassphraseStep from '@/components/accessGrants/newCreateFlow/steps/EnterPassphraseStep.vue';
import PassphraseGeneratedStep from '@/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue';
import EncryptionInfoStep from '@/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue';
const router = useRouter();
const route = useRoute();
@ -294,6 +301,40 @@ function setStep(stepArg: CreateAccessStep): void {
step.value = stepArg;
}
/**
* Sets second step based on selected access type.
* If access types include 'S3' and local storage value is false we set 'Encryption info step'.
* If not then we set regular second step (Permissions).
*/
function setSecondStepBasedOnAccessType(): void {
// Unfortunately local storage updates are not reactive so putting it inside computed property doesn't do anything.
// That's why we explicitly call it here.
const shouldShowInfo = !LocalData.getServerSideEncryptionModalHidden() && selectedAccessTypes.value.includes(AccessType.S3);
if (shouldShowInfo) {
setStep(CreateAccessStep.EncryptionInfo);
return;
}
setStep(CreateAccessStep.ChoosePermission);
}
/**
* Sets first step based on selected access type.
* If access types include 'S3' and local storage value is false we set 'Encryption info step'.
* If not then we set regular first step (Create access).
*/
function setFirstStepBasedOnAccessType(): void {
// Unfortunately local storage updates are not reactive so putting it inside computed property doesn't do anything.
// That's why we explicitly call it here.
const shouldShowInfo = !LocalData.getServerSideEncryptionModalHidden() && selectedAccessTypes.value.includes(AccessType.S3);
if (shouldShowInfo) {
setStep(CreateAccessStep.EncryptionInfo);
return;
}
setStep(CreateAccessStep.CreateNewAccess);
}
/**
* Sets next step depending on selected passphrase option.
*/

11
web/satellite/src/components/accessGrants/newCreateFlow/components/Radio.vue
View File

@ -3,8 +3,8 @@
<template>
<div class="radio">
<input :id="`checkbox${label}`" :checked="checked" type="radio" @change="onCheck">
<label class="radio__label" :for="`checkbox${label}`">{{ label }}</label>
<input :id="id || label" :checked="checked" type="radio" @change="onCheck">
<label class="radio__label" :for="id || label">{{ label }}</label>
<VInfo class="radio__info">
<template #icon>
<InfoIcon class="radio__info__icon" />
@ -21,12 +21,15 @@ import VInfo from '@/components/common/VInfo.vue';
import InfoIcon from '@/../static/images/accessGrants/newCreateFlow/info.svg';
const props = defineProps<{
const props = withDefaults(defineProps<{
checked: boolean;
label: string;
onCheck: () => void;
info: string;
}>();
id?: string;
}>(), {
id: '',
});
</script>
<style scoped lang="scss">

4
web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
View File

@ -8,6 +8,7 @@
<div class="encryption__radios">
<Radio
v-if="!isPromptForPassphrase"
id="currentPassphrase"
:checked="isSelectedOption(_PassphraseOption.UseExistingPassphrase)"
:on-check="() => setOption(_PassphraseOption.UseExistingPassphrase)"
label="Use the current passphrase"
@ -16,6 +17,7 @@
/>
<Radio
v-else
id="myPassphrase"
:checked="isSelectedOption(_PassphraseOption.SetMyProjectPassphrase)"
:on-check="() => setOption(_PassphraseOption.SetMyProjectPassphrase)"
label="Enter my project passphrase"
@ -32,6 +34,7 @@
</div>
<template v-if="advancedShown">
<Radio
id="newPassphrase"
:checked="isSelectedOption(_PassphraseOption.EnterNewPassphrase)"
:on-check="() => setOption(_PassphraseOption.EnterNewPassphrase)"
label="Enter a new passphrase"
@ -39,6 +42,7 @@
The access will not be able to manage any existing data."
/>
<Radio
id="generatePassphrase"
:checked="isSelectedOption(_PassphraseOption.GenerateNewPassphrase)"
:on-check="() => setOption(_PassphraseOption.GenerateNewPassphrase)"
label="Generate 12-word passphrase"

4
web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
View File

@ -7,7 +7,7 @@
<template #functional>
<div class="choose__toggles">
<Toggle
id="all permissions"
id="allPermissions"
:checked="selectedPermissions.length === 4"
label="All"
:on-check="() => onSelectPermission(Permission.All)"
@ -42,7 +42,7 @@
<ContainerWithIcon :icon-and-title="FUNCTIONAL_CONTAINER_ICON_AND_TITLE[FunctionalContainer.Buckets]">
<template #functional>
<Toggle
id="all buckets"
id="allBuckets"
:checked="selectedBuckets.length === 0"
label="All"
:on-check="selectAllBuckets"

111
web/satellite/src/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue Normal file
View File

@ -0,0 +1,111 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="warning-step">
<p class="warning-step__info">
By generating S3 credentials, you are opting in to
<a
class="warning-step__info__link"
href="https://docs.storj.io/dcs/concepts/encryption-key/design-decision-server-side-encryption/"
target="_blank"
rel="noopener noreferrer"
>server-side encryption</a>.
</p>
<Toggle
:checked="isDontShow"
:on-check="toggleDontShow"
label="I understand, don’t show this again."
/>
<ButtonsContainer>
<template #leftButton>
<VButton
label="Back"
width="100%"
height="48px"
font-size="14px"
:on-press="backClick"
:is-white="true"
/>
</template>
<template #rightButton>
<VButton
label="Continue ->"
width="100%"
height="48px"
font-size="14px"
:on-press="continueClick"
/>
</template>
</ButtonsContainer>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useStore } from '@/utils/hooks';
import { LocalData } from '@/utils/localData';
import ButtonsContainer from '@/components/accessGrants/newCreateFlow/components/ButtonsContainer.vue';
import Toggle from '@/components/accessGrants/newCreateFlow/components/Toggle.vue';
import VButton from '@/components/common/VButton.vue';
const props = defineProps<{
onBack: () => void;
onContinue: () => void;
}>();
const store = useStore();
const isDontShow = ref<boolean>(false);
/**
* Toggles 'passphrase is saved' checkbox.
*/
function toggleDontShow(): void {
isDontShow.value = !isDontShow.value;
}
/**
* Holds on continue click button logic.
*/
function continueClick(): void {
if (isDontShow.value) {
LocalData.setServerSideEncryptionModalHidden(true);
}
props.onContinue();
}
/**
* Holds on back click button logic.
*/
function backClick(): void {
if (isDontShow.value) {
LocalData.setServerSideEncryptionModalHidden(true);
}
props.onBack();
}
</script>
<style lang="scss" scoped>
.warning-step {
font-family: 'font_regular', sans-serif;
&__info {
font-size: 16px;
line-height: 24px;
color: var(--c-blue-6);
padding: 16px 0;
text-align: left;
&__link {
font-size: 16px;
line-height: 24px;
color: var(--c-blue-6);
text-decoration: underline !important;
text-underline-position: under;
}
}
}
</style>