feat: integrated user profile integration

package.json

@@ -25,7 +25,8 @@
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
-    "mongoose": "^7.5.0"
+    "mongoose": "^7.5.0",
+    "multer": "^1.4.5-lts.1"
   },
   "devDependencies": {
     "@types/amqplib": "^0.10.1",
@@ -34,6 +35,7 @@
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.4",
     "@types/jsonwebtoken": "^9.0.2",
+    "@types/multer": "^1.4.7",
     "@types/node": "^20.5.9",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",

services/api/src/schema.ts

@@ -7,4 +7,5 @@ export interface RequestSchema {
 export const EmptySchema: RequestSchema = {
   Params: {},
   Body: {},
+  Query: {},
 }

services/frontend/src/components/home-component/SettingsForm.vue

@@ -1,21 +1,31 @@
 <script setup lang="ts">
 import { useUserStore } from '@/stores/user'
-import { CreateChannelApi } from '@api/piperchat/channel'
-import { ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const userStore = useUserStore()
 
 const event = defineEmits<{
   (e: 'close'): void
 }>()
 
-const username = ref(userStore.username)
-const email = ref(userStore.email)
-const description = ref(userStore.description)
-const photo = ref(userStore.photo)
+onMounted(async () => {
+  await userStore.reloadUserPhoto()
+})
 
-async function onSubmit() {
-  console.log('submit')
+function handleFileChange(e: any) {
+  const file = e.target.files[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = () => {
+      userStore.updatePhoto(reader.result as string)
+    }
+    reader.readAsArrayBuffer(file)
+  }
+}
+
+function openFileInput() {
+  const input = document.getElementById('fileInput')
+  input?.click()
 }
 </script>
 
@@ -24,19 +34,23 @@ async function onSubmit() {
     <q-form class="q-gutter-md">
       <!--Insert image with username-->
       <div class="avatar-and-title">
-        <q-avatar>
-          <img src="src/assets/user-avatar.png" />
+        <q-avatar class="q-mb-md" size="100px" @click="openFileInput">
+          <img v-if="userStore.photoLoaded" :src="userStore.photo" />
         </q-avatar>
+        <input
+          id="fileInput"
+          type="file"
+          style="display: none"
+          accept="image/*"
+          @change="handleFileChange"
+        />
         <h3 style="margin-left: 10px">{{ userStore.username }}</h3>
       </div>
 
-      <q-input v-model="email" label="Email" outlined class="q-mb-md" />
-
-      <q-input v-model="description" label="Description" outlined class="q-mb-md" />
+      <q-input :model-value="userStore.username" label="Username" outlined class="q-mb-md" />
 
-      <q-input v-model="photo" label="Photo" outlined class="q-mb-md" />
+      <q-input :model-value="userStore.email" label="Email" outlined class="q-mb-md" />
 
-      <q-btn type="submit" label="Save" color="primary" class="q-mt-md" />
       <q-btn
         label="Cancel"
         type="reset"

services/frontend/src/controllers/axios-controller.ts

@@ -2,12 +2,18 @@ import { BadRequest, InternalServerError } from '@api/errors'
 import axios from 'axios'
 
 export abstract class AxiosController {
-  private async request<Response>(method: string, path: string, data: object): Promise<Response> {
+  private async request<Response>(
+    method: string,
+    path: string,
+    data: object,
+    headers: object = {}
+  ): Promise<Response> {
     try {
       const response = await axios.request<Response>({
         method: method,
         url: path,
-        data: data
+        data: data,
+        headers: headers
       })
       return response.data
     } catch (e: any) {
@@ -31,8 +37,12 @@ export abstract class AxiosController {
     return await this.request<Success>('get', path, data)
   }
 
-  protected async put<Success>(path: string, data: object = {}): Promise<Success> {
-    return await this.request<Success>('put', path, data)
+  protected async put<Success>(
+    path: string,
+    data: object = {},
+    headers: object = {}
+  ): Promise<Success> {
+    return await this.request<Success>('put', path, data, headers)
   }
 
   protected async delete<Success>(path: string, data: object = {}): Promise<Success> {

services/frontend/src/controllers/users/user/user-controller-impl.ts

@@ -6,7 +6,13 @@ import type {
 } from '@api/users/user'
 import type { UserController } from './user-controller'
 import { AxiosController } from '@/controllers/axios-controller'
+import type { UpdatePhotoApi } from '@api/users/profile'
 export class UserControllerImpl extends AxiosController implements UserController {
+  async updateUserPhoto(request: UpdatePhotoApi.Request.Type): Promise<UpdatePhotoApi.Response> {
+    return await this.put<UpdatePhotoApi.Response>('/profile/photo', request, {
+      'Content-Type': 'multipart/form-data'
+    })
+  }
   async whoami(): Promise<WhoamiApi.Response> {
     return await this.get<WhoamiApi.Response>('/whoami')
   }

services/frontend/src/controllers/users/user/user-controller.ts

@@ -4,7 +4,10 @@ import {
   GetUserPhotoApi,
   GetUserDescriptionApi
 } from '@api/users/user'
+import { UpdatePhotoApi } from '@api/users/profile'
+
 export interface UserController {
+  updateUserPhoto(request: UpdatePhotoApi.Request.Type): Promise<UpdatePhotoApi.Response>
   /**
    * Get the current user.
    */