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