Redirect to private link after log in

apps/files/src/components/FileList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="uk-height-1-1">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <div class="uk-overflow-auto uk-flex-auto">
+      <div id="files-list-container" class="uk-overflow-auto uk-flex-auto">
         <oc-table middle divider class="oc-filelist uk-margin-remove-bottom" id="files-list" v-show="!loadingFolder">
           <thead>
             <oc-table-row>
@@ -138,19 +138,18 @@ export default {
         absolutePath = !this.item ? this.configuration.rootFolder : this.item
       }
 
-      const self = this
       this.loadFolder({
         client: this.$client,
         absolutePath: absolutePath,
         $gettext: this.$gettext,
         routeName: this.$route.name
       }).then(() => {
-        const scrollTo = self.$route.query.scrollTo
-        if (scrollTo) {
-          self.$nextTick(() => {
-            self.setHighlightedFile(scrollTo)
-            const file = self.highlightedFile
-            self.$scrollTo(`#file-row-${file.id}`, 500, {
+        const scrollTo = this.$route.query.scrollTo
+        if (scrollTo && this.activeFiles.length > 0) {
+          this.$nextTick(() => {
+            const file = this.activeFiles.find(item => item.name === scrollTo)
+            this.setHighlightedFile(file)
+            this.$scrollTo(`#file-row-${file.id}`, 500, {
               container: '#files-list-container'
             })
           })

apps/files/src/components/FilesApp.vue

@@ -2,7 +2,7 @@
     <div id="files">
       <files-app-bar />
       <oc-grid class="uk-height-1-1" oc-scroll-offset=".oc-app-bar">
-        <div class="uk-width-expand uk-overflow-auto uk-height-1-1" @dragover="$_ocApp_dragOver" :class="{ 'uk-visible@m' : _sidebarOpen }" id="files-list-container">
+        <div class="uk-width-expand uk-overflow-auto uk-height-1-1" @dragover="$_ocApp_dragOver" :class="{ 'uk-visible@m' : _sidebarOpen }">
           <oc-loader id="files-list-progress" v-if="loadingFolder"></oc-loader>
           <trash-bin v-if="$route.name === 'files-trashbin'" :fileData="activeFiles" />
           <SharedFilesList v-else-if="sharedList" @toggle="toggleFileSelect" :fileData="activeFiles" />
@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     ...mapActions('Files', ['resetFileSelection', 'addFileSelection', 'removeFileSelection', 'dragOver', 'setHighlightedFile', 'toggleFileSelect']),
-    ...mapActions(['openFile', 'showMessage']),
+    ...mapActions(['openFile', 'showMessage', 'setPrivateLinkPath']),
 
     trace () {
       console.info('trace', arguments)
@@ -122,7 +122,7 @@ export default {
 
   computed: {
     ...mapGetters('Files', ['selectedFiles', 'activeFiles', 'dropzone', 'loadingFolder', 'highlightedFile']),
-    ...mapGetters(['extensions']),
+    ...mapGetters(['extensions', 'privateLinkPath']),
 
     _sidebarOpen () {
       return this.highlightedFile !== null
@@ -136,6 +136,15 @@ export default {
     $route () {
       this.setHighlightedFile(null)
     }
+  },
+  beforeMount () {
+    // Redirect to private link after authorization
+    if (this.privateLinkPath) {
+      this.$router.push(this.privateLinkPath)
+      // Resets private link path in store
+      // Needed due to persistance of that state
+      this.setPrivateLinkPath('')
+    }
   }
 }
 </script>

apps/files/src/components/FilesAppBar.vue

@@ -5,7 +5,7 @@
       <div class="uk-width-expand">
         <oc-breadcrumb id="files-breadcrumb" :items="breadcrumbs" v-if="showBreadcrumb" home></oc-breadcrumb>
         <span class="uk-flex uk-flex-middle" v-if="!showBreadcrumb">
-          <oc-icon :name="pageIcon" class="uk-margin-small-right"></oc-icon>
+          <oc-icon v-if="pageIcon" :name="pageIcon" class="uk-margin-small-right" />
           <span class="uk-text-lead">{{pageTitle}}</span>
         </span>
       </div>

src/router/index.js

@@ -39,7 +39,7 @@ const router = new Router({
       path: '/f/:fileId',
       name: 'privateLink',
       redirect: '/files/private-link/:fileId',
-      meta: { auth: false, hideHeadbar: true }
+      meta: { hideHeadbar: true }
     },
     {
       path: '/s/:token',
@@ -66,6 +66,9 @@ const router = new Router({
 })
 
 router.beforeEach(function (to, from, next) {
+  if (to.name === 'private-link') {
+    store.dispatch('setPrivateLinkPath', to.path)
+  }
   let authRequired = true
   if (to.meta.auth === false) {
     authRequired = false

src/store/index.js

@@ -8,14 +8,15 @@ import app from './app'
 import apps from './apps'
 import config from './config'
 import user from './user'
+import links from './links'
 
 Vue.use(Vuex)
 
 const vuexPersist = new VuexPersistence({
   key: 'phoenixState',
   storage: window.localStorage,
   filter: (mutation) => (['SET_USER', 'SET_TOKEN'].indexOf(mutation.type) > -1),
-  modules: ['user']
+  modules: ['user', 'links']
 })
 
 const strict = process.env.NODE_ENV === 'development'
@@ -29,7 +30,8 @@ export const Store = new Vuex.Store({
     app,
     apps,
     user,
-    config
+    config,
+    links
   },
   strict
 })

src/store/links.js

@@ -0,0 +1,30 @@
+const state = {
+  /**
+   * Private link path in case user needs to log in first
+   * @return {string} path to the file/folder
+   */
+  privateLinkPath: ''
+}
+
+const actions = {
+  setPrivateLinkPath ({ commit }, path) {
+    commit('SET_PRIVATE_LINK_PATH', path)
+  }
+}
+
+const mutations = {
+  SET_PRIVATE_LINK_PATH (state, path) {
+    state.privateLinkPath = path
+  }
+}
+
+const getters = {
+  privateLinkPath: state => state.privateLinkPath
+}
+
+export default {
+  state,
+  actions,
+  mutations,
+  getters
+}