Commit 424be328 authored by Agate's avatar Agate 💬

Added basic user profile

parent 2358a551
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}, },
"dependencies": { "dependencies": {
"dateformat": "^2.0.0",
"js-logger": "^1.3.0", "js-logger": "^1.3.0",
"semantic-ui-css": "^2.2.10", "semantic-ui-css": "^2.2.10",
"vue": "^2.3.3", "vue": "^2.3.3",
......
import logger from '@/logging' import logger from '@/logging'
import config from '@/config' import config from '@/config'
import cache from '@/cache' import cache from '@/cache'
import Vue from 'vue'
import favoriteTracks from '@/favorites/tracks' import favoriteTracks from '@/favorites/tracks'
// URL and endpoint constants // URL and endpoint constants
const LOGIN_URL = config.API_URL + 'token/' const LOGIN_URL = config.API_URL + 'token/'
const USER_PROFILE_URL = config.API_URL + 'users/users/me/'
// const SIGNUP_URL = API_URL + 'users/' // const SIGNUP_URL = API_URL + 'users/'
export default { export default {
...@@ -12,7 +15,8 @@ export default { ...@@ -12,7 +15,8 @@ export default {
// User object will let us check authentication status // User object will let us check authentication status
user: { user: {
authenticated: false, authenticated: false,
username: '' username: '',
profile: null
}, },
// Send a request to the login URL and save the returned JWT // Send a request to the login URL and save the returned JWT
...@@ -65,9 +69,22 @@ export default { ...@@ -65,9 +69,22 @@ export default {
return 'JWT ' + cache.get('token') return 'JWT ' + cache.get('token')
}, },
fetchProfile () {
let resource = Vue.resource(USER_PROFILE_URL)
return resource.get({}).then((response) => {
logger.default.info('Successfully fetched user profile')
return response.data
}, (response) => {
logger.default.info('Error while fetching user profile')
})
},
connect () { connect () {
// called once user has logged in successfully / reauthenticated // called once user has logged in successfully / reauthenticated
// e.g. after a page refresh // e.g. after a page refresh
let self = this
this.fetchProfile().then(data => {
Vue.set(self.user, 'profile', data)
})
favoriteTracks.fetch() favoriteTracks.fetch()
} }
} }
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="tabs"> <div class="tabs">
<div class="ui bottom attached active tab" data-tab="browse"> <div class="ui bottom attached active tab" data-tab="browse">
<div class="ui inverted vertical fluid menu"> <div class="ui inverted vertical fluid menu">
<router-link class="item" v-if="auth.user.authenticated" :to="{name: 'logout'}"><i class="user icon"></i> Logged in as {{ auth.user.username }}</router-link> <router-link class="item" v-if="auth.user.authenticated" :to="{name: 'profile', params: {username: auth.user.username}}"><i class="user icon"></i> Logged in as {{ auth.user.username }}</router-link>
<router-link class="item" v-if="auth.user.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> Logout</router-link> <router-link class="item" v-if="auth.user.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> Logout</router-link>
<router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link> <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link>
<router-link class="item" :to="{path: '/browse'}"><i class="sound icon"> </i>Browse library</router-link> <router-link class="item" :to="{path: '/browse'}"><i class="sound icon"> </i>Browse library</router-link>
......
<template>
<div class="main pusher">
<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 class="circular inverted user green icon"></i>
<div class="content">
{{ profile.username }}
<div class="sub header">Registered since {{ signupDate }}</div>
</div>
</h2>
<div class="ui basic green label">this is you!</div>
<div v-if="profile.is_staff" class="ui yellow label">
<i class="star icon"></i>
Staff member
</div>
</div>
</template>
</div>
</template>
<script>
import auth from '@/auth'
var dateFormat = require('dateformat')
export default {
name: 'login',
props: ['username'],
data () {
return {
profile: null
}
},
created () {
this.fetchProfile()
},
methods: {
fetchProfile () {
let self = this
auth.fetchProfile().then(data => {
self.profile = data
})
}
},
computed: {
signupDate () {
let d = new Date(this.profile.date_joined)
return dateFormat(d, 'longDate')
},
isLoading () {
return !this.profile
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template> <template>
<div> <div>
<div v-if="isLoading" class="ui vertical segment"> <div v-if="isLoading" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div> <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div> </div>
<template v-if="artist"> <template v-if="artist">
<div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle"> <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<div class="segment-content"> <div class="segment-content">
......
...@@ -2,6 +2,7 @@ import Vue from 'vue' ...@@ -2,6 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from '@/components/Home' import Home from '@/components/Home'
import Login from '@/components/auth/Login' import Login from '@/components/auth/Login'
import Profile from '@/components/auth/Profile'
import Logout from '@/components/auth/Logout' import Logout from '@/components/auth/Logout'
import Browse from '@/components/browse/Browse' import Browse from '@/components/browse/Browse'
import BrowseHome from '@/components/browse/Home' import BrowseHome from '@/components/browse/Home'
...@@ -31,6 +32,12 @@ export default new Router({ ...@@ -31,6 +32,12 @@ export default new Router({
name: 'logout', name: 'logout',
component: Logout component: Logout
}, },
{
path: '/@:username',
name: 'profile',
component: Profile,
props: true
},
{ {
path: '/favorites', path: '/favorites',
component: Favorites component: Favorites
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment