Merge branch 'develop' into feature/replace-panel-switcher

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)
     }
   }
 }

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

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')
           })
       })
     }

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>

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: {

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>

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')
       })
     }
   }

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

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 })
     }
   }
 }

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'>

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: {

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);

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

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;
-      }
     }
+
   }
 }

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)
     }
   }
 }

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>

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)
     }
   }
 }

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') }}

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])

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
           }

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) {

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>