diff options
Diffstat (limited to 'src/components')
22 files changed, 157 insertions, 60 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index d8736d17..e175e90c 100644 --- a/src/components/chat_panel/chat_panel.js +++ b/src/components/chat_panel/chat_panel.js @@ -1,3 +1,5 @@ +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' + const chatPanel = { data () { return { @@ -18,6 +20,9 @@ const chatPanel = { }, togglePanel () { this.collapsed = !this.collapsed + }, + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name) } } } diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index f174319a..1b9c63ff 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -13,8 +13,10 @@ <img :src="message.author.avatar" /> </span> <div class="chat-content"> - <router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }"> - {{message.author.username}} + <router-link + class="chat-name" + :to="userProfileLink(message.author)"> + {{message.author.username}} </router-link> <br> <span class="chat-text"> @@ -67,9 +69,6 @@ overflow-x: hidden; } -.chat-name { -} - .chat-message { display: flex; padding: 0.2em 0.5em diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index 49868aed..81426b44 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -32,7 +32,7 @@ const LoginForm = { .then((result) => { this.$store.commit('setToken', result.access_token) this.$store.dispatch('loginUser', result.access_token) - this.$router.push('/main/friends') + this.$router.push('/~/main/friends') }) }) } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index b224c5f3..c52d1e52 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -3,7 +3,7 @@ <div class="panel panel-default"> <ul> <li v-if='currentUser'> - <router-link @click.native="activatePanel('timeline')" to='/main/friends'> + <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friends' }"> {{ $t("nav.timeline") }} </router-link> </li> @@ -18,17 +18,17 @@ </router-link> </li> <li v-if='currentUser && currentUser.locked'> - <router-link @click.native="activatePanel('timeline')" to='/friend-requests'> + <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friend-requests' }"> {{ $t("nav.friend_requests") }} </router-link> </li> <li> - <router-link @click.native="activatePanel('timeline')" to='/main/public'> + <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-timeline' }"> {{ $t("nav.public_tl") }} </router-link> </li> <li> - <router-link @click.native="activatePanel('timeline')" to='/main/all'> + <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-external-timeline' }"> {{ $t("nav.twkn") }} </router-link> </li> diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 345fe3ee..9ab870b6 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -2,6 +2,7 @@ import Status from '../status/status.vue' import StillImage from '../still-image/still-image.vue' import UserCardContent from '../user_card_content/user_card_content.vue' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const Notification = { data () { @@ -20,6 +21,9 @@ const Notification = { methods: { toggleUserExpanded () { this.userExpanded = !this.userExpanded + }, + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name) } }, computed: { diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index e84ce0b6..1c89cbb7 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -28,7 +28,9 @@ <small class="timeago"><router-link @click.native="activatePanel('timeline')" v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> </span> <div class="follow-text" v-if="notification.type === 'follow'"> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link> + <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(notification.action.user)"> + @{{notification.action.user.screen_name}} + </router-link> </div> <template v-else> <status :activatePanel="activatePanel" v-if="notification.status" class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js index 7a5132ad..18e24159 100644 --- a/src/components/oauth_callback/oauth_callback.js +++ b/src/components/oauth_callback/oauth_callback.js @@ -11,7 +11,7 @@ const oac = { }).then((result) => { this.$store.commit('setToken', result.access_token) this.$store.dispatch('loginUser', result.access_token) - this.$router.push('/main/friends') + this.$router.push('/~/main/friends') }) } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 4776c819..b448faec 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -7,7 +7,7 @@ path="post_status.account_not_locked_warning" tag="p" class="visibility-notice"> - <router-link to="/user-settings">{{ $t('post_status.account_not_locked_warning_link') }}</router-link> + <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link> </i18n> <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p> <input diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index e5ead8bc..65b2fb9b 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -11,7 +11,8 @@ const registration = { username: '', password: '', confirm: '' - } + }, + captcha: {} }), validations: { user: { @@ -27,8 +28,10 @@ const registration = { }, created () { if ((!this.registrationOpen && !this.token) || this.signedIn) { - this.$router.push('/main/all') + this.$router.push('/~/main/all') } + + this.setCaptcha() }, computed: { token () { return this.$route.params.token }, @@ -41,21 +44,26 @@ const registration = { }) }, methods: { - ...mapActions(['signUp']), + ...mapActions(['signUp', 'getCaptcha']), async submit () { this.user.nickname = this.user.username this.user.token = this.token + this.user.captcha_solution = this.captcha.solution + this.user.captcha_token = this.captcha.token this.$v.$touch() if (!this.$v.$invalid) { try { await this.signUp(this.user) - this.$router.push('/main/friends') + this.$router.push('/~/main/friends') } catch (error) { console.warn('Registration failed: ' + error) } } + }, + setCaptcha () { + this.getCaptcha().then(cpt => { this.captcha = cpt }) } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 8cb1392b..f187e215 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -75,6 +75,19 @@ </ul> </div> + <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'"> + <template v-if="captcha.type == 'kocaptcha'"> + <img v-bind:src="captcha.url" v-on:click="setCaptcha"> + + <sub>Click the image to get a new captcha</sub> + <label class='form--label' for='captcha-label'>CAPTCHA</label> + + <input :disabled="isPending" + v-model='captcha.solution' + class='form-control' id='captcha-answer' type='text'> + </template> + </div> + <div class='form-group' v-if='token' > <label for='token'>{{$t('registration.token')}}</label> <input disabled='true' v-model='token' class='form-control' id='token' type='text'> diff --git a/src/components/status/status.js b/src/components/status/status.js index 9a63d047..47a62fdf 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -7,6 +7,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue' import StillImage from '../still-image/still-image.vue' import { filter, find } from 'lodash' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const Status = { name: 'Status', @@ -286,6 +287,9 @@ const Status = { }, replyLeave () { this.showPreview = false + }, + userProfileLink (id, name) { + return generateProfileLink(id, name) } }, watch: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 067980ac..3283de45 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -2,7 +2,11 @@ <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"> <template v-if="muted && !noReplyLinks"> <div class="media status container muted"> - <small><router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> + <small> + <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)"> + {{status.user.screen_name}} + </router-link> + </small> <small class="muteWords">{{muteWordHits.join(', ')}}</small> <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> </div> @@ -34,10 +38,12 @@ <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4> <h4 class="user-name" v-else>{{status.user.name}}</h4> <span class="links"> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link> + <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)"> + {{status.user.screen_name}} + </router-link> <span v-if="status.in_reply_to_screen_name" class="faint reply-info"> <i class="icon-right-open"></i> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> + <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)"> {{status.in_reply_to_screen_name}} </router-link> </span> @@ -474,7 +480,7 @@ } } -.avatar { +.avatar.still-image { width: 48px; height: 48px; box-shadow: var(--avatarStatusShadow); diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 9e3dee04..2f362c4d 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -18,12 +18,18 @@ export default Vue.component('tab-switcher', { const tabs = this.$slots.default .filter(slot => slot.data) .map((slot, index) => { - const classes = ['tab'] + const classesTab = ['tab'] + const classesWrapper = ['tab-wrapper'] if (index === this.active) { - classes.push('active') + classesTab.push('active') + classesWrapper.push('active') } - return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>) + return ( + <div class={ classesWrapper.join(' ')}> + <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> + </div> + ) }); const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { const active = index === this.active diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index fbd3321b..428335c0 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -9,57 +9,67 @@ .tabs { display: flex; position: relative; - justify-content: center; width: 100%; overflow-y: hidden; overflow-x: auto; padding-top: 5px; - height: 32px; box-sizing: border-box; &::after, &::before { display: block; content: ''; flex: 1 1 auto; - } - - .tab, &::after, &::before { border-bottom: 1px solid; border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } - .tab { + .tab-wrapper { + height: 28px; + overflow: hidden; position: relative; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding: 5px 1em 99px; - white-space: nowrap; + display: flex; + flex: 0 0 auto; - &:not(.active) { - z-index: 4; + .tab { + width: 100%; + min-width: 1px; + position: relative; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 6px 1em; + padding-bottom: 99px; + margin-bottom: 6px - 99px; + white-space: nowrap; - &:hover { - z-index: 6; + &:not(.active) { + z-index: 4; + + &:hover { + z-index: 6; + } } + &.active { + background: transparent; + z-index: 5; + } + } + + &:not(.active) { &::after { content: ''; position: absolute; left: 0; right: 0; - top: 26px; + bottom: 0; + z-index: 7; border-bottom: 1px solid; border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } } - - &.active { - background: transparent; - border-bottom: none; - z-index: 5; - } } + } } diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index b8eb28e3..ea893567 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -1,4 +1,5 @@ import UserCardContent from '../user_card_content/user_card_content.vue' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const UserCard = { props: [ @@ -28,6 +29,9 @@ const UserCard = { denyUser () { this.$store.state.api.backendInteractor.denyUser(this.user.id) this.$store.dispatch('removeFollowRequest', this.user) + }, + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name) } } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index eb0d7576..0f163e36 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -19,7 +19,8 @@ {{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }} </span> </div> - <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { id: user.id } }"> + + <router-link class='user-screen-name' :to="userProfileLink(user)"> @{{user.screen_name}} </router-link> </div> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 206dba88..75185053 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -1,5 +1,6 @@ import StillImage from '../still-image/still-image.vue' import { hex2rgb } from '../../services/color_convert/color_convert.js' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' export default { props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ], @@ -177,6 +178,9 @@ export default { if (target.tagName === 'A') { window.open(target.href, '_blank') } + }, + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name) } } } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index a40aff35..ed8bba43 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -2,20 +2,20 @@ <div id="heading" class="profile-panel-background" :style="headingStyle"> <div class="panel-heading text-center"> <div class='user-info'> - <router-link @click.native="activatePanel && activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser"> + <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser"> <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> </router-link> <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser"> <i class="icon-link-ext usersettings"></i> </a> <div class='container'> - <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: user.id } }"> + <router-link @click.native="activatePanel && activatePanel('timeline')" :to="userProfileLink(user)"> <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/> </router-link> <div class="name-and-screen-name"> <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> <div :title="user.name" class='user-name' v-else>{{user.name}}</div> - <router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }"> + <router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name' :to="userProfileLink(user)"> <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> </router-link> @@ -25,7 +25,7 @@ <div v-if="user.follows_you && loggedIn && isOtherUser" class="following"> {{ $t('user_card.follows_you') }} </div> - <div class="floater" v-if="switcher || isOtherUser"> + <div class="floater" v-if="isOtherUser && (loggedIn || !switcher)"> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> @@ -67,7 +67,7 @@ </button> </span> </div> - <div class='mute' v-if='isOtherUser'> + <div class='mute' v-if='isOtherUser && loggedIn'> <span v-if='user.muted'> <button @click="toggleMute" class="pressed"> {{ $t('user_card.muted') }} diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 1d79713d..95d797a2 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,30 +3,55 @@ import Timeline from '../timeline/timeline.vue' const UserProfile = { created () { + debugger this.$store.commit('clearTimeline', { timeline: 'user' }) - this.$store.dispatch('startFetching', ['user', this.userId]) - if (!this.$store.state.users.usersObject[this.userId]) { - this.$store.dispatch('fetchUser', this.userId) + this.$store.dispatch('startFetching', ['user', this.fetchBy]) + if (!this.user) { + this.$store.dispatch('fetchUser', this.fetchBy) } }, destroyed () { this.$store.dispatch('stopFetching', 'user') }, computed: { - timeline () { return this.$store.state.statuses.timelines.user }, + timeline () { + return this.$store.state.statuses.timelines.user + }, userId () { return this.$route.params.id }, + userName () { + return this.$route.params.name + }, user () { if (this.timeline.statuses[0]) { return this.timeline.statuses[0].user } else { - return this.$store.state.users.usersObject[this.userId] || false + return Object.values(this.$store.state.users.usersObject).filter(user => { + return (this.isExternal ? user.id === this.userId : user.screen_name === this.userName) + })[0] || false } + }, + fetchBy () { + return this.isExternal ? this.userId : this.userName + }, + isExternal () { + return this.$route.name === 'external-user-profile' } }, watch: { + userName () { + if (this.isExternal) { + return + } + this.$store.dispatch('stopFetching', 'user') + this.$store.commit('clearTimeline', { timeline: 'user' }) + this.$store.dispatch('startFetching', ['user', this.userName]) + }, userId () { + if (!this.isExternal) { + return + } this.$store.dispatch('stopFetching', 'user') this.$store.commit('clearTimeline', { timeline: 'user' }) this.$store.dispatch('startFetching', ['user', this.userId]) diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index ee989f71..d5fac17d 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -257,7 +257,7 @@ const UserSettings = { .then((res) => { if (res.status === 'success') { this.$store.dispatch('logout') - this.$router.push('/main/all') + this.$router.push('/~/main/all') } else { this.deleteAccountError = res.error } diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js index 49b8f5b6..c2df6899 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.js +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -1,4 +1,5 @@ import apiService from '../../services/api/api.service.js' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' function showWhoToFollow (panel, reply) { var users = reply @@ -93,6 +94,11 @@ const WhoToFollowPanel = { return this.$store.state.instance.suggestionsEnabled } }, + methods: { + userProfileLink (id, name) { + return generateProfileLink(id, name) + } + }, watch: { user: function (user, oldUser) { if (this.suggestionsEnabled) { diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue index d031318d..a62e8360 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.vue +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -8,9 +8,9 @@ </div> <div class="panel-body who-to-follow"> <p> - <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br> - <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br> - <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br> + <img v-bind:src="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</router-link><br> + <img v-bind:src="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</router-link><br> + <img v-bind:src="img3"/> <router-link :to="userProfileLink(id3, name3)">{{ name3 }}</router-link><br> <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a> </p> </div> |