Improve Indieauth

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "micropub-helper": "^1.4.0",
     "node-sass": "^4.9.3",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",

src/components/LoginModal.vue

@@ -23,9 +23,11 @@
     <button class="modal-close is-large" aria-label="close" @click="close"></button>
   </div>
 </template>
-
 <script>
-  import qs from 'qs'
+  import Micropub from 'micropub-helper';
+  import helper from '@/helpers';
+
+  const CLIENT_ID = 'https://p83.nl/'
 
   export default {
     name: "LoginModal",
@@ -50,8 +52,24 @@
         this.show = false
       },
       login() {
-        // try to login with
-        window.location = 'https://p83.nl/auth?response_type=code&me=https://p83.nl/&redirect_uri=http://192.168.178.21:8080/callback&scope=channels+timeline&state=1234&client_id=https://p83.nl/';
+        const state = helper.generateState()
+
+        let micropub = new Micropub({
+          clientId: CLIENT_ID,
+          redirectUri: window.location.origin + '/callback',
+          me: this.url,
+          state: state,
+          scope: 'create post channels timeline'
+        })
+        micropub.getAuthUrl().then(url => {
+          let options = {
+            tokenEndpoint: micropub.options.tokenEndpoint,
+            loginState: state
+          }
+          this.$store.dispatch('saveEndpoints', options)
+          window.location = url
+          // eslint-disable-next-line
+        }).catch(err => console.log(err))
       }
     },
 
@@ -66,27 +84,29 @@
         return
       }
 
-      let tokenurl = 'https://p83.nl/authtoken'
-      let params = {}
-      params['grant_type'] = 'authorization_code'
-      params['code'] = code
-      params['client_id'] = 'https://p83.nl/'
-      params['redirect_uri'] = 'http://192.168.178.21:8080/callback'
-      params['me'] = 'https://p83.nl/'
+      // FIXME: clientId, redirectUri
+      let micropub = new Micropub({
+        clientId: CLIENT_ID,
+        redirectUri: window.location.origin + '/callback',
+        me: this.$route.query['me'],
+        state: this.$store.state.loginState,
+        scope: 'create post channels timeline',
+        tokenEndpoint: this.$store.state.tokenEndpoint
+      })
 
-      fetch(tokenurl, {
-        method: 'POST',
-        body: qs.stringify(params, {arrayFormat: 'brackets'}),
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          "Accept": "application/json"
-        }
-      }).then(response => response.json())
-        .then(response => {
-          this.$store.dispatch('tokenResponse', response)
+      micropub
+        .getToken(code)
+        .then(token => {
+          this.$store.dispatch('tokenResponse', {
+            access_token: token,
+            me: micropub.options.me,
+            scope: micropub.options.scope
+          })
           this.show = false
           this.$router.push('/')
         })
+        // eslint-disable-next-line
+        .catch(err => console.log(err));
     }
   }
 </script>

src/helpers.js

@@ -0,0 +1,12 @@
+function statePart() {
+  return Math.random().toString(36).substring(7)
+}
+
+function generateState() {
+  return statePart() + statePart() + statePart() + statePart();
+}
+
+
+export default {
+  generateState
+}

src/store.js

@@ -7,17 +7,24 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state() {
-    let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     let newState = {
       channels: [],
       timeline: {items: [], paging: {}},
       channel: {},
       debug: false,
+      logged_in: false,
+      micropubEndpoint: '',
+      microsubEndpoint: ''
     };
+    let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
       newState = { ...newState, ...loginData }
       newState.logged_in = loginData.access_token && loginData.access_token.length > 0
     }
+    let endpoints = JSON.parse(window.localStorage.getItem('endpoints'))
+    if (endpoints) {
+      newState = { ...newState, ...endpoints}
+    }
     return newState
   },
 
@@ -77,6 +84,10 @@ export default new Vuex.Store({
           commit('newTimeline', {channel: channel, timeline: response})
         })
     },
+    saveEndpoints({commit}, endpoints) {
+      window.localStorage.setItem('endpoints', JSON.stringify(endpoints))
+      commit('newEndpoints', endpoints)
+    },
     tokenResponse({commit}, response) {
       window.localStorage.setItem('login_data', JSON.stringify(response))
       commit('newAccessToken', response)