diff options
Diffstat (limited to 'src/components/user_settings/user_settings.vue')
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 389 |
1 files changed, 99 insertions, 290 deletions
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index ee5d368b..c08698dc 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -2,23 +2,15 @@ <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 - v-if="currentSaveStateNotice.error" - class="alert error" - @click.prevent - > + <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error"> {{ $t('settings.saving_err') }} </div> - <div - v-if="!currentSaveStateNotice.error" - class="alert transparent" - @click.prevent - > + <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error"> {{ $t('settings.saving_ok') }} </div> </template> @@ -27,258 +19,132 @@ <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 - id="username" - v-model="newName" + <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> + <p>{{$t('settings.bio')}}</p> <EmojiInput - v-model="newBio" type="textarea" + v-model="newBio" classname="bio" /> <p> - <input - id="account-locked" - v-model="newLocked" - type="checkbox" - > - <label for="account-locked">{{ $t('settings.lock_account_description') }}</label> + <input type="checkbox" v-model="newLocked" id="account-locked"> + <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 - :show-all="true" - :user-default="newDefaultScope" - :on-scope-change="changeVis" - /> + :showAll="true" + :userDefault="newDefaultScope" + :onScopeChange="changeVis"/> </div> </div> <p> - <input - id="account-no-rich-text" - v-model="newNoRichText" - type="checkbox" - > - <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label> + <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text"> + <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label> </p> <p> - <input - id="account-hide-follows" - v-model="hideFollows" - type="checkbox" - > - <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label> + <input type="checkbox" v-model="hideFollows" id="account-hide-follows"> + <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label> </p> <p> - <input - id="account-hide-followers" - v-model="hideFollowers" - type="checkbox" - > - <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label> + <input type="checkbox" v-model="hideFollowers" id="account-hide-followers"> + <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label> </p> <p> - <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> + <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> </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 - 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" - /> + <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" /> </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 - v-if="bannerPreview" - class="banner" - :src="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 class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" /> <div> - <input - type="file" - @change="uploadFile('banner', $event)" - > + <input type="file" @change="uploadFile('banner', $event)" /> </div> - <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" - > + <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"> Error: {{ bannerUploadError }} - <i - class="button-icon icon-cancel" - @click="clearUploadError('banner')" - /> + <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i> </div> </div> <div class="setting-item"> - <h2>{{ $t('settings.profile_background') }}</h2> - <p>{{ $t('settings.set_new_profile_background') }}</p> - <img - v-if="backgroundPreview" - class="bg" - :src="backgroundPreview" - > + <h2>{{$t('settings.profile_background')}}</h2> + <p>{{$t('settings.set_new_profile_background')}}</p> + <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" /> <div> - <input - type="file" - @change="uploadFile('background', $event)" - > + <input type="file" @change="uploadFile('background', $event)" /> </div> - <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" - > + <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"> Error: {{ backgroundUploadError }} - <i - class="button-icon icon-cancel" - @click="clearUploadError('background')" - /> + <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i> </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 - v-model="changePasswordInputs[0]" - type="password" - > + <p>{{$t('settings.current_password')}}</p> + <input type="password" v-model="changePasswordInputs[0]"> </div> <div> - <p>{{ $t('settings.new_password') }}</p> - <input - v-model="changePasswordInputs[1]" - type="password" - > + <p>{{$t('settings.new_password')}}</p> + <input type="password" v-model="changePasswordInputs[1]"> </div> <div> - <p>{{ $t('settings.confirm_new_password') }}</p> - <input - v-model="changePasswordInputs[2]" - type="password" - > + <p>{{$t('settings.confirm_new_password')}}</p> + <input type="password" v-model="changePasswordInputs[2]"> </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>{{$t('settings.app_name')}}</th> + <th>{{$t('settings.valid_until')}}</th> + <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> @@ -287,113 +153,56 @@ </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 - v-model="deleteAccountConfirmPasswordInput" - type="password" - > - <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 type="password" v-model="deleteAccountConfirmPasswordInput"> + <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 - v-if="!deletingAccount" - class="btn btn-default" - @click="confirmDelete" - > - {{ $t('general.submit') }} - </button> + <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> </div> </div> - <div - v-if="pleromaBackend" - :label="$t('settings.data_import_export_tab')" - > + <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend"> <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 - ref="followlist" - type="file" - @change="followListChange" - > + <input type="file" ref="followlist" v-on:change="followListChange" /> </form> - <i - v-if="followListUploading" - class=" icon-spin4 animate-spin uploading" - /> - <button - v-else - class="btn btn-default" - @click="importFollows" - > - {{ $t('general.submit') }} - </button> + <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i> + <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button> <div v-if="followsImported"> - <i - class="icon-cross" - @click="dismissImported" - /> - <p>{{ $t('settings.follows_imported') }}</p> + <i class="icon-cross" @click="dismissImported"></i> + <p>{{$t('settings.follows_imported')}}</p> </div> <div v-else-if="followImportError"> - <i - class="icon-cross" - @click="dismissImported" - /> - <p>{{ $t('settings.follow_import_error') }}</p> + <i class="icon-cross" @click="dismissImported"></i> + <p>{{$t('settings.follow_import_error')}}</p> </div> </div> - <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 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> - <div - v-else - class="setting-item" - > - <h2>{{ $t('settings.follow_export_processing') }}</h2> + <div class="setting-item" v-else> + <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> |