622 lines
19 KiB
Vue
622 lines
19 KiB
Vue
<template>
|
|
<div class="settings panel panel-default">
|
|
<div class="panel-heading">
|
|
<div class="title">
|
|
{{ $t('settings.user_settings') }}
|
|
</div>
|
|
<transition name="fade">
|
|
<template v-if="currentSaveStateNotice">
|
|
<div
|
|
v-if="currentSaveStateNotice.error"
|
|
class="alert error"
|
|
@click.prevent
|
|
>
|
|
{{ $t('settings.saving_err') }}
|
|
</div>
|
|
|
|
<div
|
|
v-if="!currentSaveStateNotice.error"
|
|
class="alert transparent"
|
|
@click.prevent
|
|
>
|
|
{{ $t('settings.saving_ok') }}
|
|
</div>
|
|
</template>
|
|
</transition>
|
|
</div>
|
|
<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
|
|
v-model="newName"
|
|
:suggest="emojiSuggestor"
|
|
>
|
|
<input
|
|
id="username"
|
|
v-model="newName"
|
|
classname="name-changer"
|
|
>
|
|
</EmojiInput>
|
|
<p>{{ $t('settings.bio') }}</p>
|
|
<EmojiInput
|
|
v-model="newBio"
|
|
:suggest="emojiUserSuggestor"
|
|
>
|
|
<textarea
|
|
v-model="newBio"
|
|
classname="bio"
|
|
/>
|
|
</EmojiInput>
|
|
<p>
|
|
<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"
|
|
>
|
|
<scope-selector
|
|
:show-all="true"
|
|
:user-default="newDefaultScope"
|
|
:initial-scope="newDefaultScope"
|
|
:on-scope-change="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>
|
|
</p>
|
|
<p>
|
|
<input
|
|
id="account-hide-follows"
|
|
v-model="hideFollows"
|
|
type="checkbox"
|
|
>
|
|
<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>
|
|
</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>
|
|
</p>
|
|
<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"
|
|
/>
|
|
</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"
|
|
>
|
|
<div>
|
|
<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"
|
|
>
|
|
Error: {{ bannerUploadError }}
|
|
<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
|
|
v-if="backgroundPreview"
|
|
class="bg"
|
|
:src="backgroundPreview"
|
|
>
|
|
<div>
|
|
<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"
|
|
>
|
|
Error: {{ backgroundUploadError }}
|
|
<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>
|
|
<div>
|
|
<p>{{ $t('settings.current_password') }}</p>
|
|
<input
|
|
v-model="changePasswordInputs[0]"
|
|
type="password"
|
|
>
|
|
</div>
|
|
<div>
|
|
<p>{{ $t('settings.new_password') }}</p>
|
|
<input
|
|
v-model="changePasswordInputs[1]"
|
|
type="password"
|
|
>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<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 />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<mfa />
|
|
<div class="setting-item">
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="pleromaBackend"
|
|
:label="$t('settings.notifications')"
|
|
>
|
|
<div class="setting-item">
|
|
<div class="select-multiple">
|
|
<span class="label">{{ $t('settings.notification_setting') }}</span>
|
|
<ul class="option-list">
|
|
<li>
|
|
<input
|
|
id="notification-setting-follows"
|
|
v-model="notificationSettings.follows"
|
|
type="checkbox"
|
|
>
|
|
<label for="notification-setting-follows">
|
|
{{ $t('settings.notification_setting_follows') }}
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<input
|
|
id="notification-setting-followers"
|
|
v-model="notificationSettings.followers"
|
|
type="checkbox"
|
|
>
|
|
<label for="notification-setting-followers">
|
|
{{ $t('settings.notification_setting_followers') }}
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<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') }}
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<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') }}
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<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
|
|
: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
|
|
: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
|
|
: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
|
|
: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"
|
|
:user-id="row.item"
|
|
/>
|
|
</Autosuggest>
|
|
</div>
|
|
<BlockList
|
|
:refresh="true"
|
|
:get-key="identity"
|
|
>
|
|
<template
|
|
slot="header"
|
|
slot-scope="{selected}"
|
|
>
|
|
<div class="profile-edit-bulk-actions">
|
|
<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>
|
|
</ProgressButton>
|
|
<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>
|
|
</ProgressButton>
|
|
</div>
|
|
</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"
|
|
:user-id="row.item"
|
|
/>
|
|
</Autosuggest>
|
|
</div>
|
|
<MuteList
|
|
:refresh="true"
|
|
:get-key="identity"
|
|
>
|
|
<template
|
|
slot="header"
|
|
slot-scope="{selected}"
|
|
>
|
|
<div class="profile-edit-bulk-actions">
|
|
<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>
|
|
</ProgressButton>
|
|
<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>
|
|
</ProgressButton>
|
|
</div>
|
|
</template>
|
|
<template
|
|
slot="item"
|
|
slot-scope="{item}"
|
|
>
|
|
<MuteCard :user-id="item" />
|
|
</template>
|
|
<template slot="empty">
|
|
{{ $t('settings.no_mutes') }}
|
|
</template>
|
|
</MuteList>
|
|
</div>
|
|
</tab-switcher>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./user_settings.js">
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
|
|
.profile-edit {
|
|
.bio {
|
|
margin: 0;
|
|
}
|
|
|
|
.visibility-tray {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
input[type=file] {
|
|
padding: 5px;
|
|
height: auto;
|
|
}
|
|
|
|
.banner {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.uploading {
|
|
font-size: 1.5em;
|
|
margin: 0.25em;
|
|
}
|
|
|
|
.name-changer {
|
|
width: 100%;
|
|
}
|
|
|
|
.bg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.current-avatar {
|
|
display: block;
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: $fallback--avatarRadius;
|
|
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
|
}
|
|
|
|
.oauth-tokens {
|
|
width: 100%;
|
|
|
|
th {
|
|
text-align: left;
|
|
}
|
|
|
|
.actions {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&-usersearch-wrapper {
|
|
padding: 1em;
|
|
}
|
|
|
|
&-bulk-actions {
|
|
text-align: right;
|
|
padding: 0 1em;
|
|
min-height: 28px;
|
|
|
|
button {
|
|
width: 10em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|