diff options
| author | Henry Jameson <me@hjkos.com> | 2019-04-07 20:33:11 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2019-04-07 20:33:11 +0300 |
| commit | 9108737d55300d8a4f822ba94335d8b53f04854d (patch) | |
| tree | 76c51864a8f84edf260f2cf2fcf7625799f2533f /src/components/user_settings/user_settings.vue | |
| parent | 8c7f765dff8b66ff27aeeab5bc09cd715ab328a9 (diff) | |
Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall. New linting.
Diffstat (limited to 'src/components/user_settings/user_settings.vue')
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 389 |
1 files changed, 290 insertions, 99 deletions
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c08698dc..ee5d368b 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,132 +27,258 @@ <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> - <EmojiInput - type="text" - v-model="newName" + <div class="setting-item"> + <h2>{{ $t('settings.name_bio') }}</h2> + <p>{{ $t('settings.name') }}</p> + <EmojiInput id="username" + v-model="newName" + type="text" classname="name-changer" /> - <p>{{$t('settings.bio')}}</p> + <p>{{ $t('settings.bio') }}</p> <EmojiInput - type="textarea" v-model="newBio" + type="textarea" classname="bio" /> <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" - :onScopeChange="changeVis"/> + :show-all="true" + :user-default="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> @@ -153,56 +287,113 @@ </div> <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.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> + <h2>{{ $t('settings.follow_import') }}</h2> + <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p> <form> - <input type="file" ref="followlist" v-on:change="followListChange" /> + <input + ref="followlist" + type="file" + @change="followListChange" + > </form> - <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i> - <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button> + <i + v-if="followListUploading" + class=" icon-spin4 animate-spin uploading" + /> + <button + v-else + class="btn btn-default" + @click="importFollows" + > + {{ $t('general.submit') }} + </button> <div v-if="followsImported"> - <i class="icon-cross" @click="dismissImported"></i> - <p>{{$t('settings.follows_imported')}}</p> + <i + class="icon-cross" + @click="dismissImported" + /> + <p>{{ $t('settings.follows_imported') }}</p> </div> <div v-else-if="followImportError"> - <i class="icon-cross" @click="dismissImported"></i> - <p>{{$t('settings.follow_import_error')}}</p> + <i + class="icon-cross" + @click="dismissImported" + /> + <p>{{ $t('settings.follow_import_error') }}</p> </div> </div> - <div class="setting-item" v-if="enableFollowsExport"> - <h2>{{$t('settings.follow_export')}}</h2> - <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button> + <div + v-if="enableFollowsExport" + class="setting-item" + > + <h2>{{ $t('settings.follow_export') }}</h2> + <button + class="btn btn-default" + @click="exportFollows" + > + {{ $t('settings.follow_export_button') }} + </button> </div> - <div class="setting-item" v-else> - <h2>{{$t('settings.follow_export_processing')}}</h2> + <div + v-else + class="setting-item" + > + <h2>{{ $t('settings.follow_export_processing') }}</h2> </div> </div> <div :label="$t('settings.blocks_tab')"> <block-list :refresh="true"> - <template slot="empty">{{$t('settings.no_blocks')}}</template> + <template slot="empty"> + {{ $t('settings.no_blocks') }} + </template> </block-list> </div> <div :label="$t('settings.mutes_tab')"> <mute-list :refresh="true"> - <template slot="empty">{{$t('settings.no_mutes')}}</template> + <template slot="empty"> + {{ $t('settings.no_mutes') }} + </template> </mute-list> </div> </tab-switcher> |
