Added more info to profile page.

gymboard-app/src/i18n/en-US/index.ts

@@ -58,6 +58,8 @@ export default {
   },
   userSettingsPage: {
     title: 'Account Settings',
+    email: 'Email',
+    name: 'Name',
     password: 'Password',
     passwordHint: 'Set a new password for your account.',
     updatePassword: 'Update Password',

gymboard-app/src/i18n/nl-NL/index.ts

@@ -53,6 +53,8 @@ export default {
   },
   userSettingsPage: {
     title: 'Account instellingen',
+    email: 'E-mail',
+    name: 'Naam',
     password: 'Wachtwoord',
     passwordHint: 'Stel een nieuw wachtwoord voor je account in.',
     updatePassword: 'Wachtwoord bijwerken',

gymboard-app/src/pages/UserPage.vue

@@ -3,9 +3,6 @@
     <StandardCenteredPage v-if="user">
       <h3>{{ user?.name }}</h3>
 
-      <p>{{ user?.email }}</p>
-      <p v-if="isOwnUser">This is your account!</p>
-
       <hr>
 
       <div v-if="userPrivate">

gymboard-app/src/pages/auth/UserSettingsPage.vue

@@ -3,24 +3,37 @@ The page where users can edit their personal information and preferences.
 -->
 <template>
   <q-page>
-    <StandardCenteredPage>
+    <StandardCenteredPage v-if="authStore.loggedIn">
       <h3>{{ $t('userSettingsPage.title') }}</h3>
       <hr>
 
+      <div class="row justify-between">
+        <span class="property-label">{{ $t('userSettingsPage.email') }}</span>
+        <q-input type="email" v-model="authStore.user.email" dense readonly/>
+      </div>
+      <div class="row justify-between">
+        <span class="property-label">{{ $t('userSettingsPage.name') }}</span>
+        <q-input type="text" v-model="authStore.user.name" dense readonly/>
+      </div>
       <div class="row justify-between">
         <span class="property-label">{{ $t('userSettingsPage.password') }}</span>
         <q-input
+          dense
           type="password"
           v-model="newPassword"
           :hint="$t('userSettingsPage.passwordHint')"
         />
       </div>
-      <div v-if="canUpdatePassword">
+      <div>
-        <q-btn :label="$t('userSettingsPage.updatePassword')" color="positive" @click="updatePassword"/>
+        <q-btn v-if="canUpdatePassword" :label="$t('userSettingsPage.updatePassword')" color="positive" @click="updatePassword"/>
       </div>
 
       <div v-if="personalDetails">
         <h4>{{ $t('userSettingsPage.personalDetails.title') }}</h4>
+        <div v-if="personalDetailsChanged" class="save-button-row">
+          <q-btn :label="$t('userSettingsPage.save')" color="positive" @click="savePersonalDetails"/>
+          <q-btn :label="$t('userSettingsPage.undo')" color="secondary" @click="undoPersonalDetailsChanges"/>
+        </div>
         <EditablePropertyRow
           v-model="personalDetails.birthDate"
           :label="$t('userSettingsPage.personalDetails.birthDate')"
@@ -52,16 +65,14 @@ The page where users can edit their personal information and preferences.
           ]"
         />
 
-        <div v-if="personalDetailsChanged" class="save-button-row">
-          <q-btn :label="$t('userSettingsPage.save')" color="positive" @click="savePersonalDetails"/>
-          <q-btn :label="$t('userSettingsPage.undo')" color="secondary" @click="undoPersonalDetailsChanges"/>
-        </div>
-
       </div>
 
       <div v-if="preferences">
         <h4>{{ $t('userSettingsPage.preferences.title') }}</h4>
-
+        <div v-if="preferencesChanged" class="save-button-row">
+          <q-btn :label="$t('userSettingsPage.save')" color="positive" @click="savePreferences"/>
+          <q-btn :label="$t('userSettingsPage.undo')" color="secondary" @click="undoPreferencesChanges"/>
+        </div>
         <EditablePropertyRow
           v-model="preferences.accountPrivate"
           :label="$t('userSettingsPage.preferences.accountPrivate')"
@@ -73,11 +84,6 @@ The page where users can edit their personal information and preferences.
           :select-options="supportedLocales"
           @update:modelValue="updateLocale"
         />
-
-        <div v-if="preferencesChanged" class="save-button-row">
-          <q-btn :label="$t('userSettingsPage.save')" color="positive" @click="savePreferences"/>
-          <q-btn :label="$t('userSettingsPage.undo')" color="secondary" @click="undoPreferencesChanges"/>
-        </div>
       </div>
 
     </StandardCenteredPage>