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

web/satellite: separate out frontend config from pinia app store

Browse Source 
Separated out frontend config to make it live in an independent unchangable module.

Issue:
https://github.com/storj/storj/issues/5797

Change-Id: I094c44549d586dff6d1ef727fe43091c4aec03b8
This commit is contained in:
Vitalii 2023-04-24 14:56:07 +03:00 committed by Vitalii Shpital
parent 15b370fa9f
commit 2b6b1f7e08
60 changed files with 302 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/satellite/src/App.vue
View File

@ -16,11 +16,13 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import ErrorPage from '@/views/ErrorPage.vue';
import BrandedLoader from '@/components/common/BrandedLoader.vue';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
const configStore = useConfigStore();
const appStore = useAppStore();
const notify = useNotify();
@ -30,7 +32,7 @@ const isLoading = ref<boolean>(true);
* Indicates whether an error page should be shown in place of the router view.
*/
const isErrorPageShown = computed((): boolean => {
return appStore.state.viewsState.error.visible;
return appStore.state.error.visible;
});
/**
@ -67,7 +69,7 @@ function updateViewportVariable(): void {
*/
onMounted(async (): Promise<void> => {
try {
await appStore.getConfig();
await configStore.getConfig();
} catch (error) {
appStore.setErrorPage(500, true);
notify.error(error.message, null);

4
web/satellite/src/components/accessGrants/createFlow/CreateAccessGrantFlow.vue
View File

@ -127,6 +127,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VModal from '@/components/common/VModal.vue';
import CreateNewAccessStep from '@/components/accessGrants/createFlow/steps/CreateNewAccessStep.vue';
@ -140,6 +141,7 @@ import CLIAccessCreatedStep from '@/components/accessGrants/createFlow/steps/CLI
import S3CredentialsCreatedStep from '@/components/accessGrants/createFlow/steps/S3CredentialsCreatedStep.vue';
import ConfirmDetailsStep from '@/components/accessGrants/createFlow/steps/ConfirmDetailsStep.vue';
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const agStore = useAccessGrantsStore();
const appStore = useAppStore();
@ -508,7 +510,7 @@ async function createAccessGrant(): Promise<void> {
}
// creates access credentials.
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL = configStore.state.config.satelliteNodeURL;
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);

2
web/satellite/src/components/accessGrants/createFlow/components/EndDateSelection.vue
View File

@ -43,7 +43,7 @@ const appStore = useAppStore();
* Indicates if date picker is shown.
*/
const isDatePickerVisible = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
});
/**

6
web/satellite/src/components/accessGrants/createFlow/steps/CLIAccessCreatedStep.vue
View File

@ -75,7 +75,7 @@ import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import VButton from '@/components/common/VButton.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -87,7 +87,7 @@ const props = defineProps<{
apiKey: string;
}>();
const appStore = useAppStore();
const configStore = useConfigStore();
const notify = useNotify();
const router = useRouter();
@ -100,7 +100,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Returns the web address of this satellite from the store.
*/
const satelliteAddress = computed((): string => {
return appStore.state.config.satelliteNodeURL;
return configStore.state.config.satelliteNodeURL;
});
/**

4
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -63,14 +63,14 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Indicates if free credits dropdown shown.
*/
const isCreditsDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.FREE_CREDITS;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.FREE_CREDITS;
});
/**
* Indicates if available balance dropdown shown.
*/
const isBalanceDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
});
/**

4
web/satellite/src/components/account/billing/billingTabs/Coupons.vue
View File

@ -39,6 +39,7 @@ import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue';
@ -47,6 +48,7 @@ import CloudIcon from '@/../static/images/onboardingTour/cloudIcon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const configStore = useConfigStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
const notify = useNotify();
@ -100,7 +102,7 @@ const isActive = computed((): boolean => {
* Returns the whether applying a new coupon is enabled.
*/
const couponCodeBillingUIEnabled = computed((): boolean => {
return appStore.state.config.couponCodeBillingUIEnabled;
return configStore.state.config.couponCodeBillingUIEnabled;
});
/**

4
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -193,6 +193,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -224,6 +225,7 @@ interface CardEdited {
isDefault?: boolean
}
const configStore = useConfigStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const appStore = useAppStore();
@ -259,7 +261,7 @@ const pageCount = computed((): number => {
* Indicates whether native token payments are enabled.
*/
const nativeTokenPaymentsEnabled = computed((): boolean => {
return appStore.state.config.nativeTokenPaymentsEnabled;
return configStore.state.config.nativeTokenPaymentsEnabled;
});
/**

10
web/satellite/src/components/account/billing/paymentMethods/StripeCardInput.vue
View File

@ -18,7 +18,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
import { LoadScript } from '@/utils/loadScript';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
interface StripeResponse {
error: string
@ -30,7 +30,7 @@ interface StripeResponse {
}
}
const appStore = useAppStore();
const configStore = useConfigStore();
const notify = useNotify();
const props = withDefaults(defineProps<{
@ -53,7 +53,7 @@ const stripe = ref<any>(); // eslint-disable-line @typescript-eslint/no-explicit
* Stripe initialization.
*/
async function initStripe(): Promise<void> {
const stripePublicKey = appStore.state.config.stripePublicKey;
const stripePublicKey = configStore.state.config.stripePublicKey;
stripe.value = window['Stripe'](stripePublicKey);
if (!stripe.value) {
@ -96,7 +96,7 @@ async function onStripeResponse(result: StripeResponse): Promise<void> {
}
if (result.token.card.funding === 'prepaid') {
await notify.error('Prepaid cards are not supported', AnalyticsErrorEventSource.BILLING_STRIPE_CARD_INPUT);
notify.error('Prepaid cards are not supported', AnalyticsErrorEventSource.BILLING_STRIPE_CARD_INPUT);
return;
}
@ -115,7 +115,7 @@ async function onSubmit(): Promise<void> {
try {
await stripe.value.createToken(cardElement.value).then(onStripeResponse);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_STRIPE_CARD_INPUT);
notify.error(error.message, AnalyticsErrorEventSource.BILLING_STRIPE_CARD_INPUT);
}
isLoading.value = false;

8
web/satellite/src/components/common/PasswordStrength.vue
View File

@ -37,11 +37,11 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import VectorIcon from '@/../static/images/register/StrengthVector.svg';
const appStore = useAppStore();
const configStore = useConfigStore();
/**
* BarFillStyle class holds info for BarFillStyle entity.
@ -90,14 +90,14 @@ const props = withDefaults(defineProps<{
* Returns the maximum password length from the store.
*/
const passMaxLength = computed((): number => {
return appStore.state.config.passwordMaximumLength;
return configStore.state.config.passwordMaximumLength;
});
/**
* Returns the minimum password length from the store.
*/
const passMinLength = computed((): number => {
return appStore.state.config.passwordMinimumLength;
return configStore.state.config.passwordMinimumLength;
});
const isPasswordLengthAcceptable = computed((): boolean => {

6
web/satellite/src/components/infoBars/BetaSatBar.vue
View File

@ -15,16 +15,16 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/appStore';
import { FrontendConfig } from '@/types/config';
import { useConfigStore } from '@/store/modules/configStore';
const appStore = useAppStore();
const configStore = useConfigStore();
/**
* Returns the frontend config.
*/
const config = computed((): FrontendConfig => {
return appStore.state.config;
return configStore.state.config;
});
</script>

6
web/satellite/src/components/infoBars/ProjectInfoBar.vue
View File

@ -31,12 +31,12 @@ import { computed, onMounted, ref } from 'vue';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue';
const appStore = useAppStore();
const configStore = useConfigStore();
const usersStore = useUsersStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
@ -64,7 +64,7 @@ const projectLimit = computed((): number => {
* Returns project limits increase request url from config.
*/
const projectLimitsIncreaseRequestURL = computed((): string => {
return appStore.state.config.projectLimitsIncreaseRequestURL;
return configStore.state.config.projectLimitsIncreaseRequestURL;
});
/**

12
web/satellite/src/components/modals/AddPaymentMethodModal.vue
View File

@ -141,6 +141,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -155,6 +156,7 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const configStore = useConfigStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -183,7 +185,7 @@ onMounted(async () => {
await billingStore.getProjectUsagePriceModel();
isPriceFetching.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
}
});
@ -198,7 +200,7 @@ async function onAddCardClick(): Promise<void> {
try {
await stripeCardInput.value.onSubmit();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
}
isLoading.value = false;
}
@ -211,7 +213,7 @@ async function onAddCardClick(): Promise<void> {
async function addCardToDB(token: string): Promise<void> {
try {
await billingStore.addCreditCard(token);
await notify.success('Card successfully added');
notify.success('Card successfully added');
// We fetch User one more time to update their Paid Tier status.
await usersStore.getUser();
@ -222,7 +224,7 @@ async function addCardToDB(token: string): Promise<void> {
await analytics.eventTriggered(AnalyticsEvent.MODAL_ADD_CARD);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
}
isLoading.value = false;
@ -254,7 +256,7 @@ function setIsAddCard(): void {
* Returns project limits increase request url from config.
*/
const limitsIncreaseRequestURL = computed((): string => {
return appStore.state.config.projectLimitsIncreaseRequestURL;
return configStore.state.config.projectLimitsIncreaseRequestURL;
});
/**

2
web/satellite/src/components/modals/AllModals.vue
View File

@ -19,6 +19,6 @@ const appStore = useAppStore();
*/
const activeModal = computed((): unknown | null => {
// modal could be of VueConstructor type or Object (for composition api components).
return appStore.state.viewsState.activeModal;
return appStore.state.activeModal;
});
</script>

4
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -70,6 +70,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter } from '@/utils/hooks';
import { useConfigStore } from '@/store/modules/configStore';
import { useAppStore } from '@/store/modules/appStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
@ -79,6 +80,7 @@ import VModal from '@/components/common/VModal.vue';
import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg';
const configStore = useConfigStore();
const appStore = useAppStore();
const notify = useNotify();
const router = useRouter();
@ -143,7 +145,7 @@ async function onUpdateClick(): Promise<void> {
hasError = true;
}
const config = appStore.state.config;
const config = configStore.state.config;
if (newPassword.value.length < config.passwordMinimumLength) {
newPasswordError.value = `Invalid password. Use ${config.passwordMinimumLength} or more characters`;

4
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -64,6 +64,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -72,6 +73,7 @@ import VButton from '@/components/common/VButton.vue';
import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -224,7 +226,7 @@ async function onCreate(): Promise<void> {
}
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL: string = configStore.state.config.satelliteNodeURL;
worker.value.postMessage({
'type': 'GenerateAccess',

10
web/satellite/src/components/modals/DeleteBucketModal.vue
View File

@ -40,6 +40,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -47,6 +48,7 @@ import VInput from '@/components/common/VInput.vue';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -111,7 +113,7 @@ async function onDelete(): Promise<void> {
}
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL: string = configStore.state.config.satelliteNodeURL;
worker.value.postMessage({
'type': 'GenerateAccess',
@ -127,7 +129,7 @@ async function onDelete(): Promise<void> {
}
});
if (accessGrantEvent.data.error) {
await notify.error(accessGrantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
notify.error(accessGrantEvent.data.error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
return;
}
@ -139,7 +141,7 @@ async function onDelete(): Promise<void> {
analytics.eventTriggered(AnalyticsEvent.BUCKET_DELETED);
await fetchBuckets();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
notify.error(error.message, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
return;
} finally {
isLoading.value = false;
@ -155,7 +157,7 @@ async function fetchBuckets(page = 1): Promise<void> {
try {
await bucketsStore.getBuckets(page, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
}
}

4
web/satellite/src/components/modals/EnableMFAModal.vue
View File

@ -86,11 +86,13 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
const configStore = useConfigStore();
const appStore = useAppStore();
const usersStore = useUsersStore();
const notify = useNotify();
@ -109,7 +111,7 @@ const canvas = ref<HTMLCanvasElement>();
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**

6
web/satellite/src/components/modals/NewCreateProjectModal.vue
View File

@ -89,6 +89,7 @@ import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -97,6 +98,7 @@ import VButton from '@/components/common/VButton.vue';
import BlueBoxIcon from '@/../static/images/common/blueBox.svg';
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
@ -167,14 +169,14 @@ async function onCreateProjectClick(): Promise<void> {
await selectCreatedProject();
await notify.success('Project created successfully!');
notify.success('Project created successfully!');
isLoading.value = false;
closeModal();
bucketsStore.clearS3Data();
if (usersStore.shouldOnboard && appStore.state.config.allProjectsDashboard) {
if (usersStore.shouldOnboard && configStore.state.config.allProjectsDashboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return;

6
web/satellite/src/components/modals/PricingPlanModal.vue
View File

@ -86,6 +86,7 @@ import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -99,6 +100,7 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const configStore = useConfigStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -114,7 +116,7 @@ const stripeCardInput = ref<(typeof StripeCardInput & StripeForm) | null>(null);
* Returns the pricing plan selected from the onboarding tour.
*/
const plan = computed((): PricingPlanInfo | null => {
return appStore.state.viewsState.selectedPricingPlan;
return appStore.state.selectedPricingPlan;
});
watch(plan, () => {
@ -137,7 +139,7 @@ const isFree = computed((): boolean => {
function onClose(): void {
appStore.removeActiveModal();
if (isSuccess.value) {
if (appStore.state.config.allProjectsDashboard) {
if (configStore.state.config.allProjectsDashboard) {
router.push(RouteConfig.AllProjectsDashboard.path);
return;
}

6
web/satellite/src/components/modals/ShareBucketModal.vue
View File

@ -50,6 +50,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -63,6 +64,7 @@ enum ButtonStates {
Copied,
}
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -116,7 +118,7 @@ async function setShareLink(): Promise<void> {
const LINK_SHARING_AG_NAME = `${path}_shared-bucket_${now.toISOString()}`;
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, projectsStore.state.selectedProject.id);
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL = configStore.state.config.satelliteNodeURL;
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
worker.value.postMessage({
@ -163,7 +165,7 @@ async function setShareLink(): Promise<void> {
path = encodeURIComponent(path.trim());
const linksharingURL = appStore.state.config.linksharingURL;
const linksharingURL = configStore.state.config.linksharingURL;
link.value = `${linksharingURL}/${credentials.accessKeyId}/${path}`;
} catch (error) {

2
web/satellite/src/components/modals/editSessionTimeout/TimeoutSelector.vue
View File

@ -56,7 +56,7 @@ const options = [
* whether the selector drop down is open
* */
const isOpen = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR;
});
/**

2
web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue
View File

@ -52,7 +52,7 @@ const notify = useNotify();
* Returns step from store.
*/
const storedStep = computed((): ManageProjectPassphraseStep | undefined => {
return appStore.state.viewsState.managePassphraseStep;
return appStore.state.managePassphraseStep;
});
const activeStep = ref<ManageProjectPassphraseStep>(storedStep.value || ManageProjectPassphraseStep.ManageOptions);

6
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -67,6 +67,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -81,6 +82,7 @@ import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const router = useRouter();
const notify = useNotify();
const configStore = useConfigStore();
const obStore = useObjectBrowserStore();
const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore();
@ -110,14 +112,14 @@ const style = computed((): Record<string, string> => {
* Indicates if account dropdown is visible.
*/
const isDropdown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ACCOUNT;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.ACCOUNT;
});
/**
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**

8
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -181,6 +181,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -218,6 +219,7 @@ const navigation: NavigationLink[] = [
RouteConfig.Team.withIcon(UsersIcon),
];
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -246,7 +248,7 @@ const isLoading = ref<boolean>(false);
* Indicates if all projects dashboard should be used.
*/
const isAllProjectsDashboard = computed((): boolean => {
return appStore.state.config.allProjectsDashboard;
return configStore.state.config.allProjectsDashboard;
});
/**
@ -274,7 +276,7 @@ const selectedProject = computed((): Project => {
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**
@ -445,7 +447,7 @@ function navigateToBilling(): void {
if (router.currentRoute.path.includes(RouteConfig.Billing.path)) return;
let link = RouteConfig.Account.with(RouteConfig.Billing);
if (appStore.state.config.newBillingScreen) {
if (configStore.state.config.newBillingScreen) {
link = link.with(RouteConfig.BillingOverview);
}
router.push(link.path);

8
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -88,6 +88,7 @@ import { NavigationLink } from '@/types/navigation';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue';
@ -105,6 +106,7 @@ import ResourcesIcon from '@/../static/images/navigation/resources.svg';
import QuickStartIcon from '@/../static/images/navigation/quickStart.svg';
import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
const configStore = useConfigStore();
const appStore = useAppStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -131,21 +133,21 @@ const windowWidth = ref<number>(window.innerWidth);
* Indicates if resources dropdown shown.
*/
const isResourcesDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.RESOURCES;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.RESOURCES;
});
/**
* Indicates if quick start dropdown shown.
*/
const isQuickStartDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.QUICK_START;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.QUICK_START;
});
/**
* Indicates if all projects dashboard should be used.
*/
const isAllProjectsDashboard = computed((): boolean => {
return appStore.state.config.allProjectsDashboard;
return configStore.state.config.allProjectsDashboard;
});
/**

2
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -123,7 +123,7 @@ const isOnboardingTour = computed((): boolean => {
* Indicates if dropdown is shown.
*/
const isDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.SELECT_PROJECT;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.SELECT_PROJECT;
});
/**

6
web/satellite/src/components/notifications/NotificationItem.vue
View File

@ -32,11 +32,11 @@ import { computed, onMounted, ref } from 'vue';
import { DelayedNotification } from '@/types/DelayedNotification';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import CloseIcon from '@/../static/images/notifications/close.svg';
const appStore = useAppStore();
const configStore = useConfigStore();
const notificationsStore = useNotificationsStore();
const props = withDefaults(defineProps<{
@ -51,7 +51,7 @@ const isClassActive = ref<boolean>(false);
* Returns the URL for the general request page from the store.
*/
const requestURL = computed((): string => {
return appStore.state.config.generalRequestURL;
return configStore.state.config.generalRequestURL;
});
/**

6
web/satellite/src/components/notifications/ProjectLimitBanner.vue
View File

@ -26,12 +26,12 @@ import { computed } from 'vue';
import { LocalData } from '@/utils/localData';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VBanner from '@/components/common/VBanner.vue';
const appStore = useAppStore();
const configStore = useConfigStore();
const usersStore = useUsersStore();
const projectsStore = useProjectsStore();
@ -54,7 +54,7 @@ const bannerTextData = computed((): { title: string, body: string } => {
});
const projectLimitsIncreaseRequestURL = computed((): string => {
return appStore.state.config.projectLimitsIncreaseRequestURL;
return configStore.state.config.projectLimitsIncreaseRequestURL;
});
/**

6
web/satellite/src/components/objects/ObjectsArea.vue
View File

@ -13,10 +13,10 @@ import { onMounted } from 'vue';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
const router = useRouter();
const appStore = useAppStore();
const configStore = useConfigStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -25,7 +25,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Redirects if flow is disabled.
*/
onMounted(async (): Promise<void> => {
if (appStore.state.config.fileBrowserFlowDisabled) {
if (configStore.state.config.fileBrowserFlowDisabled) {
analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path);
}

8
web/satellite/src/components/objects/UploadFile.vue
View File

@ -25,6 +25,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
@ -32,6 +33,7 @@ import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
const obStore = useObjectBrowserStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const configStore = useConfigStore();
const agStore = useAccessGrantsStore();
const projectsStore = useProjectsStore();
const router = useRouter();
@ -45,7 +47,7 @@ const worker = ref<Worker | null>(null);
* Indicates if upload cancel popup is visible.
*/
const isCancelUploadPopupVisible = computed((): boolean => {
return appStore.state.viewsState.activeModal === MODALS.uploadCancelPopup;
return appStore.state.activeModal === MODALS.uploadCancelPopup;
});
/**
@ -87,7 +89,7 @@ const edgeCredentials = computed((): EdgeCredentials => {
* Returns linksharing URL from store.
*/
const linksharingURL = computed((): string => {
return appStore.state.config.linksharingURL;
return configStore.state.config.linksharingURL;
});
/**
@ -153,7 +155,7 @@ async function generateCredentials(cleanApiKey: string, path: string, areEndless
throw new Error('Worker is not defined');
}
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL = configStore.state.config.satelliteNodeURL;
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
worker.value.postMessage({

6
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -27,7 +27,7 @@
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
@ -36,10 +36,12 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import { PartneredSatellite } from '@/types/config';
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
const configStore = useConfigStore();
const appStore = useAppStore();
const usersStore = useUsersStore();
const notify = useNotify();
@ -98,7 +100,7 @@ onMounted(async (): Promise<void> => {
notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP);
}
const config = appStore.state.config;
const config = configStore.state.config;
const isPartnered = config.partneredSatellites.find((el: PartneredSatellite) => {
return el.name === config.satelliteName;
});

8
web/satellite/src/components/onboardingTour/steps/PricingPlanStep.vue
View File

@ -28,12 +28,12 @@ import { useNotify, useRouter } from '@/utils/hooks';
import { PaymentsHttpApi } from '@/api/payments';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import PricingPlanContainer from '@/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue';
import VLoader from '@/components/common/VLoader.vue';
const appStore = useAppStore();
const configStore = useConfigStore();
const usersStore = useUsersStore();
const router = useRouter();
const notify = useNotify();
@ -74,11 +74,11 @@ const plans = ref<PricingPlanInfo[]>([
onBeforeMount(async () => {
const user: User = usersStore.state.user;
let nextPath = RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path;
if (appStore.state.config.allProjectsDashboard) {
if (configStore.state.config.allProjectsDashboard) {
nextPath = RouteConfig.AllProjectsDashboard.path;
}
const pricingPkgsEnabled = appStore.state.config.pricingPackagesEnabled;
const pricingPkgsEnabled = configStore.state.config.pricingPackagesEnabled;
if (!pricingPkgsEnabled || user.paidTier || !user.partner) {
router.push(nextPath);
return;

2
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -57,7 +57,7 @@ const isLoading = ref<boolean>(false);
* Returns back route from store.
*/
const backRoute = computed((): string => {
return appStore.state.viewsState.onbAGStepBackRoute;
return appStore.state.onbAGStepBackRoute;
});
/**

2
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -84,7 +84,7 @@ const selectedBucketNames = computed((): string[] => {
* Returns clean API key from store.
*/
const cleanAPIKey = computed((): string => {
return appStore.state.viewsState.onbCleanApiKey;
return appStore.state.onbCleanApiKey;
});
/**

8
web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
View File

@ -27,12 +27,14 @@ import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import ValueWithCopy from '@/components/onboardingTour/steps/common/ValueWithCopy.vue';
import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg';
const configStore = useConfigStore();
const appStore = useAppStore();
const router = useRouter();
@ -42,21 +44,21 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Returns the web address of this satellite from the store.
*/
const satelliteAddress = computed((): string => {
return appStore.state.config.satelliteNodeURL;
return configStore.state.config.satelliteNodeURL;
});
/**
* Returns API key from store.
*/
const storedAPIKey = computed((): string => {
return appStore.state.viewsState.onbApiKey;
return appStore.state.onbApiKey;
});
/**
* Returns back route from store.
*/
const backRoute = computed((): string => {
return appStore.state.viewsState.onbAPIKeyStepBackRoute;
return appStore.state.onbAPIKeyStepBackRoute;
});
/**

2
web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
View File

@ -59,7 +59,7 @@ const isLoading = ref<boolean>(true);
* Indicates if dropdown is visible.
*/
const isDropdownVisible = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.PERMISSIONS;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.PERMISSIONS;
});
/**

2
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsSelection.vue
View File

@ -35,7 +35,7 @@ const agStore = useAccessGrantsStore();
* Indicates if dropdown is shown.
*/
const isDropdownShown = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
});
/**

2
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationSelection.vue
View File

@ -41,7 +41,7 @@ const dateRangeLabel = ref<string>('Forever');
* Indicates if date picker is shown.
*/
const isDurationPickerVisible = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
});
/**

2
web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
View File

@ -55,7 +55,7 @@ const osSelected = ref<OnboardingOS>(OnboardingOS.WINDOWS);
* Returns selected os from store.
*/
const storedOsSelected = computed((): OnboardingOS | null => {
return appStore.state.viewsState.onbSelectedOs;
return appStore.state.onbSelectedOs;
});
/**

8
web/satellite/src/components/project/EditProjectDetails.vue
View File

@ -212,13 +212,13 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VButton from '@/components/common/VButton.vue';
const configStore = useConfigStore();
const usersStore = useUsersStore();
const appStore = useAppStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -326,7 +326,7 @@ const bandwidthMeasurementFormatted = computed((): string => {
* Gets current default limit for paid accounts.
*/
const paidBandwidthLimit = computed((): number => {
const limitVal = getLimitValue(appStore.state.config.defaultPaidBandwidthLimit);
const limitVal = getLimitValue(configStore.state.config.defaultPaidBandwidthLimit);
const maxLimit = Math.max(currentLimits.value.bandwidthLimit / Memory.TB, limitVal);
if (activeBandwidthMeasurement.value === Dimensions.GB) {
return toGB(maxLimit);
@ -335,7 +335,7 @@ const paidBandwidthLimit = computed((): number => {
});
const paidStorageLimit = computed((): number => {
const limitVal = getLimitValue(appStore.state.config.defaultPaidStorageLimit);
const limitVal = getLimitValue(configStore.state.config.defaultPaidStorageLimit);
const maxLimit = Math.max(currentLimits.value.storageLimit / Memory.TB, limitVal);
if (activeStorageMeasurement.value === Dimensions.GB) {
return toGB(maxLimit);

10
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -169,6 +169,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -185,6 +186,7 @@ import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
import NewProjectIcon from '@/../static/images/project/newProject.svg';
import InfoIcon from '@/../static/images/project/infoIcon.svg';
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
@ -206,7 +208,7 @@ const chartContainer = ref<HTMLDivElement>();
* Indicates if charts date picker is shown.
*/
const isChartsDatePicker = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
});
/**
@ -283,7 +285,7 @@ const chartsBeforeDate = computed((): Date => {
* Indicates if user has just logged in.
*/
const hasJustLoggedIn = computed((): boolean => {
return appStore.state.viewsState.hasJustLoggedIn;
return appStore.state.hasJustLoggedIn;
});
/**
@ -387,11 +389,11 @@ onMounted(async (): Promise<void> => {
const projectID = selectedProject.value.id;
if (!projectID) {
if (appStore.state.config.allProjectsDashboard) {
if (configStore.state.config.allProjectsDashboard) {
await router.push(RouteConfig.AllProjectsDashboard.path);
return;
}
const onboardingPath = RouteConfig.OnboardingTour.with(appStore.firstOnboardingStep).path;
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
analytics.pageVisit(onboardingPath);
router.push(onboardingPath);

4
web/satellite/src/components/team/HeaderArea.vue
View File

@ -90,6 +90,7 @@ import { useNotify, useRouter } from '@/utils/hooks';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VInfo from '@/components/common/VInfo.vue';
import VHeader from '@/components/common/VHeader.vue';
@ -101,6 +102,7 @@ interface ClearSearch {
clearSearch(): void;
}
const configStore = useConfigStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore();
@ -196,7 +198,7 @@ async function processSearchQuery(search: string): Promise<void> {
async function setProjectState(): Promise<void> {
const projects: Project[] = await projectsStore.getProjects();
if (!projects.length) {
const onboardingPath = RouteConfig.OnboardingTour.with(appStore.firstOnboardingStep).path;
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
analytics.pageVisit(onboardingPath);
router.push(onboardingPath);

10
web/satellite/src/router/index.ts
View File

@ -7,6 +7,7 @@ import Router, { RouteRecord } from 'vue-router';
import { NavigationLink } from '@/types/navigation';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import AllDashboardArea from '@/views/all-dashboard/AllDashboardArea.vue';
import MyProjects from '@/views/all-dashboard/components/MyProjects.vue';
@ -435,11 +436,12 @@ export const router = new Router({
router.beforeEach(async (to, from, next) => {
const appStore = useAppStore();
const configStore = useConfigStore();
if (!to.matched.length) {
appStore.setErrorPage(404);
return;
} else if (appStore.state.viewsState.error.visible) {
} else if (appStore.state.error.visible) {
appStore.removeErrorPage();
}
@ -486,7 +488,7 @@ router.beforeEach(async (to, from, next) => {
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
next(RouteConfig.OnboardingTour.with(appStore.firstOnboardingStep).path);
next(RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path);
return;
}
@ -525,10 +527,10 @@ function navigateToDefaultSubTab(routes: RouteRecord[], tabRoute: NavigationLink
* Updates the title of the webpage.
*/
function updateTitle(): void {
const appStore = useAppStore();
const configStore = useConfigStore();
const projectsStore = useProjectsStore();
const routeName = router.currentRoute.name;
const parts = [routeName, appStore.state.config.satelliteName];
const parts = [routeName, configStore.state.config.satelliteName];
if (routeName && !notProjectRelatedRoutes.includes(routeName)) {
parts.unshift(projectsStore.state.selectedProject.name);

8
web/satellite/src/store/modules/abTestingStore.ts
View File

@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
import { ABHitAction, ABTestApi, ABTestValues } from '@/types/abtesting';
import { ABHttpApi } from '@/api/abtesting';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
export class ABTestingState {
public abTestValues = new ABTestValues();
@ -18,10 +18,10 @@ export const useABTestingStore = defineStore('abTesting', () => {
const api: ABTestApi = new ABHttpApi();
const appStore = useAppStore();
const configStore = useConfigStore();
async function fetchValues(): Promise<ABTestValues> {
if (!appStore.state.config.abTestingEnabled) return state.abTestValues;
if (!configStore.state.config.abTestingEnabled) return state.abTestValues;
const values = await api.fetchABTestValues();
@ -32,7 +32,7 @@ export const useABTestingStore = defineStore('abTesting', () => {
}
async function hit(action: ABHitAction): Promise<void> {
if (!appStore.state.config.abTestingEnabled) return;
if (!configStore.state.config.abTestingEnabled) return;
if (!state.abTestingInitialized) {
await fetchValues();
}

6
web/satellite/src/store/modules/accessGrantsStore.ts
View File

@ -14,7 +14,7 @@ import {
} from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import { AccessGrantsApiGql } from '@/api/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
class AccessGrantsState {
public cursor: AccessGrantCursor = new AccessGrantCursor();
@ -37,7 +37,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
const state = reactive<AccessGrantsState>(new AccessGrantsState());
const appStore = useAppStore();
const configStore = useConfigStore();
async function startWorker(): Promise<void> {
const worker = new Worker(new URL('@/utils/accessGrant.worker.js', import.meta.url), { type: 'module' });
@ -96,7 +96,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
}
async function getEdgeCredentials(accessGrant: string, optionalURL?: string, isPublic?: boolean): Promise<EdgeCredentials> {
const url = optionalURL || appStore.state.config.gatewayCredentialsRequestURL;
const url = optionalURL || configStore.state.config.gatewayCredentialsRequestURL;
const credentials: EdgeCredentials = await api.getGatewayCredentials(accessGrant, url, isPublic);
state.edgeCredentials = credentials;

113
web/satellite/src/store/modules/appStore.ts
View File

@ -1,18 +1,14 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { computed, reactive } from 'vue';
import { reactive } from 'vue';
import { defineStore } from 'pinia';
import { OnboardingOS, PricingPlanInfo } from '@/types/common';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { FrontendConfig, FrontendConfigApi } from '@/types/config';
import { FrontendConfigHttpApi } from '@/api/config';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
class ViewsState {
class AppState {
public fetchState = FetchState.LOADING;
public isSuccessfulPasswordResetShown = false;
public hasJustLoggedIn = false;
@ -44,144 +40,123 @@ class ErrorPageState {
) {}
}
export class State {
public viewsState: ViewsState = new ViewsState();
public config: FrontendConfig = new FrontendConfig();
}
export const useAppStore = defineStore('app', () => {
const state = reactive<State>(new State());
const configApi: FrontendConfigApi = new FrontendConfigHttpApi();
const firstOnboardingStep = computed((): NavigationLink => {
return state.config.pricingPackagesEnabled ? RouteConfig.PricingPlanStep : RouteConfig.OverviewStep;
});
async function getConfig(): Promise<FrontendConfig> {
const result = await configApi.get();
state.config = result;
return result;
}
const state = reactive<AppState>(new AppState());
function toggleActiveDropdown(dropdown: string): void {
if (state.viewsState.activeDropdown === dropdown) {
state.viewsState.activeDropdown = 'none';
if (state.activeDropdown === dropdown) {
state.activeDropdown = 'none';
return;
}
state.viewsState.activeDropdown = dropdown;
state.activeDropdown = dropdown;
}
function toggleSuccessfulPasswordReset(): void {
if (!state.viewsState.isSuccessfulPasswordResetShown) {
state.viewsState.activeDropdown = 'none';
if (!state.isSuccessfulPasswordResetShown) {
state.activeDropdown = 'none';
}
state.viewsState.isSuccessfulPasswordResetShown = !state.viewsState.isSuccessfulPasswordResetShown;
state.isSuccessfulPasswordResetShown = !state.isSuccessfulPasswordResetShown;
}
function updateActiveModal(modal: unknown): void {
// modal could be of VueConstructor type or Object (for composition api components).
if (state.viewsState.activeModal === modal) {
state.viewsState.activeModal = null;
if (state.activeModal === modal) {
state.activeModal = null;
return;
}
state.viewsState.activeModal = modal;
state.activeModal = modal;
}
function removeActiveModal(): void {
state.viewsState.activeModal = null;
state.activeModal = null;
}
function toggleHasJustLoggedIn(hasJustLoggedIn: boolean | null = null): void {
if (hasJustLoggedIn === null) {
state.viewsState.hasJustLoggedIn = !state.viewsState.hasJustLoggedIn;
state.hasJustLoggedIn = !state.hasJustLoggedIn;
return;
}
state.viewsState.hasJustLoggedIn = hasJustLoggedIn;
state.hasJustLoggedIn = hasJustLoggedIn;
}
function changeState(newFetchState: FetchState): void {
state.viewsState.fetchState = newFetchState;
state.fetchState = newFetchState;
}
function setOnboardingBackRoute(backRoute: string): void {
state.viewsState.onbAGStepBackRoute = backRoute;
state.onbAGStepBackRoute = backRoute;
}
function setOnboardingAPIKeyStepBackRoute(backRoute: string): void {
state.viewsState.onbAPIKeyStepBackRoute = backRoute;
state.onbAPIKeyStepBackRoute = backRoute;
}
function setOnboardingAPIKey(apiKey: string): void {
state.viewsState.onbApiKey = apiKey;
state.onbApiKey = apiKey;
}
function setOnboardingCleanAPIKey(apiKey: string): void {
state.viewsState.onbCleanApiKey = apiKey;
state.onbCleanApiKey = apiKey;
}
function setOnboardingOS(os: OnboardingOS): void {
state.viewsState.onbSelectedOs = os;
state.onbSelectedOs = os;
}
function setPricingPlan(plan: PricingPlanInfo): void {
state.viewsState.selectedPricingPlan = plan;
state.selectedPricingPlan = plan;
}
function setManagePassphraseStep(step: ManageProjectPassphraseStep | undefined): void {
state.viewsState.managePassphraseStep = step;
state.managePassphraseStep = step;
}
function setHasShownPricingPlan(value: boolean): void {
state.viewsState.hasShownPricingPlan = value;
state.hasShownPricingPlan = value;
}
function setLargeUploadWarningNotification(value: boolean): void {
state.viewsState.isLargeUploadWarningNotificationShown = value;
state.isLargeUploadWarningNotificationShown = value;
}
function setLargeUploadNotification(value: boolean): void {
state.viewsState.isLargeUploadNotificationShown = value;
state.isLargeUploadNotificationShown = value;
}
function closeDropdowns(): void {
state.viewsState.activeDropdown = '';
state.activeDropdown = '';
}
function setErrorPage(statusCode: number, fatal = false): void {
state.viewsState.error = new ErrorPageState(statusCode, fatal, true);
state.error = new ErrorPageState(statusCode, fatal, true);
}
function removeErrorPage(): void {
state.viewsState.error.visible = false;
state.error.visible = false;
}
function clear(): void {
state.viewsState.activeModal = null;
state.viewsState.isSuccessfulPasswordResetShown = false;
state.viewsState.hasJustLoggedIn = false;
state.viewsState.onbAGStepBackRoute = '';
state.viewsState.onbAPIKeyStepBackRoute = '';
state.viewsState.onbCleanApiKey = '';
state.viewsState.onbApiKey = '';
state.viewsState.setDefaultPaymentMethodID = '';
state.viewsState.deletePaymentMethodID = '';
state.viewsState.onbSelectedOs = null;
state.viewsState.managePassphraseStep = undefined;
state.viewsState.selectedPricingPlan = null;
state.viewsState.hasShownPricingPlan = false;
state.viewsState.activeDropdown = '';
state.viewsState.error.visible = false;
state.activeModal = null;
state.isSuccessfulPasswordResetShown = false;
state.hasJustLoggedIn = false;
state.onbAGStepBackRoute = '';
state.onbAPIKeyStepBackRoute = '';
state.onbCleanApiKey = '';
state.onbApiKey = '';
state.setDefaultPaymentMethodID = '';
state.deletePaymentMethodID = '';
state.onbSelectedOs = null;
state.managePassphraseStep = undefined;
state.selectedPricingPlan = null;
state.hasShownPricingPlan = false;
state.activeDropdown = '';
state.error.visible = false;
}
return {
state,
firstOnboardingStep,
getConfig,
toggleActiveDropdown,
toggleSuccessfulPasswordReset,
updateActiveModal,

6
web/satellite/src/store/modules/bucketsStore.ts
View File

@ -10,7 +10,7 @@ import { BucketsApiGql } from '@/api/buckets';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
const BUCKETS_PAGE_LIMIT = 7;
const FIRST_PAGE = 1;
@ -145,10 +145,10 @@ export const useBucketsStore = defineStore('buckets', () => {
}
const projectsStore = useProjectsStore();
const appStore = useAppStore();
const configStore = useConfigStore();
const salt = await projectsStore.getProjectSalt(projectID);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
const satelliteNodeURL: string = configStore.state.config.satelliteNodeURL;
if (!state.passphrase) {
throw new Error('Passphrase can\'t be empty');

38
web/satellite/src/store/modules/configStore.ts Normal file
View File

@ -0,0 +1,38 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { computed, reactive } from 'vue';
import { defineStore } from 'pinia';
import { FrontendConfig, FrontendConfigApi } from '@/types/config';
import { FrontendConfigHttpApi } from '@/api/config';
import { NavigationLink } from '@/types/navigation';
import { RouteConfig } from '@/router';
export class ConfigState {
public config: FrontendConfig = new FrontendConfig();
}
export const useConfigStore = defineStore('config', () => {
const state = reactive<ConfigState>(new ConfigState());
const configApi: FrontendConfigApi = new FrontendConfigHttpApi();
const firstOnboardingStep = computed((): NavigationLink => {
return state.config.pricingPackagesEnabled ? RouteConfig.PricingPlanStep : RouteConfig.OverviewStep;
});
async function getConfig(): Promise<FrontendConfig> {
const result = await configApi.get();
state.config = result;
return result;
}
return {
state,
firstOnboardingStep,
getConfig,
};
});

8
web/satellite/src/store/modules/usersStore.ts
View File

@ -13,7 +13,7 @@ import {
UserSettings,
} from '@/types/users';
import { AuthHttpApi } from '@/api/auth';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
export class UsersState {
public user: User = new User();
@ -25,8 +25,6 @@ export class UsersState {
export const useUsersStore = defineStore('users', () => {
const state = reactive<UsersState>(new UsersState());
const appStore = useAppStore();
const userName = computed(() => {
return state.user.getFullName();
});
@ -45,8 +43,10 @@ export const useUsersStore = defineStore('users', () => {
}
async function getUser(): Promise<void> {
const configStore = useConfigStore();
const user = await api.get();
user.projectLimit ||= appStore.state.config.defaultProjectLimit;
user.projectLimit ||= configStore.state.config.defaultProjectLimit;
setUser(user);
}

6
web/satellite/src/views/ActivateAccount.vue
View File

@ -62,7 +62,7 @@ import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/router';
import { Validator } from '@/utils/validation';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import RegistrationSuccess from '@/components/common/RegistrationSuccess.vue';
import VInput from '@/components/common/VInput.vue';
@ -72,8 +72,8 @@ import LogoIcon from '@/../static/images/logo.svg';
import InfoIcon from '@/../static/images/notifications/info.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
const configStore = useConfigStore();
const notify = useNotify();
const appStore = useAppStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -123,7 +123,7 @@ function setEmail(value: string): void {
* Redirects to storj.io homepage.
*/
function onLogoClick(): void {
window.location.href = appStore.state.config.homepageURL;
window.location.href = configStore.state.config.homepageURL;
}
onMounted((): void => {

22
web/satellite/src/views/DashboardArea.vue
View File

@ -152,6 +152,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import UploadNotification from '@/components/notifications/UploadNotification.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
@ -172,6 +173,7 @@ import WarningIcon from '@/../static/images/notifications/circleWarning.svg';
const bucketsStore = useBucketsStore();
const configStore = useConfigStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const billingStore = useBillingStore();
@ -210,7 +212,7 @@ const dashboardContent = ref<HTMLElement | null>(null);
* Returns the session duration from the store.
*/
const sessionDuration = computed((): number => {
return appStore.state.config.inactivityTimerDuration * 1000;
return configStore.state.config.inactivityTimerDuration * 1000;
});
/**
@ -224,7 +226,7 @@ const sessionRefreshInterval = computed((): number => {
* Indicates whether to display the session timer for debugging.
*/
const debugTimerShown = computed((): boolean => {
return appStore.state.config.inactivityTimerViewerEnabled;
return configStore.state.config.inactivityTimerViewerEnabled;
});
/**
@ -325,7 +327,7 @@ const isNavigationHidden = computed((): boolean => {
/* whether all projects dashboard should be used */
const isAllProjectsDashboard = computed((): boolean => {
return appStore.state.config.allProjectsDashboard;
return configStore.state.config.allProjectsDashboard;
});
/* whether the project limit banner should be shown. */
@ -379,14 +381,14 @@ const isOnboardingTour = computed((): boolean => {
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return appStore.state.config.isBetaSatellite;
return configStore.state.config.isBetaSatellite;
});
/**
* Indicates if loading screen is active.
*/
const isLoading = computed((): boolean => {
return appStore.state.viewsState.fetchState === FetchState.LOADING;
return appStore.state.fetchState === FetchState.LOADING;
});
/**
@ -401,14 +403,14 @@ const showMFARecoveryCodeBar = computed((): boolean => {
* Indicates whether the large upload notification should be shown.
*/
const isLargeUploadNotificationShown = computed((): boolean => {
return appStore.state.viewsState.isLargeUploadNotificationShown;
return appStore.state.isLargeUploadNotificationShown;
});
/**
* Indicates whether the large upload warning notification should be shown (file uploading exceeds 1GB).
*/
const isLargeUploadWarningNotificationShown = computed((): boolean => {
return appStore.state.viewsState.isLargeUploadWarningNotificationShown;
return appStore.state.isLargeUploadWarningNotificationShown;
});
/**
@ -469,7 +471,7 @@ function clearSessionTimers(): void {
* Adds DOM event listeners and starts session timers.
*/
function setupSessionTimers(): void {
if (!appStore.state.config.inactivityTimerEnabled) return;
if (!configStore.state.config.inactivityTimerEnabled) return;
const expiresAt = LocalData.getSessionExpirationDate();
@ -749,7 +751,7 @@ onMounted(async () => {
return;
}
if (!appStore.state.config.allProjectsDashboard) {
if (!configStore.state.config.allProjectsDashboard) {
try {
if (!projects.length) {
await projectsStore.createDefaultProject(usersStore.state.user.id);
@ -757,7 +759,7 @@ onMounted(async () => {
selectProject(projects);
}
const onboardingPath = RouteConfig.OnboardingTour.with(appStore.firstOnboardingStep).path;
const onboardingPath = RouteConfig.OnboardingTour.with(configStore.firstOnboardingStep).path;
if (usersStore.shouldOnboard && router.currentRoute.path !== onboardingPath) {
await analytics.pageVisit(onboardingPath);
await router.push(onboardingPath);

10
web/satellite/src/views/ErrorPage.vue
View File

@ -26,12 +26,14 @@ import { computed, onMounted } from 'vue';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import VButton from '@/components/common/VButton.vue';
import Logo from '@/../static/images/logo.svg';
const router = useRouter();
const configStore = useConfigStore();
const appStore = useAppStore();
const messages = new Map<number, string>([
@ -43,7 +45,7 @@ const messages = new Map<number, string>([
* Retrieves the error's status code from the store.
*/
const statusCode = computed((): number => {
return appStore.state.viewsState.error.statusCode;
return appStore.state.error.statusCode;
});
/**
@ -57,14 +59,14 @@ const message = computed((): string => {
* Indicates whether the error is unrecoverable.
*/
const isFatal = computed((): boolean => {
return appStore.state.viewsState.error.fatal;
return appStore.state.error.fatal;
});
/**
* Navigates to the homepage.
*/
function goToHomepage(): void {
window.location.href = appStore.state.config.homepageURL || 'https://www.storj.io';
window.location.href = configStore.state.config.homepageURL || 'https://www.storj.io';
}
/**
@ -82,7 +84,7 @@ function onButtonClick(): void {
* Lifecycle hook after initial render. Sets page title.
*/
onMounted(() => {
const satName = appStore.state.config.satelliteName;
const satName = configStore.state.config.satelliteName;
document.title = statusCode.value.toString() + (satName ? ' | ' + satName : '');
});
</script>

12
web/satellite/src/views/ForgotPassword.vue
View File

@ -103,8 +103,8 @@ import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/router';
import { Validator } from '@/utils/validation';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { MultiCaptchaConfig, PartneredSatellite } from '@/types/config';
import { useConfigStore } from '@/store/modules/configStore';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -115,7 +115,7 @@ import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
const appStore = useAppStore();
const configStore = useConfigStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -136,21 +136,21 @@ const captcha = ref<VueRecaptcha | VueHcaptcha>();
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
return appStore.state.config.partneredSatellites;
return configStore.state.config.partneredSatellites;
});
/**
* This component's captcha configuration.
*/
const captchaConfig = computed((): MultiCaptchaConfig => {
return appStore.state.config.captcha.login;
return configStore.state.config.captcha.login;
});
/**
@ -237,7 +237,7 @@ async function onSendConfigurations(): Promise<void> {
* Redirects to storj.io homepage.
*/
function onLogoClick(): void {
window.location.href = appStore.state.config.homepageURL;
window.location.href = configStore.state.config.homepageURL;
}
/**

14
web/satellite/src/views/LoginArea.vue
View File

@ -176,6 +176,7 @@ import { LocalData } from '@/utils/localData';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import { MultiCaptchaConfig, PartneredSatellite } from '@/types/config';
import VButton from '@/components/common/VButton.vue';
@ -222,6 +223,7 @@ const registerPath: string = RouteConfig.Register.path;
const auth = new AuthHttpApi();
const analytics = new AnalyticsHttpApi();
const configStore = useConfigStore();
const appStore = useAppStore();
const usersStore = useUsersStore();
const notify = useNotify();
@ -232,21 +234,21 @@ const router = reactive(nativeRouter);
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
return appStore.state.config.partneredSatellites;
return configStore.state.config.partneredSatellites;
});
/**
* This component's captcha configuration.
*/
const captchaConfig = computed((): MultiCaptchaConfig => {
return appStore.state.config.captcha.login;
return configStore.state.config.captcha.login;
});
/**
@ -257,7 +259,7 @@ onMounted(() => {
isActivatedBannerShown.value = !!router.currentRoute.query.activated;
isActivatedError.value = router.currentRoute.query.activated === 'false';
if (appStore.state.config.allProjectsDashboard) {
if (configStore.state.config.allProjectsDashboard) {
returnURL.value = RouteConfig.AllProjectsDashboard.path;
}
@ -275,7 +277,7 @@ function clearConfirmMFAInput(): void {
* Redirects to storj.io homepage.
*/
function onLogoClick(): void {
const homepageURL = appStore.state.config.homepageURL;
const homepageURL = configStore.state.config.homepageURL;
if (homepageURL) window.location.href = homepageURL;
}
@ -465,7 +467,7 @@ function validateFields(): boolean {
isNoErrors = false;
}
if (password.value.length < appStore.state.config.passwordMinimumLength) {
if (password.value.length < configStore.state.config.passwordMinimumLength) {
passwordError.value = 'Invalid Password';
isNoErrors = false;
}

8
web/satellite/src/views/ResetPassword.vue
View File

@ -84,6 +84,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { ErrorTokenExpired } from '@/api/errors/ErrorTokenExpired';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VInput from '@/components/common/VInput.vue';
@ -93,6 +94,7 @@ import KeyIcon from '@/../static/images/resetPassword/success.svg';
import LogoIcon from '@/../static/images/logo.svg';
import GreyWarningIcon from '@/../static/images/common/greyWarning.svg';
const configStore = useConfigStore();
const appStore = useAppStore();
const notify = useNotify();
const nativeRouter = useRouter();
@ -120,7 +122,7 @@ const mfaInput = ref<ConfirmMFAInput>();
* Returns whether the successful password reset area is shown.
*/
const isSuccessfulPasswordResetShown = computed(() : boolean => {
return appStore.state.viewsState.isSuccessfulPasswordResetShown;
return appStore.state.isSuccessfulPasswordResetShown;
});
/**
@ -169,7 +171,7 @@ async function onResetClick(): Promise<void> {
*/
function validateFields(): boolean {
let isNoErrors = true;
let config = appStore.state.config;
let config = configStore.state.config;
if (password.value.length < config.passwordMinimumLength || password.value.length > config.passwordMaximumLength) {
passwordError.value = 'Invalid password';
@ -202,7 +204,7 @@ function hidePasswordStrength(): void {
* Redirects to storj.io homepage.
*/
function onLogoClick(): void {
window.location.href = appStore.state.config.homepageURL;
window.location.href = configStore.state.config.homepageURL;
}
/**

14
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -140,6 +140,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import SessionExpiredModal from '@/components/modals/SessionExpiredModal.vue';
@ -157,6 +158,7 @@ const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const notify = useNotify();
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
@ -192,7 +194,7 @@ const dashboardContent = ref<HTMLElement | null>(null);
* Returns the session duration from the store.
*/
const sessionDuration = computed((): number => {
return appStore.state.config.inactivityTimerDuration * 1000;
return configStore.state.config.inactivityTimerDuration * 1000;
});
/**
@ -206,7 +208,7 @@ const sessionRefreshInterval = computed((): number => {
* Indicates whether to display the session timer for debugging.
*/
const debugTimerShown = computed((): boolean => {
return appStore.state.config.inactivityTimerViewerEnabled;
return configStore.state.config.inactivityTimerViewerEnabled;
});
/**
@ -308,14 +310,14 @@ const isBillingPage = computed(() => {
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return appStore.state.config.isBetaSatellite;
return configStore.state.config.isBetaSatellite;
});
/**
* Indicates if loading screen is active.
*/
const isLoading = computed((): boolean => {
return appStore.state.viewsState.fetchState === FetchState.LOADING;
return appStore.state.fetchState === FetchState.LOADING;
});
/**
@ -472,7 +474,7 @@ function clearSessionTimers(): void {
* Adds DOM event listeners and starts session timers.
*/
function setupSessionTimers(): void {
if (!appStore.state.config.inactivityTimerEnabled) return;
if (!configStore.state.config.inactivityTimerEnabled) return;
const expiresAt = LocalData.getSessionExpirationDate();
@ -629,7 +631,7 @@ onMounted(async () => {
appStore.changeState(FetchState.LOADED);
if (usersStore.shouldOnboard && !appStore.state.viewsState.hasShownPricingPlan) {
if (usersStore.shouldOnboard && !appStore.state.hasShownPricingPlan) {
appStore.setHasShownPricingPlan(true);
// if the user is not legible for a pricing plan, they'll automatically be
// navigated back to all projects dashboard.

9
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -95,10 +95,7 @@ import { computed, ref } from 'vue';
import { useNotify, useRouter } from '@/utils/hooks';
import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue';
import {
AnalyticsErrorEventSource,
AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { User } from '@/types/users';
@ -113,6 +110,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import VButton from '@/components/common/VButton.vue';
@ -133,6 +131,7 @@ import MenuIcon from '@/../static/images/navigation/menu.svg';
const router = useRouter();
const notify = useNotify();
const configStore = useConfigStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -156,7 +155,7 @@ const isNavOpened = ref(false);
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**

6
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -70,6 +70,7 @@ import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useNotificationsStore } from '@/store/modules/notificationsStore';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useConfigStore } from '@/store/modules/configStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -85,6 +86,7 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const configStore = useConfigStore();
const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
@ -102,14 +104,14 @@ const isHoveredOver = ref(false);
* Indicates if account dropdown is open.
*/
const isDropdownOpen = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT;
return appStore.state.activeDropdown === APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT;
});
/**
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
function openDropdown(): void {

2
web/satellite/src/views/all-dashboard/components/ProjectItem.vue
View File

@ -89,7 +89,7 @@ const props = withDefaults(defineProps<{
* isDropdownOpen if dropdown is open.
*/
const isDropdownOpen = computed((): boolean => {
return appStore.state.viewsState.activeDropdown === props.project.id;
return appStore.state.activeDropdown === props.project.id;
});
/**

22
web/satellite/src/views/registration/RegisterArea.vue
View File

@ -300,7 +300,7 @@ import { RouteConfig } from '@/router';
import { MultiCaptchaConfig, PartneredSatellite } from '@/types/config';
import { User } from '@/types/users';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import SelectInput from '@/components/common/SelectInput.vue';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
@ -371,7 +371,7 @@ const captcha = ref<VueRecaptcha | VueHcaptcha | null>(null);
const auth = new AuthHttpApi();
const appStore = useAppStore();
const configStore = useConfigStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -460,7 +460,7 @@ async function onCreateClick(): Promise<void> {
* Redirects to storj.io homepage.
*/
function onLogoClick(): void {
window.location.href = appStore.state.config.homepageURL;
window.location.href = configStore.state.config.homepageURL;
}
/**
@ -500,21 +500,21 @@ function setRepeatedPassword(value: string): void {
* This component's captcha configuration.
*/
const captchaConfig = computed((): MultiCaptchaConfig => {
return appStore.state.config.captcha.registration;
return configStore.state.config.captcha.registration;
});
/**
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return appStore.state.config.satelliteName;
return configStore.state.config.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
const config = appStore.state.config;
const config = configStore.state.config;
const satellites = config.partneredSatellites.filter(sat => sat.name !== config.satelliteName);
return satellites.map((s: PartneredSatellite) => {
s.address = `${s.address}/signup`;
@ -531,14 +531,14 @@ const partneredSatellites = computed((): PartneredSatellite[] => {
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return appStore.state.config.isBetaSatellite;
return configStore.state.config.isBetaSatellite;
});
/**
* Indicates if coupon code ui is enabled
*/
const couponCodeSignupUIEnabled = computed((): boolean => {
return appStore.state.config.couponCodeSignupUIEnabled;
return configStore.state.config.couponCodeSignupUIEnabled;
});
/**
@ -662,7 +662,7 @@ function validateFields(): boolean {
isNoErrors = false;
}
let config = appStore.state.config;
let config = configStore.state.config;
if (password.value.length < config.passwordMinimumLength || password.value.length > config.passwordMaximumLength) {
passwordError.value = 'Invalid Password';
@ -775,14 +775,14 @@ async function createUser(): Promise<void> {
// signups outside of the brave browser may use a configured URL to track conversions
// if the URL is not configured, the RegisterSuccess path will be used for non-Brave browsers
const internalRegisterSuccessPath = RouteConfig.RegisterSuccess.path;
const configuredRegisterSuccessPath = appStore.state.config.optionalSignupSuccessURL || internalRegisterSuccessPath;
const configuredRegisterSuccessPath = configStore.state.config.optionalSignupSuccessURL || internalRegisterSuccessPath;
const nonBraveSuccessPath = `${configuredRegisterSuccessPath}?email=${encodeURIComponent(user.value.email)}`;
const braveSuccessPath = `${internalRegisterSuccessPath}?email=${encodeURIComponent(user.value.email)}`;
await detectBraveBrowser() ? await router.push(braveSuccessPath) : window.location.href = nonBraveSuccessPath;
} catch (error) {
await notify.error(error.message, null);
notify.error(error.message, null);
}
captcha.value?.reset();