From fa2f7336cd21d609a3e837a3a7ffedcd4236e70d Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 16 Feb 2023 13:17:40 +0200
Subject: [PATCH] web/satellite: encryption info step for new access grant flow

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
---
 .../newCreateFlow/CreateAccessGrantFlow.vue   |  43 ++++++-
 .../newCreateFlow/components/Radio.vue        |  11 +-
 .../steps/AccessEncryptionStep.vue            |   4 +
 .../steps/ChoosePermissionStep.vue            |   4 +-
 .../steps/EncryptionInfoStep.vue              | 111 ++++++++++++++++++
 5 files changed, 166 insertions(+), 7 deletions(-)
 create mode 100644 web/satellite/src/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue

diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue b/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
index f9a5c0cfa..f57402d46 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/CreateAccessGrantFlow.vue
@@ -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.
  */
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/components/Radio.vue b/web/satellite/src/components/accessGrants/newCreateFlow/components/Radio.vue
index 8cdd5b6f0..24ccf447d 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/components/Radio.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/components/Radio.vue
@@ -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">
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
index 853b01ee2..c096ec68b 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
@@ -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"
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
index a01d2b92f..0d575b63d 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
@@ -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"
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue
new file mode 100644
index 000000000..1566b043d
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/EncryptionInfoStep.vue
@@ -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>