From 6d11e30b65f67ef16958668924f26d318eb60cac Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 25 Mar 2020 23:21:26 +0000
Subject: [PATCH] Update security settings dialog on user's page
---
.../components/SecuritySettingsModal.vue | 151 ++++++++++--------
src/views/users/show.vue | 42 ++---
2 files changed, 103 insertions(+), 90 deletions(-)
diff --git a/src/views/users/components/SecuritySettingsModal.vue b/src/views/users/components/SecuritySettingsModal.vue
index 58c757b1..9237cc20 100644
--- a/src/views/users/components/SecuritySettingsModal.vue
+++ b/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 {
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 84cfef32..23c87247 100644
--- a/src/views/users/show.vue
+++ b/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;
}
--
GitLab