KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

enhancement: Profile settings accessibility improvements (#2054)

Browse source 
* profile settings in to separate form

* update locale texts

* replce woot-submit-button with woot-button

* disable button if value is empty

* change condition

* code climate fixes
This commit is contained in:
Muhsin Keloth 2021-04-07 12:28:50 +05:30 committed by GitHub
parent a377da9028
commit cc3da031e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/javascript/dashboard/i18n/locale/en/settings.json
View file

@ -3,6 +3,8 @@
"LINK": "Profile Settings",
"TITLE": "Profile Settings",
"BTN_TEXT": "Update Profile",
"UPDATE_SUCCESS": "Your profile has been updated successfully",
"PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
"AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
"FORM": {
"AVATAR": "Profile Image",
@ -16,7 +18,8 @@
},
"PASSWORD_SECTION": {
"TITLE": "Password",
"NOTE": "Updating your password would reset your logins in multiple devices."
"NOTE": "Updating your password would reset your logins in multiple devices.",
"BTN_TEXT": "Change password"
},
"ACCESS_TOKEN": {
"TITLE": "Access Token",
@ -64,11 +67,7 @@
},
"AVAILABILITY": {
"LABEL": "Availability",
"STATUSES_LIST": [
"Online",
"Busy",
"Offline"
]
"STATUSES_LIST": ["Online", "Busy", "Offline"]
},
"EMAIL": {
"LABEL": "Your email address",
@ -147,6 +146,5 @@
},
"SUBMIT": "Submit"
}
}
}

74
app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="columns profile--settings ">
<form @submit.prevent="updateUser">
<div class="columns profile--settings">
<form @submit.prevent="updateUser('profile')">
<div class="small-12 row profile--settings--row">
<div class="columns small-3 ">
<div class="columns small-3">
<h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
</h4>
@ -49,10 +49,15 @@
{{ $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') }}
</span>
</label>
<woot-button type="submit" :is-loading="isProfileUpdating">
{{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
</woot-button>
</div>
</div>
</form>
<form @submit.prevent="updateUser('password')">
<div class="profile--settings--row row">
<div class="columns small-3 ">
<div class="columns small-3">
<h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }}
</h4>
@ -85,27 +90,30 @@
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR') }}
</span>
</label>
<woot-button
:is-loading="isPasswordChanging"
type="submit"
:disabled="
!passwordConfirmation || !$v.passwordConfirmation.isEqPassword
"
>
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
</woot-button>
</div>
</div>
<notification-settings />
<div class="profile--settings--row row">
<div class="columns small-3 ">
<h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE') }}</p>
</div>
<div class="columns small-9 medium-5">
<woot-code :script="currentUser.access_token"></woot-code>
</div>
</div>
<woot-submit-button
class="button nice success button--fixed-right-top"
:button-text="$t('PROFILE_SETTINGS.BTN_TEXT')"
:loading="isUpdating"
>
</woot-submit-button>
</form>
<notification-settings />
<div class="profile--settings--row row">
<div class="columns small-3">
<h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE') }}</p>
</div>
<div class="columns small-9 medium-5">
<woot-code :script="currentUser.access_token"></woot-code>
</div>
</div>
</div>
</template>
@ -130,7 +138,8 @@ export default {
email: '',
password: '',
passwordConfirmation: '',
isUpdating: false,
isProfileUpdating: false,
isPasswordChanging: false,
};
},
validations: {
@ -181,13 +190,17 @@ export default {
this.avatarUrl = this.currentUser.avatar_url;
this.displayName = this.currentUser.display_name;
},
async updateUser() {
async updateUser(type) {
this.$v.$touch();
if (this.$v.$invalid) {
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
return;
}
this.isUpdating = true;
if (type === 'profile') {
this.isProfileUpdating = true;
} else if (type === 'password') {
this.isPasswordChanging = true;
}
const hasEmailChanged = this.currentUser.email !== this.email;
try {
await this.$store.dispatch('updateProfile', {
@ -198,13 +211,20 @@ export default {
displayName: this.displayName,
password_confirmation: this.passwordConfirmation,
});
this.isUpdating = false;
this.isProfileUpdating = false;
this.isPasswordChanging = false;
if (hasEmailChanged) {
clearCookiesOnLogout();
this.showAlert(this.$t('PROFILE_SETTINGS.AFTER_EMAIL_CHANGED'));
}
if (type === 'profile') {
this.showAlert(this.$t('PROFILE_SETTINGS.UPDATE_SUCCESS'));
} else if (type === 'password') {
this.showAlert(this.$t('PROFILE_SETTINGS.PASSWORD_UPDATE_SUCCESS'));
}
} catch (error) {
this.isUpdating = false;
this.isProfileUpdating = false;
this.isPasswordChanging = false;
}
},
handleImageUpload({ file, url }) {