<template> <div class="main pusher" v-title="username + '\'s Profile'"> <div v-if="isLoading" class="ui vertical segment"> <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div> </div> <template v-if="$store.state.auth.profile"> <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"> {{ $store.state.auth.profile.username }} <i18next class="sub header" path="Registered since {%0%}">{{ signupDate }}</i18next> </div> </h2> <div class="ui basic green label"><i18next path="This is you!"/></div> <div v-if="$store.state.auth.profile.is_staff" class="ui yellow label"> <i class="star icon"></i> <i18next path="Staff member"/> </div> <router-link class="ui tiny basic button" :to="{path: '/settings'}"> <i class="setting icon"> </i> <i18next path="Settings..."/> </router-link> </div> </template> </div> </template> <script> const dateFormat = require('dateformat') export default { name: 'login', props: ['username'], created () { this.$store.dispatch('auth/fetchProfile') }, computed: { signupDate () { let d = new Date(this.$store.state.auth.profile.date_joined) return dateFormat(d, 'longDate') }, isLoading () { return !this.$store.state.auth.profile } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>