forked from AkkomaGang/admin-fe
Update security settings dialog on user's page
This commit is contained in:
parent
05bc582512
commit
6d11e30b65
2 changed files with 103 additions and 90 deletions
|
@ -4,66 +4,50 @@
|
||||||
:title="$t('userProfile.securitySettings.securitySettings')"
|
:title="$t('userProfile.securitySettings.securitySettings')"
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
class="security-settings-modal">
|
class="security-settings-modal">
|
||||||
<el-row>
|
<el-form :model="securitySettingsForm" :label-width="getLabelWidth">
|
||||||
<p>
|
<el-form-item :label="$t('userProfile.securitySettings.email')">
|
||||||
<label>
|
<el-input v-model="securitySettingsForm.newEmail" :placeholder="$t('userProfile.securitySettings.inputNewEmail')"/>
|
||||||
{{ $t('userProfile.securitySettings.email') }}
|
</el-form-item>
|
||||||
</label>
|
<el-form-item>
|
||||||
</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
|
<el-button
|
||||||
:loading="emailForm.isLoading"
|
:loading="securitySettingsForm.isEmailLoading"
|
||||||
:disabled="!emailForm.newEmail || emailForm.newEmail === userCredentials.email"
|
:disabled="!securitySettingsForm.newEmail || securitySettingsForm.newEmail === userCredentials.email"
|
||||||
type="primary"
|
type="primary"
|
||||||
|
class="security-settings-submit-button"
|
||||||
@click="updateEmail()">
|
@click="updateEmail()">
|
||||||
{{ $t('userProfile.securitySettings.submit') }}
|
{{ $t('userProfile.securitySettings.submit') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
<el-row>
|
<el-form-item :label="$t('userProfile.securitySettings.password')" class="password-input">
|
||||||
<p>
|
<el-input v-model="securitySettingsForm.newPassword" :placeholder="$t('userProfile.securitySettings.inputNewPassword')"/>
|
||||||
<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">
|
<small class="form-text">
|
||||||
{{ $t('userProfile.securitySettings.passwordLengthNotice', { minLength: 8 }) }}
|
{{ $t('userProfile.securitySettings.passwordLengthNotice', { minLength: 8 }) }}
|
||||||
</small>
|
</small>
|
||||||
<br>
|
</el-form-item>
|
||||||
<el-alert
|
<el-alert
|
||||||
:closable="false"
|
:closable="false"
|
||||||
type="warning"
|
type="warning"
|
||||||
show-icon>
|
show-icon
|
||||||
|
class="password-alert">
|
||||||
<p>{{ $t('userProfile.securitySettings.passwordChangeWarning1') }}</p>
|
<p>{{ $t('userProfile.securitySettings.passwordChangeWarning1') }}</p>
|
||||||
<p>{{ $t('userProfile.securitySettings.passwordChangeWarning2') }}</p>
|
<p>{{ $t('userProfile.securitySettings.passwordChangeWarning2') }}</p>
|
||||||
</el-alert>
|
</el-alert>
|
||||||
</el-row>
|
<el-form-item>
|
||||||
<br>
|
|
||||||
<el-row type="flex" justify="end">
|
|
||||||
<el-button
|
<el-button
|
||||||
:loading="passwordForm.isLoading"
|
:loading="securitySettingsForm.isPasswordLoading"
|
||||||
:disabled="passwordForm.newPassword.length < 8"
|
:disabled="securitySettingsForm.newPassword.length < 8"
|
||||||
type="primary"
|
type="primary"
|
||||||
|
class="security-settings-submit-button"
|
||||||
@click="updatePassword()">
|
@click="updatePassword()">
|
||||||
{{ $t('userProfile.securitySettings.submit') }}
|
{{ $t('userProfile.securitySettings.submit') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { Message } from 'element-ui'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SecuritySettingsModal',
|
name: 'SecuritySettingsModal',
|
||||||
|
@ -81,47 +65,51 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
emailForm: {
|
securitySettingsForm: {
|
||||||
newEmail: '',
|
newEmail: '',
|
||||||
isLoading: false
|
|
||||||
},
|
|
||||||
passwordForm: {
|
|
||||||
newPassword: '',
|
newPassword: '',
|
||||||
isLoading: false
|
isEmailLoading: false,
|
||||||
|
isPasswordLoading: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
isDesktop() {
|
||||||
|
return this.$store.state.app.device === 'desktop'
|
||||||
|
},
|
||||||
|
getLabelWidth() {
|
||||||
|
return this.isDesktop ? '120px' : '85px'
|
||||||
|
},
|
||||||
userCredentials() {
|
userCredentials() {
|
||||||
return this.$store.state.userProfile.userCredentials
|
return this.$store.state.userProfile.userCredentials
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: async function() {
|
mounted: async function() {
|
||||||
await this.$store.dispatch('FetchUserCredentials', { nickname: this.user.nickname })
|
await this.$store.dispatch('FetchUserCredentials', { nickname: this.user.nickname })
|
||||||
this.emailForm.newEmail = this.userCredentials.email
|
this.securitySettingsForm.newEmail = this.userCredentials.email
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async updateEmail() {
|
async updateEmail() {
|
||||||
const credentials = { email: this.emailForm.newEmail }
|
const credentials = { email: this.securitySettingsForm.newEmail }
|
||||||
this.emailForm.isLoading = true
|
this.securitySettingsForm.isEmailLoading = true
|
||||||
await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
|
await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
|
||||||
this.emailForm.isLoading = false
|
this.securitySettingsForm.isEmailLoading = false
|
||||||
this.$notify.success({
|
Message({
|
||||||
title: this.$t('userProfile.securitySettings.success'),
|
|
||||||
message: this.$t('userProfile.securitySettings.emailUpdated'),
|
message: this.$t('userProfile.securitySettings.emailUpdated'),
|
||||||
duration: 2000
|
type: 'success',
|
||||||
|
duration: 5 * 1000
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
async updatePassword() {
|
async updatePassword() {
|
||||||
const credentials = { password: this.passwordForm.newPassword }
|
const credentials = { password: this.securitySettingsForm.newPassword }
|
||||||
this.passwordForm.isLoading = true
|
this.securitySettingsForm.isPasswordLoading = true
|
||||||
await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
|
await this.$store.dispatch('UpdateUserCredentials', { nickname: this.user.nickname, credentials })
|
||||||
this.passwordForm.isLoading = false
|
this.securitySettingsForm.isPasswordLoading = false
|
||||||
this.passwordForm.newPassword = ''
|
this.securitySettingsForm.newPassword = ''
|
||||||
this.$notify.success({
|
Message({
|
||||||
title: this.$t('userProfile.securitySettings.success'),
|
|
||||||
message: this.$t('userProfile.securitySettings.passwordUpdated'),
|
message: this.$t('userProfile.securitySettings.passwordUpdated'),
|
||||||
duration: 2000
|
type: 'success',
|
||||||
|
duration: 5 * 1000
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
|
@ -132,6 +120,31 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss'>
|
<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) {
|
@media all and (max-width: 800px) {
|
||||||
.security-settings-modal {
|
.security-settings-modal {
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
|
|
|
@ -73,21 +73,16 @@
|
||||||
<el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
|
<el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="el-table__row">
|
</tbody>
|
||||||
<td>
|
</table>
|
||||||
<el-button icon="el-icon-lock" @click="securitySettingsModalVisible = true">
|
</div>
|
||||||
|
<el-button icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
|
||||||
{{ $t('userProfile.securitySettings.securitySettings') }}
|
{{ $t('userProfile.securitySettings.securitySettings') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
<SecuritySettingsModal
|
<SecuritySettingsModal
|
||||||
:user="user"
|
:user="user"
|
||||||
:visible="securitySettingsModalVisible"
|
:visible="securitySettingsModalVisible"
|
||||||
@close="securitySettingsModalVisible = false" />
|
@close="securitySettingsModalVisible = false" />
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<div class="recent-statuses-container">
|
<div class="recent-statuses-container">
|
||||||
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
|
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
|
||||||
|
@ -165,10 +160,6 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss' scoped>
|
<style rel='stylesheet/scss' lang='scss' scoped>
|
||||||
.avatar-name-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
header {
|
header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -184,14 +175,14 @@ table {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.avatar-name-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.el-table--border::after, .el-table--group::after, .el-table::before {
|
.el-table--border::after, .el-table--group::after, .el-table::before {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.poll ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.image {
|
.image {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
img {
|
img {
|
||||||
|
@ -202,6 +193,11 @@ table {
|
||||||
margin-left: 28px;
|
margin-left: 28px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
.poll ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
.recent-statuses-container {
|
.recent-statuses-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -210,6 +206,10 @@ table {
|
||||||
.recent-statuses-header {
|
.recent-statuses-header {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
.security-setting-button {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.statuses {
|
.statuses {
|
||||||
padding: 0 20px 0 0;
|
padding: 0 20px 0 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue