Update security settings dialog on user's page

src/views/users/components/SecuritySettingsModal.vue

@@ -4,66 +4,50 @@
     :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-form :model="securitySettingsForm" :label-width="getLabelWidth">
+      <el-form-item :label="$t('userProfile.securitySettings.email')">
+        <el-input v-model="securitySettingsForm.newEmail" :placeholder="$t('userProfile.securitySettings.inputNewEmail')"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :loading="securitySettingsForm.isEmailLoading"
+          :disabled="!securitySettingsForm.newEmail || securitySettingsForm.newEmail === userCredentials.email"
+          type="primary"
+          class="security-settings-submit-button"
+          @click="updateEmail()">
+          {{ $t('userProfile.securitySettings.submit') }}
+        </el-button>
+      </el-form-item>
+      <el-form-item :label="$t('userProfile.securitySettings.password')" class="password-input">
+        <el-input v-model="securitySettingsForm.newPassword" :placeholder="$t('userProfile.securitySettings.inputNewPassword')"/>
+        <small class="form-text">
+          {{ $t('userProfile.securitySettings.passwordLengthNotice', { minLength: 8 }) }}
+        </small>
+      </el-form-item>
       <el-alert
         :closable="false"
         type="warning"
-        show-icon>
+        show-icon
+        class="password-alert">
         <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-form-item>
+        <el-button
+          :loading="securitySettingsForm.isPasswordLoading"
+          :disabled="securitySettingsForm.newPassword.length < 8"
+          type="primary"
+          class="security-settings-submit-button"
+          @click="updatePassword()">
+          {{ $t('userProfile.securitySettings.submit') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
   </el-dialog>
 </template>
 
 <script>
+import { Message } from 'element-ui'
 
 export default {
   name: 'SecuritySettingsModal',
@@ -81,47 +65,51 @@ export default {
   },
   data() {
     return {
-      emailForm: {
+      securitySettingsForm: {
         newEmail: '',
-        isLoading: false
-      },
-      passwordForm: {
         newPassword: '',
-        isLoading: false
+        isEmailLoading: false,
+        isPasswordLoading: false
       }
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    getLabelWidth() {
+      return this.isDesktop ? '120px' : '85px'
+    },
     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
+    this.securitySettingsForm.newEmail = this.userCredentials.email
   },
   methods: {
     async updateEmail() {
-      const credentials = { email: this.emailForm.newEmail }
-      this.emailForm.isLoading = true
+      const credentials = { email: this.securitySettingsForm.newEmail }
+      this.securitySettingsForm.isEmailLoading = true
       await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
-      this.emailForm.isLoading = false
-      this.$notify.success({
-        title: this.$t('userProfile.securitySettings.success'),
+      this.securitySettingsForm.isEmailLoading = false
+      Message({
         message: this.$t('userProfile.securitySettings.emailUpdated'),
-        duration: 2000
+        type: 'success',
+        duration: 5 * 1000
       })
     },
     async updatePassword() {
-      const credentials = { password: this.passwordForm.newPassword }
-      this.passwordForm.isLoading = true
+      const credentials = { password: this.securitySettingsForm.newPassword }
+      this.securitySettingsForm.isPasswordLoading = 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'),
+      this.securitySettingsForm.isPasswordLoading = false
+      this.securitySettingsForm.newPassword = ''
+      Message({
         message: this.$t('userProfile.securitySettings.passwordUpdated'),
-        duration: 2000
+        type: 'success',
+        duration: 5 * 1000
       })
     },
     close() {
@@ -132,6 +120,31 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
+.security-settings-container {
+  display: flex;
+  label {
+    width: 15%;
+    height: 36px;
+  }
+}
+.security-settings-modal {
+  .el-dialog__body {
+    padding-top: 10px;
+  }
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+  .password-alert {
+    margin-bottom: 15px;
+  }
+  .password-input {
+    margin-bottom: 0;
+  }
+}
+.security-settings-submit-button {
+  float: right;
+}
+
 @media all and (max-width: 800px) {
   .security-settings-modal {
     .el-dialog {

src/views/users/show.vue

@@ -73,21 +73,16 @@
                   <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>
+        <el-button icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
+          {{ $t('userProfile.securitySettings.securitySettings') }}
+        </el-button>
+        <SecuritySettingsModal
+          :user="user"
+          :visible="securitySettingsModalVisible"
+          @close="securitySettingsModalVisible = false" />
       </el-card>
       <div class="recent-statuses-container">
         <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
@@ -165,10 +160,6 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
-.avatar-name-container {
-  display: flex;
-  align-items: center;
-}
 header {
   align-items: center;
   display: flex;
@@ -184,14 +175,14 @@ table {
     width: 150px;
   }
 }
+.avatar-name-container {
+  display: flex;
+  align-items: center;
+}
+
 .el-table--border::after, .el-table--group::after, .el-table::before {
   background-color: transparent;
 }
-.poll ul {
-  list-style-type: none;
-  padding: 0;
-  width: 30%;
-}
 .image {
   width: 20%;
   img {
@@ -202,6 +193,11 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.poll ul {
+  list-style-type: none;
+  padding: 0;
+  width: 30%;
+}
 .recent-statuses-container {
   display: flex;
   flex-direction: column;
@@ -210,6 +206,10 @@ table {
 .recent-statuses-header {
   margin-top: 10px;
 }
+.security-setting-button {
+  margin-top: 20px;
+  width: 100%;
+}
 .statuses {
   padding: 0 20px 0 0;
 }