AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki 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')" :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-button
</el-row> :loading="securitySettingsForm.isEmailLoading"
<el-row> :disabled="!securitySettingsForm.newEmail || securitySettingsForm.newEmail === userCredentials.email"
<el-input type="primary"
:placeholder="$t('userProfile.securitySettings.inputNewEmail')" class="security-settings-submit-button"
v-model="emailForm.newEmail" /> @click="updateEmail()">
</el-row> {{ $t('userProfile.securitySettings.submit') }}
<br> </el-button>
<el-row type="flex" justify="end"> </el-form-item>
<el-button <el-form-item :label="$t('userProfile.securitySettings.password')" class="password-input">
:loading="emailForm.isLoading" <el-input v-model="securitySettingsForm.newPassword" :placeholder="$t('userProfile.securitySettings.inputNewPassword')"/>
:disabled="!emailForm.newEmail || emailForm.newEmail === userCredentials.email" <small class="form-text">
type="primary" {{ $t('userProfile.securitySettings.passwordLengthNotice', { minLength: 8 }) }}
@click="updateEmail()"> </small>
{{ $t('userProfile.securitySettings.submit') }} </el-form-item>
</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 <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-button
<el-row type="flex" justify="end"> :loading="securitySettingsForm.isPasswordLoading"
<el-button :disabled="securitySettingsForm.newPassword.length < 8"
:loading="passwordForm.isLoading" type="primary"
:disabled="passwordForm.newPassword.length < 8" class="security-settings-submit-button"
type="primary" @click="updatePassword()">
@click="updatePassword()"> {{ $t('userProfile.securitySettings.submit') }}
{{ $t('userProfile.securitySettings.submit') }} </el-button>
</el-button> </el-form-item>
</el-row> </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 {

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> <el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </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> </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;
} }