feat(profile): updating profile information and account activation

.changes/update-profile.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Support for updating profile information and account activation.

.cspell.json

@@ -1,6 +1,7 @@
 {
     "words": [
         "algohub",
+        "confirmationservice",
         "covector",
         "icns",
         "persistedstate",

package.json

@@ -22,6 +22,7 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.2.2",
     "vue": "^3.5.13",
+    "vue-picture-cropper": "^0.7.0",
     "vue-router": "^4.4.5",
     "zod": "^3.23.8"
   },

src/main.ts

@@ -7,6 +7,7 @@ import App from "@/App.vue";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
 import ToastService from "primevue/toastservice";
+import ConfirmationService from 'primevue/confirmationservice';
 
 import router from "./router";
 import { createPinia } from "pinia";
@@ -30,5 +31,6 @@ app.use(PrimeVue, {
   },
 });
 app.use(ToastService);
+app.use(ConfirmationService);
 
 app.mount("#app");

src/scripts/api.ts

@@ -35,3 +35,61 @@ export const register = async (form: Register) => {
     } as ErrorResponse;
   }
 };
+
+interface UploadAvatar {
+  id: string;
+  token: string;
+  file: File;
+}
+
+interface UploadAvatarResponse {
+  uri: string;
+}
+
+export const uploadAvatar = async (form: UploadAvatar) => {
+  try {
+    const response = await axios.put("/account/content/upload", form, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    return response.data as Response<UploadAvatarResponse>;
+  } catch (error) {
+    return {
+      success: false,
+      message: AxiosError.from(error).message,
+    } as ErrorResponse;
+  }
+};
+
+interface Profile {
+  avatar?: string;
+  signature?: string;
+  links?: string[];
+  nickname?: string;
+  sex?: boolean;
+  birthday?: string;
+  name?: string;
+  student_id?: string;
+  school?: string;
+  college?: string;
+  major?: string;
+}
+
+interface ProfileForm {
+  id: string;
+  token: string;
+  profile: Profile;
+}
+
+export const updateProfile = async (form: ProfileForm) => {
+  try {
+    const response = await axios.post("/account/profile", form);
+    return response.data as Response<undefined>;
+  } catch (error) {
+    return {
+      success: false,
+      message: AxiosError.from(error).message,
+    };
+  }
+};

src/scripts/store.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 const prefersDarkMode = () => {
   return (
@@ -34,3 +34,54 @@ export const useThemeStore = defineStore(
     persist: true,
   }
 );
+
+interface Account {
+  id?: string;
+  token?: string;
+
+  username: string;
+  email: string;
+  avatar?: string;
+  signature?: string;
+  links?: string[];
+
+  nickname?: string;
+  sex?: boolean;
+  birthday?: Date;
+
+  name?: string;
+  student_id?: string;
+  school?: string;
+  college?: string;
+  major?: string;
+
+  rating?: number;
+  role?: number;
+  active?: boolean;
+}
+
+export const useAccountStore = defineStore(
+  "account",
+  () => {
+    const account = ref<Account | null>(null);
+
+    const isLoggedIn = computed(
+      () => account.value !== null && account.value.token
+    );
+
+    const mergeProfile = (profile: Partial<Account>) => {
+      if (account.value) {
+        Object.assign(account.value, profile);
+      }
+    };
+
+    const logout = () => {
+      account.value = null;
+    };
+
+    return { account, isLoggedIn, mergeProfile, logout };
+  },
+  {
+    persist: true,
+  }
+);

src/views/index.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { useAccountStore } from "@/scripts/store";
 import { onMounted } from "vue";
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
+const accountStore = useAccountStore();
 
 onMounted(() => {
-  router.push("/login");
+  if (!accountStore.isLoggedIn) {
+    router.push("/login");
+  }
 })
 </script>