work
This commit is contained in:
parent
ec128a13ac
commit
f576e17a2b
|
|
@ -30,6 +30,7 @@ body,
|
|||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 2rem;
|
||||
background-color: darken($white, 7.5);
|
||||
font-size: (14/16) * 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<template v-if="ready">
|
||||
<div class="main">
|
||||
<router-view name="header" :user="user"></router-view>
|
||||
<router-view name="main" :user="user"></router-view>
|
||||
|
|
@ -40,8 +41,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<script src="/vendor.js"></script>
|
||||
<script src="/main.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
'use strict';
|
||||
|
||||
require('../css/style.scss');
|
||||
|
||||
var Vue = require('vue');
|
||||
var VueRouter = require('vue-router').default;
|
||||
var axios = require('axios');
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
var components = {
|
||||
signin: require('./components/signin.js'),
|
||||
navbar: require('./components/navbar.js'),
|
||||
dashboard: require('./components/dashboard.js')
|
||||
};
|
||||
|
||||
var routes = [
|
||||
{
|
||||
path: '/',
|
||||
components: {
|
||||
header: components.navbar,
|
||||
main: components.dashboard
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/signin',
|
||||
components: {
|
||||
main: components.signin
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var router = new VueRouter({ routes });
|
||||
|
||||
var app = new Vue({
|
||||
data: {
|
||||
user: {},
|
||||
ready: false
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
$route: function (to, from) {
|
||||
var _this = this;
|
||||
this.ready = false;
|
||||
|
||||
if (to.path.startsWith('/signin')) {
|
||||
_this.ready = true;
|
||||
} else {
|
||||
var token = window.localStorage.getItem('token');
|
||||
if (token) {
|
||||
_this.ready = true;
|
||||
} else {
|
||||
_this.$router.push('/signin');
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('route change', to, from);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
signedIn: function () {
|
||||
return Object.keys(this.user).length > 0;
|
||||
}
|
||||
},
|
||||
router,
|
||||
created: function () {}
|
||||
});
|
||||
|
||||
app.$mount('.app');
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
'use strict';
|
||||
|
||||
var Vue = require('vue');
|
||||
var axios = require('axios');
|
||||
|
||||
module.exports = Vue.component('dashboard', function (resolve, reject) {
|
||||
return axios.get('/templates/dashboard.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
props: ['user'],
|
||||
methods: {},
|
||||
mounted: function () {
|
||||
var _this = this;
|
||||
_this.ready = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
'use strict';
|
||||
|
||||
var Vue = require('vue');
|
||||
var axios = require('axios');
|
||||
|
||||
module.exports = Vue.component('navbar', function (resolve, reject) {
|
||||
return axios.get('/templates/navbar.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
'use strict';
|
||||
|
||||
var Vue = require('vue');
|
||||
var axios = require('axios');
|
||||
|
||||
module.exports = Vue.component('signin', function (resolve, reject) {
|
||||
return axios.get('/templates/signin.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {
|
||||
email: '',
|
||||
busy: false,
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
signin: function (ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
var _this = this;
|
||||
_this.busy = true;
|
||||
// TODO implement get token process here
|
||||
window.localStorage.setItem('token', _this.email);
|
||||
_this.$router.push('/');
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
var _this = this;
|
||||
var token = window.localStorage.getItem('token');
|
||||
if (token) {
|
||||
// TODO if we have a good token, no need to be here
|
||||
_this.$router.push('/');
|
||||
}
|
||||
_this.state = 'signingIn';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
require('../css/style.scss');
|
||||
|
||||
var Vue = require('vue');
|
||||
var VueRouter = require('vue-router').default;
|
||||
var axios = require('axios');
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
var components = {};
|
||||
|
||||
components.signin = Vue.component('signin', function (resolve, reject) {
|
||||
return axios.get('/templates/signin.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {
|
||||
email: '',
|
||||
busy: false,
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
signin: function (ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
var _this = this;
|
||||
_this.busy = true;
|
||||
//console.log(_this.email);
|
||||
window.localStorage.setItem('token', _this.email);
|
||||
}
|
||||
},
|
||||
beforeMount: function () {
|
||||
console.log('beforeMount signin');
|
||||
},
|
||||
mounted: function () {
|
||||
// var _this = this;
|
||||
// var token = window.localStorage.getItem('token');
|
||||
// if (token) {
|
||||
// getMe().then(function (result) {
|
||||
// if (result) {
|
||||
// router.push('/');
|
||||
// } else {
|
||||
// _this.state = 'signingIn';
|
||||
// }
|
||||
// });
|
||||
// } else {
|
||||
// _this.state = 'signingIn';
|
||||
// }
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
components.navbar = Vue.component('navbar', function (resolve, reject) {
|
||||
return axios.get('/templates/navbar.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {
|
||||
ready: false
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
var _this = this;
|
||||
_this.$parent.getUser().then(function (user) {
|
||||
if (user.email) {
|
||||
_this.ready = true;
|
||||
} else {
|
||||
_this.$router.push('/signin');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
components.dashboard = Vue.component('dashboard', function (resolve, reject) {
|
||||
return axios.get('/templates/dashboard.html').then(function (resp) {
|
||||
resolve({
|
||||
template: resp.data,
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
props: ['user'],
|
||||
computed: {
|
||||
ready: function () {
|
||||
return !!this.user.email;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var routes = [
|
||||
{
|
||||
path: '/',
|
||||
components: {
|
||||
header: components.navbar,
|
||||
main: components.dashboard
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/signin',
|
||||
components: {
|
||||
main: components.signin
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var router = new VueRouter({
|
||||
routes
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
data: {
|
||||
user: {}
|
||||
},
|
||||
methods: {
|
||||
getUser: function () {
|
||||
var _this = this;
|
||||
if (_this.user) {
|
||||
return Promise.resolve(_this.user);
|
||||
}
|
||||
return getMe().then(function (result) {
|
||||
_this.user = result.user;
|
||||
return _this.user;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
signedIn: function () {
|
||||
return Object.keys(this.user).length > 0;
|
||||
}
|
||||
},
|
||||
router,
|
||||
created: function () {}
|
||||
});
|
||||
|
||||
app.$mount('.app');
|
||||
|
||||
function getMe() {
|
||||
var token = window.localStorage.getItem('token');
|
||||
if (!token) {
|
||||
return Promise.resolve(false);
|
||||
}
|
||||
return axios
|
||||
.get('/api/auth/me.json')
|
||||
.then(function (resp) {
|
||||
return {
|
||||
token,
|
||||
user: resp.data
|
||||
};
|
||||
})
|
||||
.catch(function (err) {
|
||||
if (err.resp.status === 401) {
|
||||
return false;
|
||||
}
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="dashboard" v-if="ready">
|
||||
<div class="section">
|
||||
<div class="dashboard">
|
||||
<div class="container is-fluid">
|
||||
<div class="title">
|
||||
<h2 class="has-text-weight-bold">Dashboard</h2>
|
||||
|
|
@ -43,5 +42,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<nav class="navbar" v-if="ready">
|
||||
<nav class="navbar">
|
||||
<div class="container is-fluid">
|
||||
<div class="navbar-brand">
|
||||
<span class="navbar-item brand-text has-text-weight-bold">
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
</div>
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="/">Dashboard</a>
|
||||
<a class="navbar-item" href="/jobs">Jobs</a>
|
||||
<a class="navbar-item" href="/promote">Promote</a>
|
||||
<router-link class="navbar-item" to="/">Dashboard</router-link>
|
||||
<router-link class="navbar-item" to="/jobs">Jobs</router-link>
|
||||
<router-link class="navbar-item" to="/promote">Promote</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ module.exports = {
|
|||
context: path.resolve(__dirname, 'src'),
|
||||
entry: {
|
||||
vendor: ['vue'],
|
||||
main: {
|
||||
import: './js/main.js',
|
||||
app: {
|
||||
import: './js/app.js',
|
||||
dependOn: 'vendor'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue