Birthdays

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/settings_modal/tabs/profile_tab.js

@@ -29,6 +29,8 @@ const ProfileTab = {
       newLocked: this.$store.state.users.currentUser.locked,
       newNoRichText: this.$store.state.users.currentUser.no_rich_text,
       newDefaultScope: this.$store.state.users.currentUser.default_scope,
+      newBirthday: this.$store.state.users.currentUser.birthday,
+      showBirthday: this.$store.state.users.currentUser.show_birthday,
       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
       hideFollows: this.$store.state.users.currentUser.hide_follows,
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
@@ -132,7 +134,9 @@ const ProfileTab = {
             allow_following_move: this.allowFollowingMove,
             hide_follows_count: this.hideFollowsCount,
             hide_followers_count: this.hideFollowersCount,
-            show_role: this.showRole
+            show_role: this.showRole,
+            birthday: this.newBirthday || null,
+            show_birthday: this.showBirthday
             /* eslint-enable camelcase */
           } }).then((user) => {
           this.newFields.splice(user.fields.length)

src/components/settings_modal/tabs/profile_tab.scss

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

src/components/settings_modal/tabs/profile_tab.vue

@@ -95,6 +95,18 @@
           {{ $t('settings.discoverable') }}
         </Checkbox>
       </p>
+      <div>
+        <p>{{ $t('settings.birthday.label') }}</p>
+        <input
+          id="birthday"
+          v-model="newBirthday"
+          type="date"
+          class="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

src/components/user_profile/user_profile.js

@@ -7,13 +7,16 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import localeService from 'src/services/locale/locale.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faCircleNotch
+  faCircleNotch,
+  faBirthdayCake
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faBirthdayCake
 )
 
 const FollowerList = withLoadMore({
@@ -75,6 +78,10 @@ const UserProfile = {
     },
     followersTabVisible () {
       return this.isUs || !this.user.hide_followers
+    },
+    formattedBirthday () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
     }
   },
   methods: {

src/components/user_profile/user_profile.vue

@@ -11,6 +11,16 @@
         :allow-zooming-avatar="true"
         rounded="top"
       />
+      <span
+        v-if="!!user.birthday"
+        class="user-birthday"
+      >
+        <FAIcon
+          class="fa-old-padding"
+          icon="birthday-cake"
+        />
+        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+      </span>
       <div
         v-if="user.fields_html && user.fields_html.length > 0"
         class="user-profile-fields"
@@ -138,6 +148,10 @@
   flex: 2;
   flex-basis: 500px;
 
+  .user-birthday {
+    margin: 0 0.75em 0.5em;
+  }
+
   .user-profile-fields {
     margin: 0 0.5em;