use oauth2 password flow for webclient

pages/Login.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { Message } from 'element-ui'
 import get from 'lodash/get'
 
@@ -45,10 +45,6 @@ export default {
     this.$refs.email.focus()
   },
   methods: {
-    ...mapActions(['login']),
-    close () {
-      this.$router.replace('/')
-    },
     async forgot () {
       if (!this.email) {
         Message({ message: this.$t('login.insert_email'), showClose: true, type: 'error' })
@@ -65,10 +61,15 @@ export default {
       e.preventDefault()
       try {
         this.loading = true
-        await this.$auth.loginWith('local', { data: { email: this.email, password: this.password } })
+        const data = new URLSearchParams()
+        data.append('username', this.email)
+        data.append('password', this.password)
+        data.append('grant_type', 'password')
+        data.append('client_id', 'self')
+        await this.$auth.loginWith('local', { data })
         this.loading = false
         Message({ message: this.$t('login.ok'), showClose: true, type: 'success' })
-        this.close()
+        this.$router.replace('/')
       } catch (e) {
         Message({ message: this.$t('login.error') + this.$t(get(e, 'response.data.message', e)), showClose: true, type: 'error' })
         this.loading = false

pages/event/followMe.vue

@@ -8,13 +8,12 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { Message } from 'element-ui'
 import debounce from 'lodash/debounce'
 import url from 'url'
 
 export default {
-  
-  name: 'embedEvent',
+
+  name: 'EmbedEvent',
   data () {
     return {
       instance_hostname: '',
@@ -23,20 +22,7 @@ export default {
       get_instance_info: debounce(this.getInstanceInfo, 500)
     }
   },
-  methods: {
-    getInstanceInfo () {
-      const instance_url = `https://${this.instance_hostname}/api/v1/instance`
-      fetch(instance_url)
-        .then( ret => ret.json())
-        .then(ret => {
-          this.instance = ret
-          this.proceed = true
-        })
-        .catch( e => {
-          this.proceed = false
-        })
-    }
-  },
+
   computed: {
     ...mapState(['settings']),
     domain () {
@@ -45,7 +31,6 @@ export default {
     },
     couldGo () {
       // check if is mastodon
-      const instance_url = `https://${this.instance_hostname}/api/v1/instance`
       this.get_instance_info()
       return true
     },
@@ -53,6 +38,19 @@ export default {
       // check if exists
       return `https://${this.instance_hostname}/authorize_interaction?uri=${this.settings.instance_name}@${this.domain}`
     }
+  },
+  methods: {
+    getInstanceInfo () {
+      const instance_url = `https://${this.instance_hostname}/api/v1/instance`
+      this.$axios.$get(instance_url)
+        .then(ret => {
+          this.instance = ret
+          this.proceed = true
+        })
+        .catch(e => {
+          this.proceed = false
+        })
+    }
   }
 }
 </script>
@@ -60,4 +58,4 @@ export default {
 .instance_thumb {
   height: 20px;
 }
-</style>
+</style>

pages/settings.vue

@@ -13,19 +13,11 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { Message, MessageBox } from 'element-ui'
+import { MessageBox } from 'element-ui'
 import url from 'url'
 
 export default {
   name: 'Settings',
-  async asyncData ({ $axios, params, error }) {
-    try {
-      const user = await $axios.$get('/auth/user')
-      return { user }
-    } catch (e) {
-      error({ statusCode: 404, message: 'Something goes wrong...' })
-    }
-  },
   middleware: ['auth'],
   data () {
     return {