srxl/akkoma-fe
1
0
Fork 1
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

eslint --fix + small fix

Browse source
This commit is contained in:
Henry Jameson 2020-05-25 03:43:55 +03:00
parent bcea2e4d12
commit e7ba4255bb
14 changed files with 927 additions and 921 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/settings_modal/settings_modal.js
View file

@ -12,7 +12,7 @@ const SettingsModal = {
modalPeeked () { modalPeeked () {
return this.$store.state.interface.settingsModalState === 'minimized' return this.$store.state.interface.settingsModalState === 'minimized'
} }
}, }
} }
export default SettingsModal export default SettingsModal

18
src/components/settings_modal/settings_modal.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<Modal <Modal
:is-open="modalActivated" :is-open="modalActivated"
class="settings-modal" class="settings-modal"
:class="{ peek: modalPeeked }" :class="{ peek: modalPeeked }"
:no-background="modalPeeked" :no-background="modalPeeked"
> >
<SettingsModalContent <SettingsModalContent
v-if="modalActivated" v-if="modalActivated"
class="modal-panel" class="modal-panel"
/> />
</Modal> </Modal>
</template> </template>
<script src="./settings_modal.js"></script> <script src="./settings_modal.js"></script>

41
src/components/settings_modal/settings_modal_content.vue
View file

@ -4,56 +4,63 @@
<span class="title"> <span class="title">
{{ $t('settings.settings') }} {{ $t('settings.settings') }}
</span> </span>
<button class="btn" @click="peekModal"> <button
class="btn"
@click="peekModal"
>
{{ $t('general.peek') }} {{ $t('general.peek') }}
</button> </button>
<button class="btn" @click="closeModal"> <button
class="btn"
@click="closeModal"
>
{{ $t('general.close') }} {{ $t('general.close') }}
</button> </button>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<tab-switcher <tab-switcher
class="settings_tab-switcher"
:sideTabBar="true"
:scrollableTabs="true"
ref="tabSwitcher" ref="tabSwitcher"
> class="settings_tab-switcher"
:side-tab-bar="true"
:scrollable-tabs="true"
>
<div <div
:label="$t('settings.general')" :label="$t('settings.general')"
> >
<GeneralTab /> <GeneralTab />
</div> </div>
<div v-if="isLoggedIn" <div
:label="$t('settings.profile_tab')" v-if="isLoggedIn"
> :label="$t('settings.profile_tab')"
>
<ProfileTab /> <ProfileTab />
</div> </div>
<div <div
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.security_tab')" :label="$t('settings.security_tab')"
> >
<SecurityTab /> <SecurityTab />
</div> </div>
<div <div
:label="$t('settings.filtering')" :label="$t('settings.filtering')"
> >
<FilteringTab /> <FilteringTab />
</div> </div>
<div <div
:label="$t('settings.theme')" :label="$t('settings.theme')"
> >
<ThemeTab /> <ThemeTab />
</div> </div>
<div <div
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.notifications')" :label="$t('settings.notifications')"
> >
<NotificationsTab /> <NotificationsTab />
</div> </div>
<div <div
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.data_import_export_tab')" :label="$t('settings.data_import_export_tab')"
> >
<DataImportExportTab /> <DataImportExportTab />
</div> </div>
<div <div
@ -61,12 +68,12 @@
:label="$t('settings.mutes_and_blocks')" :label="$t('settings.mutes_and_blocks')"
:fullHeight="true" :fullHeight="true"
class="full-height" class="full-height"
> >
<MutesAndBlocksTab /> <MutesAndBlocksTab />
</div> </div>
<div <div
:label="$t('settings.version.title')" :label="$t('settings.version.title')"
> >
<VersionTab /> <VersionTab />
</div> </div>
</tab-switcher> </tab-switcher>

64
src/components/settings_modal/tabs/data_import_export_tab.vue
View file

@ -1,42 +1,42 @@
<template> <template>
<div <div
:label="$t('settings.data_import_export_tab')" :label="$t('settings.data_import_export_tab')"
> >
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.follow_import') }}</h2> <h2>{{ $t('settings.follow_import') }}</h2>
<p>{{ $t('settings.import_followers_from_a_csv_file') }}</p> <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
<Importer <Importer
:submit-handler="importFollows" :submit-handler="importFollows"
:success-message="$t('settings.follows_imported')" :success-message="$t('settings.follows_imported')"
:error-message="$t('settings.follow_import_error')" :error-message="$t('settings.follow_import_error')"
/> />
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.follow_export') }}</h2> <h2>{{ $t('settings.follow_export') }}</h2>
<Exporter <Exporter
:get-content="getFollowsContent" :get-content="getFollowsContent"
filename="friends.csv" filename="friends.csv"
:export-button-label="$t('settings.follow_export_button')" :export-button-label="$t('settings.follow_export_button')"
/> />
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.block_import') }}</h2> <h2>{{ $t('settings.block_import') }}</h2>
<p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p> <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
<Importer <Importer
:submit-handler="importBlocks" :submit-handler="importBlocks"
:success-message="$t('settings.blocks_imported')" :success-message="$t('settings.blocks_imported')"
:error-message="$t('settings.block_import_error')" :error-message="$t('settings.block_import_error')"
/> />
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.block_export') }}</h2> <h2>{{ $t('settings.block_export') }}</h2>
<Exporter <Exporter
:get-content="getBlocksContent" :get-content="getBlocksContent"
filename="blocks.csv" filename="blocks.csv"
:export-button-label="$t('settings.block_export_button')" :export-button-label="$t('settings.block_export_button')"
/> />
</div>
</div> </div>
</div>
</template> </template>
<script src="./data_import_export_tab.js"></script> <script src="./data_import_export_tab.js"></script>

152
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -1,86 +1,86 @@
<template> <template>
<div :label="$t('settings.filtering')"> <div :label="$t('settings.filtering')">
<div class="setting-item"> <div class="setting-item">
<div class="select-multiple"> <div class="select-multiple">
<span class="label">{{ $t('settings.notification_visibility') }}</span> <span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<Checkbox v-model="notificationVisibility.likes"> <Checkbox v-model="notificationVisibility.likes">
{{ $t('settings.notification_visibility_likes') }} {{ $t('settings.notification_visibility_likes') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.repeats"> <Checkbox v-model="notificationVisibility.repeats">
{{ $t('settings.notification_visibility_repeats') }} {{ $t('settings.notification_visibility_repeats') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.follows"> <Checkbox v-model="notificationVisibility.follows">
{{ $t('settings.notification_visibility_follows') }} {{ $t('settings.notification_visibility_follows') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.mentions"> <Checkbox v-model="notificationVisibility.mentions">
{{ $t('settings.notification_visibility_mentions') }} {{ $t('settings.notification_visibility_mentions') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.moves"> <Checkbox v-model="notificationVisibility.moves">
{{ $t('settings.notification_visibility_moves') }} {{ $t('settings.notification_visibility_moves') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationVisibility.emojiReactions"> <Checkbox v-model="notificationVisibility.emojiReactions">
{{ $t('settings.notification_visibility_emoji_reactions') }} {{ $t('settings.notification_visibility_emoji_reactions') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
{{ $t('settings.replies_in_timeline') }} {{ $t('settings.replies_in_timeline') }}
<label <label
for="replyVisibility" for="replyVisibility"
class="select" class="select"
> >
<select <select
id="replyVisibility" id="replyVisibility"
v-model="replyVisibility" v-model="replyVisibility"
> >
<option <option
value="all" value="all"
selected selected
>{{ $t('settings.reply_visibility_all') }}</option> >{{ $t('settings.reply_visibility_all') }}</option>
<option value="following">{{ $t('settings.reply_visibility_following') }}</option> <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option> <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open" />
</label> </label>
</div>
<div>
<Checkbox v-model="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
</Checkbox>
</div>
<div>
<Checkbox v-model="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
</Checkbox>
</div>
</div> </div>
<div> <div class="setting-item">
<Checkbox v-model="hidePostStats"> <div>
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }} <p>{{ $t('settings.filtering_explanation') }}</p>
</Checkbox> <textarea
</div> id="muteWords"
<div> v-model="muteWordsString"
<Checkbox v-model="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
</Checkbox>
</div>
</div>
<div class="setting-item">
<div>
<p>{{ $t('settings.filtering_explanation') }}</p>
<textarea
id="muteWords"
v-model="muteWordsString"
/> />
</div> </div>
<div> <div>
<Checkbox v-model="hideFilteredStatuses"> <Checkbox v-model="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }} {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
</Checkbox> </Checkbox>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script src="./filtering_tab.js"></script> <script src="./filtering_tab.js"></script>

3
src/components/settings_modal/tabs/general_tab.js
View file

@ -5,7 +5,6 @@ import SharedComputedObject from './helpers/shared_computed_object.js'
const GeneralTab = { const GeneralTab = {
data () { data () {
const instance = this.$store.state.instance
return { return {
loopSilentAvailable: loopSilentAvailable:
// Firefox // Firefox
@ -13,7 +12,7 @@ const GeneralTab = {
// Chrome-likes // Chrome-likes
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') || Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
// Future spec, still not supported in Nightly 63 as of 08/2018 // Future spec, still not supported in Nightly 63 as of 08/2018
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'), Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
} }
}, },
components: { components: {

306
src/components/settings_modal/tabs/general_tab.vue
View file

@ -1,160 +1,160 @@
<template> <template>
<div :label="$t('settings.general')"> <div :label="$t('settings.general')">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.interface') }}</h2> <h2>{{ $t('settings.interface') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<interface-language-switcher /> <interface-language-switcher />
</li> </li>
<li v-if="instanceSpecificPanelPresent"> <li v-if="instanceSpecificPanelPresent">
<Checkbox v-model="hideISP"> <Checkbox v-model="hideISP">
{{ $t('settings.hide_isp') }} {{ $t('settings.hide_isp') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('nav.timeline') }}</h2> <h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="hideMutedPosts"> <Checkbox v-model="hideMutedPosts">
{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }} {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="collapseMessageWithSubject"> <Checkbox v-model="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }} {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="streaming"> <Checkbox v-model="streaming">
{{ $t('settings.streaming') }} {{ $t('settings.streaming') }}
</Checkbox> </Checkbox>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<Checkbox <Checkbox
v-model="pauseOnUnfocused" v-model="pauseOnUnfocused"
:disabled="!streaming" :disabled="!streaming"
> >
{{ $t('settings.pause_on_unfocused') }} {{ $t('settings.pause_on_unfocused') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<Checkbox v-model="useStreamingApi"> <Checkbox v-model="useStreamingApi">
{{ $t('settings.useStreamingApi') }} {{ $t('settings.useStreamingApi') }}
<br> <br>
<small> <small>
{{ $t('settings.useStreamingApiWarning') }} {{ $t('settings.useStreamingApiWarning') }}
</small> </small>
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="autoLoad"> <Checkbox v-model="autoLoad">
{{ $t('settings.autoload') }} {{ $t('settings.autoload') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="hoverPreview"> <Checkbox v-model="hoverPreview">
{{ $t('settings.reply_link_preview') }} {{ $t('settings.reply_link_preview') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="emojiReactionsOnTimeline"> <Checkbox v-model="emojiReactionsOnTimeline">
{{ $t('settings.emoji_reactions_on_timeline') }} {{ $t('settings.emoji_reactions_on_timeline') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.composing') }}</h2> <h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<Checkbox v-model="scopeCopy"> <Checkbox v-model="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }} {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="alwaysShowSubjectInput"> <Checkbox v-model="alwaysShowSubjectInput">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }} {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<div> <div>
{{ $t('settings.subject_line_behavior') }} {{ $t('settings.subject_line_behavior') }}
<label <label
for="subjectLineBehavior" for="subjectLineBehavior"
class="select" class="select"
> >
<select <select
id="subjectLineBehavior" id="subjectLineBehavior"
v-model="subjectLineBehavior" v-model="subjectLineBehavior"
> >
<option value="email"> <option value="email">
{{ $t('settings.subject_line_email') }} {{ $t('settings.subject_line_email') }}
{{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
<option value="masto"> <option value="masto">
{{ $t('settings.subject_line_mastodon') }} {{ $t('settings.subject_line_mastodon') }}
{{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
<option value="noop"> <option value="noop">
{{ $t('settings.subject_line_noop') }} {{ $t('settings.subject_line_noop') }}
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open" />
</label> </label>
</div> </div>
</li> </li>
<li v-if="postFormats.length > 0"> <li v-if="postFormats.length > 0">
<div> <div>
{{ $t('settings.post_status_content_type') }} {{ $t('settings.post_status_content_type') }}
<label <label
for="postContentType" for="postContentType"
class="select" class="select"
> >
<select <select
id="postContentType" id="postContentType"
v-model="postContentType" v-model="postContentType"
> >
<option <option
v-for="postFormat in postFormats" v-for="postFormat in postFormats"
:key="postFormat" :key="postFormat"
:value="postFormat" :value="postFormat"
> >
{{ $t(`post_status.content_type["${postFormat}"]`) }} {{ $t(`post_status.content_type["${postFormat}"]`) }}
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }} {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open" />
</label> </label>
</div> </div>
</li> </li>
<li> <li>
<Checkbox v-model="minimalScopesMode"> <Checkbox v-model="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }} {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="autohideFloatingPostButton"> <Checkbox v-model="autohideFloatingPostButton">
{{ $t('settings.autohide_floating_post_button') }} {{ $t('settings.autohide_floating_post_button') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="padEmoji"> <Checkbox v-model="padEmoji">
{{ $t('settings.pad_emoji') }} {{ $t('settings.pad_emoji') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.attachments') }}</h2> <h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
@ -178,7 +178,7 @@
type="number" type="number"
min="0" min="0"
step="1" step="1"
> >
</li> </li>
<li> <li>
<Checkbox v-model="hideNsfw"> <Checkbox v-model="hideNsfw">
@ -190,7 +190,7 @@
<Checkbox <Checkbox
v-model="preloadImage" v-model="preloadImage"
:disabled="!hideNsfw" :disabled="!hideNsfw"
> >
{{ $t('settings.preload_images') }} {{ $t('settings.preload_images') }}
</Checkbox> </Checkbox>
</li> </li>
@ -198,7 +198,7 @@
<Checkbox <Checkbox
v-model="useOneClickNsfw" v-model="useOneClickNsfw"
:disabled="!hideNsfw" :disabled="!hideNsfw"
> >
{{ $t('settings.use_one_click_nsfw') }} {{ $t('settings.use_one_click_nsfw') }}
</Checkbox> </Checkbox>
</li> </li>
@ -215,18 +215,18 @@
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<Checkbox <Checkbox
v-model="loopVideoSilentOnly" v-model="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable" :disabled="!loopVideo || !loopSilentAvailable"
> >
{{ $t('settings.loop_video_silent_only') }} {{ $t('settings.loop_video_silent_only') }}
</Checkbox> </Checkbox>
<div <div
v-if="!loopSilentAvailable" v-if="!loopSilentAvailable"
class="unavailable" class="unavailable"
> >
<i class="icon-globe" />! {{ $t('settings.limited_availability') }} <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
</div> </div>
</li> </li>

300
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View file

@ -1,175 +1,175 @@
<template> <template>
<tab-switcher <tab-switcher
:scrollableTabs="true" :scrollable-tabs="true"
class="mutes-and-blocks-tab" class="mutes-and-blocks-tab"
> >
<div :label="$t('settings.blocks_tab')"> <div :label="$t('settings.blocks_tab')">
<div class="usersearch-wrapper"> <div class="usersearch-wrapper">
<Autosuggest <Autosuggest
:filter="filterUnblockedUsers" :filter="filterUnblockedUsers"
:query="queryUserIds" :query="queryUserIds"
:placeholder="$t('settings.search_user_to_block')" :placeholder="$t('settings.search_user_to_block')"
> >
<BlockCard <BlockCard
slot-scope="row" slot-scope="row"
:user-id="row.item" :user-id="row.item"
/> />
</Autosuggest> </Autosuggest>
</div> </div>
<BlockList <BlockList
:refresh="true" :refresh="true"
:get-key="i => i" :get-key="i => i"
> >
<template <template
slot="header" slot="header"
slot-scope="{selected}" slot-scope="{selected}"
> >
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default bulk-action-button" class="btn btn-default bulk-action-button"
:click="() => blockUsers(selected)" :click="() => blockUsers(selected)"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
<template slot="progress"> <template slot="progress">
{{ $t('user_card.block_progress') }} {{ $t('user_card.block_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn btn-default"
:click="() => unblockUsers(selected)" :click="() => unblockUsers(selected)"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
<template slot="progress"> <template slot="progress">
{{ $t('user_card.unblock_progress') }} {{ $t('user_card.unblock_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template
slot="item" slot="item"
slot-scope="{item}" slot-scope="{item}"
> >
<BlockCard :user-id="item" /> <BlockCard :user-id="item" />
</template> </template>
<template slot="empty"> <template slot="empty">
{{ $t('settings.no_blocks') }} {{ $t('settings.no_blocks') }}
</template> </template>
</BlockList> </BlockList>
</div> </div>
<div :label="$t('settings.mutes_tab')"> <div :label="$t('settings.mutes_tab')">
<tab-switcher> <tab-switcher>
<div label="Users"> <div label="Users">
<div class="usersearch-wrapper"> <div class="usersearch-wrapper">
<Autosuggest <Autosuggest
:filter="filterUnMutedUsers" :filter="filterUnMutedUsers"
:query="queryUserIds" :query="queryUserIds"
:placeholder="$t('settings.search_user_to_mute')" :placeholder="$t('settings.search_user_to_mute')"
> >
<MuteCard <MuteCard
slot-scope="row" slot-scope="row"
:user-id="row.item" :user-id="row.item"
/> />
</Autosuggest> </Autosuggest>
</div> </div>
<MuteList <MuteList
:refresh="true" :refresh="true"
:get-key="i => i" :get-key="i => i"
> >
<template <template
slot="header" slot="header"
slot-scope="{selected}" slot-scope="{selected}"
> >
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn btn-default"
:click="() => muteUsers(selected)" :click="() => muteUsers(selected)"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
<template slot="progress"> <template slot="progress">
{{ $t('user_card.mute_progress') }} {{ $t('user_card.mute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn btn-default"
:click="() => unmuteUsers(selected)" :click="() => unmuteUsers(selected)"
> >
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
<template slot="progress"> <template slot="progress">
{{ $t('user_card.unmute_progress') }} {{ $t('user_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template>
<template
slot="item"
slot-scope="{item}"
>
<MuteCard :user-id="item" />
</template>
<template slot="empty">
{{ $t('settings.no_mutes') }}
</template>
</MuteList>
</div>
<div :label="$t('settings.domain_mutes')">
<div class="domain-mute-form">
<input
v-model="newDomainToMute"
:placeholder="$t('settings.type_domains_to_mute')"
type="text"
@keyup.enter="muteDomain"
>
<ProgressButton
class="btn btn-default domain-mute-button"
:click="muteDomain"
>
{{ $t('domain_mute_card.mute') }}
<template slot="progress">
{{ $t('domain_mute_card.mute_progress') }}
</template> </template>
</ProgressButton> <template
slot="item"
slot-scope="{item}"
>
<MuteCard :user-id="item" />
</template>
<template slot="empty">
{{ $t('settings.no_mutes') }}
</template>
</MuteList>
</div> </div>
<DomainMuteList
:refresh="true" <div :label="$t('settings.domain_mutes')">
:get-key="i => i" <div class="domain-mute-form">
<input
v-model="newDomainToMute"
:placeholder="$t('settings.type_domains_to_mute')"
type="text"
@keyup.enter="muteDomain"
>
<ProgressButton
class="btn btn-default domain-mute-button"
:click="muteDomain"
>
{{ $t('domain_mute_card.mute') }}
<template slot="progress">
{{ $t('domain_mute_card.mute_progress') }}
</template>
</ProgressButton>
</div>
<DomainMuteList
:refresh="true"
:get-key="i => i"
> >
<template <template
slot="header" slot="header"
slot-scope="{selected}" slot-scope="{selected}"
> >
<div class="bulk-actions"> <div class="bulk-actions">
<ProgressButton <ProgressButton
v-if="selected.length > 0" v-if="selected.length > 0"
class="btn btn-default" class="btn btn-default"
:click="() => unmuteDomains(selected)" :click="() => unmuteDomains(selected)"
> >
{{ $t('domain_mute_card.unmute') }} {{ $t('domain_mute_card.unmute') }}
<template slot="progress"> <template slot="progress">
{{ $t('domain_mute_card.unmute_progress') }} {{ $t('domain_mute_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template
slot="item" slot="item"
slot-scope="{item}" slot-scope="{item}"
> >
<DomainMuteCard :domain="item" /> <DomainMuteCard :domain="item" />
</template> </template>
<template slot="empty"> <template slot="empty">
{{ $t('settings.no_mutes') }} {{ $t('settings.no_mutes') }}
</template> </template>
</DomainMuteList> </DomainMuteList>
</div> </div>
</tab-switcher> </tab-switcher>
</div> </div>
</tab-switcher> </tab-switcher>
</template> </template>
<script src="./mutes_and_blocks_tab.js"></script> <script src="./mutes_and_blocks_tab.js"></script>

94
src/components/settings_modal/tabs/notifications_tab.vue
View file

@ -1,53 +1,53 @@
<template> <template>
<div :label="$t('settings.notifications')"> <div :label="$t('settings.notifications')">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.notification_setting_filters') }}</h2> <h2>{{ $t('settings.notification_setting_filters') }}</h2>
<div class="select-multiple"> <div class="select-multiple">
<span class="label">{{ $t('settings.notification_setting') }}</span> <span class="label">{{ $t('settings.notification_setting') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<Checkbox v-model="notificationSettings.follows"> <Checkbox v-model="notificationSettings.follows">
{{ $t('settings.notification_setting_follows') }} {{ $t('settings.notification_setting_follows') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationSettings.followers"> <Checkbox v-model="notificationSettings.followers">
{{ $t('settings.notification_setting_followers') }} {{ $t('settings.notification_setting_followers') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationSettings.non_follows"> <Checkbox v-model="notificationSettings.non_follows">
{{ $t('settings.notification_setting_non_follows') }} {{ $t('settings.notification_setting_non_follows') }}
</Checkbox> </Checkbox>
</li> </li>
<li> <li>
<Checkbox v-model="notificationSettings.non_followers"> <Checkbox v-model="notificationSettings.non_followers">
{{ $t('settings.notification_setting_non_followers') }} {{ $t('settings.notification_setting_non_followers') }}
</Checkbox> </Checkbox>
</li> </li>
</ul> </ul>
</div>
</div>
<div class="setting-item">
<h2>{{ $t('settings.notification_setting_privacy') }}</h2>
<p>
<Checkbox v-model="notificationSettings.privacy_option">
{{ $t('settings.notification_setting_privacy_option') }}
</Checkbox>
</p>
</div>
<div class="setting-item">
<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> </div>
<div class="setting-item">
<h2>{{ $t('settings.notification_setting_privacy') }}</h2>
<p>
<Checkbox v-model="notificationSettings.privacy_option">
{{ $t('settings.notification_setting_privacy_option') }}
</Checkbox>
</p>
</div>
<div class="setting-item">
<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>
</template> </template>
<script src="./notifications_tab.js"></script> <script src="./notifications_tab.js"></script>

2
src/components/settings_modal/tabs/profile_tab.js
View file

@ -32,7 +32,7 @@ const ProfileTab = {
background: null, background: null,
backgroundPreview: null, backgroundPreview: null,
bannerUploadError: null, bannerUploadError: null,
backgroundUploadError: null, backgroundUploadError: null
} }
}, },
components: { components: {

388
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -1,212 +1,212 @@
<template> <template>
<div class="profile-tab"> <div class="profile-tab">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.name_bio') }}</h2> <h2>{{ $t('settings.name_bio') }}</h2>
<p>{{ $t('settings.name') }}</p> <p>{{ $t('settings.name') }}</p>
<EmojiInput <EmojiInput
v-model="newName"
enable-emoji-picker
:suggest="emojiSuggestor"
>
<input
id="username"
v-model="newName" v-model="newName"
classname="name-changer" enable-emoji-picker
> :suggest="emojiSuggestor"
</EmojiInput>
<p>{{ $t('settings.bio') }}</p>
<EmojiInput
v-model="newBio"
enable-emoji-picker
:suggest="emojiUserSuggestor"
> >
<textarea <input
v-model="newBio" id="username"
classname="bio" v-model="newName"
/> classname="name-changer"
</EmojiInput>
<p>
<Checkbox v-model="newLocked">
{{ $t('settings.lock_account_description') }}
</Checkbox>
</p>
<div>
<label for="default-vis">{{ $t('settings.default_vis') }}</label>
<div
id="default-vis"
class="visibility-tray"
> >
<scope-selector </EmojiInput>
:show-all="true" <p>{{ $t('settings.bio') }}</p>
:user-default="newDefaultScope" <EmojiInput
:initial-scope="newDefaultScope" v-model="newBio"
:on-scope-change="changeVis" enable-emoji-picker
:suggest="emojiUserSuggestor"
>
<textarea
v-model="newBio"
classname="bio"
/>
</EmojiInput>
<p>
<Checkbox v-model="newLocked">
{{ $t('settings.lock_account_description') }}
</Checkbox>
</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>
<Checkbox v-model="newNoRichText">
{{ $t('settings.no_rich_text_description') }}
</Checkbox>
</p>
<p>
<Checkbox v-model="hideFollows">
{{ $t('settings.hide_follows_description') }}
</Checkbox>
</p>
<p class="setting-subitem">
<Checkbox
v-model="hideFollowsCount"
:disabled="!hideFollows"
>
{{ $t('settings.hide_follows_count_description') }}
</Checkbox>
</p>
<p>
<Checkbox v-model="hideFollowers">
{{ $t('settings.hide_followers_description') }}
</Checkbox>
</p>
<p class="setting-subitem">
<Checkbox
v-model="hideFollowersCount"
:disabled="!hideFollowers"
>
{{ $t('settings.hide_followers_count_description') }}
</Checkbox>
</p>
<p>
<Checkbox v-model="allowFollowingMove">
{{ $t('settings.allow_following_move') }}
</Checkbox>
</p>
<p v-if="role === 'admin' || role === 'moderator'">
<Checkbox v-model="showRole">
<template v-if="role === 'admin'">
{{ $t('settings.show_admin_badge') }}
</template>
<template v-if="role === 'moderator'">
{{ $t('settings.show_moderator_badge') }}
</template>
</Checkbox>
</p>
<p>
<Checkbox v-model="discoverable">
{{ $t('settings.discoverable') }}
</Checkbox>
</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> </div>
<p> <div class="setting-item">
<Checkbox v-model="newNoRichText"> <h2>{{ $t('settings.profile_background') }}</h2>
{{ $t('settings.no_rich_text_description') }} <p>{{ $t('settings.set_new_profile_background') }}</p>
</Checkbox> <img
</p> v-if="backgroundPreview"
<p> class="bg"
<Checkbox v-model="hideFollows"> :src="backgroundPreview"
{{ $t('settings.hide_follows_description') }} >
</Checkbox> <div>
</p> <input
<p class="setting-subitem"> type="file"
<Checkbox @change="uploadFile('background', $event)"
v-model="hideFollowsCount"
:disabled="!hideFollows"
> >
{{ $t('settings.hide_follows_count_description') }} </div>
</Checkbox>
</p>
<p>
<Checkbox v-model="hideFollowers">
{{ $t('settings.hide_followers_description') }}
</Checkbox>
</p>
<p class="setting-subitem">
<Checkbox
v-model="hideFollowersCount"
:disabled="!hideFollowers"
>
{{ $t('settings.hide_followers_count_description') }}
</Checkbox>
</p>
<p>
<Checkbox v-model="allowFollowingMove">
{{ $t('settings.allow_following_move') }}
</Checkbox>
</p>
<p v-if="role === 'admin' || role === 'moderator'">
<Checkbox v-model="showRole">
<template v-if="role === 'admin'">
{{ $t('settings.show_admin_badge') }}
</template>
<template v-if="role === 'moderator'">
{{ $t('settings.show_moderator_badge') }}
</template>
</Checkbox>
</p>
<p>
<Checkbox v-model="discoverable">
{{ $t('settings.discoverable') }}
</Checkbox>
</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 <i
class="button-icon icon-cancel" v-if="backgroundUploading"
@click="clearUploadError('banner')" class=" icon-spin4 animate-spin uploading"
/>
</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 <button
v-else-if="backgroundPreview" v-else-if="backgroundPreview"
class="btn btn-default" class="btn btn-default"
@click="submitBg" @click="submitBg"
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
<div <div
v-if="backgroundUploadError" v-if="backgroundUploadError"
class="alert error" class="alert error"
> >
Error: {{ backgroundUploadError }} Error: {{ backgroundUploadError }}
<i <i
class="button-icon icon-cancel" class="button-icon icon-cancel"
@click="clearUploadError('background')" @click="clearUploadError('background')"
/> />
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script src="./profile_tab.js"></script> <script src="./profile_tab.js"></script>

260
src/components/settings_modal/tabs/security_tab/security_tab.vue
View file

@ -1,142 +1,142 @@
<template> <template>
<div :label="$t('settings.security_tab')"> <div :label="$t('settings.security_tab')">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.change_email') }}</h2> <h2>{{ $t('settings.change_email') }}</h2>
<div> <div>
<p>{{ $t('settings.new_email') }}</p> <p>{{ $t('settings.new_email') }}</p>
<input <input
v-model="newEmail" v-model="newEmail"
type="email" type="email"
autocomplete="email" autocomplete="email"
> >
</div> </div>
<div> <div>
<p>{{ $t('settings.current_password') }}</p> <p>{{ $t('settings.current_password') }}</p>
<input <input
v-model="changeEmailPassword" v-model="changeEmailPassword"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
>
</div>
<button
class="btn btn-default"
@click="changeEmail"
>
{{ $t('general.submit') }}
</button>
<p v-if="changedEmail">
{{ $t('settings.changed_email') }}
</p>
<template v-if="changeEmailError !== false">
<p>{{ $t('settings.change_email_error') }}</p>
<p>{{ changeEmailError }}</p>
</template>
</div>
<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"
> >
</div>
<button <button
class="btn btn-default" class="btn btn-default"
@click="deleteAccount" @click="changeEmail"
>
{{ $t('general.submit') }}
</button>
<p v-if="changedEmail">
{{ $t('settings.changed_email') }}
</p>
<template v-if="changeEmailError !== false">
<p>{{ $t('settings.change_email_error') }}</p>
<p>{{ changeEmailError }}</p>
</template>
</div>
<div class="setting-item">
<h2>{{ $t('settings.change_password') }}</h2>
<div>
<p>{{ $t('settings.current_password') }}</p>
<input
v-model="changePasswordInputs[0]"
type="password"
> >
{{ $t('settings.delete_account') }} </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> </button>
</div> </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>
</template> </template>
<script src="./security_tab.js"></script> <script src="./security_tab.js"></script>

168
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -1,90 +1,90 @@
<template> <template>
<div class="theme-tab"> <div class="theme-tab">
<div class="presets-container"> <div class="presets-container">
<div class="save-load"> <div class="save-load">
<div <div
v-if="themeWarning" v-if="themeWarning"
class="theme-warning" class="theme-warning"
> >
<div class="alert warning"> <div class="alert warning">
{{ themeWarningHelp }} {{ themeWarningHelp }}
</div>
<div class="buttons">
<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
<button
class="btn"
@click="forceLoad"
>
{{ $t('settings.style.switcher.use_source') }}
</button>
<button
class="btn"
@click="forceSnapshot"
>
{{ $t('settings.style.switcher.use_snapshot') }}
</button>
</template>
<template v-else-if="themeWarning.noActionsPossible">
<button
class="btn"
@click="dismissWarning"
>
{{ $t('general.dismiss') }}
</button>
</template>
<template v-else>
<button
class="btn"
@click="forceLoad"
>
{{ $t('settings.style.switcher.load_theme') }}
</button>
<button
class="btn"
@click="dismissWarning"
>
{{ $t('settings.style.switcher.keep_as_is') }}
</button>
</template>
</div>
</div>
<ExportImport
:export-object="exportedTheme"
:export-label="$t(&quot;settings.export_theme&quot;)"
:import-label="$t(&quot;settings.import_theme&quot;)"
:import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
:on-import="onImport"
:validator="importValidator"
>
<template slot="before">
<div class="presets">
{{ $t('settings.presets') }}
<label
for="preset-switcher"
class="select"
>
<select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
>
<option
v-for="style in availableStyles"
:key="style.name"
:value="style"
:style="{
backgroundColor: style[1] || (style.theme || style.source).colors.bg,
color: style[3] || (style.theme || style.source).colors.text
}"
>
{{ style[0] || style.name }}
</option>
</select>
<i class="icon-down-open" />
</label>
</div> </div>
</template> <div class="buttons">
</ExportImport> <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
<button
class="btn"
@click="forceLoad"
>
{{ $t('settings.style.switcher.use_source') }}
</button>
<button
class="btn"
@click="forceSnapshot"
>
{{ $t('settings.style.switcher.use_snapshot') }}
</button>
</template>
<template v-else-if="themeWarning.noActionsPossible">
<button
class="btn"
@click="dismissWarning"
>
{{ $t('general.dismiss') }}
</button>
</template>
<template v-else>
<button
class="btn"
@click="forceLoad"
>
{{ $t('settings.style.switcher.load_theme') }}
</button>
<button
class="btn"
@click="dismissWarning"
>
{{ $t('settings.style.switcher.keep_as_is') }}
</button>
</template>
</div>
</div>
<ExportImport
:export-object="exportedTheme"
:export-label="$t(&quot;settings.export_theme&quot;)"
:import-label="$t(&quot;settings.import_theme&quot;)"
:import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
:on-import="onImport"
:validator="importValidator"
>
<template slot="before">
<div class="presets">
{{ $t('settings.presets') }}
<label
for="preset-switcher"
class="select"
>
<select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
>
<option
v-for="style in availableStyles"
:key="style.name"
:value="style"
:style="{
backgroundColor: style[1] || (style.theme || style.source).colors.bg,
color: style[3] || (style.theme || style.source).colors.text
}"
>
{{ style[0] || style.name }}
</option>
</select>
<i class="icon-down-open" />
</label>
</div>
</template>
</ExportImport>
</div> </div>
<div class="save-load-options"> <div class="save-load-options">
<span class="keep-option"> <span class="keep-option">

50
src/components/settings_modal/tabs/version_tab.vue
View file

@ -1,31 +1,31 @@
<template> <template>
<div :label="$t('settings.version.title')"> <div :label="$t('settings.version.title')">
<div class="setting-item"> <div class="setting-item">
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<p>{{ $t('settings.version.backend_version') }}</p> <p>{{ $t('settings.version.backend_version') }}</p>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<a <a
:href="backendVersionLink" :href="backendVersionLink"
target="_blank" target="_blank"
>{{ backendVersion }}</a> >{{ backendVersion }}</a>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<p>{{ $t('settings.version.frontend_version') }}</p> <p>{{ $t('settings.version.frontend_version') }}</p>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<a <a
:href="frontendVersionLink" :href="frontendVersionLink"
target="_blank" target="_blank"
>{{ frontendVersion }}</a> >{{ frontendVersion }}</a>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
</template> </template>
<script src="./version_tab.js"> <script src="./version_tab.js">