Merge branch 'release/2.0.2' into 'master'

AdminFE 2.0.2 release

See merge request pleroma/admin-fe!116

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Fix parsing tuples in Pleroma.Upload.Filter.Mogrify and Pleroma.Emails.Mailer settings
+- Fix settings submit button position on wide screens when sidebar menu is open
 
 ## [2.0] - 2020-02-27
 

src/api/invites.js

@@ -13,14 +13,13 @@ export async function generateInviteToken(max_use, expires_at, authHost, token)
 }
 
 export async function inviteViaEmail(email, name, authHost, token) {
-  const url = name.length > 0
+  const data = name.length > 0 ? { email, name } : { email }
-    ? `/api/pleroma/admin/users/email_invite?email=${email}&name=${name}`
-    : `/api/pleroma/admin/users/email_invite?email=${email}`
   return await request({
     baseURL: baseName(authHost),
-    url,
+    url: '/api/pleroma/admin/users/email_invite',
     method: 'post',
-    headers: authHeaders(token)
+    headers: authHeaders(token),
+    data
   })
 }
 

src/api/status.js

@@ -30,6 +30,15 @@ export async function fetchStatuses({ godmode, localOnly, authHost, token, pageS
   })
 }
 
+export async function fetchStatusesCount(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/stats`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
 export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
   return await request({
     baseURL: baseName(authHost),

src/api/users.js

@@ -71,6 +71,25 @@ export async function fetchUser(id, authHost, token) {
   })
 }
 
+export async function fetchUserCredentials(nickname, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${nickname}/credentials`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function updateUserCredentials(nickname, credentials, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${nickname}/credentials`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: credentials
+  })
+}
+
 export async function fetchUsers(filters, authHost, token, page = 1) {
   return await request({
     baseURL: baseName(authHost),

src/lang/en.js

@@ -241,12 +241,16 @@ export default {
     resendConfirmation: 'Resend confirmation email'
   },
   statuses: {
-    statuses: 'Statuses by instance',
+    statuses: 'Statuses',
     instanceFilter: 'Instance filter',
     loadMore: 'Load more',
     noInstances: 'No other instances found',
     onlyLocalStatuses: 'Show only local statuses',
-    showPrivateStatuses: 'Show private statuses'
+    showPrivateStatuses: 'Show private statuses',
+    direct: 'Direct',
+    private: 'Private',
+    public: 'Public',
+    unlisted: 'Unlisted'
   },
   userProfile: {
     tags: 'Tags',
@@ -261,7 +265,22 @@ export default {
     activeUppercase: 'Active',
     active: 'active',
     deactivated: 'deactivated',
-    noStatuses: 'No statuses to show'
+    noStatuses: 'No statuses to show',
+    securitySettings: {
+      email: 'Email',
+      password: 'Password',
+      securitySettings: 'Security settings',
+      passwordChangeWarning1: 'Setting a new password will cause the user to be signed out from any client they have used before.',
+      passwordChangeWarning2: 'When the user signs in with this password, they will be asked to set a new one.',
+      passwordLengthNotice: 'Make sure it\'s at least {minLength} characters long.',
+      inputNewEmail: 'Input new email',
+      inputNewPassword: 'Input new password',
+      passwordUpdated: 'The password has been updated',
+      emailUpdated: 'The email has been updated',
+      success: 'Success',
+      submit: 'Submit',
+      close: 'Close'
+    }
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',

src/store/modules/status.js

@@ -1,4 +1,4 @@
-import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesByInstance } from '@/api/status'
+import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesCount, fetchStatusesByInstance } from '@/api/status'
 
 const status = {
   state: {
@@ -12,7 +12,8 @@ const status = {
       pageSize: 20,
       buttonLoading: false,
       allLoaded: false
-    }
+    },
+    statusVisibility: {}
   },
   mutations: {
     CHANGE_GODMODE_CHECKBOX_VALUE: (state, value) => {
@@ -41,6 +42,9 @@ const status = {
     },
     SET_LOADING: (state, status) => {
       state.loading = status
+    },
+    SET_STATUS_VISIBILITY: (state, visibility) => {
+      state.statusVisibility = visibility
     }
   },
   actions: {
@@ -64,6 +68,12 @@ const status = {
         dispatch('FetchStatusesByInstance')
       }
     },
+    async FetchStatusesCount({ commit, getters }) {
+      commit('SET_LOADING', true)
+      const { data } = await fetchStatusesCount(getters.authHost, getters.token)
+      commit('SET_STATUS_VISIBILITY', data.status_visibility)
+      commit('SET_LOADING', false)
+    },
     async FetchStatusesByInstance({ commit, getters, state, rootState }) {
       commit('SET_LOADING', true)
       if (state.statusesByInstance.selectedInstance === '') {

src/store/modules/userProfile.js

@@ -1,10 +1,11 @@
-import { fetchUser, fetchUserStatuses } from '@/api/users'
+import { fetchUser, fetchUserStatuses, fetchUserCredentials, updateUserCredentials } from '@/api/users'
 
 const userProfile = {
   state: {
     statuses: [],
     statusesLoading: true,
     user: {},
+    userCredentials: {},
     userProfileLoading: true
   },
   mutations: {
@@ -19,6 +20,9 @@ const userProfile = {
     },
     SET_USER_PROFILE_LOADING: (state, status) => {
       state.userProfileLoading = status
+    },
+    SET_USER_CREDENTIALS: (state, userCredentials) => {
+      state.userCredentials = userCredentials
     }
   },
   actions: {
@@ -38,6 +42,14 @@ const userProfile = {
 
       commit('SET_STATUSES', statuses.data)
       commit('SET_STATUSES_LOADING', false)
+    },
+    async FetchUserCredentials({ commit, getters }, { nickname }) {
+      const userResponse = await fetchUserCredentials(nickname, getters.authHost, getters.token)
+      commit('SET_USER_CREDENTIALS', userResponse.data)
+    },
+    async UpdateUserCredentials({ dispatch, getters }, { nickname, credentials }) {
+      await updateUserCredentials(nickname, credentials, getters.authHost, getters.token)
+      dispatch('FetchUserCredentials', { nickname })
     }
   }
 }

src/views/emojiPacks/index.vue

@@ -155,7 +155,7 @@ export default {
   margin: 0 30px;
 }
 .emoji-packs-header {
-  margin: 22px 0 20px 15px;
+  margin: 10px 0 20px 15px;
 }
 .import-pack-button {
   margin-left: 10px;

src/views/invites/index.vue

@@ -246,7 +246,7 @@ export default {
     padding: 5px 20px 0 20px
   }
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
   .icon {
     margin-right: 5px;

src/views/moderation_log/index.vue

@@ -130,7 +130,7 @@ export default {
   margin: 0 15px;
 }
 h1 {
-  margin: 22px 0 20px 0;
+  margin: 10px 0 20px 0;
 }
 .el-timeline {
   margin: 25px 45px 0 0;

src/views/reports/index.vue

@@ -50,7 +50,7 @@ export default {
     padding-bottom: 0
   }
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
   .no-reports-message {
     color: gray;

src/views/settings/components/Instance.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading" class="form-container">
+  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
@@ -82,6 +82,9 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isSidebarOpen() {
+      return this.$store.state.app.sidebar.opened ? 'sidebar-opened' : 'sidebar-closed'
+    },
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },

src/views/settings/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings-container">
     <div v-if="isDesktop">
-      <div class="settings-header-container">
+      <div :class="isSidebarOpen" class="settings-header-container">
         <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
         <div>
           <el-tooltip v-if="needReboot" :content="$t('settings.restartApp')" placement="bottom-end">
@@ -89,7 +89,7 @@
       </el-tabs>
     </div>
     <div v-if="isMobile || isTablet">
-      <div class="settings-header-container">
+      <div :class="isSidebarOpen" class="settings-header-container">
         <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
         <el-button v-if="needReboot" class="settings-reboot-button" @click="restartApp">
           <span>
@@ -235,6 +235,9 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isSidebarOpen() {
+      return this.$store.state.app.sidebar.opened ? 'header-sidebar-opened' : 'header-sidebar-closed'
+    },
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },

src/views/settings/styles/main.scss

@@ -264,6 +264,12 @@
   .settings-header {
     margin: 0;
   }
+  .header-sidebar-opened {
+    max-width: 1585px;
+  }
+  .header-sidebar-closed {
+    max-width: 1728px;
+  }
   .settings-header-container {
     display: flex;
     height: 36px;
@@ -326,8 +332,15 @@
   }
 
   @media only screen and (min-width: 1824px) {
+    .sidebar-closed {
+      max-width: 1586px;
+    }
+    .sidebar-opened {
+      max-width: 1442px;
+    }
     .submit-button-container {
-      max-width: 1637px;
+      width: 100%;
+      max-width: inherit;
       margin-left: auto;
       margin-right: auto;
       right: auto;
@@ -444,7 +457,7 @@
       margin: 0;
     }
     .settings-header-container {
-      margin: 15px;
+      margin: 10px 15px 15px 15px;
     }
     .nav-container {
       display: flex;
@@ -530,8 +543,7 @@
       margin-right: 8px
     }
   }
-
+  @media only screen and (max-width:818px) and (min-width: 481px) {
-  @media only screen and (max-width:801px) and (min-width: 481px) {
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;

src/views/statuses/index.vue

@@ -3,6 +3,12 @@
     <h1>
       {{ $t('statuses.statuses') }}
     </h1>
+    <el-button-group>
+      <el-button plain>{{ $t('statuses.direct') }}: {{ statusVisibility.direct }}</el-button>
+      <el-button plain>{{ $t('statuses.private') }}: {{ statusVisibility.private }}</el-button>
+      <el-button plain>{{ $t('statuses.public') }}: {{ statusVisibility.public }}</el-button>
+      <el-button plain>{{ $t('statuses.unlisted') }}: {{ statusVisibility.unlisted }}</el-button>
+    </el-button-group>
     <div class="filter-container">
       <el-select
         v-model="selectedInstance"
@@ -111,10 +117,14 @@ export default {
     },
     statuses() {
       return this.$store.state.status.fetchedStatuses
+    },
+    statusVisibility() {
+      return this.$store.state.status.statusVisibility
     }
   },
   mounted() {
     this.$store.dispatch('FetchPeers')
+    this.$store.dispatch('FetchStatusesCount')
   },
   methods: {
     handleFilterChange() {
@@ -142,6 +152,9 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
 .statuses-container {
   padding: 0 15px;
+  h1 {
+    margin: 10px 0 15px 0;
+  }
   .status-container {
     margin: 0 0 10px;
   }
@@ -163,9 +176,6 @@ export default {
   padding: 15px 0;
   text-align: center;
 }
-h1 {
-  margin: 22px 0 0 0;
-}
 
 @media only screen and (max-width:480px) {
   .checkbox-container {

src/views/users/components/SecuritySettingsModal.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-dialog
+    :before-close="close"
+    :title="$t('userProfile.securitySettings.securitySettings')"
+    :visible="visible"
+    class="security-settings-modal">
+    <el-row>
+      <p>
+        <label>
+          {{ $t('userProfile.securitySettings.email') }}
+        </label>
+      </p>
+    </el-row>
+    <el-row>
+      <el-input
+        :placeholder="$t('userProfile.securitySettings.inputNewEmail')"
+        v-model="emailForm.newEmail" />
+    </el-row>
+    <br>
+    <el-row type="flex" justify="end">
+      <el-button
+        :loading="emailForm.isLoading"
+        :disabled="!emailForm.newEmail || emailForm.newEmail === userCredentials.email"
+        type="primary"
+        @click="updateEmail()">
+        {{ $t('userProfile.securitySettings.submit') }}
+      </el-button>
+    </el-row>
+    <el-row>
+      <p>
+        <label>
+          {{ $t('userProfile.securitySettings.password') }}
+        </label>
+      </p>
+    </el-row>
+    <el-row>
+      <el-input
+        :placeholder="$t('userProfile.securitySettings.inputNewPassword')"
+        v-model="passwordForm.newPassword"
+        show-password />
+      <small class="form-text">
+        {{ $t('userProfile.securitySettings.passwordLengthNotice', { minLength: 8 }) }}
+      </small>
+      <br>
+      <el-alert
+        :closable="false"
+        type="warning"
+        show-icon>
+        <p>{{ $t('userProfile.securitySettings.passwordChangeWarning1') }}</p>
+        <p>{{ $t('userProfile.securitySettings.passwordChangeWarning2') }}</p>
+      </el-alert>
+    </el-row>
+    <br>
+    <el-row type="flex" justify="end">
+      <el-button
+        :loading="passwordForm.isLoading"
+        :disabled="passwordForm.newPassword.length < 8"
+        type="primary"
+        @click="updatePassword()">
+        {{ $t('userProfile.securitySettings.submit') }}
+      </el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'SecuritySettingsModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    user: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      emailForm: {
+        newEmail: '',
+        isLoading: false
+      },
+      passwordForm: {
+        newPassword: '',
+        isLoading: false
+      }
+    }
+  },
+  computed: {
+    userCredentials() {
+      return this.$store.state.userProfile.userCredentials
+    }
+  },
+  mounted: async function() {
+    await this.$store.dispatch('FetchUserCredentials', { nickname: this.user.nickname })
+    this.emailForm.newEmail = this.userCredentials.email
+  },
+  methods: {
+    async updateEmail() {
+      const credentials = { email: this.emailForm.newEmail }
+      this.emailForm.isLoading = true
+      await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
+      this.emailForm.isLoading = false
+      this.$notify.success({
+        title: this.$t('userProfile.securitySettings.success'),
+        message: this.$t('userProfile.securitySettings.emailUpdated'),
+        duration: 2000
+      })
+    },
+    async updatePassword() {
+      const credentials = { password: this.passwordForm.newPassword }
+      this.passwordForm.isLoading = true
+      await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
+      this.passwordForm.isLoading = false
+      this.passwordForm.newPassword = ''
+      this.$notify.success({
+        title: this.$t('userProfile.securitySettings.success'),
+        message: this.$t('userProfile.securitySettings.passwordUpdated'),
+        duration: 2000
+      })
+    },
+    close() {
+      this.$emit('close', true)
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@media all and (max-width: 800px) {
+  .security-settings-modal {
+    .el-dialog {
+      width: 90%;
+    }
+  }
+}
+
+.security-settings-modal {
+  .el-alert .el-alert__description {
+    word-break: break-word;
+    font-size: 1em;
+  }
+
+  .form-text {
+    display: block;
+    margin-top: .25rem;
+    color: #909399;
+  }
+}
+</style>

src/views/users/index.vue

@@ -245,7 +245,7 @@ export default {
 }
 .users-container {
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
 
   .pagination {

src/views/users/show.vue

@@ -73,6 +73,18 @@
                   <el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
                 </td>
               </tr>
+              <tr class="el-table__row">
+                <td>
+                  <el-button icon="el-icon-lock" @click="securitySettingsModalVisible = true">
+                    {{ $t('userProfile.securitySettings.securitySettings') }}
+                  </el-button>
+                  <SecuritySettingsModal
+                    :user="user"
+                    :visible="securitySettingsModalVisible"
+                    @close="securitySettingsModalVisible = false" />
+                </td>
+                <td />
+              </tr>
             </tbody>
           </table>
         </div>
@@ -96,14 +108,16 @@
 <script>
 import Status from '@/components/Status'
 import ModerationDropdown from './components/ModerationDropdown'
+import SecuritySettingsModal from './components/SecuritySettingsModal'
 
 export default {
   name: 'UsersShow',
-  components: { ModerationDropdown, Status },
+  components: { ModerationDropdown, Status, SecuritySettingsModal },
   data() {
     return {
       showPrivate: false,
-      resetPasswordDialogOpen: false
+      resetPasswordDialogOpen: false,
+      securitySettingsModalVisible: false
     }
   },
   computed: {
@@ -127,6 +141,9 @@ export default {
     },
     userProfileLoading() {
       return this.$store.state.userProfile.userProfileLoading
+    },
+    userCredentials() {
+      return this.$store.state.userProfile.userCredentials
     }
   },
   mounted: function() {