Profile.vue 1.36 KB
Newer Older
1
2
3
4
5
<template>
  <div class="main pusher">
    <div v-if="isLoading" class="ui vertical segment">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
6
    <template v-if="$store.state.auth.profile">
7
8
9
10
      <div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']">
        <h2 class="ui center aligned icon header">
          <i class="circular inverted user green icon"></i>
          <div class="content">
11
            {{ $store.state.auth.profile.username }}
12
13
14
15
            <div class="sub header">Registered since {{ signupDate }}</div>
          </div>
        </h2>
        <div class="ui basic green label">this is you!</div>
16
        <div v-if="$store.state.auth.profile.is_staff" class="ui yellow label">
17
18
19
20
21
22
23
24
25
          <i class="star icon"></i>
          Staff member
        </div>
      </div>
    </template>
  </div>
</template>

<script>
26
const dateFormat = require('dateformat')
27
28
29
30
31

export default {
  name: 'login',
  props: ['username'],
  created () {
32
    this.$store.dispatch('auth/fetchProfile')
33
34
35
  },
  computed: {
    signupDate () {
36
      let d = new Date(this.$store.state.auth.profile.date_joined)
37
38
39
      return dateFormat(d, 'longDate')
    },
    isLoading () {
40
      return !this.$store.state.auth.profile
41
42
43
44
45
46
47
48
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>