diff options
Diffstat (limited to 'src/components')
23 files changed, 283 insertions, 57 deletions
diff --git a/src/components/dm_timeline/dm_timeline.js b/src/components/dm_timeline/dm_timeline.js new file mode 100644 index 00000000..8b5393a9 --- /dev/null +++ b/src/components/dm_timeline/dm_timeline.js @@ -0,0 +1,14 @@ +import Timeline from '../timeline/timeline.vue' + +const DMs = { + computed: { + timeline () { + return this.$store.state.statuses.timelines.dms + } + }, + components: { + Timeline + } +} + +export default DMs diff --git a/src/components/dm_timeline/dm_timeline.vue b/src/components/dm_timeline/dm_timeline.vue new file mode 100644 index 00000000..f03da4d3 --- /dev/null +++ b/src/components/dm_timeline/dm_timeline.vue @@ -0,0 +1,5 @@ +<template> + <Timeline :title="$t('nav.dms')" v-bind:timeline="timeline" v-bind:timeline-name="'dms'"/> +</template> + +<script src="./dm_timeline.js"></script> diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js index 1266be90..a2b4cb65 100644 --- a/src/components/favorite_button/favorite_button.js +++ b/src/components/favorite_button/favorite_button.js @@ -2,6 +2,9 @@ const FavoriteButton = { props: ['status', 'loggedIn'], data () { return { + hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined' + ? this.$store.state.instance.hidePostStats + : this.$store.state.config.hidePostStats, animated: false } }, diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 1e1a6970..71cb875e 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -1,11 +1,11 @@ <template> <div v-if="loggedIn"> <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()'/> - <span v-if='status.fave_num > 0'>{{status.fave_num}}</span> + <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> </div> <div v-else> <i :class='classes' class='favorite-button'/> - <span v-if='status.fave_num > 0'>{{status.fave_num}}</span> + <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> </div> </template> diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 4405fb92..49868aed 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -1,22 +1,40 @@ +import oauthApi from '../../services/new_api/oauth.js' const LoginForm = { data: () => ({ user: {}, authError: false }), computed: { + loginMethod () { return this.$store.state.instance.loginMethod }, loggingIn () { return this.$store.state.users.loggingIn }, registrationOpen () { return this.$store.state.instance.registrationOpen } }, methods: { + oAuthLogin () { + oauthApi.login({ + oauth: this.$store.state.oauth, + instance: this.$store.state.instance.server, + commit: this.$store.commit + }) + }, submit () { - this.$store.dispatch('loginUser', this.user).then( - () => {}, - (error) => { - this.authError = error - this.user.username = '' - this.user.password = '' - } - ) + const data = { + oauth: this.$store.state.oauth, + instance: this.$store.state.instance.server + } + oauthApi.getOrCreateApp(data).then((app) => { + oauthApi.getTokenWithCredentials( + { + app, + instance: data.instance, + username: this.user.username, + password: this.user.password}) + .then((result) => { + this.$store.commit('setToken', result.access_token) + this.$store.dispatch('loginUser', result.access_token) + this.$router.push('/main/friends') + }) + }) } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index b7fed48a..12971882 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -5,7 +5,7 @@ {{$t('login.login')}} </div> <div class="panel-body"> - <form v-on:submit.prevent='submit(user)' class='login-form'> + <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'> <div class='form-group'> <label for='username'>{{$t('login.username')}}</label> <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')"> @@ -20,8 +20,17 @@ <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button> </div> </div> - <div v-if="authError" class='form-group'> - <div class='alert error'>{{authError}}</div> + </form> + + <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin' class="login-form"> + <div class="form-group"> + <p>{{$t('login.description')}}</p> + </div> + <div class='form-group'> + <div class='login-bottom'> + <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div> + <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button> + </div> </div> </form> </div> diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 0b188f9a..93deaf97 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -12,6 +12,11 @@ {{ $t("nav.mentions") }} </router-link> </li> + <li v-if='currentUser'> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + {{ $t("nav.dms") }} + </router-link> + </li> <li v-if='currentUser && currentUser.locked'> <router-link to='/friend-requests'> {{ $t("nav.friend_requests") }} diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js new file mode 100644 index 00000000..7a5132ad --- /dev/null +++ b/src/components/oauth_callback/oauth_callback.js @@ -0,0 +1,20 @@ +import oauth from '../../services/new_api/oauth.js' + +const oac = { + props: ['code'], + mounted () { + if (this.code) { + oauth.getToken({ + app: this.$store.state.oauth, + instance: this.$store.state.instance.server, + code: this.code + }).then((result) => { + this.$store.commit('setToken', result.access_token) + this.$store.dispatch('loginUser', result.access_token) + this.$router.push('/main/friends') + }) + } + } +} + +export default oac diff --git a/src/components/oauth_callback/oauth_callback.vue b/src/components/oauth_callback/oauth_callback.vue new file mode 100644 index 00000000..9c806916 --- /dev/null +++ b/src/components/oauth_callback/oauth_callback.vue @@ -0,0 +1,5 @@ +<template> + <h1>...</h1> +</template> + +<script src="./oauth_callback.js"></script> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index a84e764c..fa86ee59 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -24,7 +24,7 @@ const PostStatusForm = { 'replyTo', 'repliedUser', 'attentions', - 'messageScope', + 'copyMessageScope', 'subject' ], components: { @@ -46,6 +46,10 @@ const PostStatusForm = { statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) } + const scope = (this.copyMessageScope && this.$store.state.config.copyScope || this.copyMessageScope === 'direct') + ? this.copyMessageScope + : this.$store.state.users.currentUser.default_scope + return { dropFiles: [], submitDisabled: false, @@ -53,12 +57,12 @@ const PostStatusForm = { posting: false, highlighted: 0, newStatus: { - spoilerText: this.subject, + spoilerText: this.subject || '', status: statusText, contentType: 'text/plain', nsfw: false, files: [], - visibility: this.messageScope || this.$store.state.users.currentUser.default_scope + visibility: scope }, caret: 0 } @@ -128,6 +132,9 @@ const PostStatusForm = { statusLength () { return this.newStatus.status.length }, + spoilerTextLength () { + return this.newStatus.spoilerText.length + }, statusLengthLimit () { return this.$store.state.instance.textlimit }, @@ -135,10 +142,10 @@ const PostStatusForm = { return this.statusLengthLimit > 0 }, charactersLeft () { - return this.statusLengthLimit - this.statusLength + return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength) }, isOverLengthLimit () { - return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit) + return this.hasStatusLengthLimit && (this.charactersLeft < 0) }, scopeOptionsEnabled () { return this.$store.state.instance.scopeOptionsEnabled @@ -223,6 +230,7 @@ const PostStatusForm = { if (!data.error) { this.newStatus = { status: '', + spoilerText: '', files: [], visibility: newStatus.visibility, contentType: newStatus.contentType diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 8f59878d..f7f8a720 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,3 +1,5 @@ +import oauthApi from '../../services/new_api/oauth.js' + const registration = { data: () => ({ user: {}, @@ -25,9 +27,23 @@ const registration = { this.$store.state.api.backendInteractor.register(this.user).then( (response) => { if (response.ok) { - this.$store.dispatch('loginUser', this.user) - this.$router.push('/main/all') - this.registering = false + const data = { + oauth: this.$store.state.oauth, + instance: this.$store.state.instance.server + } + oauthApi.getOrCreateApp(data).then((app) => { + oauthApi.getTokenWithCredentials( + { + app, + instance: data.instance, + username: this.user.username, + password: this.user.password}) + .then((result) => { + this.$store.commit('setToken', result.access_token) + this.$store.dispatch('loginUser', result.access_token) + this.$router.push('/main/friends') + }) + }) } else { this.registering = false response.json().then((data) => { diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index cafa9cbc..eb4e4b41 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -2,6 +2,9 @@ const RetweetButton = { props: ['status', 'loggedIn', 'visibility'], data () { return { + hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined' + ? this.$store.state.instance.hidePostStats + : this.$store.state.config.hidePostStats, animated: false } }, diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index ee5722bd..5b1e64b8 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -2,7 +2,7 @@ <div v-if="loggedIn"> <template v-if="visibility !== 'private' && visibility !== 'direct'"> <i :class='classes' class='icon-retweet rt-active' v-on:click.prevent='retweet()'></i> - <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span> + <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> </template> <template v-else> <i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i> @@ -10,7 +10,7 @@ </div> <div v-else-if="!loggedIn"> <i :class='classes' class='icon-retweet'></i> - <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span> + <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> </div> </template> diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index a24bc265..910eea63 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -13,6 +13,14 @@ const settings = { hideAttachmentsLocal: user.hideAttachments, hideAttachmentsInConvLocal: user.hideAttachmentsInConv, hideNsfwLocal: user.hideNsfw, + hidePostStatsLocal: typeof user.hidePostStats === 'undefined' + ? instance.hidePostStats + : user.hidePostStats, + hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats), + hideUserStatsLocal: typeof user.hideUserStats === 'undefined' + ? instance.hideUserStats + : user.hideUserStats, + hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats), notificationVisibilityLocal: user.notificationVisibility, replyVisibilityLocal: user.replyVisibility, loopVideoLocal: user.loopVideo, @@ -26,6 +34,12 @@ const settings = { ? instance.collapseMessageWithSubject : user.collapseMessageWithSubject, collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject), + subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined' + ? instance.subjectLineBehavior + : user.subjectLineBehavior, + subjectLineBehaviorDefault: instance.subjectLineBehavior, + scopeCopyLocal: user.scopeCopy, + scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy), stopGifs: user.stopGifs, loopSilentAvailable: // Firefox @@ -56,6 +70,12 @@ const settings = { hideAttachmentsInConvLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value }) }, + hidePostStatsLocal (value) { + this.$store.dispatch('setOption', { name: 'hidePostStats', value }) + }, + hideUserStatsLocal (value) { + this.$store.dispatch('setOption', { name: 'hideUserStats', value }) + }, hideNsfwLocal (value) { this.$store.dispatch('setOption', { name: 'hideNsfw', value }) }, @@ -99,6 +119,12 @@ const settings = { collapseMessageWithSubjectLocal (value) { this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value }) }, + scopeCopyLocal (value) { + this.$store.dispatch('setOption', { name: 'scopeCopy', value }) + }, + subjectLineBehaviorLocal (value) { + this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value }) + }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) } diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 2097fd22..7a955203 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -54,6 +54,41 @@ </li> </ul> </div> + + <div class="setting-item"> + <h2>{{$t('settings.composing')}}</h2> + <ul class="setting-list"> + <li> + <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal"> + <label for="scopeCopy"> + {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}} + </label> + </li> + <li> + <div> + {{$t('settings.subject_line_behavior')}} + <label for="subjectLineBehavior" class="select"> + <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal"> + <option value="email"> + {{$t('settings.subject_line_email')}} + {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}} + </option> + <option value="masto"> + {{$t('settings.subject_line_mastodon')}} + {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}} + </option> + <option value="noop"> + {{$t('settings.subject_line_noop')}} + {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}} + </option> + </select> + <i class="icon-down-open"/> + </label> + </div> + </li> + </ul> + </div> + <div class="setting-item"> <h2>{{$t('settings.attachments')}}</h2> <ul class="setting-list"> @@ -139,6 +174,18 @@ <i class="icon-down-open"/> </label> </div> + <div> + <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal"> + <label for="hidePostStats"> + {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}} + </label> + </div> + <div> + <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal"> + <label for="hideUserStats"> + {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}} + </label> + </div> </div> <div class="setting-item"> <p>{{$t('settings.filtering_explanation')}}</p> diff --git a/src/components/status/status.js b/src/components/status/status.js index 45f5ccac..10716583 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -31,10 +31,17 @@ const Status = { preview: null, showPreview: false, showingTall: false, - expandingSubject: !this.$store.state.config.collapseMessageWithSubject + expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' + ? !this.$store.state.instance.collapseMessageWithSubject + : !this.$store.state.config.collapseMessageWithSubject } }, computed: { + localCollapseSubjectDefault () { + return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' + ? this.$store.state.instance.collapseMessageWithSubject + : this.$store.state.config.collapseMessageWithSubject + }, muteWords () { return this.$store.state.config.muteWords }, @@ -147,13 +154,13 @@ const Status = { return this.status.attentions.length > 0 }, hideSubjectStatus () { - if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) { + if (this.tallStatus && !this.localCollapseSubjectDefault) { return false } return !this.expandingSubject && this.status.summary }, hideTallStatus () { - if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) { + if (this.status.summary && this.localCollapseSubjectDefault) { return false } if (this.showingTall) { @@ -168,16 +175,22 @@ const Status = { if (!this.status.nsfw) { return false } - if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) { + if (this.status.summary && this.localCollapseSubjectDefault) { return false } return true }, replySubject () { - if (this.status.summary && !this.status.summary.match(/^re[: ]/i)) { + if (!this.status.summary) return '' + const behavior = this.$store.state.config.subjectLineBehavior + const startsWithRe = this.status.summary.match(/^re[: ]/i) + if (behavior !== 'noop' && startsWithRe || behavior === 'masto') { + return this.status.summary + } else if (behavior === 'email') { return 're: '.concat(this.status.summary) + } else if (behavior === 'noop') { + return '' } - return this.status.summary }, attachmentSize () { if ((this.$store.state.config.hideAttachments && !this.inConversation) || diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 0edc7b71..4541c560 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -106,7 +106,7 @@ </div> <div class="container" v-if="replying"> <div class="reply-left"/> - <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/> + <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/> </div> </template> </div> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 6f9ed9fe..064c984d 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -3,6 +3,13 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], + data () { + return { + hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' + ? this.$store.state.instance.hideUserStats + : this.$store.state.config.hideUserStats + } + }, computed: { headingStyle () { const color = this.$store.state.config.customTheme.colors.bg diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 9830f283..bb1e314f 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -17,7 +17,7 @@ <div :title="user.name" class='user-name' v-else>{{user.name}}</div> <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }"> <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> - <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> + <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> </router-link> </div> </div> @@ -91,23 +91,24 @@ </div> </div> <div class="panel-body profile-panel-body"> - <div class="user-counts" :class="{clickable: switcher}"> + <div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}"> <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}"> <h5>{{ $t('user_card.statuses') }}</h5> - <span>{{user.statuses_count}} <br></span> + <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span> </div> <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}"> <h5>{{ $t('user_card.followees') }}</h5> - <span>{{user.friends_count}}</span> + <span v-if="!hideUserStatsLocal">{{user.friends_count}}</span> </div> <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}"> <h5>{{ $t('user_card.followers') }}</h5> - <span>{{user.followers_count}}</span> + <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span> </div> </div> - <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p> - <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p> </div> + <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p> + <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p> +</div> </div> </template> diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js index a743b5f6..74f79d1b 100644 --- a/src/components/user_finder/user_finder.js +++ b/src/components/user_finder/user_finder.js @@ -7,25 +7,10 @@ const UserFinder = { }), methods: { findUser (username) { - username = username[0] === '@' ? username.slice(1) : username - this.loading = true - this.$store.state.api.backendInteractor.externalProfile(username) - .then((user) => { - this.loading = false - this.hidden = true - if (!user.error) { - this.$store.commit('addNewUsers', [user]) - this.$router.push({name: 'user-profile', params: {id: user.id}}) - } else { - this.error = true - } - }) + this.$router.push({ name: 'user-search', query: { query: username } }) }, toggleHidden () { this.hidden = !this.hidden - }, - dismissError () { - this.error = false } } } diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 69bd1d21..f2556569 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,9 +1,5 @@ <template> <span class="user-finder-container"> - <span class="alert error" v-if="error"> - <i class="icon-cancel user-finder-icon" @click="dismissError"/> - {{$t('finder.error_fetching_user')}} - </span> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a> <span v-else> diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js new file mode 100644 index 00000000..1e488f0c --- /dev/null +++ b/src/components/user_search/user_search.js @@ -0,0 +1,33 @@ +import UserCard from '../user_card/user_card.vue' +import userSearchApi from '../../services/new_api/user_search.js' +const userSearch = { + components: { + UserCard + }, + props: [ + 'query' + ], + data () { + return { + users: [] + } + }, + mounted () { + this.search(this.query) + }, + watch: { + query (newV) { + this.search(newV) + } + }, + methods: { + search (query) { + userSearchApi.search({query, store: this.$store}) + .then((res) => { + this.users = res + }) + } + } +} + +export default userSearch diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue new file mode 100644 index 00000000..1624ebef --- /dev/null +++ b/src/components/user_search/user_search.vue @@ -0,0 +1,12 @@ +<template> + <div class="user-seach panel panel-default"> + <div class="panel-heading"> + {{$t('nav.user_search')}} + </div> + <div class="panel-body"> + <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card> + </div> + </div> +</template> + +<script src="./user_search.js"></script> |