-
{{ value }}
-
{{ value }}
-
-
-
+
+
+
{{ value }}
+
{{ value }}
+
+
+
+
+
+
@@ -23,70 +38,146 @@
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue
new file mode 100644
index 000000000..4368b3f5a
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessCreatedStep.vue
@@ -0,0 +1,188 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+ Now copy or download to save the Access Grant as it will only appear once.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Learn More
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
index c096ec68b..6d2d308d5 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/AccessEncryptionStep.vue
@@ -77,6 +77,7 @@
font-size="14px"
:on-press="onBack"
:is-white="true"
+ :is-disabled="isLoading"
/>
@@ -86,6 +87,7 @@
height="48px"
font-size="14px"
:on-press="onContinue"
+ :is-disabled="isLoading"
/>
@@ -115,6 +117,7 @@ const props = defineProps<{
setOption: (option: PassphraseOption) => void;
onBack: () => void;
onContinue: () => void;
+ isLoading: boolean;
}>();
const store = useStore();
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
index 0d575b63d..b7aa820a4 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/ChoosePermissionStep.vue
@@ -102,6 +102,7 @@
font-size="14px"
:on-press="onBack"
:is-white="true"
+ :is-disabled="isLoading"
/>
@@ -110,8 +111,8 @@
width="100%"
height="48px"
font-size="14px"
- :on-press="onContinue"
- :is-disabled="isButtonDisabled"
+ :on-press="handleContinue"
+ :is-disabled="isButtonDisabled || isLoading"
/>
@@ -126,7 +127,8 @@ import {
FunctionalContainer,
Permission,
} from '@/types/createAccessGrant';
-import { useStore } from '@/utils/hooks';
+import { useNotify, useStore } from '@/utils/hooks';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import ContainerWithIcon from '@/components/accessGrants/newCreateFlow/components/ContainerWithIcon.vue';
import ButtonsContainer from '@/components/accessGrants/newCreateFlow/components/ButtonsContainer.vue';
@@ -149,12 +151,14 @@ const props = withDefaults(defineProps<{
notAfterLabel: string;
onBack: () => void;
onContinue: () => void;
+ isLoading: boolean;
notAfter?: Date;
}>(), {
notAfter: undefined,
});
const store = useStore();
+const notify = useNotify();
const allPermissionsShown = ref
(false);
const searchBucketsShown = ref(false);
@@ -188,6 +192,23 @@ function selectBucket(bucket: string): void {
searchQuery.value = '';
}
+/**
+ * Handles continue button click.
+ */
+function handleContinue(): void {
+ if (props.notAfter) {
+ const now = new Date();
+ now.setHours(0, 0, 0, 0);
+
+ if (props.notAfter.getTime() < now.getTime()) {
+ notify.error('End date must be later or equal to today.', AnalyticsErrorEventSource.CREATE_AG_MODAL);
+ return;
+ }
+ }
+
+ props.onContinue();
+}
+
/**
* Selects all buckets and clears search.
*/
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/EnterPassphraseStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/EnterPassphraseStep.vue
index 4921a43fb..2b44ff63b 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/EnterPassphraseStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/EnterPassphraseStep.vue
@@ -29,6 +29,7 @@
font-size="14px"
:on-press="onBack"
:is-white="true"
+ :is-disabled="isLoading"
/>
@@ -38,7 +39,7 @@
height="48px"
font-size="14px"
:on-press="onContinue"
- :is-disabled="isButtonDisabled"
+ :is-disabled="isButtonDisabled || isLoading"
/>
@@ -62,6 +63,7 @@ const props = defineProps<{
setPassphrase: (value: string) => void;
onBack: () => void;
onContinue: () => void;
+ isLoading: boolean;
}>();
const store = useStore();
diff --git a/web/satellite/src/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue b/web/satellite/src/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue
index 2c729dad4..b99f94b32 100644
--- a/web/satellite/src/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue
+++ b/web/satellite/src/components/accessGrants/newCreateFlow/steps/PassphraseGeneratedStep.vue
@@ -57,6 +57,7 @@
font-size="14px"
:on-press="onBack"
:is-white="true"
+ :is-disabled="isLoading"
/>
@@ -66,7 +67,7 @@
height="48px"
font-size="14px"
:on-press="onContinue"
- :is-disabled="isButtonDisabled"
+ :is-disabled="isButtonDisabled || isLoading"
/>
@@ -91,6 +92,7 @@ const props = defineProps<{
passphrase: string;
onBack: () => void;
onContinue: () => void;
+ isLoading: boolean;
}>();
const store = useStore();
diff --git a/web/satellite/src/components/modals/EnterPassphraseModal.vue b/web/satellite/src/components/modals/EnterPassphraseModal.vue
index 84628b6d7..7b295c578 100644
--- a/web/satellite/src/components/modals/EnterPassphraseModal.vue
+++ b/web/satellite/src/components/modals/EnterPassphraseModal.vue
@@ -161,7 +161,8 @@ export default class EnterPassphraseModal extends Vue {
const gatewayCredentials: EdgeCredentials = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
await this.$store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS, gatewayCredentials);
await this.$store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
- await this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, this.passphrase);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
}
/**
diff --git a/web/satellite/src/components/modals/OpenBucketModal.vue b/web/satellite/src/components/modals/OpenBucketModal.vue
index 4bd86f4d8..cb0f62db3 100644
--- a/web/satellite/src/components/modals/OpenBucketModal.vue
+++ b/web/satellite/src/components/modals/OpenBucketModal.vue
@@ -108,7 +108,8 @@ export default class OpenBucketModal extends Vue {
if (this.isLoading) return;
if (this.isWarningState) {
- await this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, this.passphrase);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
this.closeModal();
this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
@@ -134,7 +135,8 @@ export default class OpenBucketModal extends Vue {
this.isLoading = false;
return;
}
- await this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, this.passphrase);
+ this.$store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
this.isLoading = false;
this.closeModal();
diff --git a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
index 099acf001..e00664df7 100644
--- a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
+++ b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
@@ -247,7 +247,8 @@ async function setAccess(): Promise {
const gatewayCredentials: EdgeCredentials = await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
await store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS, gatewayCredentials);
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
- await store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
+ store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
+ store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
}
/**
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
index f37742a2a..9493ba145 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
@@ -171,6 +171,7 @@ async function setAccess(): Promise {
const gatewayCredentials: EdgeCredentials = await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
await store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS, gatewayCredentials);
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
+ store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
}
diff --git a/web/satellite/src/types/createAccessGrant.ts b/web/satellite/src/types/createAccessGrant.ts
index aeba70f50..fdab1c39d 100644
--- a/web/satellite/src/types/createAccessGrant.ts
+++ b/web/satellite/src/types/createAccessGrant.ts
@@ -8,6 +8,7 @@ import ChoosePermissionIcon from '@/../static/images/accessGrants/newCreateFlow/
import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
import PassphraseGeneratedIcon from '@/../static/images/accessGrants/newCreateFlow/passphraseGenerated.svg';
import AccessCreatedIcon from '@/../static/images/accessGrants/newCreateFlow/accessCreated.svg';
+import CLIAccessCreatedIcon from '@/../static/images/accessGrants/newCreateFlow/cliAccessCreated.svg';
import CredentialsCreatedIcon from '@/../static/images/accessGrants/newCreateFlow/credentialsCreated.svg';
import EncryptionInfoIcon from '@/../static/images/accessGrants/newCreateFlow/encryptionInfo.svg';
import TypeIcon from '@/../static/images/accessGrants/newCreateFlow/typeIcon.svg';
@@ -44,6 +45,7 @@ export enum CreateAccessStep {
EnterMyPassphrase = 'enterMyPassphrase',
EnterNewPassphrase = 'enterNewPassphrase',
AccessCreated = 'accessCreated',
+ CLIAccessCreated = 'cliAccessCreated',
CredentialsCreated = 'credentialsCreated',
}
@@ -92,6 +94,10 @@ export const STEP_ICON_AND_TITLE: Record = {
icon: CredentialsCreatedIcon,
title: 'Credentials created',
},
+ [CreateAccessStep.CLIAccessCreated]: {
+ icon: CLIAccessCreatedIcon,
+ title: 'CLI access created',
+ },
};
export enum FunctionalContainer {
diff --git a/web/satellite/static/images/accessGrants/newCreateFlow/cliAccessCreated.svg b/web/satellite/static/images/accessGrants/newCreateFlow/cliAccessCreated.svg
new file mode 100644
index 000000000..e4be45761
--- /dev/null
+++ b/web/satellite/static/images/accessGrants/newCreateFlow/cliAccessCreated.svg
@@ -0,0 +1,14 @@
+