Improve profile page (#198)

Closes #177
Parts of #38

api/users.ts

@@ -0,0 +1,15 @@
+type UploadAvatarResponse = {
+  image: string
+  success: boolean
+}
+
+export async function uploadProfilePicture(file: File) {
+  const api = useNuxtApp().$fileApi
+  const formData = new FormData()
+  formData.append('file', file)
+  const resp = await api<UploadAvatarResponse>(`api/1/me/avatar/`, {
+    method: 'POST',
+    body: formData,
+  })
+  return resp
+}

components/BrandedButton/BrandedButton.vue

@@ -40,7 +40,7 @@ import {
 const props = withDefaults(defineProps<{
   as?: 'a' | 'button'
   size?: 'xs' | 'sm'
-  color: 'primary' | 'secondary' | 'danger'
+  color?: 'primary' | 'secondary' | 'danger'
   disabled?: boolean
   loading?: boolean
   icon?: Component

components/MarkdownEditor/InternalEditor.vue

@@ -207,7 +207,7 @@ const editor = useEditor(root =>
             const attrs = typeof prevAttr === 'function' ? prevAttr(state) : (prevAttr ?? {})
             attrs.id = props.id
             attrs['data-testid'] = 'markdown-editor'
-            attrs['class'] = 'min-h-96 w-full'
+            attrs['class'] = 'min-h-24 w-full'
             if (props.ariaLabelledBy) {
               attrs['aria-labelledby'] = props.ariaLabelledBy
             }

components/Toaster/Toaster.client.vue

@@ -7,19 +7,21 @@
     <component
       :is="tag"
       v-show="isActive"
-      class="grid items-center duration-150 mx-2 my-0 rounded-lg pointer-events-auto text-white min-h-12 cursor-pointer py-2 px-8 break-words"
+      class="flex items-center duration-150 mx-2 my-0 rounded-lg pointer-events-auto text-white min-h-12 cursor-pointer py-2 px-4 break-words"
       :class="[`c-toast--${type}`, `c-toast--${position}`]"
       role="alert"
       @mouseover="toggleTimer(true)"
       @mouseleave="toggleTimer(false)"
       @click="click"
     >
       {{ message }}
+      <RiCloseLine class="pl-2 size-7" />
     </component>
   </transition>
 </template>
 
 <script setup lang="ts">
+import { RiCloseLine } from '@remixicon/vue'
 import { ref, computed, onBeforeMount, onBeforeUnmount, onMounted } from 'vue'
 import Positions, { definePosition } from '~/components/Toaster/defaults/positions'
 import type { Position } from '~/components/Toaster/defaults/positions'

components/User/AdminUserProfilePage.vue

@@ -80,6 +80,25 @@
         :label="$t('Website')"
         type="url"
       />
+      <UploadGroup
+        :label="$t('Profile picture')"
+        type="drop"
+        accept=".jpeg, .jpg, .png"
+        :hint-text="$t('Max size: 4Mo. Accepted formats: JPG, JPEG, PNG')"
+        :show-label="true"
+        @change="setFiles"
+      />
+      <div
+        v-if="imagePreview"
+        class="text-align-center"
+      >
+        <NuxtImg
+          :src="imagePreview"
+          class="border mx-auto max-h-40"
+          loading="lazy"
+          alt=""
+        />
+      </div>
       <div class="flex justify-end">
         <BrandedButton
           size="xs"
@@ -265,6 +284,7 @@
 <script setup lang="ts">
 import { Avatar, CopyButton } from '@datagouv/components'
 import { RiDeleteBin6Line, RiEditLine, RiEyeLine, RiRecycleLine, RiSaveLine } from '@remixicon/vue'
+import { uploadProfilePicture } from '~/api/users'
 
 const me = useMe()
 const config = useNuxtApp().$config
@@ -278,8 +298,34 @@ const passwordId = useId()
 
 const loading = ref(false)
 
+const profilePicture = ref<File | null>(null)
+
+watchEffect(() => {
+  if (me.value.about === null) {
+    me.value.about = ''
+  }
+})
+
+const setFiles = (files: Array<File>) => {
+  profilePicture.value = files[0]
+}
+
+const imagePreview = computed(() => {
+  if (!profilePicture.value) return null
+  if (typeof profilePicture.value === 'string') return profilePicture.value
+  return URL.createObjectURL(profilePicture.value)
+})
+
 async function updateMe() {
   loading.value = true
+  if (profilePicture.value) {
+    try {
+      await uploadProfilePicture(profilePicture.value)
+    }
+    catch {
+      toast.error(t(`Your profile picture couldn't be updated !`))
+    }
+  }
   try {
     me.value = await $api<Me>('/api/1/me/', {
       method: 'PUT',
@@ -290,7 +336,6 @@ async function updateMe() {
         website: me.value.website,
       },
     })
-
     toast.success(t('Profile updated !'))
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }

lang/en-US.json

@@ -735,6 +735,7 @@
   "E-mail address": "E-mail address",
   "Password": "Password",
   "Profile updated !": "Profile updated !",
+  "Your profile picture couldn't be updated !": "Your profile picture couldn't be updated !",
   "The field {property} should be of at least {min} characters": "The field {property} should be of at least {min} characters",
   "The field {property} should be a valid URL": "The field {property} should be a valid URL",
   "The field {property} should be a valid email": "The field {property} should be a valid email",
@@ -754,6 +755,6 @@
   "{n} users": "{n} users | {n} user | {n} users",
   "Transfer to {recipient} already requested the {date}": "Transfer to {recipient} already requested the {date}",
   "by {user}": "by {user}",
-
+  "Profile picture": "Profile picture",
   "": ""
 }

lang/es-ES.json

@@ -732,6 +732,7 @@
   "E-mail address": "E-mail address",
   "Password": "Password",
   "Profile updated !": "Profile updated !",
+  "Your profile picture couldn't be updated !": "Your profile picture couldn't be updated !",
   "The field {property} should be of at least {min} characters": "The field {property} should be of at least {min} characters",
   "The field {property} should be a valid URL": "The field {property} should be a valid URL",
   "The field {property} should be a valid email": "The field {property} should be a valid email",
@@ -747,5 +748,6 @@
   "The dataset will only be visible to members of your organization.": "The dataset will only be visible to members of your organization.",
   "The dataservice will only be visible to members of your organization.": "The dataservice will only be visible to members of your organization.",
   "The reuse will only be visible to members of your organization.": "The reuse will only be visible to members of your organization.",
+  "Profile picture": "Profile picture",
   "": ""
 }

lang/fr-FR.json

@@ -747,6 +747,7 @@
   "Log in": "Se connecter",
   "Register": "S'enregistrer",
   "Profile updated !": "Profil mis à jour !",
+  "Your profile picture couldn't be updated !": "Votre image de profil n'a pas pu être téléversée !",
   "The field {property} should be of at least {min} characters": "Le champ {property} doit être de {min} caractères minimum",
   "The field {property} should be a valid URL": "Le champ {property} doit être une URL valide",
   "The field {property} should be a valid email": "Le champ {property} doit être une adresse e-mail valide",
@@ -776,6 +777,6 @@
   "Transfer to {recipient} already requested the {date}": "Transfert vers {recipient} déjà demandé le {date}",
   "by {user}": "par {user}",
   "Transfer requested. A notification has been sent to the recipient.": "Transfert demandé. Une notification a été envoyé au destinataire.",
-
+  "Profile picture": "Image de profil",
   "": ""
 }

package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@datagouv/components": "^2.0.1",
+    "@datagouv/components": "^2.0.3",
     "@datagouv/select-a11y": "^3.6.1",
     "@datagouv/vue-toaster": "^2.4.5",
     "@floating-ui/vue": "^1.1.5",

utils/auth.ts

@@ -1,7 +1,7 @@
 import type { Organization, User } from '@datagouv/components'
 
 export type Me = User & {
-  about: string
+  about: string | null
   active: boolean
   apikey: string | null
   email: string