Add "login-pleroma" link

CHANGELOG.md

@@ -9,12 +9,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - add ability to configure new settings (UploadS3 bucket namespace, Rate limit for Activity pub routes, Email notifications settings, MRF Vocabulary, user bio and name length and others)
+- add sign in via PleromaFE
 
 ### Changed
 
 - removes "Dashboard" from dropdown menu
 - makes all single selects clearable and allow to enter custom values in all multiple selects
-- remove legacy activitypub accept_blocks setting 
+- remove legacy activitypub accept_blocks setting
 
 ### Fixed
 

src/permission.js

@@ -14,7 +14,7 @@ function hasPermission(roles, permissionRoles) {
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
 
-const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
+const whiteList = ['/login', '/auth-redirect', '/login-pleroma']// no redirect whitelist
 
 export const beforeEachRoute = (to, from, next) => {
   NProgress.start() // start progress bar

src/router/index.js

@@ -18,6 +18,11 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '/login-pleroma',
+    component: () => import('@/views/login/pleroma'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/services/pleromaAuth.js

+import localforage from 'localforage'
+import _ from 'lodash'
+
+const pleromaFEStateKey = 'vuex-lz'
+
+export const authenticateWithPleromaFE = async(store) => {
+  const pleromaFEState = await localforage.getItem(pleromaFEStateKey)
+  const token = _.get(pleromaFEState, 'oauth.userToken')
+
+  if (token === undefined) {
+    throw new Error('PleromaFE token not found')
+  }
+
+  await store.dispatch('LoginByPleromaFE', { token })
+}

src/views/login/index.vue

@@ -53,6 +53,7 @@ import SvgIcon from '@/components/SvgIcon'
 import localforage from 'localforage'
 import _ from 'lodash'
 import i18n from '@/lang'
+import { authenticateWithPleromaFE } from '@/services/pleromaAuth'
 
 export default {
   name: 'Login',
@@ -112,16 +113,16 @@ export default {
     async handlePleromaFELogin() {
       this.loadingPleromaFE = true
       try {
-        await this.$store.dispatch('LoginByPleromaFE', { token: this.pleromaFEState.oauth.userToken })
+        await authenticateWithPleromaFE(this.$store)
       } catch (error) {
         this.loadingPleromaFE = false
         this.$message.error(i18n.t('login.pleromaFELoginFailed'))
       }
 
       this.loadingPleromaFE = false
-      this.$router.push({ path: this.redirect || '/users/index' })
 
       this.$message.success(i18n.t('login.pleromaFELoginSucceed'))
+      this.$router.push({ path: this.redirect || '/users/index' })
     },
     getLoginData() {
       const [username, authHost] = this.loginForm.username.split('@')

src/views/login/pleroma.vue

+<template>
+  <div />
+</template>
+
+<script>
+import { Loading } from 'element-ui'
+import { authenticateWithPleromaFE } from '@/services/pleromaAuth'
+import i18n from '@/lang'
+
+export default {
+  name: 'LoginPleroma',
+  async mounted() {
+    const loadingInstance = Loading.service({ fullscreen: true })
+
+    try {
+      await authenticateWithPleromaFE(this.$store)
+    } catch (error) {
+      this.$message.error(i18n.t('login.pleromaFELoginFailed'))
+    }
+
+    loadingInstance.close()
+    this.$router.push({ path: '/users/index' })
+    this.$message.success(i18n.t('login.pleromaFELoginSucceed'))
+  }
+}
+</script>