Skip to content
Snippets Groups Projects
Profile.vue 2.12 KiB
Newer Older
  • Learn to ignore specific revisions
  •   <main class="main pusher" v-title="labels.usernameProfile">
    
        <div v-if="isLoading" class="ui vertical segment">
          <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
        </div>
    
        <template v-if="profile">
    
          <div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']">
            <h2 class="ui center aligned icon header">
    
              <i v-if="!profile.avatar.square_crop" class="circular inverted user green icon"></i>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              <img class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](profile.avatar.square_crop)" />
    
                {{ profile.username }}
    
    Jo Vuit's avatar
    Jo Vuit committed
                <div class="sub header" v-translate="{date: signupDate}">Member since %{ date }</div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <div class="ui basic green label">
    
              <translate :translate-context="'Content/Profile/Button.Paragraph'">This is you!</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </div>
    
    R En's avatar
    R En committed
            <a v-if="profile.is_staff"
              class="ui yellow label"
              :href="$store.getters['instance/absoluteUrl']('/api/admin')"
              target="_blank">
    
              <translate :translate-context="'Content/Profile/Button.Label'">Staff member</translate>
    
    R En's avatar
    R En committed
            </a>
    
    const dateFormat = require("dateformat")
    
      props: ["username"],
      created() {
        this.$store.dispatch("auth/fetchProfile")
    
        ...mapState({
          profile: state => state.auth.profile
        }),
    
          let msg = this.$pgettext('Head/Profile/Title', "%{ username }'s profile")
    
          let usernameProfile = this.$gettextInterpolate(msg, {
            username: this.username
          })
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          return {
            usernameProfile
          }
        },
    
          let d = new Date(this.profile.date_joined)
    
          return !this.profile
    
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    .ui.header > img.image {
      width: 8em;
    }