Merge pull request #1968 from jonboiser/profile-fields

Fix order of fields in user profile

Author: rtibbles

kolibri/plugins/user/assets/src/views/profile-page/index.vue

@@ -16,44 +16,38 @@
       </p>
     </template>
 
-    <template v-if="!canEditUsername">
+    <form @submit.prevent="submitEdits">
+
       <h3>{{ $tr('username') }}</h3>
-      <p>{{ session.username }}</p>
-    </template>
+      <core-textbox
+        v-if="canEditUsername"
+        :disabled="busy"
+        :invalid="error"
+        :error="errorMessage"
+        v-model="username"
+        autocomplete="username"
+        type="text"
+      />
+      <p v-else>{{ session.username }}</p>
 
-    <template v-if="!canEditName">
       <h3>{{ $tr('name') }}</h3>
-      <p>{{ session.full_name }}</p>
-    </template>
-
-    <form v-if="canEditUsername || canEditName" @submit.prevent="submitEdits">
-
-      <template v-if="canEditUsername">
-        <h3>{{ $tr('username') }}</h3>
-        <core-textbox
-          :disabled="busy"
-          :invalid="error"
-          :error="errorMessage"
-          v-model="username"
-          autocomplete="username"
-          type="text" />
-      </template>
-
-      <template v-if="canEditName">
-        <h3>{{ $tr('name') }}</h3>
-        <core-textbox
-          :disabled="busy"
-          v-model="full_name"
-          autocomplete="name"
-          type="text" />
-      </template>
+      <core-textbox
+        v-if="canEditName"
+        :disabled="busy"
+        v-model="full_name"
+        autocomplete="name"
+        type="text"
+      />
+      <p v-else>{{ session.full_name }}</p>
 
       <k-button
+        v-if="canEditUsername || canEditName"
         :disabled="busy"
         :primary="true"
         :text="$tr('updateProfile')"
         class="submit"
-        type="submit" />
+        type="submit"
+      />
     </form>
   </div>
 
@@ -65,7 +59,6 @@
   import * as actions from '../../state/actions';
   import * as getters from 'kolibri.coreVue.vuex.getters';
   import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
-  import { totalPoints } from 'kolibri.coreVue.vuex.getters';
   import { fetchPoints } from 'kolibri.coreVue.vuex.actions';
   import kButton from 'kolibri.coreVue.components.kButton';
   import coreTextbox from 'kolibri.coreVue.components.textbox';
@@ -157,7 +150,7 @@
         isAdmin: getters.isAdmin,
         isCoach: getters.isCoach,
         isLearner: getters.isLearner,
-        totalPoints,
+        totalPoints: getters.totalPoints,
       },
       actions: {
         editProfile: actions.editProfile,