jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: allow editing user profile settings

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-04-30 02:24:10 -04:00
parent 60ce08ee86
commit 2e4c16621d
6 changed files with 308 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/features/user-profile/stores/userProfileStore.js
View File

@@ -1,4 +1,4 @@
import {computed, watch} from 'vue'
import {computed, ref, watch} from 'vue'
import {defineStore} from 'pinia'
import {useAuthStore} from "@/features/auth/stores/authStore.js";
import {useClient} from "@/plugins/api.js";
@@ -9,6 +9,9 @@ export const useUserProfileStore = defineStore(
() => {
const authStore = useAuthStore()
const isUpdating = ref(false)
const isUploadingPortrait = ref(false)
const error = ref(null)
const authWatcher = watch(
() => authStore.isAuthenticated,
@@ -64,12 +67,15 @@ export const useUserProfileStore = defineStore(
const client = useClient()
const userResponse = await client.get("/api/users/profile");
value.value = userResponse.data
} catch (error) {
console.error(error)
} catch (fetchError) {
console.error(fetchError)
}
}
async function changeFullname(firstname, lastname) {
isUpdating.value = true
error.value = null
try {
const client = useClient()
await client.post(
@@ -80,12 +86,19 @@ export const useUserProfileStore = defineStore(
})
value.value.firstname = firstname;
value.value.lastname = lastname;
} catch (error) {
console.error(error)
} catch (updateError) {
console.error(updateError)
error.value = 'Failed to update profile.'
throw updateError
} finally {
isUpdating.value = false
}
}
async function changeAlias(alias) {
isUpdating.value = true
error.value = null
try {
const client = useClient()
await client.post(
@@ -94,8 +107,12 @@ export const useUserProfileStore = defineStore(
alias: alias
})
value.value.alias = alias;
} catch (error) {
console.error(error)
} catch (updateError) {
console.error(updateError)
error.value = 'Failed to update profile.'
throw updateError
} finally {
isUpdating.value = false
}
}
@@ -128,6 +145,9 @@ export const useUserProfileStore = defineStore(
}
async function changeEmail(email) {
isUpdating.value = true
error.value = null
try {
const client = useClient()
await client.post(
@@ -136,8 +156,12 @@ export const useUserProfileStore = defineStore(
email: email
})
value.value.email = email;
} catch (error) {
console.error(error)
} catch (updateError) {
console.error(updateError)
error.value = 'Failed to update profile.'
throw updateError
} finally {
isUpdating.value = false
}
}
@@ -156,6 +180,9 @@ export const useUserProfileStore = defineStore(
}
async function changePortrait(selectedFile) {
isUploadingPortrait.value = true
error.value = null
try {
const client = useClient()
const formData = new FormData();
@@ -166,8 +193,12 @@ export const useUserProfileStore = defineStore(
formData)
value.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
} catch (error) {
console.error(error)
} catch (uploadError) {
console.error(uploadError)
error.value = 'Failed to update portrait.'
throw uploadError
} finally {
isUploadingPortrait.value = false
}
}
@@ -176,6 +207,9 @@ export const useUserProfileStore = defineStore(
alias,
fullname,
portraitUrl,
isUpdating,
isUploadingPortrait,
error,
roles,
persona,
authorizedWorkspaceIds,

202
frontend/src/features/user-profile/views/UserSettingsView.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AppAvatar from '@/components/AppAvatar.vue';
import ImageCropperDialog from '@/components/ImageCropperDialog.vue';
@@ -9,21 +9,86 @@
const { t } = useI18n();
const isPortraitDialogOpen = ref(false);
const isSavingPortrait = ref(false);
const settingsError = ref(null);
const settingsStatus = ref(null);
const form = reactive({
firstname: '',
lastname: '',
alias: '',
email: '',
});
const email = computed(() => userProfileStore.user?.email || t('userSettings.noEmail'));
const alias = computed(() => userProfileStore.alias);
const fullname = computed(() => userProfileStore.fullname);
const canSave = computed(() => Boolean(form.email.trim()) && !userProfileStore.isUpdating);
function syncFormFromUser(user) {
form.firstname = user?.firstname ?? '';
form.lastname = user?.lastname ?? '';
form.alias = user?.alias ?? '';
form.email = user?.email ?? '';
}
async function submitSettings() {
if (!form.email.trim()) {
settingsError.value = t('userSettings.errors.emailRequired');
settingsStatus.value = null;
return;
}
const user = userProfileStore.user ?? {};
const nextFirstname = form.firstname.trim();
const nextLastname = form.lastname.trim();
const nextAlias = form.alias.trim();
const nextEmail = form.email.trim();
settingsError.value = null;
settingsStatus.value = null;
try {
if (nextFirstname !== (user.firstname ?? '') || nextLastname !== (user.lastname ?? '')) {
await userProfileStore.changeFullname(nextFirstname, nextLastname);
}
if (nextAlias !== (user.alias ?? '')) {
await userProfileStore.changeAlias(nextAlias || null);
}
if (nextEmail !== (user.email ?? '')) {
await userProfileStore.changeEmail(nextEmail);
}
settingsStatus.value = t('userSettings.saved');
syncFormFromUser(userProfileStore.user);
} catch (error) {
console.error('Failed to update user settings:', error);
settingsError.value = t('userSettings.errors.saveFailed');
}
}
async function savePortrait(result) {
isSavingPortrait.value = true;
settingsError.value = null;
settingsStatus.value = null;
try {
await userProfileStore.changePortrait(result.file);
isPortraitDialogOpen.value = false;
settingsStatus.value = t('userSettings.portraitSaved');
} catch (error) {
console.error('Failed to update user portrait:', error);
settingsError.value = t('userSettings.errors.portraitFailed');
} finally {
isSavingPortrait.value = false;
}
}
watch(
() => userProfileStore.user,
syncFormFromUser,
{ immediate: true, deep: true }
);
</script>
<template>
@@ -50,6 +115,7 @@
<button
class="primary-button"
type="button"
@click="isPortraitDialogOpen = true"
>
{{ t('userSettings.updatePortrait') }}
@@ -62,20 +128,77 @@
<span>{{ t('userSettings.accountDetailsDescription') }}</span>
</div>
<div class="details-grid">
<div class="detail-row">
<span>{{ t('userSettings.alias') }}</span>
<strong>{{ alias }}</strong>
</div>
<div class="detail-row">
<span>{{ t('userSettings.fullName') }}</span>
<strong>{{ fullname }}</strong>
</div>
<div class="detail-row">
<span>{{ t('userSettings.email') }}</span>
<strong>{{ email }}</strong>
</div>
<div
v-if="settingsError"
class="page-message error"
>
{{ settingsError }}
</div>
<div
v-if="settingsStatus"
class="page-message success"
>
{{ settingsStatus }}
</div>
<form
class="form-stack"
@submit.prevent="submitSettings"
>
<div class="details-grid">
<label class="field">
<span>{{ t('userSettings.firstname') }}</span>
<input
v-model="form.firstname"
type="text"
autocomplete="given-name"
:disabled="userProfileStore.isUpdating"
/>
</label>
<label class="field">
<span>{{ t('userSettings.lastname') }}</span>
<input
v-model="form.lastname"
type="text"
autocomplete="family-name"
:disabled="userProfileStore.isUpdating"
/>
</label>
<label class="field">
<span>{{ t('userSettings.alias') }}</span>
<input
v-model="form.alias"
type="text"
autocomplete="nickname"
:placeholder="fullname"
:disabled="userProfileStore.isUpdating"
/>
</label>
<label class="field">
<span>{{ t('userSettings.email') }}</span>
<input
v-model="form.email"
type="email"
autocomplete="email"
:disabled="userProfileStore.isUpdating"
/>
</label>
</div>
<div class="form-actions">
<button
class="primary-button"
type="submit"
:disabled="!canSave"
>
{{ userProfileStore.isUpdating ? t('common.saving') : t('userSettings.saveDetails') }}
</button>
</div>
</form>
</div>
<ImageCropperDialog
@@ -84,6 +207,7 @@
:confirm-label="t('userSettings.savePortrait')"
:upload-label="t('userSettings.choosePortrait')"
:is-saving="isSavingPortrait"
:initial-url="userProfileStore.portraitUrl"
@save="savePortrait"
/>
</section>
@@ -107,8 +231,7 @@
.page-header p,
.panel-heading span,
.hero-identity span,
.hero-identity small,
.detail-row span {
.hero-identity small {
@apply text-sm leading-6;
color: #526178;
}
@@ -128,8 +251,7 @@
}
.hero-identity strong,
.panel-heading strong,
.detail-row strong {
.panel-heading strong {
color: #172033;
}
@@ -149,10 +271,45 @@
@apply grid gap-4 md:grid-cols-2;
}
.detail-row {
@apply flex flex-col gap-1 rounded-[1.25rem] border p-4;
.form-stack {
@apply flex flex-col gap-4;
}
.field {
@apply flex flex-col gap-2;
}
.field span {
@apply text-sm font-semibold;
color: #172033;
}
.field input {
@apply rounded-[1rem] border px-4 py-3 text-sm;
background: #fffaf2;
border-color: rgba(23, 32, 51, 0.08);
color: #172033;
}
.field input:disabled {
opacity: 0.7;
}
.form-actions {
@apply flex justify-end;
}
.page-message {
@apply rounded-[1rem] border px-4 py-3 text-sm font-semibold;
background: rgba(15, 118, 110, 0.08);
border-color: rgba(15, 118, 110, 0.18);
color: #0f766e;
}
.page-message.error {
background: rgba(185, 28, 28, 0.08);
border-color: rgba(185, 28, 28, 0.16);
color: #b91c1c;
}
.primary-button {
@@ -160,4 +317,9 @@
background: #172033;
color: #fffaf2;
}
.primary-button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
</style>

14
frontend/src/locales/en.json
View File

@@ -310,14 +310,24 @@
"description": "Manage the portrait and account details shown inside the workspace.",
"updatePortrait": "Update portrait",
"accountDetails": "Account details",
"accountDetailsDescription": "Additional account editing fields can be added here next.",
"accountDetailsDescription": "Edit the profile details other workspace members see.",
"saveDetails": "Save details",
"saved": "Profile details saved",
"portraitSaved": "Portrait saved",
"alias": "Alias",
"firstname": "First name",
"lastname": "Last name",
"fullName": "Full name",
"email": "Email",
"noEmail": "No email set",
"cropperTitle": "Update user portrait",
"savePortrait": "Save portrait",
"choosePortrait": "Choose portrait"
"choosePortrait": "Choose portrait",
"errors": {
"emailRequired": "Email is required.",
"saveFailed": "Profile details could not be saved.",
"portraitFailed": "Portrait could not be saved."
}
},
"workspaceSettings": {
"eyebrow": "Settings",

14
frontend/src/locales/fr.json
View File

@@ -310,14 +310,24 @@
"description": "Gérez le portrait et les informations du compte affichés dans l'espace.",
"updatePortrait": "Mettre à jour le portrait",
"accountDetails": "Détails du compte",
"accountDetailsDescription": "Des champs supplémentaires d'édition du compte peuvent être ajoutés ici ensuite.",
"accountDetailsDescription": "Modifiez les informations de profil visibles par les autres membres.",
"saveDetails": "Enregistrer les détails",
"saved": "Informations de profil enregistrées",
"portraitSaved": "Portrait enregistré",
"alias": "Alias",
"firstname": "Prénom",
"lastname": "Nom",
"fullName": "Nom complet",
"email": "Email",
"noEmail": "Aucun email défini",
"cropperTitle": "Mettre à jour le portrait utilisateur",
"savePortrait": "Enregistrer le portrait",
"choosePortrait": "Choisir un portrait"
"choosePortrait": "Choisir un portrait",
"errors": {
"emailRequired": "L'email est requis.",
"saveFailed": "Les informations de profil n'ont pas pu être enregistrées.",
"portraitFailed": "Le portrait n'a pas pu être enregistré."
}
},
"workspaceSettings": {
"eyebrow": "Paramètres",