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

web/satellite: use pinia users module instead of vuex users module

Browse Source 
Start using pinia users module instead of vuex pinia module.

Change-Id: I2a61aafa4b8f71cccd2a5825e11b315f59767289
This commit is contained in:
Vitalii 2023-04-06 18:38:48 +03:00 committed by Storj Robot
parent 5d860fddbd
commit 9c20c4ecb4
43 changed files with 302 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/satellite/src/components/account/NewSettingsArea.vue
View File

@ -101,7 +101,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted } from 'vue'; import { computed, onMounted } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -109,9 +108,11 @@ import { useNotify, useStore } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Duration } from '@/utils/time'; import { Duration } from '@/utils/time';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
@ -120,14 +121,14 @@ const { isLoading, withLoading } = useLoading();
* Returns user info from store. * Returns user info from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
* Returns duration from store. * Returns duration from store.
*/ */
const userDuration = computed((): Duration | null => { const userDuration = computed((): Duration | null => {
return store.state.usersModule.settings.sessionDuration; return usersStore.state.settings.sessionDuration;
}); });
/** /**
@ -178,7 +179,7 @@ function toggleEditProfileModal(): void {
async function enableMFA(): Promise<void> { async function enableMFA(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_SECRET); await usersStore.generateUserMFASecret();
toggleEnableMFAModal(); toggleEnableMFAModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA); await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
@ -192,7 +193,7 @@ async function enableMFA(): Promise<void> {
async function generateNewMFARecoveryCodes(): Promise<void> { async function generateNewMFARecoveryCodes(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES); await usersStore.generateUserMFARecoveryCodes();
toggleMFACodesModal(); toggleMFACodesModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA); await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
@ -204,7 +205,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
* Lifecycle hook after initial render where user info is fetching. * Lifecycle hook after initial render where user info is fetching.
*/ */
onMounted(() => { onMounted(() => {
store.dispatch(USER_ACTIONS.GET); usersStore.getUser();
}); });
</script> </script>

13
web/satellite/src/components/account/SettingsArea.vue
View File

@ -85,13 +85,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted } from 'vue'; import { computed, onMounted } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading'; import { useLoading } from '@/composables/useLoading';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -99,6 +99,7 @@ import ChangePasswordIcon from '@/../static/images/account/profile/changePasswor
import EmailIcon from '@/../static/images/account/profile/email.svg'; import EmailIcon from '@/../static/images/account/profile/email.svg';
import EditIcon from '@/../static/images/common/edit.svg'; import EditIcon from '@/../static/images/common/edit.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const { isLoading, withLoading } = useLoading(); const { isLoading, withLoading } = useLoading();
@ -107,14 +108,14 @@ const { isLoading, withLoading } = useLoading();
* Returns user info from store. * Returns user info from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
* Returns first letter of user name. * Returns first letter of user name.
*/ */
const avatarLetter = computed((): string => { const avatarLetter = computed((): string => {
return store.getters.userName.slice(0, 1).toUpperCase(); return usersStore.userName.slice(0, 1).toUpperCase();
}); });
/** /**
@ -158,7 +159,7 @@ function toggleEditProfileModal(): void {
async function enableMFA(): Promise<void> { async function enableMFA(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_SECRET); await usersStore.generateUserMFASecret();
toggleEnableMFAModal(); toggleEnableMFAModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA); await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
@ -172,7 +173,7 @@ async function enableMFA(): Promise<void> {
async function generateNewMFARecoveryCodes(): Promise<void> { async function generateNewMFARecoveryCodes(): Promise<void> {
await withLoading(async () => { await withLoading(async () => {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES); await usersStore.generateUserMFARecoveryCodes();
toggleMFACodesModal(); toggleMFACodesModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA); await notify.error(error.message, AnalyticsErrorEventSource.ACCOUNT_SETTINGS_AREA);
@ -184,7 +185,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
* Lifecycle hook after initial render where user info is fetching. * Lifecycle hook after initial render where user info is fetching.
*/ */
onMounted(() => { onMounted(() => {
store.dispatch(USER_ACTIONS.GET); usersStore.getUser();
}); });
</script> </script>

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

@ -185,13 +185,13 @@ import {
Wallet, Wallet,
NativePaymentHistoryItem, NativePaymentHistoryItem,
} from '@/types/payments'; } from '@/types/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -231,6 +231,7 @@ const {
GET_NATIVE_PAYMENTS_HISTORY, GET_NATIVE_PAYMENTS_HISTORY,
} = PAYMENTS_ACTIONS; } = PAYMENTS_ACTIONS;
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const nativeRouter = useRouter(); const nativeRouter = useRouter();
@ -275,7 +276,7 @@ const wallet = computed((): Wallet => {
* Indicates if user has own project. * Indicates if user has own project.
*/ */
const userHasOwnProject = computed((): boolean => { const userHasOwnProject = computed((): boolean => {
return store.getters.projectsCount > 0; return store.getters.projectsCount(usersStore.state.user.id) > 0;
}); });
const creditCards = computed((): CreditCard[] => { const creditCards = computed((): CreditCard[] => {
@ -362,7 +363,7 @@ async function addCard(token: string): Promise<void> {
await store.dispatch(ADD_CREDIT_CARD, token); await store.dispatch(ADD_CREDIT_CARD, token);
// We fetch User one more time to update their Paid Tier status. // We fetch User one more time to update their Paid Tier status.
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB); await notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);

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

@ -18,9 +18,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { useStore } from '@/utils/hooks'; import { useUsersStore } from '@/store/modules/usersStore';
const store = useStore(); const usersStore = useUsersStore();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
openGenerateModal: () => void, openGenerateModal: () => void,
@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
* Returns the quantity of MFA recovery codes. * Returns the quantity of MFA recovery codes.
*/ */
const numCodes = computed((): number => { const numCodes = computed((): number => {
return store.getters.user.mfaRecoveryCodeCount; return usersStore.state.user.mfaRecoveryCodeCount;
}); });
</script> </script>

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

@ -32,9 +32,11 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
@ -44,14 +46,14 @@ const isDataFetching = ref<boolean>(true);
* Returns user's projects count. * Returns user's projects count.
*/ */
const projectsCount = computed((): number => { const projectsCount = computed((): number => {
return store.getters.projectsCount; return store.getters.projectsCount(usersStore.state.user.id);
}); });
/** /**
* Returns project limit from store. * Returns project limit from store.
*/ */
const projectLimit = computed((): number => { const projectLimit = computed((): number => {
const projectLimit: number = store.getters.user.projectLimit; const projectLimit: number = usersStore.state.user.projectLimit;
if (projectLimit < projectsCount.value) return projectsCount.value; if (projectLimit < projectsCount.value) return projectsCount.value;
return projectLimit; return projectLimit;

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

@ -134,7 +134,6 @@ import { useNotify, useRoute, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@ -142,6 +141,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ProjectUsagePriceModel } from '@/types/payments'; import { ProjectUsagePriceModel } from '@/types/payments';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_TB_SHIFT } from '@/utils/strings'; import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_TB_SHIFT } from '@/utils/strings';
import { useUsersStore } from '@/store/modules/usersStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -156,8 +156,9 @@ interface StripeForm {
onSubmit(): Promise<void>; onSubmit(): Promise<void>;
} }
const notify = useNotify(); const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify();
const route = useRoute(); const route = useRoute();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -212,7 +213,7 @@ async function addCardToDB(token: string): Promise<void> {
await notify.success('Card successfully added'); await notify.success('Card successfully added');
// We fetch User one more time to update their Paid Tier status. // We fetch User one more time to update their Paid Tier status.
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
if (route.name === RouteConfig.ProjectDashboard.name) { if (route.name === RouteConfig.ProjectDashboard.name) {
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id); await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
@ -285,7 +286,7 @@ const bandwidthPrice = computed((): string => {
*/ */
onBeforeMount(() => { onBeforeMount(() => {
try { try {
const partner = store.getters.user.partner; const partner = usersStore.state.user.partner;
const config = require('@/components/account/billing/billingConfig.json'); const config = require('@/components/account/billing/billingConfig.json');
if (partner !== '' && config[partner] && config[partner].extraBandwidthPriceInfo) { if (partner !== '' && config[partner] && config[partner].extraBandwidthPriceInfo) {
extraBandwidthPriceInfo.value = config[partner].extraBandwidthPriceInfo; extraBandwidthPriceInfo.value = config[partner].extraBandwidthPriceInfo;

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

@ -91,6 +91,7 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
@ -100,6 +101,7 @@ import AddFieldIcon from '@/../static/images/team/addField.svg';
import AddMemberNotificationIcon from '@/../static/images/team/addMemberNotification.svg'; import AddMemberNotificationIcon from '@/../static/images/team/addMemberNotification.svg';
import DeleteFieldIcon from '@/../static/images/team/deleteField.svg'; import DeleteFieldIcon from '@/../static/images/team/deleteField.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
@ -198,7 +200,7 @@ async function onAddUsersClick(): Promise<void> {
return; return;
} }
if (emailArray.includes(store.state.usersModule.user.email)) { if (emailArray.includes(usersStore.state.user.email)) {
await notify.error(`Error during adding project members. You can't add yourself to the project`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL); await notify.error(`Error during adding project members. You can't add yourself to the project`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL);
isLoading.value = false; isLoading.value = false;

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

@ -72,12 +72,14 @@ import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -117,7 +119,7 @@ async function onCreateProjectClick(): Promise<void> {
const project = new ProjectFields( const project = new ProjectFields(
projectName.value, projectName.value,
description.value, description.value,
store.getters.user.id, usersStore.state.user.id,
); );
try { try {

7
web/satellite/src/components/modals/DisableMFAModal.vue
View File

@ -43,12 +43,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { DisableMFARequest } from '@/types/users'; import { DisableMFARequest } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue'; import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -58,6 +58,7 @@ interface ClearInput {
clearInput(): void; clearInput(): void;
} }
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
@ -101,8 +102,8 @@ async function disable(): Promise<void> {
isLoading.value = true; isLoading.value = true;
try { try {
await store.dispatch(USER_ACTIONS.DISABLE_USER_MFA, request.value); await usersStore.disableUserMFA(request.value);
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
await notify.success('MFA was disabled successfully'); await notify.success('MFA was disabled successfully');

9
web/satellite/src/components/modals/EditProfileModal.vue
View File

@ -41,31 +41,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, reactive, ref } from 'vue'; import { computed, reactive, ref } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { UpdatedUser } from '@/types/users'; import { UpdatedUser } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
const userStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const userInfo = reactive<UpdatedUser>(new UpdatedUser(store.getters.user.fullName, store.getters.user.shortName)); const userInfo = reactive<UpdatedUser>(new UpdatedUser(userStore.state.user.fullName, userStore.state.user.shortName));
const fullNameError = ref<string>(''); const fullNameError = ref<string>('');
/** /**
* Returns first letter of user name. * Returns first letter of user name.
*/ */
const avatarLetter = computed((): string => { const avatarLetter = computed((): string => {
return store.getters.userName.slice(0, 1).toUpperCase(); return userStore.userName.slice(0, 1).toUpperCase();
}); });
/** /**
@ -87,7 +88,7 @@ async function onUpdateClick(): Promise<void> {
} }
try { try {
await store.dispatch(USER_ACTIONS.UPDATE, userInfo); await userStore.updateUser(userInfo);
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROFILE_MODAL); await notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROFILE_MODAL);

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

@ -57,9 +57,8 @@ import { computed, onMounted, ref } from 'vue';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { Duration } from '@/utils/time'; import { Duration } from '@/utils/time';
import { USER_ACTIONS } from '@/store/modules/users';
import { SetUserSettingsData } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
@ -67,6 +66,7 @@ import TimeoutSelector from '@/components/modals/editSessionTimeout/TimeoutSelec
import Icon from '@/../static/images/session/inactivityTimer.svg'; import Icon from '@/../static/images/session/inactivityTimer.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
@ -85,7 +85,7 @@ onMounted(() => {
* Returns duration from store. * Returns duration from store.
*/ */
const userDuration = computed((): Duration | null => { const userDuration = computed((): Duration | null => {
return store.state.usersModule.settings.sessionDuration; return usersStore.state.settings.sessionDuration;
}); });
/** /**
@ -112,9 +112,7 @@ function durationChange(duration: Duration) {
async function save() { async function save() {
isLoading.value = true; isLoading.value = true;
try { try {
await store.dispatch(USER_ACTIONS.UPDATE_SETTINGS, { await usersStore.updateSettings({ sessionDuration: sessionDuration.value?.nanoseconds ?? 0 });
sessionDuration: sessionDuration.value?.nanoseconds ?? 0,
} as SetUserSettingsData);
notify.success(`Session timeout changed successfully. Your session timeout is ${sessionDuration.value?.shortString}.`); notify.success(`Session timeout changed successfully. Your session timeout is ${sessionDuration.value?.shortString}.`);
onClose(); onClose();
} catch (error) { } catch (error) {

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

@ -80,17 +80,18 @@
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks'; import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue'; import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
@ -115,17 +116,17 @@ const satellite = computed((): string => {
* Returns pre-generated MFA secret from store. * Returns pre-generated MFA secret from store.
*/ */
const userMFASecret = computed((): string => { const userMFASecret = computed((): string => {
return store.state.usersModule.userMFASecret; return usersStore.state.userMFASecret;
}); });
/** /**
* Returns user MFA recovery codes from store. * Returns user MFA recovery codes from store.
*/ */
const userMFARecoveryCodes = computed((): string[] => { const userMFARecoveryCodes = computed((): string[] => {
return store.state.usersModule.userMFARecoveryCodes; return usersStore.state.userMFARecoveryCodes;
}); });
const qrLink = `otpauth://totp/${encodeURIComponent(store.getters.user.email)}?secret=${userMFASecret.value}&issuer=${encodeURIComponent(`STORJ ${satellite.value}`)}&algorithm=SHA1&digits=6&period=30`; const qrLink = `otpauth://totp/${encodeURIComponent(usersStore.state.user.email)}?secret=${userMFASecret.value}&issuer=${encodeURIComponent(`STORJ ${satellite.value}`)}&algorithm=SHA1&digits=6&period=30`;
/** /**
* Toggles view to Enable MFA state. * Toggles view to Enable MFA state.
@ -147,7 +148,7 @@ function closeModal(): void {
*/ */
async function showCodes(): Promise<void> { async function showCodes(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES); await usersStore.generateUserMFARecoveryCodes();
isEnable.value = false; isEnable.value = false;
isCodes.value = true; isCodes.value = true;
} catch (error) { } catch (error) {
@ -172,8 +173,8 @@ async function enable(): Promise<void> {
isLoading.value = true; isLoading.value = true;
try { try {
await store.dispatch(USER_ACTIONS.ENABLE_USER_MFA, confirmPasscode.value); await usersStore.enableUserMFA(confirmPasscode.value);
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
await showCodes(); await showCodes();
analytics.eventTriggered(AnalyticsEvent.MFA_ENABLED); analytics.eventTriggered(AnalyticsEvent.MFA_ENABLED);

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

@ -35,17 +35,19 @@ import { computed } from 'vue';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks'; import { useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue'; import VModal from '@/components/common/VModal.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
/** /**
* Returns MFA recovery codes from store. * Returns MFA recovery codes from store.
*/ */
const userMFARecoveryCodes = computed((): string[] => { const userMFARecoveryCodes = computed((): string[] => {
return store.state.usersModule.userMFARecoveryCodes; return usersStore.state.userMFARecoveryCodes;
}); });
/** /**

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

@ -75,7 +75,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
@ -89,6 +88,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { PM_ACTIONS } from '@/utils/constants/actionNames'; import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -97,14 +97,15 @@ import VButton from '@/components/common/VButton.vue';
import BlueBoxIcon from '@/../static/images/common/blueBox.svg'; import BlueBoxIcon from '@/../static/images/common/blueBox.svg';
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
const store = useStore();
const description = ref(''); const description = ref('');
const createdProjectId = ref(''); const createdProjectId = ref('');
const hasDescription = ref(false); const hasDescription = ref(false);
const isLoading = ref(false); const isLoading = ref(false);
const projectName = ref(''); const projectName = ref('');
const nameError = ref(''); const nameError = ref('');
@ -139,7 +140,7 @@ async function onCreateProjectClick(): Promise<void> {
const project = new ProjectFields( const project = new ProjectFields(
projectName.value, projectName.value,
description.value, description.value,
store.getters.user.id, usersStore.state.user.id,
); );
try { try {
@ -171,7 +172,7 @@ async function onCreateProjectClick(): Promise<void> {
store.commit(OBJECTS_MUTATIONS.CLEAR); store.commit(OBJECTS_MUTATIONS.CLEAR);
if (store.getters.shouldOnboard && store.state.appStateModule.isAllProjectsDashboard) { if (usersStore.shouldOnboard && store.state.appStateModule.isAllProjectsDashboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;

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

@ -38,7 +38,7 @@
width="100%" width="100%"
font-size="13px" font-size="13px"
icon="lock" icon="lock"
:is-green="plan.type == 'partner'" :is-green="plan.type === 'partner'"
:is-disabled="isLoading" :is-disabled="isLoading"
:on-press="onActivateClick" :on-press="onActivateClick"
/> />
@ -83,9 +83,9 @@ import { computed, ref, watch } from 'vue';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { PricingPlanInfo, PricingPlanType } from '@/types/common'; import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue'; import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -99,6 +99,7 @@ interface StripeForm {
onSubmit(): Promise<void>; onSubmit(): Promise<void>;
} }
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
@ -174,7 +175,7 @@ async function onCardAdded(token: string): Promise<void> {
isSuccess.value = true; isSuccess.value = true;
// Fetch user to update paid tier status // Fetch user to update paid tier status
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
// Fetch cards to hide paid tier banner // Fetch cards to hide paid tier banner
await store.dispatch(PAYMENTS_ACTIONS.GET_CREDIT_CARDS); await store.dispatch(PAYMENTS_ACTIONS.GET_CREDIT_CARDS);
} catch (error) { } catch (error) {

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

@ -55,7 +55,6 @@ import { RouteConfig } from '@/router';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'; import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants'; import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects'; import { OBJECTS_ACTIONS } from '@/store/modules/objects';
@ -66,6 +65,7 @@ import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import BillingIcon from '@/../static/images/navigation/billing.svg'; import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg'; import InfoIcon from '@/../static/images/navigation/info.svg';
@ -80,7 +80,9 @@ import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore(); const abTestingStore = useABTestingStore();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -113,7 +115,7 @@ const satellite = computed((): string => {
* Returns user entity from store. * Returns user entity from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
@ -147,7 +149,7 @@ async function onLogout(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),

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

@ -169,7 +169,6 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects'; import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { User } from '@/types/users'; import { User } from '@/types/users';
@ -181,6 +180,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue'; import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue'; import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -218,6 +218,7 @@ const navigation: NavigationLink[] = [
RouteConfig.Users.withIcon(UsersIcon), RouteConfig.Users.withIcon(UsersIcon),
]; ];
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
@ -263,7 +264,7 @@ const selectedProject = computed((): Project => {
/** /**
* Returns satellite name from store. * Returns satellite name from store.
*/ */
const satellite = computed((): boolean => { const satellite = computed((): string => {
return store.state.appStateModule.satelliteName; return store.state.appStateModule.satelliteName;
}); });
@ -271,7 +272,7 @@ const satellite = computed((): boolean => {
* Returns user entity from store. * Returns user entity from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
@ -411,8 +412,8 @@ function onCreateLinkClick(): void {
if (router.currentRoute.name !== RouteConfig.CreateProject.name) { if (router.currentRoute.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = store.getters.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
@ -459,7 +460,7 @@ async function onLogout(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),

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

@ -76,6 +76,7 @@ import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -86,10 +87,11 @@ import PassphraseIcon from '@/../static/images/navigation/passphrase.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg'; import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg'; import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
const nativeRouter = useRouter(); const userStore = useUsersStore();
const router = reactive(nativeRouter);
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -279,8 +281,8 @@ function onCreateLinkClick(): void {
if (router.currentRoute.name !== RouteConfig.CreateProject.name) { if (router.currentRoute.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = store.getters.user; const user: User = userStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);

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

@ -52,6 +52,7 @@ import { AccessType } from '@/types/createAccessGrant';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useRouter, useStore } from '@/utils/hooks'; import { useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import NewProjectIcon from '@/../static/images/navigation/newProject.svg'; import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg'; import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@ -59,6 +60,7 @@ import S3Icon from '@/../static/images/navigation/s3.svg';
import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg'; import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg';
import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg'; import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const nativeRouter = useRouter(); const nativeRouter = useRouter();
const router = reactive(nativeRouter); const router = reactive(nativeRouter);
@ -127,8 +129,8 @@ function navigateToNewProject(): void {
if (router.currentRoute.name !== RouteConfig.CreateProject.name) { if (router.currentRoute.name !== RouteConfig.CreateProject.name) {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED); analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = store.getters.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);

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

@ -27,9 +27,11 @@ import { computed } from 'vue';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { useStore } from '@/utils/hooks'; import { useStore } from '@/utils/hooks';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { useUsersStore } from '@/store/modules/usersStore';
import VBanner from '@/components/common/VBanner.vue'; import VBanner from '@/components/common/VBanner.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const props = defineProps<{ const props = defineProps<{
@ -58,21 +60,21 @@ const projectLimitsIncreaseRequestURL = computed((): string => {
* Returns whether user is in paid tier. * Returns whether user is in paid tier.
*/ */
const isPaidTier = computed((): boolean => { const isPaidTier = computed((): boolean => {
return store.state.usersModule.user.paidTier; return usersStore.state.user.paidTier;
}); });
/** /**
* Returns user's projects count. * Returns user's projects count.
*/ */
const projectsCount = computed((): number => { const projectsCount = computed((): number => {
return store.getters.projectsCount; return store.getters.projectsCount(usersStore.state.user.id);
}); });
/** /**
* Returns project limit from store. * Returns project limit from store.
*/ */
const projectLimit = computed((): number => { const projectLimit = computed((): number => {
const projectLimit: number = store.getters.user.projectLimit; const projectLimit: number = usersStore.state.user.projectLimit;
if (projectLimit < projectsCount.value) return projectsCount.value; if (projectLimit < projectsCount.value) return projectsCount.value;
return projectLimit; return projectLimit;

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

@ -36,12 +36,12 @@ import { MetaUtils } from '@/utils/meta';
import { PartneredSatellite } from '@/types/common'; import { PartneredSatellite } from '@/types/common';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { USER_ACTIONS } from '@/store/modules/users';
import { UserSettings } from '@/types/users';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue'; import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -87,9 +87,7 @@ async function onUploadInBrowserClick(): Promise<void> {
async function endOnboarding(): Promise<void> { async function endOnboarding(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.UPDATE_SETTINGS, { await usersStore.updateSettings({ onboardingEnd: true });
onboardingEnd: true,
} as Partial<UserSettings>);
} catch (error) { } catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP); notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP);
} }
@ -101,10 +99,8 @@ async function endOnboarding(): Promise<void> {
*/ */
onMounted(async (): Promise<void> => { onMounted(async (): Promise<void> => {
try { try {
if (!store.state.usersModule.settings.onboardingStart) { if (!usersStore.state.settings.onboardingStart) {
await store.dispatch(USER_ACTIONS.UPDATE_SETTINGS, { await usersStore.updateSettings({ onboardingStart: true });
onboardingStart: true,
} as Partial<UserSettings>);
} }
} catch (error) { } catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP); notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP);

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

@ -23,16 +23,17 @@ import { onBeforeMount, ref } from 'vue';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { PricingPlanInfo, PricingPlanType } from '@/types/common'; import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { User, UserSettings } from '@/types/users'; import { User } from '@/types/users';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { PaymentsHttpApi } from '@/api/payments'; import { PaymentsHttpApi } from '@/api/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useUsersStore } from '@/store/modules/usersStore';
import PricingPlanContainer from '@/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue'; import PricingPlanContainer from '@/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify(); const notify = useNotify();
@ -71,7 +72,7 @@ const plans = ref<PricingPlanInfo[]>([
* Loads pricing plan config. * Loads pricing plan config.
*/ */
onBeforeMount(async () => { onBeforeMount(async () => {
const user: User = store.getters.user; const user: User = usersStore.state.user;
let nextPath = RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path; let nextPath = RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path;
if (store.state.appStateModule.isAllProjectsDashboard) { if (store.state.appStateModule.isAllProjectsDashboard) {
nextPath = RouteConfig.AllProjectsDashboard.path; nextPath = RouteConfig.AllProjectsDashboard.path;
@ -112,11 +113,9 @@ onBeforeMount(async () => {
plan.type = PricingPlanType.PARTNER; plan.type = PricingPlanType.PARTNER;
plans.value.unshift(plan); plans.value.unshift(plan);
if (!store.state.usersModule.settings.onboardingStart) { if (!usersStore.state.settings.onboardingStart) {
try { try {
await store.dispatch(USER_ACTIONS.UPDATE_SETTINGS, { await usersStore.updateSettings({ onboardingStart: true });
onboardingStart: true,
} as Partial<UserSettings>);
} catch (error) { } catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.PRICING_PLAN_STEP); notify.error(error.message, AnalyticsErrorEventSource.PRICING_PLAN_STEP);
} }

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

@ -32,15 +32,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { USER_ACTIONS } from '@/store/modules/users';
import { UserSettings } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import Icon from '@/../static/images/onboardingTour/successStep.svg'; import Icon from '@/../static/images/onboardingTour/successStep.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -66,9 +66,7 @@ async function onFinishClick(): Promise<void> {
async function endOnboarding(): Promise<void> { async function endOnboarding(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.UPDATE_SETTINGS, { await usersStore.updateSettings({ onboardingEnd: true });
onboardingEnd: true,
} as Partial<UserSettings>);
} catch (error) { } catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP); notify.error(error.message, AnalyticsErrorEventSource.ONBOARDING_OVERVIEW_STEP);
} }

4
web/satellite/src/components/project/CreateProject.vue
View File

@ -69,11 +69,13 @@ import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -121,7 +123,7 @@ async function onCreateProjectClick(): Promise<void> {
const project = new ProjectFields( const project = new ProjectFields(
projectName.value, projectName.value,
description.value, description.value,
store.getters.user.id, usersStore.state.user.id,
); );
try { try {

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

@ -213,9 +213,11 @@ import { MetaUtils } from '@/utils/meta';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -584,7 +586,7 @@ function toggleDescriptionEditing(): void {
function toggleStorageLimitEditing(): void { function toggleStorageLimitEditing(): void {
const storageLimitUnit = new Size(currentLimits.value.storageLimit, 2).label; const storageLimitUnit = new Size(currentLimits.value.storageLimit, 2).label;
if (store.state.usersModule.user.paidTier) { if (usersStore.state.user.paidTier) {
isStorageLimitEditing.value = !isStorageLimitEditing.value; isStorageLimitEditing.value = !isStorageLimitEditing.value;
if (activeStorageMeasurement.value === Dimensions.TB && storageLimitUnit !== Dimensions.TB) { if (activeStorageMeasurement.value === Dimensions.TB && storageLimitUnit !== Dimensions.TB) {
@ -604,7 +606,7 @@ function toggleStorageLimitEditing(): void {
function toggleBandwidthLimitEditing(): void { function toggleBandwidthLimitEditing(): void {
const bandwidthLimitUnit = new Size(currentLimits.value.bandwidthLimit, 2).label; const bandwidthLimitUnit = new Size(currentLimits.value.bandwidthLimit, 2).label;
if (store.state.usersModule.user.paidTier) { if (usersStore.state.user.paidTier) {
isBandwidthLimitEditing.value = !isBandwidthLimitEditing.value; isBandwidthLimitEditing.value = !isBandwidthLimitEditing.value;
if (activeBandwidthMeasurement.value === Dimensions.TB && bandwidthLimitUnit !== Dimensions.TB) { if (activeBandwidthMeasurement.value === Dimensions.TB && bandwidthLimitUnit !== Dimensions.TB) {
@ -633,7 +635,7 @@ function onBackClick(): void {
onMounted(async (): Promise<void> => { onMounted(async (): Promise<void> => {
if (!store.getters.selectedProject.id) return; if (!store.getters.selectedProject.id) return;
if (store.state.usersModule.user.paidTier) { if (usersStore.state.user.paidTier) {
isPaidTier.value = true; isPaidTier.value = true;
} }

6
web/satellite/src/components/project/ProjectOwnershipTag.vue
View File

@ -13,12 +13,12 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { useStore } from '@/utils/hooks';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { useUsersStore } from '@/store/modules/usersStore';
import BoxIcon from '@/../static/images/allDashboard/box.svg'; import BoxIcon from '@/../static/images/allDashboard/box.svg';
const store = useStore(); const usersStore = useUsersStore();
const props = defineProps<{ const props = defineProps<{
project?: Project, project?: Project,
@ -28,7 +28,7 @@ const props = defineProps<{
* Returns user entity from store. * Returns user entity from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**

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

@ -170,6 +170,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue'; import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -186,6 +187,7 @@ import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
import NewProjectIcon from '@/../static/images/project/newProject.svg'; import NewProjectIcon from '@/../static/images/project/newProject.svg';
import InfoIcon from '@/../static/images/project/infoIcon.svg'; import InfoIcon from '@/../static/images/project/infoIcon.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -224,7 +226,7 @@ const status = computed((): string => {
* Returns pro account status from store. * Returns pro account status from store.
*/ */
const isProAccount = computed((): boolean => { const isProAccount = computed((): boolean => {
return store.getters.user.paidTier; return usersStore.state.user.paidTier;
}); });
/** /**

6
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -62,6 +62,7 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue'; import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue'; import VTable from '@/components/common/VTable.vue';
@ -75,6 +76,7 @@ const {
const FIRST_PAGE = 1; const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -109,8 +111,8 @@ async function onPageClick(page: number): Promise<void> {
function onCreateClick(): void { function onCreateClick(): void {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED); analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = store.getters.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);

3
web/satellite/src/store/index.ts
View File

@ -20,7 +20,6 @@ import { makeObjectsModule, OBJECTS_ACTIONS, ObjectsState } from '@/store/module
import { makePaymentsModule, PaymentsState } from '@/store/modules/payments'; import { makePaymentsModule, PaymentsState } from '@/store/modules/payments';
import { makeProjectMembersModule, ProjectMembersState } from '@/store/modules/projectMembers'; import { makeProjectMembersModule, ProjectMembersState } from '@/store/modules/projectMembers';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects'; import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { makeUsersModule, UsersState } from '@/store/modules/users';
import { FilesState, makeFilesModule } from '@/store/modules/files'; import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -52,7 +51,6 @@ export interface ModulesState {
appStateModule: AppState; appStateModule: AppState;
projectMembersModule: ProjectMembersState; projectMembersModule: ProjectMembersState;
paymentsModule: PaymentsState; paymentsModule: PaymentsState;
usersModule: UsersState;
projectsModule: ProjectsState; projectsModule: ProjectsState;
objectsModule: ObjectsState; objectsModule: ObjectsState;
bucketUsageModule: BucketsState; bucketUsageModule: BucketsState;
@ -67,7 +65,6 @@ export const store = new Vuex.Store<ModulesState>({
appStateModule: makeAppStateModule(configApi), appStateModule: makeAppStateModule(configApi),
projectMembersModule: makeProjectMembersModule(projectMembersApi), projectMembersModule: makeProjectMembersModule(projectMembersApi),
paymentsModule: makePaymentsModule(paymentsApi), paymentsModule: makePaymentsModule(paymentsApi),
usersModule: makeUsersModule(authApi),
projectsModule: makeProjectsModule(projectsApi), projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi), bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(), objectsModule: makeObjectsModule(),

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

@ -237,13 +237,13 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState,
return project; return project;
}, },
[CREATE_DEFAULT_PROJECT]: async function ({ rootGetters, dispatch }: ProjectsContext): Promise<void> { [CREATE_DEFAULT_PROJECT]: async function ({ rootGetters, dispatch }: ProjectsContext, userID: string): Promise<void> {
const UNTITLED_PROJECT_NAME = 'My First Project'; const UNTITLED_PROJECT_NAME = 'My First Project';
const UNTITLED_PROJECT_DESCRIPTION = '___'; const UNTITLED_PROJECT_DESCRIPTION = '___';
const project = new ProjectFields( const project = new ProjectFields(
UNTITLED_PROJECT_NAME, UNTITLED_PROJECT_NAME,
UNTITLED_PROJECT_DESCRIPTION, UNTITLED_PROJECT_DESCRIPTION,
rootGetters.user.id, userID,
); );
const createdProject = await dispatch(CREATE, project); const createdProject = await dispatch(CREATE, project);
@ -358,11 +358,11 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState,
}); });
}, },
selectedProject: (state: ProjectsState): Project => state.selectedProject, selectedProject: (state: ProjectsState): Project => state.selectedProject,
projectsCount: (state: ProjectsState, rootGetters: ProjectsContext['rootGetters']): number => { projectsCount: (state: ProjectsState) => (userID: string): number => {
let projectsCount = 0; let projectsCount = 0;
state.projects.forEach((project: Project) => { state.projects.forEach((project: Project) => {
if (project.ownerId === rootGetters.user.id) { if (project.ownerId === userID) {
projectsCount++; projectsCount++;
} }
}); });

179
web/satellite/src/store/modules/users.ts
View File

@ -1,179 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import {
DisableMFARequest,
SetUserSettingsData,
UpdatedUser,
User,
UsersApi,
UserSettings,
} from '@/types/users';
import { MetaUtils } from '@/utils/meta';
import { StoreModule } from '@/types/store';
import { Duration } from '@/utils/time';
export const USER_ACTIONS = {
LOGIN: 'loginUser',
UPDATE: 'updateUser',
GET: 'getUser',
ENABLE_USER_MFA: 'enableUserMFA',
DISABLE_USER_MFA: 'disableUserMFA',
GENERATE_USER_MFA_SECRET: 'generateUserMFASecret',
GENERATE_USER_MFA_RECOVERY_CODES: 'generateUserMFARecoveryCodes',
CLEAR: 'clearUser',
GET_FROZEN_STATUS: 'getFrozenStatus',
GET_SETTINGS: 'getSettings',
UPDATE_SETTINGS: 'updateSettings',
};
export const USER_MUTATIONS = {
SET_USER: 'setUser',
SET_USER_MFA_SECRET: 'setUserMFASecret',
SET_USER_MFA_RECOVERY_CODES: 'setUserMFARecoveryCodes',
UPDATE_USER: 'updateUser',
CLEAR: 'clearUser',
SET_FROZEN_STATUS: 'setFrozenStatus',
SET_SETTINGS: 'setSettings',
};
export class UsersState {
public user: User = new User();
public settings: UserSettings = new UserSettings();
public userMFASecret = '';
public userMFARecoveryCodes: string[] = [];
}
const {
GET,
UPDATE,
ENABLE_USER_MFA,
DISABLE_USER_MFA,
GENERATE_USER_MFA_SECRET,
GENERATE_USER_MFA_RECOVERY_CODES,
GET_FROZEN_STATUS,
GET_SETTINGS,
UPDATE_SETTINGS,
} = USER_ACTIONS;
const {
SET_USER,
UPDATE_USER,
SET_USER_MFA_SECRET,
SET_USER_MFA_RECOVERY_CODES,
CLEAR,
SET_FROZEN_STATUS,
SET_SETTINGS,
} = USER_MUTATIONS;
interface UsersContext {
state: UsersState
commit: (string, ...unknown) => void
}
/**
* creates users module with all dependencies
*
* @param api - users api
*/
export function makeUsersModule(api: UsersApi): StoreModule<UsersState, UsersContext> {
return {
state: new UsersState(),
mutations: {
[SET_USER](state: UsersState, user: User): void {
state.user = user;
if (user.projectLimit === 0) {
const limitFromConfig = MetaUtils.getMetaContent('default-project-limit');
state.user.projectLimit = parseInt(limitFromConfig);
return;
}
state.user.projectLimit = user.projectLimit;
},
[SET_FROZEN_STATUS](state: UsersState, status: boolean): void {
state.user.isFrozen = status;
},
[SET_SETTINGS](state: UsersState, settings: UserSettings): void {
state.settings = settings;
},
[CLEAR](state: UsersState): void {
state.user = new User();
state.user.projectLimit = 1;
state.userMFASecret = '';
state.userMFARecoveryCodes = [];
},
[UPDATE_USER](state: UsersState, user: UpdatedUser): void {
state.user.fullName = user.fullName;
state.user.shortName = user.shortName;
},
[SET_USER_MFA_SECRET](state: UsersState, secret: string): void {
state.userMFASecret = secret;
},
[SET_USER_MFA_RECOVERY_CODES](state: UsersState, codes: string[]): void {
state.userMFARecoveryCodes = codes;
state.user.mfaRecoveryCodeCount = codes.length;
},
},
actions: {
[UPDATE]: async function ({ commit }: UsersContext, userInfo: UpdatedUser): Promise<void> {
await api.update(userInfo);
commit(UPDATE_USER, userInfo);
},
[GET]: async function ({ commit }: UsersContext): Promise<User> {
const user = await api.get();
commit(SET_USER, user);
return user;
},
[GET_FROZEN_STATUS]: async function ({ commit }: UsersContext): Promise<void> {
const frozenStatus = await api.getFrozenStatus();
commit(SET_FROZEN_STATUS, frozenStatus);
},
[GET_SETTINGS]: async function ({ commit }: UsersContext): Promise<UserSettings> {
const settings = await api.getUserSettings();
commit(SET_SETTINGS, settings);
return settings;
},
[UPDATE_SETTINGS]: async function ({ commit, state }: UsersContext, update: SetUserSettingsData): Promise<void> {
const settings = await api.updateSettings(update);
commit(SET_SETTINGS, settings);
},
[DISABLE_USER_MFA]: async function (_, request: DisableMFARequest): Promise<void> {
await api.disableUserMFA(request.passcode, request.recoveryCode);
},
[ENABLE_USER_MFA]: async function (_, passcode: string): Promise<void> {
await api.enableUserMFA(passcode);
},
[GENERATE_USER_MFA_SECRET]: async function ({ commit }: UsersContext): Promise<void> {
const secret = await api.generateUserMFASecret();
commit(SET_USER_MFA_SECRET, secret);
},
[GENERATE_USER_MFA_RECOVERY_CODES]: async function ({ commit }: UsersContext): Promise<void> {
const codes = await api.generateUserMFARecoveryCodes();
commit(SET_USER_MFA_RECOVERY_CODES, codes);
},
[CLEAR]: function({ commit }: UsersContext) {
commit(CLEAR);
},
},
getters: {
user: (state: UsersState): User => state.user,
userName: (state: UsersState): string => state.user.getFullName(),
shouldOnboard: (state: UsersState): boolean => !state.settings.onboardingStart || (state.settings.onboardingStart && !state.settings.onboardingEnd),
},
};
}

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

@ -4,12 +4,20 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { computed, reactive } from 'vue'; import { computed, reactive } from 'vue';
import { DisableMFARequest, UpdatedUser, User, UsersApi } from '@/types/users'; import {
DisableMFARequest,
SetUserSettingsData,
UpdatedUser,
User,
UsersApi,
UserSettings,
} from '@/types/users';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
export class UsersState { export class UsersState {
public user: User = new User(); public user: User = new User();
public settings: UserSettings = new UserSettings();
public userMFASecret = ''; public userMFASecret = '';
public userMFARecoveryCodes: string[] = []; public userMFARecoveryCodes: string[] = [];
} }
@ -21,32 +29,31 @@ export const useUsersStore = defineStore('users', () => {
return state.user.getFullName(); return state.user.getFullName();
}); });
const shouldOnboard = computed(() => {
return !state.settings.onboardingStart || (state.settings.onboardingStart && !state.settings.onboardingEnd);
});
const api: UsersApi = new AuthHttpApi(); const api: UsersApi = new AuthHttpApi();
async function updateUserInfo(userInfo: UpdatedUser): Promise<void> { async function updateUser(userInfo: UpdatedUser): Promise<void> {
await api.update(userInfo); await api.update(userInfo);
state.user.fullName = userInfo.fullName; state.user.fullName = userInfo.fullName;
state.user.shortName = userInfo.shortName; state.user.shortName = userInfo.shortName;
} }
async function fetchUserInfo(): Promise<void> { async function getUser(): Promise<void> {
const user = await api.get(); const user = await api.get();
state.user = user;
if (user.projectLimit === 0) { if (user.projectLimit === 0) {
const limitFromConfig = MetaUtils.getMetaContent('default-project-limit'); const limitFromConfig = MetaUtils.getMetaContent('default-project-limit');
user.projectLimit = parseInt(limitFromConfig);
state.user.projectLimit = parseInt(limitFromConfig);
return;
} }
state.user.projectLimit = user.projectLimit; setUser(user);
} }
async function fetchFrozenStatus(): Promise<void> { async function getFrozenStatus(): Promise<void> {
state.user.isFrozen = await api.getFrozenStatus(); state.user.isFrozen = await api.getFrozenStatus();
} }
@ -69,21 +76,47 @@ export const useUsersStore = defineStore('users', () => {
state.user.mfaRecoveryCodeCount = codes.length; state.user.mfaRecoveryCodeCount = codes.length;
} }
function clearUserInfo() { async function getSettings(): Promise<UserSettings> {
const settings = await api.getUserSettings();
state.settings = settings;
return settings;
}
async function updateSettings(update: SetUserSettingsData): Promise<void> {
state.settings = await api.updateSettings(update);
}
function setUser(user: User): void {
state.user = user;
}
// Does nothing. It is called on login screen, and we just subscribe to this action in dashboard wrappers.
function login(): void {}
function clear() {
state.user = new User(); state.user = new User();
state.user.projectLimit = 1; state.settings = new UserSettings();
state.userMFASecret = '';
state.userMFARecoveryCodes = [];
} }
return { return {
usersState: state, state,
userName, userName,
updateUserInfo, shouldOnboard,
fetchUserInfo, updateUser,
getUser,
disableUserMFA, disableUserMFA,
enableUserMFA, enableUserMFA,
generateUserMFASecret, generateUserMFASecret,
generateUserMFARecoveryCodes, generateUserMFARecoveryCodes,
clearUserInfo, clear,
fetchFrozenStatus, login,
getFrozenStatus,
setUser,
updateSettings,
getSettings,
}; };
}); });

7
web/satellite/src/views/AuthorizeArea.vue
View File

@ -94,7 +94,6 @@ import { Validator } from '@/utils/validation';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized'; import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames'; import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
@ -103,6 +102,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients'; import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -117,6 +117,7 @@ const validPerms = {
'delete': true, 'delete': true,
}; };
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const router = useRouter(); const router = useRouter();
@ -184,10 +185,10 @@ function formatObjectPermissions(scope: string): string {
async function ensureLogin(): Promise<void> { async function ensureLogin(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
} catch (error) { } catch (error) {
if (!(error instanceof ErrorUnauthorized)) { if (!(error instanceof ErrorUnauthorized)) {
await store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, FetchState.ERROR); await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.ERROR);
await notify.error(error.message, null); await notify.error(error.message, null);
} }

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

@ -106,7 +106,6 @@ import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants'; import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { CouponType } from '@/types/coupons'; import { CouponType } from '@/types/coupons';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'; import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
@ -123,6 +122,7 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue'; import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue'; import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -141,6 +141,7 @@ const {
GET_CREDIT_CARDS, GET_CREDIT_CARDS,
} = PAYMENTS_ACTIONS; } = PAYMENTS_ACTIONS;
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
// TODO: will be swapped with useRouter from new version of router. remove after vue-router version upgrade. // TODO: will be swapped with useRouter from new version of router. remove after vue-router version upgrade.
const nativeRouter = useRouter(); const nativeRouter = useRouter();
@ -175,7 +176,7 @@ const dashboardContent = ref<HTMLElement | null>(null);
* Indicates if account was frozen due to billing issues. * Indicates if account was frozen due to billing issues.
*/ */
const isAccountFrozen = computed((): boolean => { const isAccountFrozen = computed((): boolean => {
return store.state.usersModule.user.isFrozen; return usersStore.state.user.isFrozen;
}); });
/** /**
@ -204,7 +205,7 @@ const limitState = computed((): LimitedState => {
hundredModalLimitType: '', hundredModalLimitType: '',
}; };
if (store.state.usersModule.user.paidTier || isAccountFrozen.value) { if (usersStore.state.user.paidTier || isAccountFrozen.value) {
return result; return result;
} }
@ -269,22 +270,22 @@ const isAllProjectsDashboard = computed((): boolean => {
const isProjectLimitBannerShown = computed((): boolean => { const isProjectLimitBannerShown = computed((): boolean => {
return !LocalData.getProjectLimitBannerHidden() return !LocalData.getProjectLimitBannerHidden()
&& isProjectListPage.value && isProjectListPage.value
&& (hasReachedProjectLimit.value || !store.state.usersModule.user.paidTier); && (hasReachedProjectLimit.value || !usersStore.state.user.paidTier);
}); });
/** /**
* Returns whether the user has reached project limits. * Returns whether the user has reached project limits.
*/ */
const hasReachedProjectLimit = computed((): boolean => { const hasReachedProjectLimit = computed((): boolean => {
const projectLimit: number = store.getters.user.projectLimit; const projectLimit: number = usersStore.state.user.projectLimit;
const projectsCount: number = store.getters.projectsCount; const projectsCount: number = store.getters.projectsCount(usersStore.state.user.id);
return projectsCount === projectLimit; return projectsCount === projectLimit;
}); });
/* whether the paid tier banner should be shown */ /* whether the paid tier banner should be shown */
const isPaidTierBannerShown = computed((): boolean => { const isPaidTierBannerShown = computed((): boolean => {
return !store.state.usersModule.user.paidTier return !usersStore.state.user.paidTier
&& !isOnboardingTour.value && !isOnboardingTour.value
&& joinedWhileAgo.value && joinedWhileAgo.value
&& isDashboardPage.value; && isDashboardPage.value;
@ -292,7 +293,7 @@ const isPaidTierBannerShown = computed((): boolean => {
/* whether the user joined more than 7 days ago */ /* whether the user joined more than 7 days ago */
const joinedWhileAgo = computed((): boolean => { const joinedWhileAgo = computed((): boolean => {
const createdAt = store.state.usersModule.user.createdAt as Date | null; const createdAt = usersStore.state.user.createdAt as Date | null;
if (!createdAt) return true; // true so we can show the banner regardless if (!createdAt) return true; // true so we can show the banner regardless
const millisPerDay = 24 * 60 * 60 * 1000; const millisPerDay = 24 * 60 * 60 * 1000;
return ((Date.now() - createdAt.getTime()) / millisPerDay) > 7; return ((Date.now() - createdAt.getTime()) / millisPerDay) > 7;
@ -330,7 +331,7 @@ const isLoading = computed((): boolean => {
* Indicates whether the MFA recovery code warning bar should be shown. * Indicates whether the MFA recovery code warning bar should be shown.
*/ */
const showMFARecoveryCodeBar = computed((): boolean => { const showMFARecoveryCodeBar = computed((): boolean => {
const user: User = store.getters.user; const user: User = usersStore.state.user;
return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold; return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold;
}); });
@ -484,7 +485,7 @@ async function handleInactive(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
@ -531,7 +532,7 @@ function toggleMFARecoveryModal(): void {
*/ */
async function generateNewMFARecoveryCodes(): Promise<void> { async function generateNewMFARecoveryCodes(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES); await usersStore.generateUserMFARecoveryCodes();
toggleMFARecoveryModal(); toggleMFARecoveryModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR); await notify.error(error.message, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
@ -579,19 +580,19 @@ async function onSessionActivity(): Promise<void> {
* Pre fetches user`s and project information. * Pre fetches user`s and project information.
*/ */
onMounted(async () => { onMounted(async () => {
store.subscribeAction((action) => { usersStore.$onAction((action) => {
if (action.type === USER_ACTIONS.CLEAR) clearSessionTimers(); if (action.name === 'clear') clearSessionTimers();
}); });
try { try {
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS); await usersStore.getFrozenStatus();
await abTestingStore.fetchValues(); await abTestingStore.fetchValues();
await store.dispatch(USER_ACTIONS.GET_SETTINGS); await usersStore.getSettings();
setupSessionTimers(); setupSessionTimers();
} catch (error) { } catch (error) {
store.subscribeAction((action) => { usersStore.$onAction((action) => {
if (action.type === USER_ACTIONS.LOGIN) setupSessionTimers(); if (action.name === 'login') setupSessionTimers();
}); });
if (!(error instanceof ErrorUnauthorized)) { if (!(error instanceof ErrorUnauthorized)) {
@ -641,11 +642,11 @@ onMounted(async () => {
if (!store.state.appStateModule.isAllProjectsDashboard) { if (!store.state.appStateModule.isAllProjectsDashboard) {
try { try {
if (!projects.length) { if (!projects.length) {
await store.dispatch(PROJECTS_ACTIONS.CREATE_DEFAULT_PROJECT); await store.dispatch(PROJECTS_ACTIONS.CREATE_DEFAULT_PROJECT, usersStore.state.user.id);
} else { } else {
selectProject(projects); selectProject(projects);
} }
if (store.getters.shouldOnboard) { if (usersStore.shouldOnboard) {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path; const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
await analytics.pageVisit(onboardingPath); await analytics.pageVisit(onboardingPath);

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

@ -173,11 +173,11 @@ import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest'; import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { USER_ACTIONS } from '@/store/modules/users';
import { TokenInfo } from '@/types/users'; import { TokenInfo } from '@/types/users';
import { LocalData } from '@/utils/localData'; import { LocalData } from '@/utils/localData';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { PartneredSatellite } from '@/types/common'; import { PartneredSatellite } from '@/types/common';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'; import VInput from '@/components/common/VInput.vue';
@ -225,9 +225,11 @@ const forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
const registerPath: string = RouteConfig.Register.path; const registerPath: string = RouteConfig.Register.path;
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const notify = useNotify();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
const usersStore = useUsersStore();
const router = useRouter(); const router = useRouter();
const notify = useNotify();
const store = useStore(); const store = useStore();
const route = useRoute(); const route = useRoute();
@ -442,7 +444,7 @@ async function login(): Promise<void> {
return; return;
} }
await store.dispatch(USER_ACTIONS.LOGIN); usersStore.login();
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADING); await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADING);
isLoading.value = false; isLoading.value = false;

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

@ -112,7 +112,6 @@ import {
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { USER_ACTIONS } from '@/store/modules/users';
import { import {
APP_STATE_ACTIONS, APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS, NOTIFICATION_ACTIONS,
@ -131,6 +130,7 @@ import { CouponType } from '@/types/coupons';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import Heading from '@/views/all-dashboard/components/Heading.vue'; import Heading from '@/views/all-dashboard/components/Heading.vue';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import InactivityModal from '@/components/modals/InactivityModal.vue'; import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue'; import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -151,6 +151,7 @@ const {
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useStore();
const notify = useNotify(); const notify = useNotify();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore(); const abTestingStore = useABTestingStore();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi(); const auth: AuthHttpApi = new AuthHttpApi();
@ -178,7 +179,7 @@ const dashboardContent = ref<HTMLElement | null>(null);
* Indicates if account was frozen due to billing issues. * Indicates if account was frozen due to billing issues.
*/ */
const isAccountFrozen = computed((): boolean => { const isAccountFrozen = computed((): boolean => {
return store.state.usersModule.user.isFrozen; return usersStore.state.user.isFrozen;
}); });
/** /**
@ -207,7 +208,7 @@ const limitState = computed((): LimitedState => {
hundredModalLimitType: '', hundredModalLimitType: '',
}; };
if (store.state.usersModule.user.paidTier || isAccountFrozen.value) { if (usersStore.state.user.paidTier || isAccountFrozen.value) {
return result; return result;
} }
@ -280,7 +281,7 @@ const isLoading = computed((): boolean => {
* Indicates whether the MFA recovery code warning bar should be shown. * Indicates whether the MFA recovery code warning bar should be shown.
*/ */
const showMFARecoveryCodeBar = computed((): boolean => { const showMFARecoveryCodeBar = computed((): boolean => {
const user: User = store.getters.user; const user: User = usersStore.state.user;
return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold; return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold;
}); });
@ -288,29 +289,29 @@ const showMFARecoveryCodeBar = computed((): boolean => {
const isProjectLimitBannerShown = computed((): boolean => { const isProjectLimitBannerShown = computed((): boolean => {
return !LocalData.getProjectLimitBannerHidden() return !LocalData.getProjectLimitBannerHidden()
&& !isBillingPage.value && !isBillingPage.value
&& (hasReachedProjectLimit.value || !store.state.usersModule.user.paidTier); && (hasReachedProjectLimit.value || !usersStore.state.user.paidTier);
}); });
/** /**
* Returns whether the user has reached project limits. * Returns whether the user has reached project limits.
*/ */
const hasReachedProjectLimit = computed((): boolean => { const hasReachedProjectLimit = computed((): boolean => {
const projectLimit: number = store.getters.user.projectLimit; const projectLimit: number = usersStore.state.user.projectLimit;
const projectsCount: number = store.getters.projectsCount; const projectsCount: number = store.getters.projectsCount(usersStore.state.user.id);
return projectsCount === projectLimit; return projectsCount === projectLimit;
}); });
/* whether the paid tier banner should be shown */ /* whether the paid tier banner should be shown */
const isPaidTierBannerShown = computed((): boolean => { const isPaidTierBannerShown = computed((): boolean => {
return !store.state.usersModule.user.paidTier return !usersStore.state.user.paidTier
&& !isBillingPage.value && !isBillingPage.value
&& joinedWhileAgo.value; && joinedWhileAgo.value;
}); });
/* whether the user joined more than 7 days ago */ /* whether the user joined more than 7 days ago */
const joinedWhileAgo = computed((): boolean => { const joinedWhileAgo = computed((): boolean => {
const createdAt = store.state.usersModule.user.createdAt as Date | null; const createdAt = usersStore.state.user.createdAt as Date | null;
if (!createdAt) return true; // true so we can show the banner regardless if (!createdAt) return true; // true so we can show the banner regardless
const millisPerDay = 24 * 60 * 60 * 1000; const millisPerDay = 24 * 60 * 60 * 1000;
return ((Date.now() - createdAt.getTime()) / millisPerDay) > 7; return ((Date.now() - createdAt.getTime()) / millisPerDay) > 7;
@ -341,7 +342,7 @@ async function handleInactive(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
@ -373,7 +374,7 @@ async function handleInactive(): Promise<void> {
*/ */
async function generateNewMFARecoveryCodes(): Promise<void> { async function generateNewMFARecoveryCodes(): Promise<void> {
try { try {
await store.dispatch(USER_ACTIONS.GENERATE_USER_MFA_RECOVERY_CODES); await usersStore.generateUserMFARecoveryCodes();
toggleMFARecoveryModal(); toggleMFARecoveryModal();
} catch (error) { } catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD); await notify.error(error.message, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
@ -520,19 +521,19 @@ async function onSessionActivity(): Promise<void> {
* Pre fetches user`s and project information. * Pre fetches user`s and project information.
*/ */
onMounted(async () => { onMounted(async () => {
store.subscribeAction((action) => { usersStore.$onAction((action) => {
if (action.type === USER_ACTIONS.CLEAR) clearSessionTimers(); if (action.name === 'clear') clearSessionTimers();
}); });
try { try {
await store.dispatch(USER_ACTIONS.GET); await usersStore.getUser();
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS); await usersStore.getFrozenStatus();
await abTestingStore.fetchValues(); await abTestingStore.fetchValues();
await store.dispatch(USER_ACTIONS.GET_SETTINGS); await usersStore.getSettings();
setupSessionTimers(); setupSessionTimers();
} catch (error) { } catch (error) {
store.subscribeAction((action) => { usersStore.$onAction((action) => {
if (action.type === USER_ACTIONS.LOGIN) setupSessionTimers(); if (action.name === 'login') setupSessionTimers();
}); });
if (!(error instanceof ErrorUnauthorized)) { if (!(error instanceof ErrorUnauthorized)) {
@ -579,7 +580,7 @@ onMounted(async () => {
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED); await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED);
if (store.getters.shouldOnboard && !store.state.appStateModule.viewsState.hasShownPricingPlan) { if (usersStore.shouldOnboard && !store.state.appStateModule.viewsState.hasShownPricingPlan) {
store.commit(APP_STATE_MUTATIONS.SET_HAS_SHOWN_PRICING_PLAN, true); store.commit(APP_STATE_MUTATIONS.SET_HAS_SHOWN_PRICING_PLAN, true);
// if the user is not legible for a pricing plan, they'll automatically be // if the user is not legible for a pricing plan, they'll automatically be
// navigated back to all projects dashboard. // navigated back to all projects dashboard.

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

@ -38,11 +38,13 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import BoxIcon from '@/../static/images/allDashboard/box.svg'; import BoxIcon from '@/../static/images/allDashboard/box.svg';
const usersStore = useUsersStore();
const store = useStore(); const store = useStore();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
@ -52,8 +54,8 @@ const analytics = new AnalyticsHttpApi();
function onCreateProjectClicked(): void { function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = store.getters.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);

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

@ -108,13 +108,13 @@ import {
PM_ACTIONS, PM_ACTIONS,
} from '@/utils/constants/actionNames'; } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants'; import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects'; import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -134,10 +134,12 @@ import MenuIcon from '@/../static/images/navigation/menu.svg';
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useStore();
const notify = useNotify();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore(); const abTestingStore = useABTestingStore();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const notify = useNotify();
const link = 'https://docs.storj.io/'; const link = 'https://docs.storj.io/';
@ -155,7 +157,7 @@ const satellite = computed((): string => {
* Returns user from store. * Returns user from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
@ -227,7 +229,7 @@ async function onLogout(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),

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

@ -59,7 +59,6 @@ import {
PM_ACTIONS, PM_ACTIONS,
} from '@/utils/constants/actionNames'; } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants'; import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects'; import { OBJECTS_ACTIONS } from '@/store/modules/objects';
@ -72,6 +71,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps'; import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useABTestingStore } from '@/store/modules/abTestingStore'; import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import AccountIcon from '@/../static/images/navigation/account.svg'; import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg'; import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -87,6 +87,7 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi(); const auth = new AuthHttpApi();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore(); const abTestingStore = useABTestingStore();
const isHoveredOver = ref(false); const isHoveredOver = ref(false);
@ -153,7 +154,7 @@ async function onLogout(): Promise<void> {
await Promise.all([ await Promise.all([
store.dispatch(PM_ACTIONS.CLEAR), store.dispatch(PM_ACTIONS.CLEAR),
store.dispatch(PROJECTS_ACTIONS.CLEAR), store.dispatch(PROJECTS_ACTIONS.CLEAR),
store.dispatch(USER_ACTIONS.CLEAR), usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER), store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR), store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR), store.dispatch(NOTIFICATION_ACTIONS.CLEAR),

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

@ -40,14 +40,17 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsHttpApi } from '@/api/analytics';
import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue'; import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue';
import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue'; import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import RocketIcon from '@/../static/images/common/rocket.svg'; import RocketIcon from '@/../static/images/common/rocket.svg';
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const store = useStore();
const analytics = new AnalyticsHttpApi(); const analytics = new AnalyticsHttpApi();
/** /**
@ -63,8 +66,8 @@ const projects = computed((): Project[] => {
function onCreateProjectClicked(): void { function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED); analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = store.getters.user; const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount; const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) { if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt); store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);

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

@ -46,10 +46,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed } from 'vue';
import { Project } from '@/types/projects'; import { Project } from '@/types/projects';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { import {
AnalyticsEvent, AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames'; } from '@/utils/constants/analyticsEventNames';
@ -62,6 +62,7 @@ import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants'; import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue'; import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
@ -70,14 +71,15 @@ import GearIcon from '@/../static/images/common/gearIcon.svg';
import UsersIcon from '@/../static/images/navigation/users.svg'; import UsersIcon from '@/../static/images/navigation/users.svg';
import MenuIcon from '@/../static/images/allDashboard/menu.svg'; import MenuIcon from '@/../static/images/allDashboard/menu.svg';
const router = useRouter(); const usersStore = useUsersStore();
const route = useRoute();
const store = useStore(); const store = useStore();
const analytics = new AnalyticsHttpApi();
const notify = useNotify(); const notify = useNotify();
const router = useRouter();
const analytics = new AnalyticsHttpApi();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
project?: Project, project?: Project,
}>(), { }>(), {
project: () => new Project(), project: () => new Project(),
}); });
@ -93,7 +95,7 @@ const isDropdownOpen = computed((): boolean => {
* Returns user entity from store. * Returns user entity from store.
*/ */
const user = computed((): User => { const user = computed((): User => {
return store.getters.user; return usersStore.state.user;
}); });
/** /**
@ -116,7 +118,7 @@ function closeDropDown() {
*/ */
async function onOpenClicked(): Promise<void> { async function onOpenClicked(): Promise<void> {
await selectProject(); await selectProject();
if (store.getters.shouldOnboard) { if (usersStore.shouldOnboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path); await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;

3
web/satellite/tests/unit/ignore/views/DashboardArea.spec.ts
View File

@ -20,7 +20,6 @@ import { makeNotificationsModule } from '@/store/modules/notifications';
import { makePaymentsModule } from '@/store/modules/payments'; import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectMembersModule } from '@/store/modules/projectMembers'; import { makeProjectMembersModule } from '@/store/modules/projectMembers';
import { makeProjectsModule } from '@/store/modules/projects'; import { makeProjectsModule } from '@/store/modules/projects';
import { makeUsersModule } from '@/store/modules/users';
import { User } from '@/types/users'; import { User } from '@/types/users';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames'; import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum'; import { FetchState } from '@/utils/constants/fetchStateEnum';
@ -38,7 +37,6 @@ usersApi.setMockUser(new User('1', '2', '3', '4', '5', '6', 1));
projectsApi.setMockProjects([]); projectsApi.setMockProjects([]);
const appStateModule = makeAppStateModule(new FrontendConfigApiMock()); const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const usersModule = makeUsersModule(usersApi);
const projectsModule = makeProjectsModule(projectsApi); const projectsModule = makeProjectsModule(projectsApi);
const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock()); const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock());
const teamMembersModule = makeProjectMembersModule(new ProjectMembersApiMock()); const teamMembersModule = makeProjectMembersModule(new ProjectMembersApiMock());
@ -51,7 +49,6 @@ const store = new Vuex.Store({
notificationsModule, notificationsModule,
bucketsModule, bucketsModule,
accessGrantsModule, accessGrantsModule,
usersModule,
projectsModule, projectsModule,
appStateModule, appStateModule,
teamMembersModule, teamMembersModule,

102
web/satellite/tests/unit/store/users.spec.ts
View File

@ -1,30 +1,23 @@
// Copyright (C) 2019 Storj Labs, Inc. // Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information. // See LICENSE for copying information.
import Vuex from 'vuex'; import { createPinia, setActivePinia } from 'pinia';
import { createLocalVue } from '@vue/test-utils';
import { AuthHttpApi } from '@/api/auth'; import { AuthHttpApi } from '@/api/auth';
import { makeUsersModule, USER_ACTIONS, USER_MUTATIONS } from '@/store/modules/users';
import { UpdatedUser, User } from '@/types/users'; import { UpdatedUser, User } from '@/types/users';
import { useUsersStore } from '@/store/modules/usersStore';
const Vue = createLocalVue(); describe('actions', () => {
const authApi = new AuthHttpApi();
const usersModule = makeUsersModule(authApi);
const { UPDATE, GET, CLEAR } = USER_ACTIONS;
Vue.use(Vuex);
const store = new Vuex.Store<typeof usersModule.state>(usersModule);
describe('mutations', () => {
beforeEach(() => { beforeEach(() => {
createLocalVue().use(Vuex); setActivePinia(createPinia());
jest.resetAllMocks();
}); });
it('Set user', () => {
it('set user', () => {
const store = useUsersStore();
const user = new User('1', 'fullName', 'shortName', 'user@example.com'); const user = new User('1', 'fullName', 'shortName', 'user@example.com');
store.commit(USER_MUTATIONS.SET_USER, user); store.setUser(user);
expect(store.state.user.id).toBe(user.id); expect(store.state.user.id).toBe(user.id);
expect(store.state.user.email).toBe(user.email); expect(store.state.user.email).toBe(user.email);
@ -33,48 +26,41 @@ describe('mutations', () => {
}); });
it('clear user', () => { it('clear user', () => {
store.commit(USER_MUTATIONS.CLEAR); const store = useUsersStore();
const user = new User('1', 'fullName', 'shortName', 'user@example.com');
store.setUser(user);
expect(store.state.user.id).toBe(user.id);
store.clear();
expect(store.state.user.id).toBe(''); expect(store.state.user.id).toBe('');
expect(store.state.user.email).toBe(''); expect(store.state.user.email).toBe('');
expect(store.state.user.fullName).toBe(''); expect(store.state.user.fullName).toBe('');
expect(store.state.user.shortName).toBe(''); expect(store.state.user.shortName).toBe('');
}); });
it('Update user', () => { it('update user', async () => {
const store = useUsersStore();
const user = new UpdatedUser('fullName', 'shortName'); const user = new UpdatedUser('fullName', 'shortName');
store.commit(USER_MUTATIONS.UPDATE_USER, user); jest.spyOn(AuthHttpApi.prototype, 'update').mockImplementation(() => Promise.resolve());
await store.updateUser(user);
expect(store.state.user.fullName).toBe(user.fullName); expect(store.state.user.fullName).toBe(user.fullName);
expect(store.state.user.shortName).toBe(user.shortName); expect(store.state.user.shortName).toBe(user.shortName);
}); });
});
describe('actions', () => {
beforeEach(() => {
jest.resetAllMocks();
});
it('success update account', async () => {
jest.spyOn(authApi, 'update').mockReturnValue(
Promise.resolve(),
);
const user = new UpdatedUser('fullName1', 'shortName2');
await store.dispatch(UPDATE, user);
expect(store.state.user.fullName).toBe('fullName1');
expect(store.state.user.shortName).toBe('shortName2');
});
it('update throws an error when api call fails', async () => { it('update throws an error when api call fails', async () => {
jest.spyOn(authApi, 'update').mockImplementation(() => { throw new Error(); }); const store = useUsersStore();
const newUser = new UpdatedUser('', ''); const newUser = new UpdatedUser('', '');
const oldUser = store.getters.user; const oldUser = store.state.user;
jest.spyOn(AuthHttpApi.prototype, 'update').mockImplementation(() => { throw new Error(); });
try { try {
await store.dispatch(UPDATE, newUser); await store.updateUser(newUser);
expect(true).toBe(false); expect(true).toBe(false);
} catch (error) { } catch (error) {
expect(store.state.user.fullName).toBe(oldUser.fullName); expect(store.state.user.fullName).toBe(oldUser.fullName);
@ -82,23 +68,15 @@ describe('actions', () => {
} }
}); });
it('clears state', async () => {
await store.dispatch(CLEAR);
expect(store.state.user.fullName).toBe('');
expect(store.state.user.shortName).toBe('');
expect(store.state.user.email).toBe('');
expect(store.state.user.id).toBe('');
});
it('success get user', async () => { it('success get user', async () => {
const store = useUsersStore();
const user = new User('2', 'newFullName', 'newShortName', 'user2@example.com'); const user = new User('2', 'newFullName', 'newShortName', 'user2@example.com');
jest.spyOn(authApi, 'get').mockReturnValue( jest.spyOn(AuthHttpApi.prototype, 'get').mockReturnValue(
Promise.resolve(user), Promise.resolve(user),
); );
await store.dispatch(GET); await store.getUser();
expect(store.state.user.id).toBe(user.id); expect(store.state.user.id).toBe(user.id);
expect(store.state.user.shortName).toBe(user.shortName); expect(store.state.user.shortName).toBe(user.shortName);
@ -107,11 +85,13 @@ describe('actions', () => {
}); });
it('get throws an error when api call fails', async () => { it('get throws an error when api call fails', async () => {
const user = store.getters.user; const store = useUsersStore();
jest.spyOn(authApi, 'get').mockImplementation(() => { throw new Error(); }); const user = store.state.user;
jest.spyOn(AuthHttpApi.prototype, 'get').mockImplementation(() => { throw new Error(); });
try { try {
await store.dispatch(GET); await store.getUser();
expect(true).toBe(false); expect(true).toBe(false);
} catch (error) { } catch (error) {
expect(store.state.user.fullName).toBe(user.fullName); expect(store.state.user.fullName).toBe(user.fullName);
@ -121,17 +101,13 @@ describe('actions', () => {
}); });
describe('getters', () => { describe('getters', () => {
it('user model', function () { beforeEach(() => {
const retrievedUser = store.getters.user; setActivePinia(createPinia());
expect(retrievedUser.id).toBe(store.state.user.id);
expect(retrievedUser.fullName).toBe(store.state.user.fullName);
expect(retrievedUser.shortName).toBe(store.state.user.shortName);
expect(retrievedUser.email).toBe(store.state.user.email);
}); });
it('user name', function () { it('user name', function () {
const retrievedUserName = store.getters.userName; const store = useUsersStore();
const retrievedUserName = store.userName;
expect(retrievedUserName).toBe(store.state.user.getFullName()); expect(retrievedUserName).toBe(store.state.user.getFullName());
}); });