refactor(ui): migrate Users store to Pinia

Author: luizhf42

ui/src/components/Account/AccountCreated.vue

@@ -39,10 +39,10 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
 
 const props = defineProps<{
   messageKind: "sig" | "normal";
@@ -52,12 +52,12 @@ const props = defineProps<{
 
 const emit = defineEmits(["show"]);
 const authStore = useAuthStore();
-const store = useStore();
+const usersStore = useUsersStore();
 const router = useRouter();
 const route = useRoute();
 const snackbar = useSnackbar();
 
-const token = computed(() => store.getters["users/getSignToken"]);
+const token = computed(() => usersStore.signUpToken);
 
 const showMessage = computed({
   get: () => props.show,
@@ -71,7 +71,7 @@ const buttonDataTest = computed(() => (isNormalMessage.value ? "resendEmail-btn"
 
 const resendEmail = async () => {
   try {
-    await store.dispatch("users/resendEmail", props.username);
+    await usersStore.resendEmail(props.username);
     snackbar.showSuccess("Email successfully sent.");
   } catch (error) {
     snackbar.showError("Failed to send email.");
@@ -101,7 +101,7 @@ const handleAction = async () => {
 
 watch(showMessage, (newValue) => {
   if (newValue && props.messageKind === "sig") {
-    authStore.token = token.value;
+    authStore.token = token.value as string;
     setTimeout(redirect, 5000);
   }
 });

ui/src/components/AuthMFA/MfaForceRecoveryMail.vue

@@ -54,15 +54,16 @@ import * as yup from "yup";
 import { useField } from "vee-validate";
 import { computed, ref } from "vue";
 import axios, { AxiosError } from "axios";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
+import { IUserPatch } from "@/interfaces/IUser";
 
 const showDialog = ref(false);
-const store = useStore();
 const authStore = useAuthStore();
+const usersStore = useUsersStore();
 const snackbar = useSnackbar();
 const email = computed(() => authStore.email);
 const {
@@ -87,12 +88,11 @@ const {
 
 const updateUserData = async () => {
   const data = {
-    id: authStore.id,
     recovery_email: recoveryEmail.value,
-  };
+  } as IUserPatch;
 
   try {
-    await store.dispatch("users/patchData", data);
+    await usersStore.patchData(data);
     authStore.updateUserData(data);
     snackbar.showSuccess("Recovery email updated successfully.");
   } catch (error) {

ui/src/components/AuthMFA/MfaSettings.vue

@@ -261,15 +261,16 @@ import { useField } from "vee-validate";
 import { ref, computed, watch } from "vue";
 import QrcodeVue from "qrcode.vue";
 import axios, { AxiosError } from "axios";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
+import { IUserPatch } from "@/interfaces/IUser";
 
-const store = useStore();
 const authStore = useAuthStore();
+const usersStore = useUsersStore();
 const snackbar = useSnackbar();
 const el = ref<number>(1);
 const emit = defineEmits(["update:recovery-email"]);
@@ -323,10 +324,9 @@ const goToNextStep = async () => {
 
 const updateRecoveryEmail = async () => {
   try {
-    await store.dispatch("users/patchData", {
-      id: authStore.id,
+    await usersStore.patchData({
       recovery_email: recoveryEmail.value,
-    });
+    } as IUserPatch);
     authStore.recoveryEmail = recoveryEmail.value;
     snackbar.showSuccess("Recovery email updated successfully.");
     emit("update:recovery-email", recoveryEmail.value);

ui/src/components/Billing/BillingWarning.vue

@@ -43,46 +43,16 @@
 import { computed } from "vue";
 import { actions, authorizer } from "@/authorizer";
 import hasPermission from "@/utils/permission";
-import { useStore } from "@/store";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
-import useBillingStore from "@/store/modules/billing";
-import useStatsStore from "@/store/modules/stats";
 
-const store = useStore();
 const authStore = useAuthStore();
-const billingStore = useBillingStore();
-const { stats } = useStatsStore();
 
+const showWarningDialog = defineModel({ default: false });
 const hasAuthorization = computed(() => {
   const { role } = authStore;
   return !!role && hasPermission(authorizer.role[role], actions.billing.subscribe);
 });
 
-const close = () => {
-  if (store.getters["users/statusUpdateAccountDialog"]) {
-    store.dispatch("users/setStatusUpdateAccountDialog", false);
-  } else if (
-    store.getters["users/statusUpdateAccountDialogByDeviceAction"]
-  ) {
-    store.dispatch(
-      "users/setStatusUpdateAccountDialogByDeviceAction",
-      false,
-    );
-  }
-};
-
-const showWarningDialog = computed({
-  get() {
-    return (
-      (store.getters["users/statusUpdateAccountDialog"]
-        && stats.registered_devices === 3
-        && !billingStore.isActive)
-        || store.getters["users/statusUpdateAccountDialogByDeviceAction"]
-    );
-  },
-  set() {
-    close();
-  },
-});
+const close = () => { showWarningDialog.value = false; };
 </script>

ui/src/components/Connector/ConnectorForm.vue

@@ -108,7 +108,6 @@ import { useField } from "vee-validate";
 import * as yup from "yup";
 import { computed, ref, watch } from "vue";
 import { envVariables } from "@/envVariables";
-import { useStore } from "@/store";
 import { IConnectorPayload } from "@/interfaces/IConnector";
 import { parseCertificate, parsePrivateKeySsh } from "@/utils/validate";
 import hasPermission from "@/utils/permission";
@@ -117,6 +116,7 @@ import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
 
 const props = defineProps<{
   isEditing: boolean;
@@ -128,12 +128,11 @@ const props = defineProps<{
 }>();
 
 const authStore = useAuthStore();
+const usersStore = useUsersStore();
 const showDialog = defineModel<boolean>({ default: false });
 const emit = defineEmits(["update"]);
 const snackbar = useSnackbar();
 
-const store = useStore();
-
 // eslint-disable-next-line vue/max-len
 const ipAddressRegex = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})$/;
 
@@ -301,7 +300,7 @@ const saveConnector = async () => {
   }
 
   if (envVariables.isCommunity) {
-    store.commit("users/setShowPaywall", true);
+    usersStore.showPaywall = true;
     return;
   }
   try {

ui/src/components/Devices/DeviceAcceptWarning.vue

@@ -30,21 +30,19 @@
 import { computed } from "vue";
 import { actions, authorizer } from "@/authorizer";
 import hasPermission from "@/utils/permission";
-import { useStore } from "@/store";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useDevicesStore from "@/store/modules/devices";
 
 const authStore = useAuthStore();
 const devicesStore = useDevicesStore();
-const store = useStore();
 const duplicatedDeviceName = computed(() => devicesStore.duplicatedDeviceName);
-const showDialog = computed(() => store.getters["users/deviceDuplicationError"]);
+const showDialog = computed(() => !!duplicatedDeviceName.value);
 
 const hasAuthorization = computed(() => {
   const { role } = authStore;
   return !!role && hasPermission(authorizer.role[role], actions.billing.subscribe);
 });
 
-const close = () => { store.dispatch("users/setDeviceDuplicationOnAcceptance", false); };
+const close = () => { devicesStore.duplicatedDeviceName = ""; };
 </script>

ui/src/components/Devices/DeviceActionButton.vue

@@ -52,7 +52,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { AxiosError } from "axios";
-import { useStore } from "@/store";
 import { authorizer, actions } from "@/authorizer";
 import hasPermission from "@/utils/permission";
 import { capitalizeText } from "@/utils/string";
@@ -79,7 +78,6 @@ const props = withDefaults(defineProps<DeviceActionButtonProps>(), {
 });
 
 const emit = defineEmits(["update"]);
-const store = useStore();
 const authStore = useAuthStore();
 const billingStore = useBillingStore();
 const devicesStore = useDevicesStore();
@@ -139,15 +137,14 @@ const acceptDevice = async () => {
     const axiosError = error as AxiosError;
     switch (axiosError.response?.status) {
       case 402:
-        store.dispatch("users/setStatusUpdateAccountDialogByDeviceAction", true);
+        billingStore.showBillingWarning = true;
         snackbar.showError("Couldn't accept the device. Check your billing status and try again.");
         break;
       case 403:
         snackbar.showError("You reached the maximum amount of accepted devices in this namespace.");
         break;
       case 409:
         devicesStore.duplicatedDeviceName = props.name;
-        store.dispatch("users/setDeviceDuplicationOnAcceptance", true);
         snackbar.showError("A device with that name already exists in the namespace. Rename it and try again.");
         break;
       default:

ui/src/components/Sessions/SessionPlay.vue

@@ -54,7 +54,7 @@ import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useSessionsStore from "@/store/modules/sessions";
-import { useStore } from "@/store";
+import useUsersStore from "@/store/modules/users";
 
 const props = defineProps<{
   uid: string;
@@ -63,9 +63,9 @@ const props = defineProps<{
 }>();
 
 const showDialog = ref(false);
-const store = useStore();
 const authStore = useAuthStore();
 const sessionsStore = useSessionsStore();
+const usersStore = useUsersStore();
 const snackbar = useSnackbar();
 const disabled = computed(() => !props.recorded || !props.authenticated);
 const loading = ref(false);
@@ -103,7 +103,7 @@ const displayDialog = async () => {
 
 const openDialog = () => {
   if (envVariables.isCommunity) {
-    store.commit("users/setShowPaywall", true);
+    usersStore.showPaywall = true;
     return;
   }
   displayDialog();

ui/src/components/Setting/SettingProfile.vue

@@ -230,7 +230,6 @@ import { useDisplay } from "vuetify";
 import { useField } from "vee-validate";
 import axios, { AxiosError } from "axios";
 import * as yup from "yup";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import MfaSettings from "../AuthMFA/MfaSettings.vue";
 import MfaDisable from "../AuthMFA/MfaDisable.vue";
@@ -240,11 +239,12 @@ import { envVariables } from "@/envVariables";
 import ChangePassword from "../User/ChangePassword.vue";
 import useSnackbar from "@/helpers/snackbar";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
 
 type ErrorResponseData = { field: string; message: string }[];
 
-const store = useStore();
 const authStore = useAuthStore();
+const usersStore = useUsersStore();
 const snackbar = useSnackbar();
 const editDataStatus = ref(false);
 const editPasswordStatus = ref(false);
@@ -380,7 +380,7 @@ const updateUserData = async () => {
     };
 
     try {
-      await store.dispatch("users/patchData", data);
+      usersStore.patchData(data);
       authStore.updateUserData(data);
       snackbar.showSuccess("Profile data updated successfully.");
       enableEdit("data");

ui/src/components/User/ChangePassword.vue

@@ -74,14 +74,14 @@ import * as yup from "yup";
 import { useField } from "vee-validate";
 import { computed, ref } from "vue";
 import axios, { AxiosError } from "axios";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
+import useUsersStore from "@/store/modules/users";
 
-const store = useStore();
 const authStore = useAuthStore();
+const usersStore = useUsersStore();
 const snackbar = useSnackbar();
 const showDialog = defineModel({ default: false });
 
@@ -163,7 +163,7 @@ const updatePassword = async () => {
     };
 
     try {
-      await store.dispatch("users/patchPassword", data);
+      await usersStore.patchPassword(data);
       snackbar.showSuccess("Password updated successfully.");
       close();
     } catch (error: unknown) {