From f71d1ff9acba9ea41fba41c2dbbca26045e0450a Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Sat, 3 Jan 2026 19:46:31 +0100
Subject: [PATCH] added update profile modal, adjusted forms, and fixed account
 update in backend

---
 src/api/account.ts                    |  10 ++
 src/authStore.ts                      |  14 ++-
 src/base.css                          |  22 ++++
 src/components/InvitePeopleModal.vue  |   7 +-
 src/components/RoomList.vue           |   4 +-
 src/components/UpdateAccountModal.vue | 161 ++++++++++++++++++++++++++
 src/pages/AccountPage.vue             |  26 ++++-
 src/pages/FriendListPage.vue          |   2 +-
 src/pages/LoginPage.vue               |  13 ++-
 src/pages/NotificationsPage.vue       |   2 +-
 src/pages/RegisterPage.vue            |  21 +++-
 src/types.ts                          |   5 +
 12 files changed, 270 insertions(+), 17 deletions(-)
 create mode 100644 src/api/account.ts
 create mode 100644 src/components/UpdateAccountModal.vue

diff --git a/src/api/account.ts b/src/api/account.ts
new file mode 100644
index 0000000..165093e
--- /dev/null
+++ b/src/api/account.ts
@@ -0,0 +1,10 @@
+import { UpdateUserResponse } from '../types';
+import { apiFetch } from './client'
+// import type { User } from '../types'
+
+export function updateAccount(username: string, email: string, password: string) {
+  return apiFetch<UpdateUserResponse>('/account', {
+    method: 'PUT',
+    body: JSON.stringify({ username, email, password }),
+  });
+}
diff --git a/src/authStore.ts b/src/authStore.ts
index 01be67d..00eddf9 100644
--- a/src/authStore.ts
+++ b/src/authStore.ts
@@ -1,5 +1,5 @@
 import { load, Store } from '@tauri-apps/plugin-store'
-import { User } from './types'
+import { UpdateUserResponse, User } from './types'
 
 let store: Store | null = null
 
@@ -30,6 +30,18 @@ export async function clearAuthData() {
   await s.save()
 }
 
+export async function updateLocalUser(newData: UpdateUserResponse, uuid?: string) {
+  const updatedUser = {
+    username: newData.username,
+    email: newData.email,
+    uuid
+  }
+
+  const s = await getStore()
+  await s.set('user', updatedUser)
+  await s.save()
+}
+
 export async function setLastRoom(uuid: string) {
   if (!uuid || uuid === 'none') return
   const s = await getStore()
diff --git a/src/base.css b/src/base.css
index 291fbe1..5d7b302 100644
--- a/src/base.css
+++ b/src/base.css
@@ -24,6 +24,7 @@ body,
   --accent: #f27aa3;
   --accent-hover: #ff91b3;
   --border: #2a2f3b;
+  --error: #ff5050;
   --radius: 8px;
 }
 
@@ -151,6 +152,27 @@ i:hover {
   outline: none;
 }
 
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.input-group label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.error-message {
+  color: var(--error);
+  font-size: 0.9rem;
+}
+
+.modal {
+  margin: 30px;
+}
+
 @media (hover: hover) {
   i:hover {
     color: var(--text);
diff --git a/src/components/InvitePeopleModal.vue b/src/components/InvitePeopleModal.vue
index 7c8ffa8..0966fea 100644
--- a/src/components/InvitePeopleModal.vue
+++ b/src/components/InvitePeopleModal.vue
@@ -5,7 +5,10 @@
 
       <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
 
-      <input v-model="receiverUsername" placeholder="username" autofocus />
+      <div class="input-group">
+        <label>Receiver username</label>
+        <input v-model="receiverUsername" placeholder="username" autofocus />
+      </div>
 
       <label class="checkbox">
         <input type="checkbox" v-model="requestFriend" />
@@ -98,7 +101,7 @@ async function submit() {
 }
 
 .error-message {
-  color: red;
+  color: var(--error);
   font-size: 0.9rem;
 }
 
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index 95a0372..e4e14e3 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -6,7 +6,9 @@
           class="fa-solid fa-plus"></i></button>
     </header>
 
-    <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+    <Teleport to="body">
+      <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+    </Teleport>
 
     <div class="scroll-area">
       <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
diff --git a/src/components/UpdateAccountModal.vue b/src/components/UpdateAccountModal.vue
new file mode 100644
index 0000000..ae6206c
--- /dev/null
+++ b/src/components/UpdateAccountModal.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="backdrop" @click.self="emit('close')">
+    <form class="modal" @submit.prevent="submit">
+      <h2>Update your Account</h2>
+      <p class="subtitle">Only fill in the fields you wish to change.</p>
+
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+
+      <div class="input-group">
+        <label>Username</label>
+        <input v-model="username" placeholder="New username" autofocus />
+      </div>
+
+      <div class="input-group">
+        <label>Email</label>
+        <input v-model="email" type="email" placeholder="New email" />
+      </div>
+
+      <div class="input-group">
+        <label>New Password</label>
+        <input v-model="password" type="password" placeholder="Leave blank to keep current" />
+        <input v-model="confirmPassword" type="password" placeholder="Confirm new password" />
+      </div>
+
+      <div class="actions">
+        <button type="button" @click="emit('close')" class="secondary" :disabled="isSubmitting">
+          Cancel
+        </button>
+
+        <button type="submit" :disabled="isSubmitting">
+          {{ isSubmitting ? 'Updating...' : 'Save Changes' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { updateAccount } from '../api/account'
+import { updateLocalUser } from '../authStore'
+import type { User } from '../types'
+
+const props = defineProps<{ user: User | null }>()
+const emit = defineEmits(['close', 'updated'])
+
+const errorMessage = ref('')
+const isSubmitting = ref(false)
+
+const username = ref(props.user?.username || '')
+const email = ref(props.user?.email || '')
+const password = ref('')
+const confirmPassword = ref('')
+
+async function submit() {
+  errorMessage.value = ''
+
+  if (password.value !== confirmPassword.value) {
+    errorMessage.value = "Passwords do not match."
+    return
+  }
+
+  // Prevent empty submission
+  if (!username.value || !email.value) {
+    errorMessage.value = "Username and Email are required."
+    return
+  }
+
+  isSubmitting.value = true
+  errorMessage.value = ''
+
+  try {
+    const updatedData = await updateAccount(
+      username.value.trim(),
+      email.value.trim(),
+      password.value
+    )
+
+    await updateLocalUser(updatedData, props.user?.uuid)
+
+    emit('updated')
+    emit('close')
+  } catch (err: any) {
+    errorMessage.value = err?.message || 'Update failed'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.input-group label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.error-message {
+  /* background: rgba(255, 0, 0, 0.1); */
+  /* border: 1px solid red; */
+  /* padding: 0.5rem; */
+  /* border-radius: 4px; */
+  color: var(--error);
+  font-size: 0.9rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.secondary {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+</style>
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 2b087f5..2aa352e 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -2,11 +2,14 @@
   <div class="account-page">
     <h1>Your Account</h1>
 
+    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
+
     <div v-if="user" class="info-card">
+      <button class="update-btn" @click="showUpdateModal = true">Update</button>
       <p><strong>Username:</strong> {{ user.username }}</p>
       <p><strong>Email:</strong> {{ user.email }}</p>
     </div>
-    <div v-else>
+    <div v-else class="loading-state">
       <p>Loading account details...</p>
     </div>
 
@@ -23,18 +26,22 @@ import { useRouter } from 'vue-router'
 import { logout as authLogout } from '../store.ts'
 import { getAuthData } from "../authStore.ts"
 import type { User } from "../types"
+import UpdateAccountModal from '../components/UpdateAccountModal.vue'
 
 const router = useRouter()
 const user = ref<User | null>(null)
+const showUpdateModal = ref(false)
 
-onMounted(async () => {
+async function fetchUserData() {
   try {
     const auth = await getAuthData()
     user.value = auth.user
   } catch (err) {
     console.error("Failed to load user data:", err)
   }
-})
+}
+
+onMounted(fetchUserData)
 
 function logout() {
   authLogout()
@@ -53,12 +60,19 @@ function logout() {
 }
 
 .info-card {
+  position: relative;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1rem;
 }
 
+.update-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
 .logout-btn {
   cursor: pointer;
   display: flex;
@@ -84,4 +98,10 @@ function logout() {
 .logout-btn i {
   font-size: 1.25rem;
 }
+
+.loading-state {
+  padding: 2rem;
+  text-align: center;
+  color: var(--muted);
+}
 </style>
diff --git a/src/pages/FriendListPage.vue b/src/pages/FriendListPage.vue
index d023efd..c748219 100644
--- a/src/pages/FriendListPage.vue
+++ b/src/pages/FriendListPage.vue
@@ -95,7 +95,7 @@ async function send() {
 }
 
 .error-message {
-  color: red;
+  color: var(--error);
   font-size: 0.9rem;
 }
 
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 2ea83a5..122ebb0 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -25,8 +25,15 @@ async function submit() {
     <form class="login-card" @submit.prevent="submit">
       <h1>Login</h1>
 
-      <input v-model="email" placeholder="email" />
-      <input v-model="password" type="password" placeholder="password" />
+      <div class="input-group">
+        <label>Email</label>
+        <input v-model="email" placeholder="email" />
+      </div>
+
+      <div class="input-group">
+        <label>Password</label>
+        <input v-model="password" type="password" placeholder="password" />
+      </div>
 
       <button type="submit">Login</button>
 
@@ -78,7 +85,7 @@ async function submit() {
 }
 
 .error-message {
-  color: red;
+  color: var(--error);
   font-size: 0.9rem;
   text-align: center;
   margin-top: 0.5rem;
diff --git a/src/pages/NotificationsPage.vue b/src/pages/NotificationsPage.vue
index 7822267..484bf9e 100644
--- a/src/pages/NotificationsPage.vue
+++ b/src/pages/NotificationsPage.vue
@@ -79,7 +79,7 @@ async function acceptRoom(senderUuid: string, roomUuid: string) {
 }
 
 .error-message {
-  color: red;
+  color: var(--error);
   font-size: 0.9rem;
 }
 
diff --git a/src/pages/RegisterPage.vue b/src/pages/RegisterPage.vue
index 0369076..2c41315 100644
--- a/src/pages/RegisterPage.vue
+++ b/src/pages/RegisterPage.vue
@@ -3,10 +3,21 @@
     <form class="login-card" @submit.prevent="submit" novalidate>
       <h1>Register</h1>
 
-      <input v-model="email" type="email" placeholder="email" required />
-      <input v-model="username" placeholder="username" required />
-      <input v-model="password" type="password" placeholder="password" required />
-      <input v-model="confirmPassword" type="password" placeholder="confirm password" required />
+      <div class="input-group">
+        <label>Email</label>
+        <input v-model="email" type="email" placeholder="email" required />
+      </div>
+
+      <div class="input-group">
+        <label>Username</label>
+        <input v-model="username" placeholder="username" required />
+      </div>
+
+      <div class="input-group">
+        <label>Password</label>
+        <input v-model="password" type="password" placeholder="password" required />
+        <input v-model="confirmPassword" type="password" placeholder="confirm password" required />
+      </div>
 
       <button type="submit">Create Account</button>
 
@@ -89,7 +100,7 @@ async function submit(event: Event) {
 }
 
 .error-message {
-  color: red;
+  color: var(--error);
   font-size: 0.9rem;
   text-align: center;
   margin-top: 0.5rem;
diff --git a/src/types.ts b/src/types.ts
index 1e43ffa..a27b14c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,6 +11,11 @@ export interface LoginResponse {
   token: string
 }
 
+export interface UpdateUserResponse {
+  username: string
+  email: string
+}
+
 export interface Room {
   uuid: string
   owner_name: string