diff --git a/html/src/css/style.scss b/html/src/css/style.scss index 167644a..8c33168 100644 --- a/html/src/css/style.scss +++ b/html/src/css/style.scss @@ -30,6 +30,7 @@ body, } .navbar { + margin-bottom: 2rem; background-color: darken($white, 7.5); font-size: (14/16) * 1rem; } diff --git a/html/src/index.html b/html/src/index.html index c23bea3..0b53a49 100644 --- a/html/src/index.html +++ b/html/src/index.html @@ -12,36 +12,38 @@
-
- - -
-
-
-
-
-

- - git-deploy - - v0.1.0 -

-
-
-

- -

+
- + diff --git a/html/src/js/app.js b/html/src/js/app.js new file mode 100644 index 0000000..5ad3ad6 --- /dev/null +++ b/html/src/js/app.js @@ -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'); diff --git a/html/src/js/components/dashboard.js b/html/src/js/components/dashboard.js new file mode 100644 index 0000000..de8e1f3 --- /dev/null +++ b/html/src/js/components/dashboard.js @@ -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; + } + }); + }); +}); diff --git a/html/src/js/components/navbar.js b/html/src/js/components/navbar.js new file mode 100644 index 0000000..d725696 --- /dev/null +++ b/html/src/js/components/navbar.js @@ -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 {}; + } + }); + }); +}); diff --git a/html/src/js/components/signin.js b/html/src/js/components/signin.js new file mode 100644 index 0000000..63f982d --- /dev/null +++ b/html/src/js/components/signin.js @@ -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'; + } + }); + }); +}); diff --git a/html/src/js/main.js b/html/src/js/main.js deleted file mode 100644 index bb578bf..0000000 --- a/html/src/js/main.js +++ /dev/null @@ -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; - }); -} diff --git a/html/src/templates/dashboard.html b/html/src/templates/dashboard.html index 6993538..9dd0924 100644 --- a/html/src/templates/dashboard.html +++ b/html/src/templates/dashboard.html @@ -1,44 +1,42 @@ -
-
-
-
-

Dashboard

-
-
-

- git-deploy is a tool for managing continuous deployment of - statically generated websites. -

-
-
-
-
-
-

Staging

-
-
-

Staging...

-
-
-

- -

-
+
+
+
+

Dashboard

+
+
+

+ git-deploy is a tool for managing continuous deployment of + statically generated websites. +

+
+
+
+
+
+

Staging

+
+
+

Staging...

+
+
+

+ +

-
-
-
-

Production

-
-
-

Production...

-
-
-

- -

-
+
+
+
+
+

Production

+
+
+

Production...

+
+
+

+ +

diff --git a/html/src/templates/navbar.html b/html/src/templates/navbar.html index 4cbbbdf..9d0512a 100644 --- a/html/src/templates/navbar.html +++ b/html/src/templates/navbar.html @@ -1,4 +1,4 @@ -