CHANGELOG.md

@@ -4,17 +4,19 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## [Unreleased]
+## [1.1.0] - 2019-09-15
 
 ### 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 ability to disable certain features (settings/reports)
+- 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
 

README.md

@@ -6,6 +6,20 @@
 
 Admin UI for pleroma instance owners
 
+## Usage
+
+### Development
+
+To run AdminFE locally execute `yarn dev`
+
+### Build
+
+To compile everything for production run `yarn build:prod`.
+
+#### Disabling features
+
+You can disable certain AdminFE features, like reports or settings by modifying `config/prod.env.js` env variable `DISABLED_FEATURES`, e.g. if you want to compile AdminFE without "Settings" you'll need to set it to: `DISABLED_FEATURES: '["settings"]'`.
+
 ## Changelog
 
 Detailed changes for each release are documented in the [CHANGELOG](./CHANGELOG.md).

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
+  DISABLED_FEATURES: '[""]',
   ASSETS_PUBLIC_PATH: '/'
 }

config/prod.env.js

@@ -2,5 +2,6 @@ module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"prod"',
   BASE_API: '"https://api-prod"',
+  DISABLED_FEATURES: '[""]',
   ASSETS_PUBLIC_PATH: '/pleroma/admin/'
 }

package.json

@@ -49,6 +49,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.1.5",
+    "localforage": "^1.7.3",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.24.0",

src/lang/en.js

@@ -78,12 +78,15 @@ export default {
   login: {
     title: 'Login Form',
     logIn: 'Log in',
-    username: 'Username@Host',
-    password: 'Password',
+    logInViaPleromaFE: 'Log in via PleromaFE',
+    username: 'username@host',
+    password: 'password',
+    omitHostname: 'omit hostname if Pleroma is located on this domain',
     errorMessage: 'Username must contain username and host, e.g. john@pleroma.social',
     any: 'any',
     thirdparty: 'Or connect with',
-    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
+    pleromaFELoginFailed: 'Failed to login via PleromaFE, please login with username/password',
+    pleromaFELoginSucceed: 'Logged in via PleromaFE'
   },
   documentation: {
     documentation: 'Documentation',

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

@@ -6,6 +6,35 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/views/layout/Layout'
 
+const disabledFeatures = process.env.DISABLED_FEATURES || []
+const settingsDisabled = disabledFeatures.includes('settings')
+const settings = {
+  path: '/settings',
+  component: Layout,
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/settings/index'),
+      name: 'Settings',
+      meta: { title: 'settings', icon: 'settings', noCache: true }
+    }
+  ]
+}
+
+const reportsDisabled = disabledFeatures.includes('reports')
+const reports = {
+  path: '/reports',
+  component: Layout,
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/reports/index'),
+      name: 'Reports',
+      meta: { title: 'reports', icon: 'documentation', noCache: true }
+    }
+  ]
+}
+
 export const constantRouterMap = [
   {
     path: '/redirect',
@@ -18,6 +47,11 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '/login-pleroma',
+    component: () => import('@/views/login/pleroma'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),
@@ -64,30 +98,8 @@ export const asyncRouterMap = [
       }
     ]
   },
-  {
-    path: '/reports',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/reports/index'),
-        name: 'Reports',
-        meta: { title: 'reports', icon: 'documentation', noCache: true }
-      }
-    ]
-  },
-  {
-    path: '/settings',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/settings/index'),
-        name: 'Settings',
-        meta: { title: 'settings', icon: 'settings', noCache: true }
-      }
-    ]
-  },
+  ...(settingsDisabled ? [] : [settings]),
+  ...(reportsDisabled ? [] : [reports]),
   {
     path: '/users/:id',
     component: Layout,

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/store/modules/user.js

@@ -106,6 +106,14 @@ const user = {
         removeAuthHost()
         resolve()
       })
+    },
+    async LoginByPleromaFE({ commit, dispatch }, { token }) {
+      commit('SET_TOKEN', token)
+      setToken(token)
+      commit('SET_AUTH_HOST', window.location.host)
+      setAuthHost(window.location.host)
+
+      dispatch('GetUserInfo')
     }
   }
 }

src/views/errorPage/404.vue

@@ -9,12 +9,9 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有
-          <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
-        </div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-        <router-link to="/" class="bullshit__return-home">返回首页</router-link>
+        <div class="bullshit__info">Please make sure you URL is correct</div>
+        <router-link to="/" class="bullshit__return-home">Go to the home page</router-link>
       </div>
     </div>
   </div>
@@ -26,7 +23,7 @@ export default {
   name: 'Page404',
   computed: {
     message() {
-      return '网管说这个页面你不能进......'
+      return 'There is nothing here'
     }
   }
 }
@@ -198,7 +195,7 @@ export default {
     &__return-home {
       display: block;
       float: left;
-      width: 110px;
+      width: 165px;
       height: 36px;
       background: #1482f0;
       border-radius: 100px;

src/views/login/index.vue

@@ -19,6 +19,7 @@
           auto-complete="on"
         />
       </el-form-item>
+      <div class="omit-host-note">{{ $t('login.omitHostname') }}</div>
 
       <el-form-item prop="password">
         <span class="svg-container">
@@ -37,15 +38,22 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
+      <el-button :loading="loading" class="login-button" type="primary" @click.native.prevent="handleLogin">
         {{ $t('login.logIn') }}
       </el-button>
+      <el-button v-if="pleromaFEToken" :loading="loadingPleromaFE" class="login-button" type="primary" @click.native.prevent="handlePleromaFELogin">
+        {{ $t('login.logInViaPleromaFE') }}
+      </el-button>
     </el-form>
   </div>
 </template>
 
 <script>
 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',
@@ -58,8 +66,12 @@ export default {
       },
       passwordType: 'password',
       loading: false,
+      loadingPleromaFE: false,
       showDialog: false,
-      redirect: undefined
+      redirect: undefined,
+      pleromaFEToken: false,
+      pleromaFEStateKey: 'vuex-lz',
+      pleromaFEState: {}
     }
   },
   watch: {
@@ -70,6 +82,16 @@ export default {
       immediate: true
     }
   },
+  async mounted() {
+    const pleromaFEState = await localforage.getItem(this.pleromaFEStateKey)
+    this.pleromaFEState = pleromaFEState
+
+    if (_.get(pleromaFEState, 'oauth.userToken') === undefined) {
+      return
+    }
+
+    this.pleromaFEToken = true
+  },
   methods: {
     showPwd() {
       if (this.passwordType === 'password') {
@@ -88,6 +110,20 @@ export default {
         this.loading = false
       })
     },
+    async handlePleromaFELogin() {
+      this.loadingPleromaFE = true
+      try {
+        await authenticateWithPleromaFE(this.$store)
+      } catch (error) {
+        this.loadingPleromaFE = false
+        this.$message.error(i18n.t('login.pleromaFELoginFailed'))
+      }
+
+      this.loadingPleromaFE = false
+
+      this.$message.success(i18n.t('login.pleromaFELoginSucceed'))
+      this.$router.push({ path: this.redirect || '/users/index' })
+    },
     getLoginData() {
       const [username, authHost] = this.loginForm.username.split('@')
 
@@ -142,6 +178,17 @@ export default {
       border-radius: 5px;
       color: #454545;
     }
+    .login-button {
+      width: 100%;
+      margin: 0 0 10px 0;
+    }
+    .omit-host-note {
+      color: #596f8c;
+      font-size: 0.8em;
+      font-style: italic;
+      margin: -20px 0 15px 0;
+      padding: 3px 0 0 15px;
+    }
   }
 </style>
 

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>

yarn.lock

@@ -6021,7 +6021,7 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lie@~3.1.0:
+lie@3.1.1, lie@~3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
   integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
@@ -6160,6 +6160,13 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+localforage@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.7.3.tgz#0082b3ca9734679e1bd534995bdd3b24cf10f204"
+  integrity sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"