Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Update security settings dialog on user's page

Browse source
This commit is contained in:
Angelina Filippova 2020-03-25 23:21:26 +00:00
parent 05bc582512
commit 6d11e30b65
2 changed files with 103 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

151
src/views/users/components/SecuritySettingsModal.vue
View file

@ -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 {

42
src/views/users/show.vue
View file

@ -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;
}