Show error message if profile details can't be updated

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Show full date and time in post timestamp tooltip.
+- Show error message if profile details can't be updated.
 
 ## [1.10.0] - 2023-01-18
 

src/api/users.ts

@@ -249,11 +249,11 @@ export async function updateProfile(
     json: profileData,
     authToken,
   })
-  const profileOrError = await response.json()
+  const data = await response.json()
   if (response.status !== 200) {
-    throw new Error(profileOrError.message)
+    throw new Error(data.message)
   } else {
-    return profileOrError
+    return data
   }
 }
 

src/views/ProfileForm.vue

@@ -80,6 +80,7 @@
         >
           Save
         </button>
+        <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
       </form>
     </template>
   </sidebar-layout>
@@ -107,6 +108,7 @@ const { ensureCurrentUser, setCurrentUser, ensureAuthToken } = $(useCurrentUser(
 
 const profile = ensureCurrentUser()
 let isLoading = $ref(false)
+let errorMessage = $ref<string | null>(null)
 
 function getFieldsAttributes() {
   const fields_attributes = []
@@ -204,7 +206,15 @@ function isFormValid(): boolean {
 async function save() {
   const authToken = ensureAuthToken()
   isLoading = true
-  const user = await updateProfile(authToken, form)
+  errorMessage = null
+  let user
+  try {
+    user = await updateProfile(authToken, form)
+  } catch (error: any) {
+    isLoading = false
+    errorMessage = error.message
+    return
+  }
   isLoading = false
   setCurrentUser(user)
   router.push({ name: "profile", params: { profileId: user.id } })
@@ -218,6 +228,8 @@ async function save() {
 
 .profile-form {
   @include content-form;
+
+  margin-bottom: $block-outer-padding;
 }
 
 .image-upload-group {
@@ -286,8 +298,4 @@ async function save() {
     filter: $link-hover-colorizer;
   }
 }
-
-.btn[type="submit"] {
-  margin-bottom: $block-outer-padding;
-}
 </style>