profile settings form updates

Author: Resul Avan

functions/modules/types-module/src/index.ts

@@ -179,6 +179,7 @@ export interface User extends BaseModel {
   email?: string
   profilePhoto?: Image
   coverPhoto?: Image
+  biography?: string
   privacy?: PrivacyType
   followersPrivacy?: PrivacyType
   followingPrivacy?: PrivacyType

src/components/form/ProfilePrivacyForm.vue

@@ -52,14 +52,13 @@ import { User } from 'types-module'
 import { StateNamespace } from '~/types'
 import InputWithValidation from '~/components/ui/input/InputWithValidation.vue'
 import InputNoValidation from '~/components/ui/input/InputNoValidation.vue'
-import FieldWithValue from '~/components/ui/FieldWithValue.vue'
 import { getDangerNotificationMessage, showSuccessToaster } from '~/service/notification-service'
 import { handleError } from '~/service/error-service'
 import PrivacyDropdown from '~/components/ui/dropdown/PrivacyDropdown.vue'
 import { reloadUserFromDatabase } from '~/service/rx-service'
 
 @Component({
-  components: { PrivacyDropdown, FieldWithValue, InputNoValidation, ValidationObserver, InputWithValidation }
+  components: { PrivacyDropdown, InputNoValidation, ValidationObserver, InputWithValidation }
 })
 export default class ProfilePrivacyForm extends Vue {
   @Prop({ required: true }) user: User

src/components/form/ProfileUpdateForm.vue

@@ -4,19 +4,17 @@
       <FieldWithValue
         :value="updatedUser.id"
         :label="$t('common.field.id')"
-        :disabled="true"
-        label-position="on-border"
         class="has-margin-bottom-15"
       />
 
       <FieldWithValue
         :value="updatedUser.email"
         :label="$t('common.field.email')"
-        :disabled="true"
-        label-position="on-border"
         class="has-margin-bottom-15"
       />
 
+      <hr>
+
       <InputWithValidation
         v-model="updatedUser.username"
         :label="$t('common.field.username')"
@@ -46,7 +44,7 @@
         class="has-margin-5"
       />
 
-      <InputWithValidation
+      <InputNoValidation
         v-model="updatedUser.biography"
         input-type="textarea"
         :label="$t('common.field.biography')"
@@ -89,7 +87,7 @@ import { reloadUserFromDatabase } from '~/service/rx-service'
 })
 export default class ProfileUpdateForm extends Vue {
   @Prop({ required: true }) user: User
-  updatedUser = { ...this.user }
+  updatedUser: User = { ...this.user }
 
   @StateNamespace.profile.Action updateUser: (user: User) => Promise<User>;
   @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise<void>

src/components/form/SetEmailPasswordForm.vue

@@ -57,11 +57,9 @@ import { Component, Prop, Vue } from 'nuxt-property-decorator'
 import { ValidationObserver } from 'vee-validate'
 import InputWithValidation from '~/components/ui/input/InputWithValidation.vue'
 import { LoginCredentials } from '~/types'
-import FieldWithValue from '~/components/ui/FieldWithValue.vue'
 
 @Component({
   components: {
-    FieldWithValue,
     ValidationObserver,
     InputWithValidation
   }

src/components/ui/FieldWithValue.vue

@@ -1,16 +1,17 @@
 <template>
-  <b-field
-    :type="type"
-    :horizontal="horizontal"
-    :label="$attrs.label"
-    :label-position="labelPosition"
-  >
-    <b-input
-      :disabled="disabled"
-      :value="value"
-      type="text"
-    />
-  </b-field>
+  <nav class="level is-mobile">
+    <div class="level-left has-margin-left-5">
+      <p class="level-item">
+        <strong>{{ label }}:</strong>
+      </p>
+    </div>
+
+    <div class="level-right">
+      <p class="level-item">
+        {{ value }}
+      </p>
+    </div>
+  </nav>
 </template>
 
 <script lang="ts">
@@ -20,10 +21,7 @@ import { Component, Prop, Vue } from 'nuxt-property-decorator'
   components: {}
 })
 export default class FieldWithValue extends Vue {
-  @Prop({ type: String, required: true, default: '' }) value: any;
-  @Prop({ type: String, required: false, default: 'text' }) type: string;
-  @Prop({ type: String, required: false, default: '' }) labelPosition: string;
-  @Prop({ type: Boolean, required: false, default: false }) horizontal: boolean;
-  @Prop({ type: Boolean, required: false, default: false }) disabled: boolean;
+  @Prop({ type: String, required: true, default: '' }) readonly label: string;
+  @Prop({ required: false, default: '' }) readonly value: any;
 }
 </script>