Profile.vue 1.54 KB
Newer Older
1
<template>
Bat's avatar
Bat committed
2
  <div class="main pusher" v-title="username + '\'s Profile'">
3
4
5
    <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
          <i class="star icon"></i>
          Staff member
        </div>
20
21
22
23
        <router-link class="ui tiny basic button" :to="{path: '/settings'}">
          <i class="setting icon"> </i>Settings...
        </router-link>

24
25
26
27
28
29
      </div>
    </template>
  </div>
</template>

<script>
30
const dateFormat = require('dateformat')
31
32
33
34
35

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

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