diff options
Diffstat (limited to 'src/components/user_settings')
| -rw-r--r-- | src/components/user_settings/confirm.vue | 26 | ||||
| -rw-r--r-- | src/components/user_settings/mfa.js | 5 | ||||
| -rw-r--r-- | src/components/user_settings/mfa.vue | 186 | ||||
| -rw-r--r-- | src/components/user_settings/mfa_backup_codes.vue | 27 | ||||
| -rw-r--r-- | src/components/user_settings/mfa_totp.vue | 56 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.js | 63 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 529 |
7 files changed, 630 insertions, 262 deletions
diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue index 46a42e38..69b3811b 100644 --- a/src/components/user_settings/confirm.vue +++ b/src/components/user_settings/confirm.vue @@ -1,13 +1,21 @@ <template> -<div> - <slot></slot> - <button class="btn btn-default" @click="confirm" :disabled="disabled"> - {{$t('general.confirm')}} - </button> - <button class="btn btn-default" @click="cancel" :disabled="disabled"> - {{$t('general.cancel')}} - </button> -</div> + <div> + <slot /> + <button + class="btn btn-default" + :disabled="disabled" + @click="confirm" + > + {{ $t('general.confirm') }} + </button> + <button + class="btn btn-default" + :disabled="disabled" + @click="cancel" + > + {{ $t('general.cancel') }} + </button> + </div> </template> <script src="./confirm.js"> diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js index 2acee862..3090138a 100644 --- a/src/components/user_settings/mfa.js +++ b/src/components/user_settings/mfa.js @@ -7,6 +7,7 @@ import { mapState } from 'vuex' const Mfa = { data: () => ({ settings: { // current settings of MFA + available: false, enabled: false, totp: false }, @@ -106,7 +107,7 @@ const Mfa = { this.setupState.setupOTPState = 'confirm' }) }, - doConfirmOTP () { // handler confirm enable OTP + doConfirmOTP () { // handler confirm enable OTP this.error = null this.backendInteractor.mfaConfirmOTP({ token: this.otpConfirmToken, @@ -139,7 +140,9 @@ const Mfa = { // fetch settings from server async fetchSettings () { let result = await this.backendInteractor.fetchSettingsMFA() + if (result.error) return this.settings = result.settings + this.settings.available = true return result } }, diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue index ded426dd..14ea10a1 100644 --- a/src/components/user_settings/mfa.vue +++ b/src/components/user_settings/mfa.vue @@ -1,86 +1,138 @@ <template> -<div class="setting-item mfa-settings" v-if="readyInit"> - - <div class="mfa-heading"> - <h2>{{$t('settings.mfa.title')}}</h2> - </div> - - <div> - <div class="setting-item" v-if="!setupInProgress"> - <!-- Enabled methods --> - <h3>{{$t('settings.mfa.authentication_methods')}}</h3> - <totp-item :settings="settings" @deactivate="fetchSettings" @activate="activateOTP"/> - <br /> - - <div v-if="settings.enabled"> <!-- backup codes block--> - <recovery-codes :backup-codes="backupCodes" v-if="!confirmNewBackupCodes" /> - <button class="btn btn-default" @click="getBackupCodes" v-if="!confirmNewBackupCodes"> - {{$t('settings.mfa.generate_new_recovery_codes')}} - </button> + <div + v-if="readyInit && settings.available" + class="setting-item mfa-settings" + > + <div class="mfa-heading"> + <h2>{{ $t('settings.mfa.title') }}</h2> + </div> - <div v-if="confirmNewBackupCodes"> - <confirm @confirm="confirmBackupCodes" @cancel="cancelBackupCodes" - :disabled="backupCodes.inProgress"> - <p class="warning">{{$t('settings.mfa.warning_of_generate_new_codes')}}</p> - </confirm> + <div> + <div + v-if="!setupInProgress" + class="setting-item" + > + <!-- Enabled methods --> + <h3>{{ $t('settings.mfa.authentication_methods') }}</h3> + <totp-item + :settings="settings" + @deactivate="fetchSettings" + @activate="activateOTP" + /> + <br> + + <div v-if="settings.enabled"> + <!-- backup codes block--> + <recovery-codes + v-if="!confirmNewBackupCodes" + :backup-codes="backupCodes" + /> + <button + v-if="!confirmNewBackupCodes" + class="btn btn-default" + @click="getBackupCodes" + > + {{ $t('settings.mfa.generate_new_recovery_codes') }} + </button> + + <div v-if="confirmNewBackupCodes"> + <confirm + :disabled="backupCodes.inProgress" + @confirm="confirmBackupCodes" + @cancel="cancelBackupCodes" + > + <p class="warning"> + {{ $t('settings.mfa.warning_of_generate_new_codes') }} + </p> + </confirm> + </div> </div> </div> - </div> - - <div v-if="setupInProgress"> <!-- setup block--> - <h3>{{$t('settings.mfa.setup_otp')}}</h3> + <div v-if="setupInProgress"> + <!-- setup block--> - <recovery-codes :backup-codes="backupCodes" v-if="!setupOTPInProgress"/> + <h3>{{ $t('settings.mfa.setup_otp') }}</h3> + <recovery-codes + v-if="!setupOTPInProgress" + :backup-codes="backupCodes" + /> - <button class="btn btn-default" @click="cancelSetup" v-if="canSetupOTP"> - {{$t('general.cancel')}} - </button> - - <button class="btn btn-default" v-if="canSetupOTP" @click="setupOTP"> - {{$t('settings.mfa.setup_otp')}} - </button> - - <template v-if="setupOTPInProgress"> - <i v-if="prepareOTP">{{$t('settings.mfa.wait_pre_setup_otp')}}</i> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> - <div v-if="confirmOTP"> - <div class="setup-otp"> - <div class="qr-code"> - <h4>{{$t('settings.mfa.scan.title')}}</h4> - <p>{{$t('settings.mfa.scan.desc')}}</p> - <qrcode :value="otpSettings.provisioning_uri" :options="{ width: 200 }"></qrcode> - <p> - {{$t('settings.mfa.scan.secret_code')}}: - {{otpSettings.key}} - </p> - </div> + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="setupOTP" + > + {{ $t('settings.mfa.setup_otp') }} + </button> - <div class="verify"> - <h4>{{$t('general.verify')}}</h4> - <p>{{$t('settings.mfa.verify.desc')}}</p> - <input type="text" v-model="otpConfirmToken"> + <template v-if="setupOTPInProgress"> + <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i> + + <div v-if="confirmOTP"> + <div class="setup-otp"> + <div class="qr-code"> + <h4>{{ $t('settings.mfa.scan.title') }}</h4> + <p>{{ $t('settings.mfa.scan.desc') }}</p> + <qrcode + :value="otpSettings.provisioning_uri" + :options="{ width: 200 }" + /> + <p> + {{ $t('settings.mfa.scan.secret_code') }}: + {{ otpSettings.key }} + </p> + </div> - <p>{{$t('settings.enter_current_password_to_confirm')}}:</p> - <input type="password" v-model="currentPassword"> - <div class="confirm-otp-actions"> - <button class="btn btn-default" @click="doConfirmOTP"> - {{$t('settings.mfa.confirm_and_enable')}} - </button> - <button class="btn btn-default" @click="cancelSetup"> - {{$t('general.cancel')}} - </button> + <div class="verify"> + <h4>{{ $t('general.verify') }}</h4> + <p>{{ $t('settings.mfa.verify.desc') }}</p> + <input + v-model="otpConfirmToken" + type="text" + > + + <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p> + <input + v-model="currentPassword" + type="password" + > + <div class="confirm-otp-actions"> + <button + class="btn btn-default" + @click="doConfirmOTP" + > + {{ $t('settings.mfa.confirm_and_enable') }} + </button> + <button + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> + </div> + <div + v-if="error" + class="alert error" + > + {{ error }} + </div> </div> - <div class="alert error" v-if="error">{{error}}</div> </div> </div> - </div> - </template> + </template> + </div> </div> - </div> -</div> </template> <script src="./mfa.js"></script> diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue index c275bd63..e6c8ede2 100644 --- a/src/components/user_settings/mfa_backup_codes.vue +++ b/src/components/user_settings/mfa_backup_codes.vue @@ -1,12 +1,23 @@ <template> -<div> - <h4 v-if="displayTitle">{{$t('settings.mfa.recovery_codes')}}</h4> - <i v-if="inProgress">{{$t('settings.mfa.waiting_a_recovery_codes')}}</i> - <template v-if="ready"> - <p class="alert warning">{{$t('settings.mfa.recovery_codes_warning')}}</p> - <ul class="backup-codes"><li v-for="code in backupCodes.codes">{{code}}</li></ul> - </template> -</div> + <div> + <h4 v-if="displayTitle"> + {{ $t('settings.mfa.recovery_codes') }} + </h4> + <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i> + <template v-if="ready"> + <p class="alert warning"> + {{ $t('settings.mfa.recovery_codes_warning') }} + </p> + <ul class="backup-codes"> + <li + v-for="code in backupCodes.codes" + :key="code" + > + {{ code }} + </li> + </ul> + </template> + </div> </template> <script src="./mfa_backup_codes.js"></script> <style lang="scss"> diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue index 6b73c8f4..c6f2cc7b 100644 --- a/src/components/user_settings/mfa_totp.vue +++ b/src/components/user_settings/mfa_totp.vue @@ -1,23 +1,43 @@ <template> -<div> - <div class="method-item"> - <strong>{{$t('settings.mfa.otp')}}</strong> - <button class="btn btn-default" v-if="!isActivated" @click="doActivate"> - {{$t('general.enable')}} - </button> + <div> + <div class="method-item"> + <strong>{{ $t('settings.mfa.otp') }}</strong> + <button + v-if="!isActivated" + class="btn btn-default" + @click="doActivate" + > + {{ $t('general.enable') }} + </button> - <button class="btn btn-default" :disabled="deactivate" @click="doDeactivate" - v-if="isActivated"> - {{$t('general.disable')}} - </button> - </div> + <button + v-if="isActivated" + class="btn btn-default" + :disabled="deactivate" + @click="doDeactivate" + > + {{ $t('general.disable') }} + </button> + </div> - <confirm @confirm="confirmDeactivate" @cancel="cancelDeactivate" - :disabled="inProgress" v-if="deactivate"> - {{$t('settings.enter_current_password_to_confirm')}}: - <input type="password" v-model="currentPassword"> - </confirm> - <div class="alert error" v-if="error">{{error}}</div> -</div> + <confirm + v-if="deactivate" + :disabled="inProgress" + @confirm="confirmDeactivate" + @cancel="cancelDeactivate" + > + {{ $t('settings.enter_current_password_to_confirm') }}: + <input + v-model="currentPassword" + type="password" + > + </confirm> + <div + v-if="error" + class="alert error" + > + {{ error }} + </div> + </div> </template> <script src="./mfa_totp.js"></script> diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 69505806..b5a7f0df 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -12,11 +12,11 @@ import MuteCard from '../mute_card/mute_card.vue' import SelectableList from '../selectable_list/selectable_list.vue' import ProgressButton from '../progress_button/progress_button.vue' import EmojiInput from '../emoji-input/emoji-input.vue' +import suggestor from '../emoji-input/suggestor.js' import Autosuggest from '../autosuggest/autosuggest.vue' import Importer from '../importer/importer.vue' import Exporter from '../exporter/exporter.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' -import userSearchApi from '../../services/new_api/user_search.js' import Mfa from './mfa.vue' const BlockList = withSubscription({ @@ -46,7 +46,9 @@ const UserSettings = { pickAvatarBtnVisible: true, bannerUploading: false, backgroundUploading: false, + banner: null, bannerPreview: null, + background: null, backgroundPreview: null, bannerUploadError: null, backgroundUploadError: null, @@ -83,6 +85,22 @@ const UserSettings = { user () { return this.$store.state.users.currentUser }, + emojiUserSuggestor () { + return suggestor({ + emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ], + users: this.$store.state.users.users, + updateUsersList: (input) => this.$store.dispatch('searchUsers', input) + }) + }, + emojiSuggestor () { + return suggestor({ emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ] }) + }, pleromaBackend () { return this.$store.state.instance.pleromaBackend }, @@ -126,10 +144,10 @@ const UserSettings = { hide_followers: this.hideFollowers, show_role: this.showRole /* eslint-enable camelcase */ - }}).then((user) => { - this.$store.commit('addNewUsers', [user]) - this.$store.commit('setCurrentUser', user) - }) + } }).then((user) => { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + }) }, updateNotificationSettings () { this.$store.state.api.backendInteractor @@ -144,12 +162,12 @@ const UserSettings = { if (file.size > this.$store.state.instance[slot + 'limit']) { const filesize = fileSizeFormatService.fileSizeFormat(file.size) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) - this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}) + this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit }) return } // eslint-disable-next-line no-undef const reader = new FileReader() - reader.onload = ({target}) => { + reader.onload = ({ target }) => { const img = target.result this[slot + 'Preview'] = img this[slot] = file @@ -185,7 +203,7 @@ const UserSettings = { if (!this.bannerPreview) { return } this.bannerUploading = true - this.$store.state.api.backendInteractor.updateBanner({banner: this.banner}) + this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner }) .then((user) => { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) @@ -198,22 +216,12 @@ const UserSettings = { }, submitBg () { if (!this.backgroundPreview) { return } - let img = this.backgroundPreview - // eslint-disable-next-line no-undef - let imginfo = new Image() - let cropX, cropY, cropW, cropH - imginfo.src = img - cropX = 0 - cropY = 0 - cropW = imginfo.width - cropH = imginfo.width + let background = this.background this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => { + this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => { if (!data.error) { - let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) - clone.background_image = data.url - this.$store.commit('addNewUsers', [clone]) - this.$store.commit('setCurrentUser', clone) + this.$store.commit('addNewUsers', [data]) + this.$store.commit('setCurrentUser', data) this.backgroundPreview = null } else { this.backgroundUploadError = this.$t('upload.error.base') + data.error @@ -261,11 +269,11 @@ const UserSettings = { this.deletingAccount = true }, deleteAccount () { - this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput}) + this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput }) .then((res) => { if (res.status === 'success') { this.$store.dispatch('logout') - this.$router.push({name: 'root'}) + this.$router.push({ name: 'root' }) } else { this.deleteAccountError = res.error } @@ -314,11 +322,8 @@ const UserSettings = { }) }, queryUserIds (query) { - return userSearchApi.search({query, store: this.$store}) - .then((users) => { - this.$store.dispatch('addNewUsers', users) - return map(users, 'id') - }) + return this.$store.dispatch('searchUsers', query) + .then((users) => map(users, 'id')) }, blockUsers (ids) { return this.$store.dispatch('blockUsers', ids) diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index bbe41f11..34ea8569 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -2,15 +2,23 @@ <div class="settings panel panel-default"> <div class="panel-heading"> <div class="title"> - {{$t('settings.user_settings')}} + {{ $t('settings.user_settings') }} </div> <transition name="fade"> <template v-if="currentSaveStateNotice"> - <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error"> + <div + v-if="currentSaveStateNotice.error" + class="alert error" + @click.prevent + > {{ $t('settings.saving_err') }} </div> - <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error"> + <div + v-if="!currentSaveStateNotice.error" + class="alert transparent" + @click.prevent + > {{ $t('settings.saving_ok') }} </div> </template> @@ -19,133 +27,267 @@ <div class="panel-body profile-edit"> <tab-switcher> <div :label="$t('settings.profile_tab')"> - <div class="setting-item" > - <h2>{{$t('settings.name_bio')}}</h2> - <p>{{$t('settings.name')}}</p> + <div class="setting-item"> + <h2>{{ $t('settings.name_bio') }}</h2> + <p>{{ $t('settings.name') }}</p> <EmojiInput - type="text" v-model="newName" - id="username" - classname="name-changer" - /> - <p>{{$t('settings.bio')}}</p> + :suggest="emojiSuggestor" + > + <input + id="username" + v-model="newName" + classname="name-changer" + > + </EmojiInput> + <p>{{ $t('settings.bio') }}</p> <EmojiInput - type="textarea" v-model="newBio" - classname="bio" - /> + :suggest="emojiUserSuggestor" + > + <textarea + v-model="newBio" + classname="bio" + /> + </EmojiInput> <p> - <input type="checkbox" v-model="newLocked" id="account-locked"> - <label for="account-locked">{{$t('settings.lock_account_description')}}</label> + <input + id="account-locked" + v-model="newLocked" + type="checkbox" + > + <label for="account-locked">{{ $t('settings.lock_account_description') }}</label> </p> <div> - <label for="default-vis">{{$t('settings.default_vis')}}</label> - <div id="default-vis" class="visibility-tray"> + <label for="default-vis">{{ $t('settings.default_vis') }}</label> + <div + id="default-vis" + class="visibility-tray" + > <scope-selector - :showAll="true" - :userDefault="newDefaultScope" - :initialScope="newDefaultScope" - :onScopeChange="changeVis"/> + :show-all="true" + :user-default="newDefaultScope" + :initial-scope="newDefaultScope" + :on-scope-change="changeVis" + /> </div> </div> <p> - <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text"> - <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label> + <input + id="account-no-rich-text" + v-model="newNoRichText" + type="checkbox" + > + <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label> </p> <p> - <input type="checkbox" v-model="hideFollows" id="account-hide-follows"> - <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label> + <input + id="account-hide-follows" + v-model="hideFollows" + type="checkbox" + > + <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label> </p> <p> - <input type="checkbox" v-model="hideFollowers" id="account-hide-followers"> - <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label> + <input + id="account-hide-followers" + v-model="hideFollowers" + type="checkbox" + > + <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label> </p> <p> - <input type="checkbox" v-model="showRole" id="account-show-role"> - <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label> - <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label> + <input + id="account-show-role" + v-model="showRole" + type="checkbox" + > + <label + v-if="role === 'admin'" + for="account-show-role" + >{{ $t('settings.show_admin_badge') }}</label> + <label + v-if="role === 'moderator'" + for="account-show-role" + >{{ $t('settings.show_moderator_badge') }}</label> </p> - <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button> + <button + :disabled="newName && newName.length === 0" + class="btn btn-default" + @click="updateProfile" + > + {{ $t('general.submit') }} + </button> </div> <div class="setting-item"> - <h2>{{$t('settings.avatar')}}</h2> - <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p> - <p>{{$t('settings.current_avatar')}}</p> - <img :src="user.profile_image_url_original" class="current-avatar" /> - <p>{{$t('settings.set_new_avatar')}}</p> - <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button> - <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" /> + <h2>{{ $t('settings.avatar') }}</h2> + <p class="visibility-notice"> + {{ $t('settings.avatar_size_instruction') }} + </p> + <p>{{ $t('settings.current_avatar') }}</p> + <img + :src="user.profile_image_url_original" + class="current-avatar" + > + <p>{{ $t('settings.set_new_avatar') }}</p> + <button + v-show="pickAvatarBtnVisible" + id="pick-avatar" + class="btn" + type="button" + > + {{ $t('settings.upload_a_photo') }} + </button> + <image-cropper + trigger="#pick-avatar" + :submit-handler="submitAvatar" + @open="pickAvatarBtnVisible=false" + @close="pickAvatarBtnVisible=true" + /> </div> <div class="setting-item"> - <h2>{{$t('settings.profile_banner')}}</h2> - <p>{{$t('settings.current_profile_banner')}}</p> - <img :src="user.cover_photo" class="banner" /> - <p>{{$t('settings.set_new_profile_banner')}}</p> - <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" /> + <h2>{{ $t('settings.profile_banner') }}</h2> + <p>{{ $t('settings.current_profile_banner') }}</p> + <img + :src="user.cover_photo" + class="banner" + > + <p>{{ $t('settings.set_new_profile_banner') }}</p> + <img + v-if="bannerPreview" + class="banner" + :src="bannerPreview" + > <div> - <input type="file" @change="uploadFile('banner', $event)" /> + <input + type="file" + @change="uploadFile('banner', $event)" + > </div> - <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i> - <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button> - <div class='alert error' v-if="bannerUploadError"> + <i + v-if="bannerUploading" + class=" icon-spin4 animate-spin uploading" + /> + <button + v-else-if="bannerPreview" + class="btn btn-default" + @click="submitBanner" + > + {{ $t('general.submit') }} + </button> + <div + v-if="bannerUploadError" + class="alert error" + > Error: {{ bannerUploadError }} - <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i> + <i + class="button-icon icon-cancel" + @click="clearUploadError('banner')" + /> </div> </div> <div class="setting-item"> - <h2>{{$t('settings.profile_background')}}</h2> - <p>{{$t('settings.set_new_profile_background')}}</p> - <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" /> + <h2>{{ $t('settings.profile_background') }}</h2> + <p>{{ $t('settings.set_new_profile_background') }}</p> + <img + v-if="backgroundPreview" + class="bg" + :src="backgroundPreview" + > <div> - <input type="file" @change="uploadFile('background', $event)" /> + <input + type="file" + @change="uploadFile('background', $event)" + > </div> - <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i> - <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button> - <div class='alert error' v-if="backgroundUploadError"> + <i + v-if="backgroundUploading" + class=" icon-spin4 animate-spin uploading" + /> + <button + v-else-if="backgroundPreview" + class="btn btn-default" + @click="submitBg" + > + {{ $t('general.submit') }} + </button> + <div + v-if="backgroundUploadError" + class="alert error" + > Error: {{ backgroundUploadError }} - <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i> + <i + class="button-icon icon-cancel" + @click="clearUploadError('background')" + /> </div> </div> </div> <div :label="$t('settings.security_tab')"> <div class="setting-item"> - <h2>{{$t('settings.change_password')}}</h2> + <h2>{{ $t('settings.change_password') }}</h2> <div> - <p>{{$t('settings.current_password')}}</p> - <input type="password" v-model="changePasswordInputs[0]"> + <p>{{ $t('settings.current_password') }}</p> + <input + v-model="changePasswordInputs[0]" + type="password" + > </div> <div> - <p>{{$t('settings.new_password')}}</p> - <input type="password" v-model="changePasswordInputs[1]"> + <p>{{ $t('settings.new_password') }}</p> + <input + v-model="changePasswordInputs[1]" + type="password" + > </div> <div> - <p>{{$t('settings.confirm_new_password')}}</p> - <input type="password" v-model="changePasswordInputs[2]"> + <p>{{ $t('settings.confirm_new_password') }}</p> + <input + v-model="changePasswordInputs[2]" + type="password" + > </div> - <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button> - <p v-if="changedPassword">{{$t('settings.changed_password')}}</p> - <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p> - <p v-if="changePasswordError">{{changePasswordError}}</p> + <button + class="btn btn-default" + @click="changePassword" + > + {{ $t('general.submit') }} + </button> + <p v-if="changedPassword"> + {{ $t('settings.changed_password') }} + </p> + <p v-else-if="changePasswordError !== false"> + {{ $t('settings.change_password_error') }} + </p> + <p v-if="changePasswordError"> + {{ changePasswordError }} + </p> </div> <div class="setting-item"> - <h2>{{$t('settings.oauth_tokens')}}</h2> + <h2>{{ $t('settings.oauth_tokens') }}</h2> <table class="oauth-tokens"> <thead> <tr> - <th>{{$t('settings.app_name')}}</th> - <th>{{$t('settings.valid_until')}}</th> - <th></th> + <th>{{ $t('settings.app_name') }}</th> + <th>{{ $t('settings.valid_until') }}</th> + <th /> </tr> </thead> <tbody> - <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id"> - <td>{{oauthToken.appName}}</td> - <td>{{oauthToken.validUntil}}</td> + <tr + v-for="oauthToken in oauthTokens" + :key="oauthToken.id" + > + <td>{{ oauthToken.appName }}</td> + <td>{{ oauthToken.validUntil }}</td> <td class="actions"> - <button class="btn btn-default" @click="revokeToken(oauthToken.id)"> - {{$t('settings.revoke_token')}} + <button + class="btn btn-default" + @click="revokeToken(oauthToken.id)" + > + {{ $t('settings.revoke_token') }} </button> </td> </tr> @@ -154,123 +296,250 @@ </div> <mfa /> <div class="setting-item"> - <h2>{{$t('settings.delete_account')}}</h2> - <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p> + <h2>{{ $t('settings.delete_account') }}</h2> + <p v-if="!deletingAccount"> + {{ $t('settings.delete_account_description') }} + </p> <div v-if="deletingAccount"> - <p>{{$t('settings.delete_account_instructions')}}</p> - <p>{{$t('login.password')}}</p> - <input type="password" v-model="deleteAccountConfirmPasswordInput"> - <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button> + <p>{{ $t('settings.delete_account_instructions') }}</p> + <p>{{ $t('login.password') }}</p> + <input + v-model="deleteAccountConfirmPasswordInput" + type="password" + > + <button + class="btn btn-default" + @click="deleteAccount" + > + {{ $t('settings.delete_account') }} + </button> </div> - <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p> - <p v-if="deleteAccountError">{{deleteAccountError}}</p> - <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button> + <p v-if="deleteAccountError !== false"> + {{ $t('settings.delete_account_error') }} + </p> + <p v-if="deleteAccountError"> + {{ deleteAccountError }} + </p> + <button + v-if="!deletingAccount" + class="btn btn-default" + @click="confirmDelete" + > + {{ $t('general.submit') }} + </button> </div> </div> - <div :label="$t('settings.notifications')" v-if="pleromaBackend"> + <div + v-if="pleromaBackend" + :label="$t('settings.notifications')" + > <div class="setting-item"> <div class="select-multiple"> - <span class="label">{{$t('settings.notification_setting')}}</span> + <span class="label">{{ $t('settings.notification_setting') }}</span> <ul class="option-list"> <li> - <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows"> + <input + id="notification-setting-follows" + v-model="notificationSettings.follows" + type="checkbox" + > <label for="notification-setting-follows"> - {{$t('settings.notification_setting_follows')}} + {{ $t('settings.notification_setting_follows') }} </label> </li> <li> - <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers"> + <input + id="notification-setting-followers" + v-model="notificationSettings.followers" + type="checkbox" + > <label for="notification-setting-followers"> - {{$t('settings.notification_setting_followers')}} + {{ $t('settings.notification_setting_followers') }} </label> </li> <li> - <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows"> + <input + id="notification-setting-non-follows" + v-model="notificationSettings.non_follows" + type="checkbox" + > <label for="notification-setting-non-follows"> - {{$t('settings.notification_setting_non_follows')}} + {{ $t('settings.notification_setting_non_follows') }} </label> </li> <li> - <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers"> + <input + id="notification-setting-non-followers" + v-model="notificationSettings.non_followers" + type="checkbox" + > <label for="notification-setting-non-followers"> - {{$t('settings.notification_setting_non_followers')}} + {{ $t('settings.notification_setting_non_followers') }} </label> </li> </ul> </div> - <p>{{$t('settings.notification_mutes')}}</p> - <p>{{$t('settings.notification_blocks')}}</p> - <button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button> + <p>{{ $t('settings.notification_mutes') }}</p> + <p>{{ $t('settings.notification_blocks') }}</p> + <button + class="btn btn-default" + @click="updateNotificationSettings" + > + {{ $t('general.submit') }} + </button> </div> </div> - <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend"> + <div + v-if="pleromaBackend" + :label="$t('settings.data_import_export_tab')" + > <div class="setting-item"> - <h2>{{$t('settings.follow_import')}}</h2> - <p>{{$t('settings.import_followers_from_a_csv_file')}}</p> - <Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" /> + <h2>{{ $t('settings.follow_import') }}</h2> + <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p> + <Importer + :submit-handler="importFollows" + :success-message="$t('settings.follows_imported')" + :error-message="$t('settings.follow_import_error')" + /> </div> <div class="setting-item"> - <h2>{{$t('settings.follow_export')}}</h2> - <Exporter :getContent="getFollowsContent" filename="friends.csv" :exportButtonLabel="$t('settings.follow_export_button')" /> + <h2>{{ $t('settings.follow_export') }}</h2> + <Exporter + :get-content="getFollowsContent" + filename="friends.csv" + :export-button-label="$t('settings.follow_export_button')" + /> </div> <div class="setting-item"> - <h2>{{$t('settings.block_import')}}</h2> - <p>{{$t('settings.import_blocks_from_a_csv_file')}}</p> - <Importer :submitHandler="importBlocks" :successMessage="$t('settings.blocks_imported')" :errorMessage="$t('settings.block_import_error')" /> + <h2>{{ $t('settings.block_import') }}</h2> + <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p> + <Importer + :submit-handler="importBlocks" + :success-message="$t('settings.blocks_imported')" + :error-message="$t('settings.block_import_error')" + /> </div> <div class="setting-item"> - <h2>{{$t('settings.block_export')}}</h2> - <Exporter :getContent="getBlocksContent" filename="blocks.csv" :exportButtonLabel="$t('settings.block_export_button')" /> + <h2>{{ $t('settings.block_export') }}</h2> + <Exporter + :get-content="getBlocksContent" + filename="blocks.csv" + :export-button-label="$t('settings.block_export_button')" + /> </div> </div> <div :label="$t('settings.blocks_tab')"> <div class="profile-edit-usersearch-wrapper"> - <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')"> - <BlockCard slot-scope="row" :userId="row.item"/> + <Autosuggest + :filter="filterUnblockedUsers" + :query="queryUserIds" + :placeholder="$t('settings.search_user_to_block')" + > + <BlockCard + slot-scope="row" + :user-id="row.item" + /> </Autosuggest> </div> - <BlockList :refresh="true" :getKey="identity"> - <template slot="header" slot-scope="{selected}"> + <BlockList + :refresh="true" + :get-key="identity" + > + <template + slot="header" + slot-scope="{selected}" + > <div class="profile-edit-bulk-actions"> - <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => blockUsers(selected)" + > {{ $t('user_card.block') }} - <template slot="progress">{{ $t('user_card.block_progress') }}</template> + <template slot="progress"> + {{ $t('user_card.block_progress') }} + </template> </ProgressButton> - <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => unblockUsers(selected)" + > {{ $t('user_card.unblock') }} - <template slot="progress">{{ $t('user_card.unblock_progress') }}</template> + <template slot="progress"> + {{ $t('user_card.unblock_progress') }} + </template> </ProgressButton> </div> </template> - <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template> - <template slot="empty">{{$t('settings.no_blocks')}}</template> + <template + slot="item" + slot-scope="{item}" + > + <BlockCard :user-id="item" /> + </template> + <template slot="empty"> + {{ $t('settings.no_blocks') }} + </template> </BlockList> </div> <div :label="$t('settings.mutes_tab')"> <div class="profile-edit-usersearch-wrapper"> - <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')"> - <MuteCard slot-scope="row" :userId="row.item"/> + <Autosuggest + :filter="filterUnMutedUsers" + :query="queryUserIds" + :placeholder="$t('settings.search_user_to_mute')" + > + <MuteCard + slot-scope="row" + :user-id="row.item" + /> </Autosuggest> </div> - <MuteList :refresh="true" :getKey="identity"> - <template slot="header" slot-scope="{selected}"> + <MuteList + :refresh="true" + :get-key="identity" + > + <template + slot="header" + slot-scope="{selected}" + > <div class="profile-edit-bulk-actions"> - <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => muteUsers(selected)" + > {{ $t('user_card.mute') }} - <template slot="progress">{{ $t('user_card.mute_progress') }}</template> + <template slot="progress"> + {{ $t('user_card.mute_progress') }} + </template> </ProgressButton> - <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => unmuteUsers(selected)" + > {{ $t('user_card.unmute') }} - <template slot="progress">{{ $t('user_card.unmute_progress') }}</template> + <template slot="progress"> + {{ $t('user_card.unmute_progress') }} + </template> </ProgressButton> </div> </template> - <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template> - <template slot="empty">{{$t('settings.no_mutes')}}</template> + <template + slot="item" + slot-scope="{item}" + > + <MuteCard :user-id="item" /> + </template> + <template slot="empty"> + {{ $t('settings.no_mutes') }} + </template> </MuteList> </div> </tab-switcher> |