[WIP] New client userpages (#8868)

* Added background page * Added stats * Added achievements * Added profile
2025-12-17 22:57:21 +01:00 · 2017-07-17 22:18:17 -06:00
parent ea3ed26f42
commit d822843bbf
6 changed files with 600 additions and 2 deletions
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -0,0 +1,136 @@
+<template lang="pug">
+.standard-page
+  h2 Profile
+  .row
+    .col-md-12(v-if='!editing')
+      button.btn.btn-default(@click='editing = true') {{ $t('edit') }}
+      h2 {{ $t('displayName') }}
+      span(v-if='user.profile.name') {{user.profile.name}}
+      p
+        small.muted {{ $t('displayNameDescription1') }}
+          | &nbsp;
+          a(href='/#/options/settings/settings') {{ $t('displayNameDescription2') }}
+          | &nbsp;
+          | {{ $t('displayNameDescription3') }}
+      span.muted(ng-hide='user.profile.name') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+
+      h2 {{ $t('displayPhoto') }}
+      img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
+      span.muted(ng-hide='user.profile.imageUrl') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+
+      h2 {{ $t('displayBlurb') }}
+      markdown(v-if='user.profile.blurb', text='user.profile.blurb')
+      span.muted(ng-hide='user.profile.blurb') -&nbsp;
+        | {{ $t('none') }}
+        | &nbsp;-
+      //{{user.profile.blurb | linky:'_blank'}}
+    .col-md-12(v-if='editing')
+      .alert.alert-info.alert-sm
+        | {{ $t("communityGuidelinesWarning", managerEmail) }}
+      button.btn.btn-primary(type='submit', @click='save()') {{ $t("save") }}
+      // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+      .form-group
+        label {{ $t('displayName') }}
+        input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
+      .form-group
+        label {{ $t('photoUrl') }}
+        input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
+      .form-group
+        label {{ $t('displayBlurb') }}
+        textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
+        // include ../../shared/formatting-help
+  .row
+    .col-md-6
+      h2 {{ $t('totalCheckinsTitle') }}
+      span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
+    .col-md-6
+      h2
+        | {{getProgressDisplay()}}
+      .progress
+        .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+          span.sr-only {{ incentivesProgress }}% Complete
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  h2 {
+    margin-top: 2em;
+  }
+</style>
+
+<script>
+import each from 'lodash/each';
+import { mapState } from 'client/libs/store';
+
+// @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
+const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
+import Content from '../../../common/script/content';
+
+export default {
+  data () {
+    return {
+      editing: false,
+      editingProfile: {
+        name: '',
+        imageUrl: '',
+        blurb: '',
+      },
+      managerEmail: {
+        hrefBlankCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
+      },
+    };
+  },
+  mounted () {
+    this.editingProfile.name = this.user.profile.name;
+    this.editingProfile.imageUrl = this.user.profile.imageUrl;
+    this.editingProfile.imageUrl = this.user.profile.imageUrl;
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    incentivesProgress () {
+      return this.getIncentivesProgress();
+    },
+  },
+  methods: {
+    getProgressDisplay () {
+      let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
+      if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
+      let nextRewardAt = currentLoginDay.nextRewardAt;
+      if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
+      // if we are on a reward day, let's show progress relative to this
+      if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
+      if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
+
+      let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
+      let end = nextRewardAt - currentLoginDay.prevRewardKey;
+      return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
+    },
+    getIncentivesProgress () {
+      let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
+      if (!currentLoginDay) return 0;
+      let previousRewardDay = currentLoginDay.prevRewardKey;
+      let nextRewardAt = currentLoginDay.nextRewardAt;
+      return (this.user.loginIncentives - previousRewardDay) / (nextRewardAt - previousRewardDay) * 100;
+    },
+    save () {
+      let values = {};
+
+      each(this.editingProfile, (value, key) => {
+        // Using toString because we need to compare two arrays (websites)
+        let curVal = this.user.profile[key];
+        if (!curVal || this.editingProfile[key].toString() !== curVal.toString()) values[`profile.${key}`] = value;
+      });
+
+      // @TODO: dispatch
+      // User.set(values);
+
+      this.editing = false;
+    },
+  },
+};
+</script>