editable meta and bdey

src/components/settings_modal/tabs/profile_tab.js

@@ -1,12 +1,12 @@
 import unescape from 'lodash/unescape'
 import merge from 'lodash/merge'
+import UserCard from 'src/components/user_card/user_card.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
-import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import Select from 'src/components/select/select.vue'
@@ -53,10 +53,10 @@ const ProfileTab = {
     }
   },
   components: {
+    UserCard,
     ScopeSelector,
     ImageCropper,
     EmojiInput,
-    Autosuggest,
     ProgressButton,
     Checkbox,
     BooleanSetting,
@@ -88,12 +88,6 @@ const ProfileTab = {
     userSuggestor () {
       return suggestor({ store: this.$store })
     },
-    fieldsLimits () {
-      return this.$store.state.instance.fieldsLimits
-    },
-    maxFields () {
-      return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
-    },
     defaultAvatar () {
       return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
     },

src/components/settings_modal/tabs/profile_tab.scss

@@ -125,9 +125,4 @@
       padding: 0 0.5em;
     }
   }
-
-  .birthday-input {
-    display: block;
-    margin-bottom: 1em;
-  }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -2,6 +2,12 @@
   <div class="profile-tab">
     <div class="setting-item">
       <h2>{{ $t('settings.name_bio') }}</h2>
+      <UserCard
+        :user-id="user.id"
+        :editable="true"
+        :switcher="false"
+        rounded="top"
+      />
       <p>{{ $t('settings.name') }}</p>
       <EmojiInput
         v-model="newName"
@@ -41,75 +47,6 @@
           </template>
         </Checkbox>
       </p>
-      <div>
-        <p>{{ $t('settings.birthday.label') }}</p>
-        <input
-          id="birthday"
-          v-model="newBirthday"
-          type="date"
-          class="input birthday-input"
-        >
-        <Checkbox v-model="showBirthday">
-          {{ $t('settings.birthday.show_birthday') }}
-        </Checkbox>
-      </div>
-      <div v-if="maxFields > 0">
-        <p>{{ $t('settings.profile_fields.label') }}</p>
-        <div
-          v-for="(_, i) in newFields"
-          :key="i"
-          class="profile-fields"
-        >
-          <EmojiInput
-            v-model="newFields[i].name"
-            enable-emoji-picker
-            hide-emoji-button
-            :suggest="userSuggestor"
-          >
-            <template #default="inputProps">
-              <input
-                v-model="newFields[i].name"
-                :placeholder="$t('settings.profile_fields.name')"
-                v-bind="propsToNative(inputProps)"
-                class="input"
-              >
-            </template>
-          </EmojiInput>
-          <EmojiInput
-            v-model="newFields[i].value"
-            enable-emoji-picker
-            hide-emoji-button
-            :suggest="userSuggestor"
-          >
-            <template #default="inputProps">
-              <input
-                v-model="newFields[i].value"
-                :placeholder="$t('settings.profile_fields.value')"
-                v-bind="propsToNative(inputProps)"
-                class="input"
-              >
-            </template>
-          </EmojiInput>
-          <button
-            class="delete-field button-unstyled -hover-highlight"
-            @click="deleteField(i)"
-          >
-            <!-- TODO something is wrong with v-show here -->
-            <FAIcon
-              v-if="newFields.length > 1"
-              icon="times"
-            />
-          </button>
-        </div>
-        <button
-          v-if="newFields.length < maxFields"
-          class="add-field faint button-unstyled -hover-highlight"
-          @click="addField"
-        >
-          <FAIcon icon="plus" />
-          {{ $t("settings.profile_fields.add_field") }}
-        </button>
-      </div>
       <p>
         <label>
           {{ $t('settings.actor_type') }}