Merge branch 'dev'

* dev:
  v1.4.1 update
  v1.4.1 update

.env.example

@@ -5,6 +5,7 @@ APP_DEBUG=true
 APP_URL=http://localhost
 
 LOG_CHANNEL=stack
+SCOUT_DRIVER=tntsearch
 
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
@@ -44,3 +45,6 @@ PUSHER_APP_CLUSTER=mt1
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+PASSPORT_CLIENT_ID=
+PASSPORT_CLIENT_SECRET=

README.md

@@ -1,50 +1,48 @@
-## VueFileManager - Make your own Private Cloud with VueFileManager client powered by Laravel and Vue
-For installation, please read [Online Documentation](https://vuefilemanager.hi5ve.digital/docs/).
-![VueFileManager](https://vuefilemanager.hi5ve.digital/assets/images/vue-file-manager-in-devices-dark.png)
+### Documentation
+[Read online documentation](https://vuefilemanager.com/docs/)
 
-**Features:**
+### Installation setup
 
-### Drag & Drop
-Reorder your files easily, just drag your folder or file and drop to another folder.
+Run these commands to install vendors:
+```
+composer install
+```
+```
+npm install
+```
 
-### List & Grid Preview
-You can change from two types of file and folder previews. Show your items in list or grid preview.
+Setup your database in .env and run this command:
+```
+php artisan setup:prod
+```
 
-### Background Uploading
-Your files is uploaded in the background, so nothing will stop you from working with the files.
+It automatically:
+* Migrate database
+* Generate Application key
+* Create Passport Encryption keys
+* Create Password grant client
+* Create Personal access client
 
-### File & Folder searching
-Search your items quickly, from anywhere in the app you are.
+Then, copy generated password grant client `Client ID`, `Client secret` and paste it to .env files here:
+```
+PASSPORT_CLIENT_ID=<your_passport_client_id>
+PASSPORT_CLIENT_SECRET=<your_passport_client_secret>
+```
+For sending forgoten password request via email, fill your mail driver in .env
 
-### Custom Context Menu
-Quick actions next to your file on your right click.
+### Run Application
+To start server on your localhost, run this command
+```
+php artisan serve
+```
 
-### File Details
-Get preview of your files quickli in right panel next to your files.
+To compiles and hot-reloads for development, run this command
+```
+npm run hot
+```
 
-### Improved Mobile User Experience
-Need to quickly upload or get your files on your smartphone? It’s not problem.
-
-### Laravel PHP Framework
-You don't have to create your own API for VueFileManager. You can use our pre-build backend in Laravel PHP Framework.
-
-### Vue.js
-Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. We ❤️ Vue.
-
-### Online Documentation
-Don’t worry, we will explain all things you should know to successfully start your VueFileManager instance.
-
-### Night Mode
-We add native support for dark mode. Now, it’s easy for your eyes to work with your files at night.
-
-### User Login & Registration
-Let user create their own account with own storage. All these accounts is protected by user login.
-
-### Integrated Trash
-Did you delete something by accident or do you want your deleted files back? Restore your files from trash.
-
-### Navigation Sidebar
-Navigate through your files easily. Add you favourites folder or look on your latest uploads. 
-
-### Storage Limits
-Set storage limits to your user account to sure, you never exceed your storage limits.
+To compiles for production, run this command
+```
+npm run prod
+```
+That's all, happy coding! :tada: :tada: :tada:

app/Console/Commands/SetupProductionEnvironment.php

@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class SetupProductionEnvironment extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'setup:prod';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Setting production environment';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        $this->info('Setting up production environment');
+
+        $this->migrateDatabase();
+        $this->generateKey();
+        $this->createPassportKeys();
+        $this->createPassportClientPassword();
+        $this->createPassportClientPersonal();
+
+        $this->info('Everything is done, congratulations! 🥳🥳🥳');
+
+    }
+
+    /**
+     * Migrate database
+     */
+    public function generateKey()
+    {
+        $this->call('key:generate');
+    }
+
+    /**
+     * Migrate database
+     */
+    public function migrateDatabase()
+    {
+        $this->call('migrate:fresh');
+    }
+
+    /**
+     * Create Passport Encryption keys
+     */
+    public function createPassportKeys()
+    {
+        $this->call('passport:keys', [
+            '--force' => true
+        ]);
+    }
+
+    /**
+     * Create Password grant client
+     */
+    public function createPassportClientPassword()
+    {
+        $this->call('passport:client', [
+            '--password' => true,
+            '--name'     => 'vuefilemanager',
+        ]);
+
+        $this->alert('Please copy these first password grant Client ID & Client secret above to your /.env file.');
+    }
+
+    /**
+     * Create Personal access client
+     */
+    public function createPassportClientPersonal()
+    {
+        $this->call('passport:client', [
+            '--personal' => true,
+            '--name'     => 'shared',
+        ]);
+    }
+}

app/Console/Kernel.php

@@ -2,6 +2,7 @@
 
 namespace App\Console;
 
+use App\Console\Commands\SetupProductionEnvironment;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
@@ -13,7 +14,7 @@ class Kernel extends ConsoleKernel
      * @var array
      */
     protected $commands = [
-        //
+        SetupProductionEnvironment::class,
     ];
 
     /**

app/FileManagerFile.php

@@ -3,17 +3,61 @@
 namespace App;
 
 use ByteUnits\Metric;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Str;
 use Laravel\Scout\Searchable;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
 
+/**
+ * App\FileManagerFile
+ *
+ * @property int $id
+ * @property int|null $user_id
+ * @property int $unique_id
+ * @property int $folder_id
+ * @property string $thumbnail
+ * @property string|null $name
+ * @property string|null $basename
+ * @property string|null $mimetype
+ * @property string $filesize
+ * @property string|null $type
+ * @property string $user_scope
+ * @property string $deleted_at
+ * @property string $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read \App\FileManagerFolder|null $folder
+ * @property-read string $file_url
+ * @property-read \App\FileManagerFolder $parent
+ * @property-read \App\Share|null $shared
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile newQuery()
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFile onlyTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile query()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereBasename($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereDeletedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereFilesize($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereFolderId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereMimetype($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereThumbnail($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereType($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereUniqueId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereUpdatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereUserId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFile whereUserScope($value)
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFile withTrashed()
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFile withoutTrashed()
+ * @mixin \Eloquent
+ */
+
 class FileManagerFile extends Model
 {
     use Searchable, SoftDeletes;
 
+    public $public_access = null;
 
     protected $guarded = [
         'id'
@@ -23,6 +67,15 @@ class FileManagerFile extends Model
         'file_url'
     ];
 
+    /**
+     * Set routes with public access
+     *
+     * @param $token
+     */
+    public function setPublicUrl($token) {
+        $this->public_access = $token;
+    }
+
     /**
      * Format created at date
      *
@@ -46,9 +99,8 @@ class FileManagerFile extends Model
     }
 
     /**
-     * Format filesize
+     * Format fileSize
      *
-     * @param $value
      * @return string
      */
     public function getFilesizeAttribute()
@@ -59,23 +111,39 @@ class FileManagerFile extends Model
     /**
      * Format thumbnail url
      *
-     * @param $value
      * @return string
      */
     public function getThumbnailAttribute()
     {
-        return $this->attributes['thumbnail'] ? route('thumbnail', ['name' => $this->attributes['thumbnail']]) : null;
+        if ($this->attributes['thumbnail']) {
+
+            // Thumbnail route
+            $route = route('thumbnail', ['name' => $this->attributes['thumbnail']]);
+
+            if ($this->public_access) {
+                return $route . '/public/' . $this->public_access;
+            }
+
+            return $route;
+        }
+
+        return null;
     }
 
     /**
      * Format file url
      *
-     * @param $value
      * @return string
      */
     public function getFileUrlAttribute()
     {
-        return route('file', ['name' => $this->attributes['basename']]);
+        $route = route('file', ['name' => $this->attributes['basename']]);
+
+        if ($this->public_access) {
+            return $route . '/public/' . $this->public_access;
+        }
+
+        return $route;
     }
 
     /**
@@ -114,4 +182,14 @@ class FileManagerFile extends Model
     {
         return $this->hasOne('App\FileManagerFolder', 'unique_id', 'folder_id');
     }
+
+    /**
+     * Get sharing attributes
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasOne
+     */
+    public function shared()
+    {
+        return $this->hasOne('App\Share', 'item_id', 'unique_id');
+    }
 }

app/FileManagerFolder.php

@@ -12,6 +12,53 @@ use RecursiveIteratorIterator;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
 
+/**
+ * App\FileManagerFolder
+ *
+ * @property int $id
+ * @property int|null $user_id
+ * @property int $unique_id
+ * @property int $parent_id
+ * @property string|null $name
+ * @property string|null $type
+ * @property string $user_scope
+ * @property string $deleted_at
+ * @property string $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFolder[] $children
+ * @property-read int|null $children_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFile[] $files
+ * @property-read int|null $files_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFolder[] $folders
+ * @property-read int|null $folders_count
+ * @property-read int $items
+ * @property-read int $trashed_items
+ * @property-read \App\FileManagerFolder $parent
+ * @property-read \App\Share|null $shared
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFolder[] $trashed_children
+ * @property-read int|null $trashed_children_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFile[] $trashed_files
+ * @property-read int|null $trashed_files_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFolder[] $trashed_folders
+ * @property-read int|null $trashed_folders_count
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder newQuery()
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFolder onlyTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder query()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereDeletedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereParentId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereType($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereUniqueId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereUpdatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereUserId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\FileManagerFolder whereUserScope($value)
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFolder withTrashed()
+ * @method static \Illuminate\Database\Query\Builder|\App\FileManagerFolder withoutTrashed()
+ * @mixin \Eloquent
+ */
 class FileManagerFolder extends Model
 {
     use Searchable, SoftDeletes;
@@ -165,6 +212,16 @@ class FileManagerFolder extends Model
         return $this->hasMany('App\FileManagerFolder', 'parent_id', 'unique_id')->withTrashed();
     }
 
+    /**
+     * Get sharing attributes
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasOne
+     */
+    public function shared()
+    {
+        return $this->hasOne('App\Share', 'item_id', 'unique_id');
+    }
+
     // Delete all folder childrens
     public static function boot()
     {
@@ -203,4 +260,4 @@ class FileManagerFolder extends Model
             });
         });
     }
-}
+}

app/Http/Controllers/AppFunctionsController.php

@@ -2,8 +2,9 @@
 
 namespace App\Http\Controllers;
 
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Http\Request;
 use Response;
 
 class AppFunctionsController extends Controller
@@ -17,28 +18,4 @@ class AppFunctionsController extends Controller
     {
         return view("index");
     }
-
-    /**
-     * Get file
-     *
-     * @param $filename
-     * @return mixed
-     */
-    public function get_avatar($basename)
-    {
-        // Get file path
-        $path = storage_path() . '/app/avatars/' . $basename;
-
-        // Check if file exist
-        if (!File::exists($path)) abort(404);
-
-        $file = File::get($path);
-        $type = File::mimeType($path);
-
-        // Create response
-        $response = Response::make($file, 200);
-        $response->header("Content-Type", $type);
-
-        return $response;
-    }
 }

app/Http/Controllers/Auth/AuthController.php

@@ -2,20 +2,13 @@
 
 namespace App\Http\Controllers\Auth;
 
-use App\ClientProfile;
-use App\Models\User\UserAttribute;
-use App\Models\User\UserNotificationSetting;
-use App\ProviderProfile;
+use App\Http\Requests\Auth\CheckAccountRequest;
 use App\User;
-use GuzzleHttp\Client;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
-use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Cookie;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Route;
-use Illuminate\Support\Facades\Validator;
 
 class AuthController extends Controller
 {
@@ -26,12 +19,7 @@ class AuthController extends Controller
      * @param Request $request
      * @return mixed
      */
-    public function check_account(Request $request) {
-
-        // Validate request
-        $request->validate([
-            'email'    => ['required', 'string', 'email'],
-        ]);
+    public function check_account(CheckAccountRequest $request) {
 
         // Get User
         $user = User::where('email', $request->input('email'))->select(['name', 'avatar'])->first();
@@ -59,7 +47,7 @@ class AuthController extends Controller
 
             $data = json_decode($response->content(), true);
 
-            return response('Login Successfull!', 200)->cookie('token', $data['access_token'], 43200);
+            return response('Login Successfull!', 200)->cookie('access_token', $data['access_token'], 43200);
         } else {
 
             return $response;
@@ -97,7 +85,7 @@ class AuthController extends Controller
 
             $data = json_decode($response->content(), true);
 
-            return response('Register Successfull!', 200)->cookie('token', $data['access_token'], 43200);
+            return response('Register Successfull!', 200)->cookie('access_token', $data['access_token'], 43200);
         } else {
 
             return $response;
@@ -111,6 +99,12 @@ class AuthController extends Controller
      */
     public function logout()
     {
+        // Demo preview
+        if (is_demo( Auth::id())) {
+            return response('Logout successfull', 204)
+                ->cookie('access_token', '', -1);
+        }
+
         // Get user tokens and remove it
         auth()->user()->tokens()->each(function ($token) {
 
@@ -118,7 +112,8 @@ class AuthController extends Controller
             $token->delete();
         });
 
-        return response('Logout successfull', 200)->cookie('token', '', -1);
+        return response('Logout successfull', 204)
+            ->cookie('access_token', '', -1);
     }
 
     /**
@@ -128,7 +123,7 @@ class AuthController extends Controller
      * @param string $provider
      * @return Request
      */
-    private static function make_request(Request $request)
+    private static function make_request($request)
     {
         $request->request->add([
             'grant_type'    => 'password',
@@ -136,7 +131,7 @@ class AuthController extends Controller
             'client_secret' => config('services.passport.client_secret'),
             'username'      => $request->email,
             'password'      => $request->password,
-            'scope'         => '',
+            'scope'         => 'master',
         ]);
 
         return Request::create(url('/oauth/token'), 'POST', $request->all());

app/Http/Controllers/FileAccessController.php

@@ -0,0 +1,232 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\FileManagerFolder;
+use App\Http\Tools\Guardian;
+use App\Share;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\File;
+use Illuminate\Http\Request;
+use App\FileManagerFile;
+use Illuminate\Support\Str;
+use Response;
+
+class FileAccessController extends Controller
+{
+    /**
+     * Get avatar
+     *
+     * @param $basename
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_avatar($basename)
+    {
+        // Get file path
+        $path = storage_path() . '/app/avatars/' . $basename;
+
+        // Check if file exist
+        if (!File::exists($path)) abort(404);
+
+        $file = File::get($path);
+        $type = File::mimeType($path);
+
+        // Create response
+        $response = Response::make($file, 200);
+        $response->header("Content-Type", $type);
+
+        return $response;
+    }
+
+    /**
+     * Get file
+     *
+     * @param Request $request
+     * @param $filename
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_file(Request $request, $filename)
+    {
+        // Get user id
+        $user_id = Auth::id();
+
+        // Get file record
+        $file = FileManagerFile::withTrashed()
+            ->where('user_id', $user_id)
+            ->where('basename', $filename)
+            ->firstOrFail();
+
+        // Check user permission
+        if ( ! $request->user()->tokenCan('master') ) {
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Check access to file
+            $this->check_file_access($shared, $file);
+        }
+
+        return $this->download_file($file);
+    }
+
+    /**
+     * Get file public
+     *
+     * @param $filename
+     * @param $token
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_file_public($filename, $token)
+    {
+        // Get sharing record
+        $shared = get_shared($token);
+
+        // Abort if shared is protected
+        if ($shared->protected) {
+            abort(403, "Sorry, you don't have permission");
+        }
+
+        // Get file record
+        $file = FileManagerFile::where('user_id', $shared->user_id)
+            ->where('basename', $filename)
+            ->firstOrFail();
+
+        // Check file access
+        $this->check_file_access($shared, $file);
+
+        return $this->download_file($file);
+    }
+
+    /**
+     * Get image thumbnail
+     *
+     * @param Request $request
+     * @param $filename
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_thumbnail(Request $request, $filename)
+    {
+        // Get file record
+        $file = FileManagerFile::withTrashed()
+            ->where('user_id', $request->user()->id)
+            ->where('thumbnail', $filename)
+            ->firstOrFail();
+
+        // Check user permission
+        if ( ! $request->user()->tokenCan('master') ) {
+            $this->check_file_access($request, $file);
+        }
+
+        return $this->thumbnail_file($file);
+    }
+
+    /**
+     * Get public image thumbnail
+     *
+     * @param $filename
+     * @param $token
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_thumbnail_public($filename, $token)
+    {
+        // Get sharing record
+        $shared = get_shared($token);
+
+        // Abort if thumbnail is protected
+        if ($shared->protected) {
+            abort(403, "Sorry, you don't have permission");
+        }
+
+        // Get file record
+        $file = FileManagerFile::where('user_id', $shared->user_id)
+            ->where('thumbnail', $filename)
+            ->firstOrFail();
+
+        // Check file access
+        $this->check_file_access($shared, $file);
+
+        return $this->thumbnail_file($file);
+    }
+
+    /**
+     * Check user file access
+     *
+     * @param $shared
+     * @param $file
+     */
+    protected function check_file_access($shared, $file): void
+    {
+        // Check by parent folder permission
+        if ($shared->type === 'folder') {
+            Guardian::check_item_access($file->folder_id, $shared);
+        }
+
+        // Check by single file permission
+        if ($shared->type === 'file') {
+            if ($shared->item_id !== $file->unique_id) abort(403);
+        }
+    }
+
+    /**
+     * Call and download file
+     *
+     * @param $file
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    private function download_file($file)
+    {
+        // Format pretty filename
+        $file_pretty_name = $file->name . '.' . $file->mimetype;
+
+        // Get file path
+        $path = storage_path() . '/app/file-manager/' . $file->basename;
+
+        // Check if file exist
+        if (!File::exists($path)) abort(404);
+
+        $file = File::get($path);
+        $type = File::mimeType($path);
+        $size = File::size($path);
+
+        // Create response
+        $response = Response::make($file, 200);
+        $response->header("Content-Type", $type);
+        $response->header("Content-Disposition", 'attachment; filename=' . $file_pretty_name);
+        $response->header("Content-Length", $size);
+        $response->header("Accept-Ranges", "bytes");
+        $response->header("Content-Range", "bytes 0-" . $size . "/" . $size);
+
+        return $response;
+    }
+
+    /**
+     * @param $file
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    private function thumbnail_file($file)
+    {
+        // Get file path
+        $path = storage_path() . '/app/file-manager/' . $file->getOriginal('thumbnail');
+
+        // Check if file exist
+        if (!File::exists($path)) abort(404);
+
+        $file = File::get($path);
+        $type = File::mimeType($path);
+
+        // Create response
+        $response = Response::make($file, 200);
+        $response->header("Content-Type", $type);
+
+        return $response;
+    }
+}

app/Http/Controllers/FileBrowser/BrowseController.php

@@ -0,0 +1,191 @@
+<?php
+
+namespace App\Http\Controllers\FileBrowser;
+
+use App\Http\Requests\FileBrowser\SearchRequest;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\Auth;
+use App\Http\Controllers\Controller;
+use Illuminate\Support\Collection;
+use Illuminate\Http\Request;
+use App\FileManagerFolder;
+use App\FileManagerFile;
+use App\Share;
+
+class BrowseController extends Controller
+{
+
+    /**
+     * Get trashed files
+     *
+     * @return Collection
+     */
+    public function trash()
+    {
+        // Get user id
+        $user_id = Auth::id();
+
+        // Get folders and files
+        $folders_trashed = FileManagerFolder::onlyTrashed()
+            ->with(['trashed_folders'])
+            ->where('user_id', $user_id)
+            ->get(['parent_id', 'unique_id', 'name']);
+
+        $folders = FileManagerFolder::onlyTrashed()
+            ->where('user_id', $user_id)
+            ->whereIn('unique_id', filter_folders_ids($folders_trashed))
+            ->get();
+
+        // Get files trashed
+        $files_trashed = FileManagerFile::onlyTrashed()
+            ->where('user_id', $user_id)
+            ->whereNotIn('folder_id', array_values(array_unique(recursiveFind($folders_trashed->toArray(), 'unique_id'))))
+            ->get();
+
+        // Collect folders and files to single array
+        return collect([$folders, $files_trashed])->collapse();
+    }
+
+    /**
+     * Get user shared items
+     *
+     * @return Collection
+     */
+    public function shared()
+    {
+        // Get user
+        $user_id = Auth::id();
+
+        // Get shared folders and files
+        $folder_ids = Share::where('user_id', $user_id)
+            ->where('type', 'folder')
+            ->pluck('item_id');
+
+        $file_ids = Share::where('user_id', $user_id)
+            ->where('type', '!=', 'folder')
+            ->pluck('item_id');
+
+        // Get folders and files
+        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected'])
+            ->where('user_id', $user_id)
+            ->whereIn('unique_id', $folder_ids)
+            ->get();
+
+        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected'])
+            ->where('user_id', $user_id)
+            ->whereIn('unique_id', $file_ids)
+            ->get();
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Get directory with files
+     *
+     * @param Request $request
+     * @param $unique_id
+     * @return Collection
+     */
+    public function folder(Request $request, $unique_id)
+    {
+        // Get user
+        $user_id = Auth::id();
+
+        // Get folder trash items
+        if ($request->query('trash')) {
+
+            // Get folders and files
+            $folders = FileManagerFolder::onlyTrashed()
+                ->where('user_id', $user_id)
+                ->with('parent')
+                ->where('parent_id', $unique_id)
+                ->get();
+
+            $files = FileManagerFile::onlyTrashed()
+                ->where('user_id', $user_id)
+                ->with('parent')
+                ->where('folder_id', $unique_id)
+                ->get();
+
+            // Collect folders and files to single array
+            return collect([$folders, $files])->collapse();
+        }
+
+        // Get folders and files
+        $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected'])
+            ->where('user_id', $user_id)
+            ->where('parent_id', $unique_id)
+            ->get();
+
+        $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected'])
+            ->where('user_id', $user_id)
+            ->where('folder_id', $unique_id)
+            ->get();
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Get user folder tree
+     *
+     * @return array
+     */
+    public function navigation_tree() {
+
+        $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('parent_id', 0)
+            ->where('user_id', Auth::id())
+            ->get(['id', 'parent_id', 'unique_id', 'name']);
+
+        return [
+            [
+                'unique_id' => 0,
+                'name'      => __('vuefilemanager.home'),
+                'location'  => 'base',
+                'folders'  => $folders,
+            ]
+        ];
+    }
+
+    /**
+     * Search files
+     *
+     * @param Request $request
+     * @return \Illuminate\Database\Eloquent\Collection
+     */
+    public function search(SearchRequest $request)
+    {
+        // Get user
+        $user_id = Auth::id();
+
+        // Search files id db
+        $searched_files = FileManagerFile::search($request->input('query'))
+            ->where('user_id', $user_id)
+            ->get();
+        $searched_folders = FileManagerFolder::search($request->input('query'))
+            ->where('user_id', $user_id)
+            ->get();
+
+        // Collect folders and files to single array
+        return collect([$searched_folders, $searched_files])->collapse();
+    }
+
+    /**
+     * Get file record
+     *
+     * @param $unique_id
+     * @return mixed
+     */
+    public function file_detail($unique_id)
+    {
+        // Get user id
+        $user_id = Auth::id();
+
+        return FileManagerFile::with(['shared:token,id,item_id,permission,protected'])
+            ->where('user_id', $user_id)
+            ->where('unique_id', $unique_id)
+            ->firstOrFail();
+    }
+}

app/Http/Controllers/FileFunctions/EditItemsController.php

@@ -0,0 +1,390 @@
+<?php
+
+namespace App\Http\Controllers\FileFunctions;
+
+use App\Http\Requests\FileFunctions\CreateFolderRequest;
+use App\Http\Requests\FileFunctions\DeleteItemRequest;
+use App\Http\Requests\FileFunctions\RenameItemRequest;
+use App\Http\Requests\FileFunctions\MoveItemRequest;
+use App\Http\Requests\FileFunctions\UploadRequest;
+use App\Http\Tools\Demo;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Auth;
+use App\Http\Controllers\Controller;
+use App\Http\Tools\Guardian;
+use App\Http\Tools\Editor;
+use App\FileManagerFile;
+use Exception;
+
+
+class EditItemsController extends Controller
+{
+    /**
+     * Create new folder for authenticated master|editor user
+     *
+     * @param CreateFolderRequest $request
+     * @return array
+     * @throws Exception
+     */
+    public function user_create_folder(CreateFolderRequest $request)
+    {
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::create_folder($request);
+        }
+
+        // Check permission to create folder for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Check access to requested directory
+            Guardian::check_item_access($request->parent_id, $shared);
+        }
+
+        // Create new folder
+        return Editor::create_folder($request);
+    }
+
+    /**
+     * Create new folder for guest user with edit permission
+     *
+     * @param CreateFolderRequest $request
+     * @param $token
+     * @return array
+     * @throws Exception
+     */
+    public function guest_create_folder(CreateFolderRequest $request, $token)
+    {
+        // Get shared record
+        $shared = get_shared($token);
+
+        if (is_demo($shared->user_id)) {
+            return Demo::create_folder($request);
+        }
+
+        // Check shared permission
+        if (!is_editor($shared)) abort(403);
+
+        // Check access to requested directory
+        Guardian::check_item_access($request->parent_id, $shared);
+
+        // Create folder
+        return Editor::create_folder($request, $shared);
+    }
+
+    /**
+     * Rename item for authenticated master|editor user
+     *
+     * @param RenameItemRequest $request
+     * @param $unique_id
+     * @return mixed
+     * @throws Exception
+     */
+    public function user_rename_item(RenameItemRequest $request, $unique_id)
+    {
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::rename_item($request, $unique_id);
+        }
+
+        // Check permission to rename item for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Get file|folder item
+            $item = get_item($request->type, $unique_id, Auth::id());
+
+            // Check access to requested directory
+            if ($request->type === 'folder') {
+                Guardian::check_item_access($item->unique_id, $shared);
+            } else {
+                Guardian::check_item_access($item->folder_id, $shared);
+            }
+        }
+
+        // Rename Item
+        return Editor::rename_item($request, $unique_id);
+    }
+
+    /**
+     * Rename item for guest user with edit permission
+     *
+     * @param RenameItemRequest $request
+     * @param $unique_id
+     * @param $token
+     * @return mixed
+     * @throws Exception
+     */
+    public function guest_rename_item(RenameItemRequest $request, $unique_id, $token)
+    {
+        // Get shared record
+        $shared = get_shared($token);
+
+        // Demo preview
+        if (is_demo($shared->user_id)) {
+            return Demo::rename_item($request, $unique_id);
+        }
+
+        // Check shared permission
+        if (!is_editor($shared)) abort(403);
+
+        // Get file|folder item
+        $item = get_item($request->type, $unique_id, $shared->user_id);
+
+        // Check access to requested item
+        if ($request->type === 'folder') {
+            Guardian::check_item_access($item->unique_id, $shared);
+        } else {
+            Guardian::check_item_access($item->folder_id, $shared);
+        }
+
+        // Rename item
+        $item = Editor::rename_item($request, $unique_id, $shared);
+
+        // Set public url
+        if ($item->type !== 'folder') {
+            $item->setPublicUrl($token);
+        }
+
+        return $item;
+    }
+
+    /**
+     * Delete item for authenticated master|editor user
+     *
+     * @param DeleteItemRequest $request
+     * @param $unique_id
+     * @return ResponseFactory|\Illuminate\Http\Response
+     * @throws Exception
+     */
+    public function user_delete_item(DeleteItemRequest $request, $unique_id)
+    {
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::response_204();
+        }
+
+        // Check permission to delete item for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // Prevent force delete for non-master users
+            if ($request->force_delete) abort('401');
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Get file|folder item
+            $item = get_item($request->type, $unique_id, Auth::id());
+
+            // Check access to requested directory
+            if ($request->type === 'folder') {
+                Guardian::check_item_access($item->unique_id, $shared);
+            } else {
+                Guardian::check_item_access($item->folder_id, $shared);
+            }
+        }
+
+        // Delete item
+        Editor::delete_item($request, $unique_id);
+
+        // Return response
+        return response(null, 204);
+    }
+
+    /**
+     * Delete item for guest user with edit permission
+     *
+     * @param DeleteItemRequest $request
+     * @param $unique_id
+     * @param $token
+     * @return ResponseFactory|\Illuminate\Http\Response
+     * @throws Exception
+     */
+    public function guest_delete_item(DeleteItemRequest $request, $unique_id, $token)
+    {
+        // Get shared record
+        $shared = get_shared($token);
+
+        // Demo preview
+        if (is_demo($shared->user_id)) {
+            return Demo::response_204();
+        }
+
+        // Check shared permission
+        if (!is_editor($shared)) abort(403);
+
+        // Get file|folder item
+        $item = get_item($request->type, $unique_id, $shared->user_id);
+
+        // Check access to requested item
+        if ($request->type === 'folder') {
+            Guardian::check_item_access($item->unique_id, $shared);
+        } else {
+            Guardian::check_item_access($item->folder_id, $shared);
+        }
+
+        // Delete item
+        Editor::delete_item($request, $unique_id, $shared);
+
+        // Return response
+        return response(null, 204);
+    }
+
+    /**
+     * Delete file for authenticated master|editor user
+     *
+     * @param UploadRequest $request
+     * @return FileManagerFile|Model
+     * @throws Exception
+     */
+    public function user_upload(UploadRequest $request)
+    {
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::upload($request);
+        }
+
+        // Check if user can upload
+        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100) {
+            abort(423, 'You exceed your storage limit!');
+        }
+
+        // Check permission to upload for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Check access to requested directory
+            Guardian::check_item_access($request->parent_id, $shared);
+        }
+
+        // Return new uploaded file
+        return Editor::upload($request);
+    }
+
+    /**
+     * Delete file for guest user with edit permission
+     *
+     * @param UploadRequest $request
+     * @param $token
+     * @return FileManagerFile|Model
+     * @throws Exception
+     */
+    public function guest_upload(UploadRequest $request, $token)
+    {
+        // Get shared record
+        $shared = get_shared($token);
+
+        // Demo preview
+        if (is_demo($shared->user_id)) {
+            return Demo::upload($request);
+        }
+
+        // Check shared permission
+        if (!is_editor($shared)) abort(403);
+
+        // Check access to requested directory
+        Guardian::check_item_access($request->parent_id, $shared);
+
+        // Return new uploaded file
+        $new_file = Editor::upload($request, $shared);
+
+        // Set public access url
+        $new_file->setPublicUrl($token);
+
+        return $new_file;
+    }
+
+    /**
+     * Move item for authenticated master|editor user
+     *
+     * @param MoveItemRequest $request
+     * @param $unique_id
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function user_move(MoveItemRequest $request, $unique_id)
+    {
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::response_204();
+        }
+
+        // Check permission to upload for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            // Check access to requested directory
+            Guardian::check_item_access($request->to_unique_id, $shared);
+        }
+
+        // Move item
+        Editor::move($request, $unique_id);
+
+        return response('Done!', 204);
+    }
+
+    /**
+     * Move item for guest user with edit permission
+     *
+     * @param MoveItemRequest $request
+     * @param $unique_id
+     * @param $token
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function guest_move(MoveItemRequest $request, $unique_id, $token)
+    {
+        // Get shared record
+        $shared = get_shared($token);
+
+        // Demo preview
+        if (is_demo(Auth::id())) {
+            return Demo::response_204();
+        }
+
+        // Check shared permission
+        if (!is_editor($shared)) abort(403);
+
+        $moving_unique_id = $unique_id;
+
+        if ($request->from_type !== 'folder') {
+            $file = FileManagerFile::where('unique_id', $unique_id)
+                ->where('user_id', $shared->user_id)
+                ->firstOrFail();
+
+            $moving_unique_id = $file->folder_id;
+        }
+
+        // Check access to requested item
+        Guardian::check_item_access([
+            $request->to_unique_id, $moving_unique_id
+        ], $shared);
+
+        // Move item
+        Editor::move($request, $unique_id, $shared);
+
+        return response('Done!', 204);
+    }
+}

app/Http/Controllers/FileFunctions/FavouriteController.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Http\Controllers\FileFunctions;
+
+use App\FileManagerFolder;
+use App\Http\Tools\Demo;
+use Illuminate\Support\Facades\Validator;
+use App\Http\Controllers\Controller;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Http\Request;
+
+class FavouriteController extends Controller
+{
+    /**
+     * Add folder to user favourites
+     *
+     * @param Request $request
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        // Validate request
+        $validator = Validator::make($request->all(), [
+            'unique_id' => 'required|integer',
+        ]);
+
+        // Return error
+        if ($validator->fails()) abort(400, 'Bad input');
+
+        // Get user & folder
+        $user = Auth::user();
+        $folder = FileManagerFolder::where('unique_id', $request->unique_id)->first();
+
+        if (is_demo($user->id)) {
+            return Demo::favourites($user);
+        }
+
+        // Check ownership
+        if ($folder->user_id !== $user->id) abort(403);
+
+        // Add folder to user favourites
+        $user->favourites()->syncWithoutDetaching($request->unique_id);
+
+        // Return updated favourites
+        return $user->favourites->makeHidden(['pivot']);
+    }
+
+    /**
+     * Remove folder from user favourites
+     *
+     * @param $unique_id
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
+     */
+    public function destroy($unique_id)
+    {
+        // Get user
+        $user = Auth::user();
+
+        if (is_demo($user->id)) {
+            return Demo::favourites($user);
+        }
+
+        // Remove folder from user favourites
+        $user->favourites()->detach($unique_id);
+
+        // Return updated favourites
+        return $user->favourites->makeHidden(['pivot']);
+    }
+}

app/Http/Controllers/FileFunctions/ShareController.php

@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Http\Controllers\FileFunctions;
+
+use App\Http\Requests\Share\CreateShareRequest;
+use App\Http\Requests\Share\UpdateShareRequest;
+use App\Http\Resources\ShareResource;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+use App\Share;
+
+class ShareController extends Controller
+{
+    /**
+     * Get shared record
+     *
+     * @return ShareResource
+     */
+    public function show($token)
+    {
+        // Get record
+        $shared = Share::where(DB::raw('BINARY `token`'), $token)
+            ->firstOrFail();
+
+        return new ShareResource($shared);
+    }
+
+    /**
+     * Generate file share link
+     *
+     * @param CreateShareRequest $request
+     * @return ShareResource
+     */
+    public function store(CreateShareRequest $request)
+    {
+        do {
+            // Generate unique token
+            $token = Str::random(16);
+
+        } while (Share::where(DB::raw('BINARY `token`'), $token)->exists());
+
+        // Create shared options
+        $options = [
+            'password'   => $request->has('password') ? Hash::make($request->password) : null,
+            'type'       => $request->type === 'folder' ? 'folder' : 'file',
+            'protected'  => $request->isPassword,
+            'permission' => $request->permission,
+            'item_id'    => $request->unique_id,
+            'user_id'    => Auth::id(),
+            'token'      => $token,
+        ];
+
+        // Return created shared record
+        return new ShareResource(Share::create($options));
+    }
+
+    /**
+     * Update sharing
+     *
+     * @param UpdateShareRequest $request
+     * @param $token
+     * @return ShareResource
+     */
+    public function update(UpdateShareRequest $request, $token)
+    {
+        // Get sharing record
+        $shared = Share::where('token', $token)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+
+        // Update sharing record
+        $shared->update([
+            'permission' => $request->permission,
+            'protected'  => $request->protected,
+            'password'   => $request->password ? Hash::make($request->password) : $shared->password,
+        ]);
+
+        // Return shared record
+        return new ShareResource($shared);
+    }
+
+    /**
+     * Delete sharing item
+     *
+     * @param $token
+     * @return ResponseFactory|\Illuminate\Http\Response
+     * @throws \Exception
+     */
+    public function destroy($token)
+    {
+        // Get sharing record
+        $shared = Share::where('token', $token)
+            ->where('user_id', Auth::id())
+            ->firstOrFail();
+
+        // Delete shared record
+        $shared->delete();
+
+        // Done
+        return response('Done!', 204);
+    }
+}

app/Http/Controllers/FileFunctions/TrashController.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Http\Controllers\FileFunctions;
+
+use App\Http\Tools\Demo;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\Storage;
+use App\Http\Controllers\Controller;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Http\Request;
+use App\FileManagerFolder;
+use App\FileManagerFile;
+
+class TrashController extends Controller
+{
+    /**
+     * Empty user trash
+     *
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function clear()
+    {
+        // Get user id
+        $user_id = Auth::id();
+
+        if (is_demo($user_id)) {
+            return Demo::response_204();
+        }
+
+        // Get files and folders
+        $folders = FileManagerFolder::onlyTrashed()->where('user_id', $user_id)->get();
+        $files = FileManagerFile::onlyTrashed()->where('user_id', $user_id)->get();
+
+        // Force delete folder
+        $folders->each->forceDelete();
+
+        // Force delete files
+        foreach ($files as $file) {
+
+            // Delete file
+            Storage::disk('local')->delete('/file-manager/' . $file->basename);
+
+            // Delete thumbnail if exist
+            if ($file->thumbnail) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
+
+            // Delete file permanently
+            $file->forceDelete();
+        }
+
+        // Return response
+        return response('Done!', 204);
+    }
+
+    /**
+     * Restore item from trash
+     *
+     * @param Request $request
+     * @param $unique_id
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function restore(Request $request, $unique_id)
+    {
+        // Validate request
+        $validator = Validator::make($request->all(), [
+            'type'      => 'required|string',
+            'to_home'   => 'boolean',
+        ]);
+
+        // Return error
+        if ($validator->fails()) abort(400, 'Bad input');
+
+        // Get user id
+        $user_id = Auth::id();
+
+        if (is_demo($user_id)) {
+            return Demo::response_204();
+        }
+
+        // Get folder
+        if ($request->type === 'folder') {
+
+            // Get folder
+            $item = FileManagerFolder::onlyTrashed()
+                ->where('user_id', $user_id)
+                ->where('unique_id', $unique_id)
+                ->first();
+
+            // Restore item to home directory
+            if ($request->has('to_home') && $request->to_home) {
+                $item->parent_id = 0;
+                $item->save();
+            }
+        } else {
+
+            // Get item
+            $item = FileManagerFile::onlyTrashed()
+                ->where('user_id', $user_id)
+                ->where('unique_id', $unique_id)
+                ->first();
+
+            // Restore item to home directory
+            if ($request->has('to_home') && $request->to_home) {
+                $item->folder_id = 0;
+                $item->save();
+            }
+        }
+
+        // Restore Item
+        $item->restore();
+
+        // Return response
+        return response('Done!', 204);
+    }
+}

app/Http/Controllers/FileManagerController.php

@@ -1,602 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Support\Arr;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Cookie;
-use Intervention\Image\ImageManagerStatic as Image;
-use Illuminate\Support\Facades\Validator;
-use Illuminate\Support\Facades\Storage;
-use Illuminate\Support\Facades\File;
-use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
-use Illuminate\Support\Str;
-use App\FileManagerFolder;
-use App\FileManagerFile;
-use Response;
-
-
-class FileManagerController extends Controller
-{
-    /**
-     * Get trashed files
-     *
-     * @param Request $request
-     * @return FileManagerFile[]|\Illuminate\Database\Eloquent\Builder[]|\Illuminate\Database\Eloquent\Collection|\Illuminate\Database\Query\Builder[]|\Illuminate\Support\Collection
-     */
-    public function trash()
-    {
-        // Get user id
-        $user_id = Auth::id();
-
-        // Get folders and files
-        $folders_trashed = FileManagerFolder::onlyTrashed()
-            ->with(['trashed_folders'])
-            ->where('user_id', $user_id)
-            ->get(['parent_id', 'unique_id', 'name']);
-
-        $folders = FileManagerFolder::onlyTrashed()
-            ->where('user_id', $user_id)
-            ->whereIn('unique_id', filter_folders_ids($folders_trashed))
-            ->get();
-
-        // Get files trashed
-        $files_trashed = FileManagerFile::onlyTrashed()
-            ->where('user_id', $user_id)
-            ->whereNotIn('folder_id', array_values(array_unique(recursiveFind($folders_trashed->toArray(), 'unique_id'))))
-            ->get();
-
-        // Collect folders and files to single array
-        return collect([$folders, $files_trashed])->collapse();
-    }
-
-    /**
-     * Get directory with files
-     *
-     * @return \Illuminate\Support\Collection
-     */
-    public function folder(Request $request, $unique_id)
-    {
-        // Get user
-        $user_id = Auth::id();
-
-        // Get folder trash items
-        if ($request->query('trash')) {
-
-            // Get folders and files
-            $folders = FileManagerFolder::onlyTrashed()
-                ->where('user_id', $user_id)
-                ->with('parent')
-                ->where('parent_id', $unique_id)
-                ->get();
-
-            $files = FileManagerFile::onlyTrashed()
-                ->where('user_id', $user_id)
-                ->with('parent')
-                ->where('folder_id', $unique_id)
-                ->get();
-
-            // Collect folders and files to single array
-            return collect([$folders, $files])->collapse();
-        }
-
-        // Get folders and files
-        $folders = FileManagerFolder::with('parent')
-            ->where('user_id', $user_id)
-            ->where('parent_id', $unique_id)
-            ->get();
-
-        $files = FileManagerFile::with('parent')
-            ->where('user_id', $user_id)
-            ->where('folder_id', $unique_id)
-            ->get();
-
-        // Collect folders and files to single array
-        return collect([$folders, $files])->collapse();
-    }
-
-    /**
-     * Search files
-     *
-     * @param Request $request
-     * @return \Illuminate\Database\Eloquent\Collection
-     */
-    public function search(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'query' => 'required|string',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user
-        $user_id = Auth::id();
-
-        // Search files id db
-        $searched_files = FileManagerFile::search($request->input('query'))
-            ->where('user_id', $user_id)
-            ->get();
-        $searched_folders = FileManagerFolder::search($request->input('query'))
-            ->where('user_id', $user_id)
-            ->get();
-
-        // Collect folders and files to single array
-        return collect([$searched_folders, $searched_files])->collapse();
-    }
-
-    /**
-     * Create new folder
-     *
-     * @param Request $request
-     * @return array
-     */
-    public function create_folder(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'parent_id' => 'required|integer',
-            'name'      => 'string',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get parent_id from request
-        $parent_id = $request->parent_id === 0 ? 0 : $request->parent_id;
-
-        // Create folder
-        $folder = FileManagerFolder::create([
-            'user_id'   => Auth::id(),
-            'parent_id' => $parent_id,
-            'name'      => $request->has('name') ? $request->input('name') : 'New Folder',
-            'type'      => 'folder',
-            'unique_id' => $this->get_unique_id(),
-        ]);
-
-        // Return new folder
-        return $folder;
-    }
-
-    /**
-     * Rename item name
-     *
-     * @param Request $request
-     * @return mixed
-     */
-    public function rename_item(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'unique_id' => 'required|integer',
-            'name'      => 'required|string',
-            'type'      => 'required|string',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user id
-        $user_id = Auth::id();
-
-        // Update folder name
-        if ($request->type === 'folder') {
-
-            $item = FileManagerFolder::where('unique_id', $request->unique_id)
-                ->where('user_id', $user_id)
-                ->firstOrFail();
-
-            $item->name = $request->name;
-            $item->save();
-
-        } else {
-
-            $item = FileManagerFile::where('unique_id', $request->unique_id)
-                ->where('user_id', $user_id)
-                ->firstOrFail();
-
-            $item->name = $request->name;
-            $item->save();
-        }
-
-        // Return updated item
-        return $item;
-    }
-
-    /**
-     * Delete item
-     *
-     * @param Request $request
-     * @throws \Exception
-     */
-    public function delete_item(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'unique_id'    => 'required|integer',
-            'type'         => 'required|string',
-            'force_delete' => 'required|boolean',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user id
-        $user = Auth::user();
-
-        // Delete folder
-        if ($request->type === 'folder') {
-
-            // Get folder
-            $folder = FileManagerFolder::withTrashed()
-                ->with(['folders'])
-                ->where('user_id', $user->id)
-                ->where('unique_id', $request->unique_id)
-                ->first();
-
-            // Force delete children files
-            if ($request->force_delete) {
-
-                // Get children folder ids
-                $child_folders = filter_folders_ids($folder->trashed_folders, 'unique_id');
-
-                // Get children files
-                $files = FileManagerFile::onlyTrashed()
-                    ->where('user_id', $user->id)
-                    ->whereIn('folder_id', Arr::flatten([$request->unique_id, $child_folders]))
-                    ->get();
-
-                // Remove all children files
-                foreach ($files as $file) {
-
-                    // Delete file
-                    Storage::disk('local')->delete('/file-manager/' . $file->basename);
-
-                    // Delete thumbnail if exist
-                    if (!is_null($file->thumbnail)) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
-
-                    // Delete file permanently
-                    $file->forceDelete();
-                }
-
-                // Delete folder record
-                $folder->forceDelete();
-
-            } else {
-
-                // Remove folder from user favourites
-                $user->favourites()->detach($request->unique_id);
-
-                // Soft delete folder record
-                $folder->delete();
-            }
-        } else {
-
-            $file = FileManagerFile::withTrashed()
-                ->where('user_id', $user->id)
-                ->where('unique_id', $request->unique_id)
-                ->first();
-
-            if ($request->force_delete) {
-
-                // Delete file
-                Storage::disk('local')->delete('/file-manager/' . $file->basename);
-
-                // Delete thumbnail if exist
-                if ($file->thumbnail) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
-
-                // Delete file permanently
-                $file->forceDelete();
-            } else {
-
-                // Soft delete file
-                $file->delete();
-            }
-        }
-    }
-
-    /**
-     * Empty user trash
-     *
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
-     */
-    public function empty_trash()
-    {
-        // Get user id
-        $user_id = Auth::id();
-
-        // Get files and folders
-        $folders = FileManagerFolder::onlyTrashed()->where('user_id', $user_id)->get();
-        $files = FileManagerFile::onlyTrashed()->where('user_id', $user_id)->get();
-
-        // Force delete folder
-        $folders->each->forceDelete();
-
-        // Force delete files
-        foreach ($files as $file) {
-
-            // Delete file
-            Storage::disk('local')->delete('/file-manager/' . $file->basename);
-
-            // Delete thumbnail if exist
-            if ($file->thumbnail) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
-
-            // Delete file permanently
-            $file->forceDelete();
-        }
-
-        // Return response
-        return response('Done!', 200);
-    }
-
-    /**
-     * Restore item from trash
-     *
-     * @param Request $request
-     */
-    public function restore_item(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'unique_id' => 'required|integer',
-            'type'      => 'required|string',
-            'to_home'   => 'boolean',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user id
-        $user_id = Auth::id();
-
-        // Get folder
-        if ($request->type === 'folder') {
-
-            // Get folder
-            $item = FileManagerFolder::onlyTrashed()->where('user_id', $user_id)->where('unique_id', $request->unique_id)->first();
-
-            // Restore item to home directory
-            if ($request->has('to_home') && $request->to_home) {
-                $item->parent_id = 0;
-                $item->save();
-            }
-        } else {
-
-            // Get item
-            $item = FileManagerFile::onlyTrashed()->where('user_id', $user_id)->where('unique_id', $request->unique_id)->first();
-
-            // Restore item to home directory
-            if ($request->has('to_home') && $request->to_home) {
-                $item->folder_id = 0;
-                $item->save();
-            }
-        }
-
-        // Restore Item
-        $item->restore();
-    }
-
-    /**
-     * Upload items
-     *
-     * @param Request $request
-     * @return array
-     */
-    public function upload_item(Request $request)
-    {
-        // Check if user can upload
-        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100) {
-
-            abort(423, 'You exceed your storage limit!');
-        }
-
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'parent_id' => 'required|integer',
-            'file'      => 'required|file',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get parent_id from request
-        $folder_id = $request->parent_id === 0 ? 0 : $request->parent_id;
-        $file = $request->file('file');
-
-        // File
-        $filename = Str::random() . '-' . str_replace(' ', '', $file->getClientOriginalName());
-        $filetype = get_file_type($file);
-        $thumbnail = null;
-        $filesize = $file->getSize();
-        $directory = 'file-manager';
-
-        // create directory if not exist
-        if (!Storage::disk('local')->exists($directory)) {
-            Storage::disk('local')->makeDirectory($directory);
-        }
-
-        // Store to disk
-        Storage::disk('local')->putFileAs($directory, $file, $filename, 'public');
-
-        // Create image thumbnail
-        if ($filetype == 'image') {
-
-            $thumbnail = 'thumbnail-' . $filename;
-
-            // Create intervention image
-            $image = Image::make($file->getRealPath())->orientate();
-
-            $image->resize(256, null, function ($constraint) {
-                $constraint->aspectRatio();
-            })->stream();
-
-            // Store thumbnail to s3
-            Storage::disk('local')->put($directory . '/' . $thumbnail, $image);
-        }
-
-        // Store file
-        $new_file = FileManagerFile::create([
-            'user_id'   => Auth::id(),
-            'name'      => pathinfo($file->getClientOriginalName())['filename'],
-            'basename'  => $filename,
-            'folder_id' => $folder_id,
-            'mimetype'  => $file->getClientOriginalExtension(),
-            'filesize'  => $filesize,
-            'type'      => $filetype,
-            'thumbnail' => $thumbnail,
-            'unique_id' => $this->get_unique_id(),
-        ]);
-
-        return $new_file;
-    }
-
-    /**
-     * Move item
-     *
-     * @param Request $request
-     */
-    public function move_item(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'from_unique_id' => 'required|integer',
-            'to_unique_id'   => 'required|integer',
-            'from_type'      => 'required|string',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user id
-        $user_id = Auth::id();
-
-        if ($request->from_type === 'folder') {
-
-            // Move folder
-            $item = FileManagerFolder::where('user_id', $user_id)
-                ->where('unique_id', $request->from_unique_id)
-                ->firstOrFail();
-
-            $item->parent_id = $request->to_unique_id;
-
-        } else {
-
-            // Move file under new folder
-            $item = FileManagerFile::where('user_id', $user_id)
-                ->where('unique_id', $request->from_unique_id)
-                ->firstOrFail();
-
-            $item->folder_id = $request->to_unique_id;
-        }
-
-        $item->update();
-    }
-
-    /**
-     * Get file record
-     *
-     * @param $unique_id
-     * @return mixed
-     */
-    public function get_file_detail($unique_id)
-    {
-        // Get user id
-        $user_id = Auth::id();
-
-        return FileManagerFile::where('user_id', $user_id)->where('unique_id', $unique_id)->firstOrFail();
-    }
-
-    /**
-     * Get file
-     *
-     * @param $filename
-     * @return mixed
-     */
-    public function get_file($filename)
-    {
-        // Get user id
-        $user_id = Auth::id();
-
-        // Get file record
-        $file = FileManagerFile::withTrashed()
-            ->where('user_id', $user_id)
-            ->where('basename', $filename)
-            ->firstOrFail();
-
-        // Get file path
-        $path = storage_path() . '/app/file-manager/' . $file->basename;
-
-        // Check if file exist
-        if (!File::exists($path)) abort(404);
-
-        $file = File::get($path);
-        $type = File::mimeType($path);
-        $size = File::size($path);
-
-        // Create response
-        $response = Response::make($file, 200);
-        $response->header("Content-Type", $type);
-        $response->header("Content-Disposition", 'attachment; filename=' . $filename);
-        $response->header("Content-Length", $size);
-        $response->header("Accept-Ranges", "bytes");
-        $response->header("Content-Range", "bytes 0-" . $size . "/" . $size);
-
-        return $response;
-    }
-
-    /**
-     * Get image thumbnail
-     *
-     * @param $filename
-     * @return mixed
-     */
-    public function get_thumbnail($filename)
-    {
-        // Get user id
-        $user_id = Auth::id();
-
-        // Get file record
-        $file = FileManagerFile::withTrashed()
-            ->where('user_id', $user_id)
-            ->where('thumbnail', $filename)
-            ->firstOrFail();
-
-        // Get file path
-        $path = storage_path() . '/app/file-manager/' . $file->getOriginal('thumbnail');
-
-        // Check if file exist
-        if (!File::exists($path)) abort(404);
-
-        $file = File::get($path);
-        $type = File::mimeType($path);
-
-        // Create response
-        $response = Response::make($file, 200);
-        $response->header("Content-Type", $type);
-
-        return $response;
-    }
-
-    /**
-     * Get unique id
-     *
-     * @return int
-     */
-    private function get_unique_id(): int
-    {
-        // Get files and folders
-        $folders = FileManagerFolder::withTrashed()->get();
-        $files = FileManagerFile::withTrashed()->get();
-
-        // Get last ids
-        $folders_unique = $folders->isEmpty() ? 0 : $folders->last()->unique_id;
-        $files_unique = $files->isEmpty() ? 0 : $files->last()->unique_id;
-
-        // Count new unique id
-        $unique_id = $folders_unique > $files_unique ? $folders_unique + 1 : $files_unique + 1;
-
-        return $unique_id;
-    }
-}

app/Http/Controllers/Sharing/FileSharingController.php

@@ -0,0 +1,362 @@
+<?php
+
+namespace App\Http\Controllers\Sharing;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Share\AuthenticateShareRequest;
+use App\Http\Resources\ShareResource;
+use App\Http\Tools\Guardian;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Support\Facades\Cookie;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Collection;
+use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
+use App\FileManagerFolder;
+use App\FileManagerFile;
+use App\User;
+use App\Share;
+
+class FileSharingController extends Controller
+{
+
+    /**
+     * Show page index and delete access_token & shared_token cookie
+     *
+     * @return Factory|\Illuminate\View\View
+     */
+    public function index($token)
+    {
+        // Get shared token
+        $shared = Share::where(\DB::raw('BINARY `token`'), $token)
+            ->first();
+
+        if (!$shared) {
+            return view("index");
+        }
+
+        // Delete old access_token if exist
+        Cookie::queue('shared_access_token', '', -1);
+
+        // Set cookies
+        if ($shared->protected) {
+
+            // Set shared token
+            Cookie::queue('shared_token', $token, 43200);
+        }
+
+        // Return page index
+        return view("index");
+    }
+
+    /**
+     * Check Password for protected item
+     *
+     * @param AuthenticateShareRequest $request
+     * @param $token
+     * @return array
+     */
+    public function authenticate(AuthenticateShareRequest $request, $token)
+    {
+        // Get sharing record
+        $shared = Share::where(DB::raw('BINARY `token`'), $token)->firstOrFail();
+
+        // Check password
+        if (!Hash::check($request->password, $shared->password)) {
+
+            abort(401, __('vuefilemanager.incorrect_password'));
+        }
+
+        // Get owner of shared content
+        $user = User::find($shared->user_id);
+
+        // Define scope
+        $scope = !is_null($shared->permission) ? $shared->permission : 'visitor';
+
+        // Generate token for visitor/editor
+        $access_token = $user->createToken('shared_access_token', [$scope])->accessToken;
+
+        // Return authorize token with shared options
+        return response(new ShareResource($shared), 200)
+            ->cookie('shared_token', $shared->token, 43200)
+            ->cookie('shared_access_token', $access_token, 43200);
+    }
+
+    /**
+     * Browse private folders
+     *
+     * @param Request $request
+     * @param $unique_id
+     * @return Collection
+     */
+    public function get_private_folders(Request $request, $unique_id)
+    {
+        // Get sharing record
+        $shared = Share::where('token', $request->cookie('shared_token'))->firstOrFail();
+
+        // Check if user can get directory
+        Guardian::check_item_access($unique_id, $shared);
+
+        // Get files and folders
+        list($folders, $files) = $this->get_items($unique_id, $shared);
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Browse public folders
+     *
+     * @param $unique_id
+     * @return Collection
+     */
+    public function get_public_folders($unique_id, $token)
+    {
+        // Get sharing record
+        $shared = Share::where(DB::raw('BINARY `token`'), $token)->firstOrFail();
+
+        // Abort if folder is protected
+        if ($shared->protected) {
+            abort(403, "Sorry, you don't have permission");
+        }
+
+        // Check if user can get directory
+        Guardian::check_item_access($unique_id, $shared);
+
+        // Get files and folders
+        list($folders, $files) = $this->get_items($unique_id, $shared);
+
+        // Set thumbnail links for public files
+        $files->map(function ($item) use ($token) {
+            $item->setPublicUrl($token);
+        });
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Get shared public file record
+     *
+     * @param $token
+     * @return mixed
+     */
+    public function file_public($token)
+    {
+        // Get sharing record
+        $shared = Share::where(DB::raw('BINARY `token`'), $token)->firstOrFail();
+
+        // Abort if file is protected
+        if ($shared->protected) {
+            abort(403, "Sorry, you don't have permission");
+        }
+
+        // Get file
+        $file = FileManagerFile::where('user_id', $shared->user_id)
+            ->where('unique_id', $shared->item_id)
+            ->firstOrFail(['name', 'basename', 'thumbnail', 'type', 'filesize', 'mimetype']);
+
+        // Set urls
+        $file->setPublicUrl($token);
+
+        // Return record
+        return $file;
+    }
+
+    /**
+     * Get shared private file record
+     *
+     * @param $token
+     * @return mixed
+     */
+    public function file_private(Request $request)
+    {
+        // Get sharing record
+        $shared = Share::where('token', $request->cookie('shared_token'))->firstOrFail();
+
+        // Return record
+        return FileManagerFile::where('user_id', $shared->user_id)
+            ->where('unique_id', $shared->item_id)
+            ->firstOrFail(['name', 'basename', 'thumbnail', 'type', 'filesize', 'mimetype']);
+    }
+
+    /**
+     * Get navigation tree
+     *
+     * @param Request $request
+     * @return array
+     */
+    public function get_private_navigation_tree(Request $request)
+    {
+        // Get sharing record
+        $shared = get_shared($request->cookie('shared_token'));
+
+        // Check if user can get directory
+        Guardian::check_item_access($shared->item_id, $shared);
+
+        // Get folders
+        $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('parent_id', $shared->item_id)
+            ->where('user_id', $shared->user_id)
+            ->get(['id', 'parent_id', 'unique_id', 'name']);
+
+        // Return folder tree
+        return [
+            [
+                'unique_id' => $shared->item_id,
+                'name'      => __('vuefilemanager.home'),
+                'location'  => 'public',
+                'folders'   => $folders,
+            ]
+        ];
+    }
+
+    /**
+     * Get navigation tree
+     *
+     * @return array
+     */
+    public function get_public_navigation_tree($token)
+    {
+        // Get sharing record
+        $shared = Share::where('token', $token)->firstOrFail();
+
+        // Check if user can get directory
+        Guardian::check_item_access($shared->item_id, $shared);
+
+        // Get folders
+        $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('parent_id', $shared->item_id)
+            ->where('user_id', $shared->user_id)
+            ->get(['id', 'parent_id', 'unique_id', 'name']);
+
+        // Return folder tree
+        return [
+            [
+                'unique_id' => $shared->item_id,
+                'name'      => __('vuefilemanager.home'),
+                'location'  => 'public',
+                'folders'   => $folders,
+            ]
+        ];
+    }
+
+    /**
+     * Search private files
+     *
+     * @param Request $request
+     * @param $token
+     * @return Collection
+     */
+    public function search_private(Request $request)
+    {
+        // Get shared
+        $shared = get_shared($request->cookie('shared_token'));
+
+        // Search files id db
+        $searched_files = FileManagerFile::search($request->input('query'))
+            ->where('user_id', $shared->user_id)
+            ->get();
+        $searched_folders = FileManagerFolder::search($request->input('query'))
+            ->where('user_id', $shared->user_id)
+            ->get();
+
+        // Get all children content
+        $foldersIds = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('user_id', $shared->user_id)
+            ->where('parent_id', $shared->item_id)
+            ->get();
+
+        // Get accessible folders
+        $accessible_folder_ids = Arr::flatten([filter_folders_ids($foldersIds), $shared->item_id]);
+
+        // Filter files to only accessible files
+        $files = $searched_files->filter(function ($file) use ($accessible_folder_ids) {
+            return in_array($file->folder_id, $accessible_folder_ids);
+        });
+
+        // Filter folders to only accessible folders
+        $folders = $searched_folders->filter(function ($folder) use ($accessible_folder_ids) {
+            return in_array($folder->unique_id, $accessible_folder_ids);
+        });
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Search public files
+     *
+     * @param Request $request
+     * @param $token
+     * @return Collection
+     */
+    public function search_public(Request $request, $token)
+    {
+        // Get shared
+        $shared = get_shared($token);
+
+        // Abort if folder is protected
+        if ($shared->protected) {
+            abort(403, "Sorry, you don't have permission");
+        }
+
+        // Search files id db
+        $searched_files = FileManagerFile::search($request->input('query'))
+            ->where('user_id', $shared->user_id)
+            ->get();
+        $searched_folders = FileManagerFolder::search($request->input('query'))
+            ->where('user_id', $shared->user_id)
+            ->get();
+
+        // Get all children content
+        $foldersIds = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('user_id', $shared->user_id)
+            ->where('parent_id', $shared->item_id)
+            ->get();
+
+        // Get accessible folders
+        $accessible_folder_ids = Arr::flatten([filter_folders_ids($foldersIds), $shared->item_id]);
+
+        // Filter files
+        $files = $searched_files->filter(function ($file) use ($accessible_folder_ids, $token) {
+
+            // Set public urls
+            $file->setPublicUrl($token);
+
+            // check if item is in accessible folders
+            return in_array($file->folder_id, $accessible_folder_ids);
+        });
+
+        // Filter folders
+        $folders = $searched_folders->filter(function ($folder) use ($accessible_folder_ids) {
+
+            // check if item is in accessible folders
+            return in_array($folder->unique_id, $accessible_folder_ids);
+        });
+
+        // Collect folders and files to single array
+        return collect([$folders, $files])->collapse();
+    }
+
+    /**
+     * Get folders and files
+     *
+     * @param $unique_id
+     * @param $shared
+     * @return array
+     */
+    private function get_items($unique_id, $shared): array
+    {
+        $folders = FileManagerFolder::where('user_id', $shared->user_id)
+            ->where('parent_id', $unique_id)
+            ->get();
+
+        $files = FileManagerFile::where('user_id', $shared->user_id)
+            ->where('folder_id', $unique_id)
+            ->get();
+
+        return [$folders, $files];
+    }
+}

app/Http/Controllers/User/AccountController.php

@@ -0,0 +1,109 @@
+<?php
+
+namespace App\Http\Controllers\User;
+
+use App\Http\Tools\Demo;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use Illuminate\Support\Facades\Validator;
+use App\Http\Controllers\Controller;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Http\Request;
+use ByteUnits\Metric;
+use App\User;
+
+class AccountController extends Controller
+{
+    /**
+     * Get all user data to frontend
+     *
+     * @return array
+     */
+    public function user()
+    {
+        // Get User
+        $user = User::with(['favourites', 'latest_uploads'])
+            ->where('id', Auth::id())
+            ->first();
+
+        return [
+            'user'           => $user->only(['name', 'email', 'avatar']),
+            'favourites'     => $user->favourites->makeHidden(['pivot']),
+            'latest_uploads' => $user->latest_uploads->makeHidden(['user_id', 'basename']),
+            'storage' => [
+                'used'       => Metric::bytes($user->used_capacity)->format(),
+                'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
+                'percentage' => get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity')),
+            ],
+        ];
+    }
+
+    /**
+     * Update user profile
+     *
+     * @param Request $request
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function update_profile(Request $request)
+    {
+        // Validate request
+        $validator = Validator::make($request->all(), [
+            'avatar'  => 'file',
+            'name'    => 'string',
+            'value'   => 'string',
+        ]);
+
+        // Return error
+        if ($validator->fails()) abort(400, 'Bad input');
+
+        // Get user
+        $user = Auth::user();
+
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
+        if ($request->hasFile('avatar')) {
+
+            // Update avatar
+            $avatar = store_avatar($request->file('avatar'), 'avatars');
+
+            // Update data
+            $user->update(['avatar' => $avatar]);
+
+        } else {
+
+            // Update text data
+            $user->update(make_single_input($request));
+        }
+
+        return response('Saved!', 204);
+    }
+
+    /**
+     * Change user password
+     *
+     * @param Request $request
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function change_password(Request $request)
+    {
+        // Validate request
+        $request->validate([
+            'password' => ['required', 'string', 'min:6', 'confirmed'],
+        ]);
+
+        // Get user
+        $user = Auth::user();
+
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
+        // Change and store new password
+        $user->password = Hash::make($request->input('password'));
+        $user->save();
+
+        return response('Changed!', 204);
+    }
+}

app/Http/Controllers/UserAccountController.php

@@ -1,177 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\FileManagerFolder;
-use App\User;
-use ByteUnits\Metric;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\File;
-use Illuminate\Support\Facades\Hash;
-use App\Http\Controllers\Controller;
-use Illuminate\Support\Facades\Validator;
-
-
-class UserAccountController extends Controller
-{
-    /**
-     * Get all user data to frontend
-     *
-     * @return array|\Illuminate\Database\Eloquent\Builder|\Illuminate\Database\Eloquent\Model|object|null
-     */
-    public function user()
-    {
-        $user_id = Auth::id();
-
-        // Get User
-        $user = User::with(['favourites', 'latest_uploads'])
-            ->where('id', $user_id)
-            ->first();
-
-        return [
-            'user'           => $user->only(['name', 'email', 'avatar']),
-            'favourites'     => $user->favourites->makeHidden(['pivot']),
-            'latest_uploads' => $user->latest_uploads->makeHidden(['user_id', 'basename']),
-            'storage' => [
-                'used'       => Metric::bytes($user->used_capacity)->format(),
-                'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
-                'percentage' => get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity')),
-            ],
-        ];
-    }
-
-    /**
-     * Get user folder tree
-     *
-     * @return array
-     */
-    public function folder_tree() {
-
-        $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
-            ->where('parent_id', 0)
-            ->where('user_id', Auth::id())
-            ->get(['id', 'parent_id', 'unique_id', 'name']);
-
-        return [
-            [
-                'unique_id' => 0,
-                'name'      => __('vuefilemanager.home'),
-                'location'  => 'base',
-                'folders'  => $folders,
-            ]
-        ];
-    }
-
-    /**
-     * Update user profile
-     *
-     * @param Request $request
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
-     */
-    public function update_profile(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'avatar'  => 'file',
-            '_method' => 'string',
-            'name'    => 'string',
-            'value'   => 'string',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user
-        $user = Auth::user();
-
-        if ($request->hasFile('avatar')) {
-
-            // Update avatar
-            $avatar = store_avatar($request->file('avatar'), 'avatars');
-
-            // Update data
-            $user->update(['avatar' => $avatar]);
-
-        } else {
-
-            // Update text data
-            $user->update(make_single_input($request));
-        }
-
-        return response('Saved!', 200);
-    }
-
-    /**
-     * Change user password
-     *
-     * @param Request $request
-     * @return array
-     */
-    public function change_password(Request $request)
-    {
-        // Validate request
-        $request->validate([
-            'password' => ['required', 'string', 'min:6', 'confirmed'],
-        ]);
-
-        // Get user
-        $user = Auth::user();
-
-        // Change and store new password
-        $user->password = Hash::make($request->input('password'));
-        $user->save();
-    }
-
-    /**
-     * Add folder to user favourites
-     *
-     * @param Request $request
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
-     */
-    public function add_to_favourites(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'unique_id' => 'required|integer',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user
-        $user = Auth::user();
-
-        // Add folder to user favourites
-        $user->favourites()->attach($request->unique_id);
-
-        // Return updated favourites
-        return $user->favourites->makeHidden(['pivot']);
-    }
-
-    /**
-     * Remove folder from user favourites
-     *
-     * @param Request $request
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
-     */
-    public function remove_from_favourites(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'unique_id' => 'required|integer',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        // Get user
-        $user = Auth::user();
-
-        // Remove folder from user favourites
-        $user->favourites()->detach($request->unique_id);
-
-        // Return updated favourites
-        return $user->favourites->makeHidden(['pivot']);
-    }
-}

app/Http/Kernel.php

@@ -3,6 +3,8 @@
 namespace App\Http;
 
 use App\Http\Middleware\CookieAuth;
+use App\Http\Middleware\LastCheck;
+use App\Http\Middleware\SharedAuth;
 use Illuminate\Foundation\Http\Kernel as HttpKernel;
 
 class Kernel extends HttpKernel
@@ -40,6 +42,7 @@ class Kernel extends HttpKernel
         ],
 
         'api' => [
+            \App\Http\Middleware\EncryptCookies::class,
             //'throttle:60,1',
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],
@@ -53,6 +56,8 @@ class Kernel extends HttpKernel
      * @var array
      */
     protected $routeMiddleware = [
+        'auth.master'      => CookieAuth::class,
+        'auth.shared'      => SharedAuth::class,
         'auth'             => \App\Http\Middleware\Authenticate::class,
         'auth.basic'       => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
         'bindings'         => \Illuminate\Routing\Middleware\SubstituteBindings::class,
@@ -63,7 +68,8 @@ class Kernel extends HttpKernel
         'signed'           => \Illuminate\Routing\Middleware\ValidateSignature::class,
         'throttle'         => \Illuminate\Routing\Middleware\ThrottleRequests::class,
         'verified'         => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
-        'auth.cookie'      => CookieAuth::class,
+        'scopes'           => \Laravel\Passport\Http\Middleware\CheckScopes::class,
+        'scope'            => \Laravel\Passport\Http\Middleware\CheckForAnyScope::class,
     ];
 
     /**
@@ -77,6 +83,7 @@ class Kernel extends HttpKernel
         \Illuminate\Session\Middleware\StartSession::class,
         \Illuminate\View\Middleware\ShareErrorsFromSession::class,
         CookieAuth::class,
+        SharedAuth::class,
         \App\Http\Middleware\Authenticate::class,
         \Illuminate\Routing\Middleware\ThrottleRequests::class,
         \Illuminate\Session\Middleware\AuthenticateSession::class,

app/Http/Middleware/CookieAuth.php

@@ -3,6 +3,7 @@
 namespace App\Http\Middleware;
 
 use Closure;
+use Illuminate\Support\Facades\Auth;
 
 class CookieAuth
 {
@@ -16,14 +17,12 @@ class CookieAuth
     public function handle($request, Closure $next)
     {
         if (!$request->bearerToken()) {
-            if ($request->hasCookie('token')) {
+            if ($request->hasCookie('access_token')) {
 
-                $token = $request->cookie('token');
+                $access_token = $request->cookie('access_token');
 
-                $request->headers->add(['Authorization' => 'Bearer ' . $token]);
+                $request->headers->add(['Authorization' => 'Bearer ' . $access_token]);
 
-            } else {
-                abort(401);
             }
         }
         return $next($request);

app/Http/Middleware/SharedAuth.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+
+class SharedAuth
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        if (!$request->bearerToken()) {
+            if ($request->hasCookie('shared_access_token')) {
+
+                $shared_access_token = $request->cookie('shared_access_token');
+
+                $request->headers->add(['Authorization' => 'Bearer ' . $shared_access_token]);
+
+            }
+        }
+        return $next($request);
+    }
+}

app/Http/Requests/Auth/CheckAccountRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests\Auth;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class CheckAccountRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'email' => 'required|string|email',
+        ];
+    }
+}

app/Http/Requests/FileBrowser/SearchRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests\FileBrowser;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class SearchRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'query' => 'required|string',
+        ];
+    }
+}

app/Http/Requests/FileFunctions/CreateFolderRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\FileFunctions;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CreateFolderRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'parent_id' => 'required|integer',
+            'name'      => 'string',
+        ];
+    }
+}

app/Http/Requests/FileFunctions/DeleteItemRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\FileFunctions;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class DeleteItemRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'type'         => 'required|string',
+            'force_delete' => 'required|boolean',
+        ];
+    }
+}

app/Http/Requests/FileFunctions/MoveItemRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\FileFunctions;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class MoveItemRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'to_unique_id'   => 'required|integer',
+            'from_type'      => 'required|string',
+        ];
+    }
+}

app/Http/Requests/FileFunctions/RenameItemRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\FileFunctions;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class RenameItemRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'name'      => 'required|string',
+            'type'      => 'required|string',
+        ];
+    }
+}

app/Http/Requests/FileFunctions/UploadRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\FileFunctions;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class UploadRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'parent_id' => 'required|integer',
+            'file'      => 'required|file',
+        ];
+    }
+}

app/Http/Requests/Share/AuthenticateShareRequest.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Requests\Share;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class AuthenticateShareRequest extends FormRequest
+{
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'password' => 'required|string',
+        ];
+    }
+}

app/Http/Requests/Share/CreateShareRequest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Requests\Share;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class CreateShareRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return Auth::check();
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'isPassword' => 'required|boolean',
+            'unique_id'  => 'required|integer',
+            'type'       => 'required|string',
+            'permission' => 'string',
+            'password'   => 'string',
+        ];
+    }
+}

app/Http/Requests/Share/UpdateShareRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Share;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class UpdateShareRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return Auth::check();
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'protected'  => 'required|boolean',
+            'permission' => 'nullable|string',
+            'password'   => 'string',
+        ];
+    }
+}

app/Http/Resources/ShareResource.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ShareResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'data' => [
+                'id'         => (string)$this->id,
+                'type'       => 'shares',
+                'attributes' => [
+                    'permission' => $this->permission,
+                    'protected'  => $this->protected,
+                    'item_id'    => $this->item_id,
+                    'token'      => $this->token,
+                    'link'       => $this->link,
+                    'type'       => $this->type,
+                    'created_at' => $this->created_at,
+                    'updated_at' => $this->updated_at,
+                ]
+            ]
+        ];
+    }
+}

app/Http/Tools/Demo.php

@@ -0,0 +1,143 @@
+<?php
+
+namespace App\Http\Tools;
+
+use App;
+use App\Share;
+use App\FileManagerFile;
+use App\FileManagerFolder;
+use App\Http\Requests\FileFunctions\RenameItemRequest;
+use App\User;
+use ByteUnits\Metric;
+use Carbon\Carbon;
+use Illuminate\Contracts\Routing\ResponseFactory;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+use Intervention\Image\ImageManagerStatic as Image;
+
+
+class Demo
+{
+    /**
+     * Create new directory
+     *
+     * @param $request
+     * @return array
+     * @throws \Exception
+     */
+    public static function create_folder($request)
+    {
+        // Get variables
+        $user_scope = $request->user() ? $request->user()->token()->scopes[0] : 'editor';
+        $name = $request->has('name') ? $request->input('name') : 'New Folder';
+
+        return [
+            'user_id'    => 1,
+            'id'         => random_int(1000, 9999),
+            'parent_id'  => random_int(1000, 9999),
+            'name'       => $name,
+            'type'       => 'folder',
+            'unique_id'  => random_int(1000, 9999),
+            'user_scope' => $user_scope,
+            'items'      => '0',
+            'updated_at' => Carbon::now()->format('j M Y \a\t H:i'),
+            'created_at' => Carbon::now()->format('j M Y \a\t H:i'),
+        ];
+    }
+
+    /**
+     * Rename item name
+     *
+     * @param RenameItemRequest $request
+     * @param $unique_id
+     * @return mixed
+     */
+    public static function rename_item($request, $unique_id)
+    {
+        // Get item
+        if ($request->type === 'folder') {
+
+            $item = FileManagerFolder::where('unique_id', $unique_id)
+                ->where('user_id', 1)
+                ->first();
+
+        } else {
+
+            $item = FileManagerFile::where('unique_id', $unique_id)
+                ->where('user_id', 1)
+                ->first();
+        }
+
+        if ($item) {
+            $item->name = $request->name;
+
+            return $item;
+
+        } else {
+
+            return [
+                'unique_id' => $request->unique_id,
+                'name'      => $request->name,
+                'type'      => $request->type,
+            ];
+        }
+    }
+
+    /**
+     * Upload file
+     *
+     * @param $request
+     * @return array
+     * @throws \Exception
+     */
+    public static function upload($request)
+    {
+        // Get user data
+        $user_scope = $request->user() ? $request->user()->token()->scopes[0] : 'editor';
+
+        // File
+        $file = $request->file('file');
+        $filename = Str::random() . '-' . str_replace(' ', '', $file->getClientOriginalName());
+        $thumbnail = null;
+        $filesize = $file->getSize();
+        $filetype = get_file_type($file);
+
+        return [
+            'id'         => random_int(1000, 9999),
+            'unique_id'  => random_int(1000, 9999),
+            'folder_id'  => $request->parent_id,
+            'thumbnail'  => 'data:' . $request->file('file')->getMimeType() . ';base64, ' . base64_encode(file_get_contents($request->file('file'))),
+            'name'       => $file->getClientOriginalName(),
+            'basename'   => $filename,
+            'mimetype'   => $file->getClientOriginalExtension(),
+            'filesize'   => Metric::bytes($filesize)->format(),
+            'type'       => $filetype,
+            'file_url'   => 'https://vuefilemanager.hi5ve.digital/assets/vue-file-manager-preview.jpg',
+            'user_scope' => $user_scope,
+            'created_at' => Carbon::now()->format('j M Y \a\t H:i'),
+            'updated_at' => Carbon::now()->format('j M Y \a\t H:i'),
+        ];
+    }
+
+    /**
+     * Return 204 status
+     *
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public static function response_204() {
+
+        return response('Done!', 204);
+    }
+
+    /**
+     * Return 204 status
+     *
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public static function favourites($user) {
+
+        return $user->favourites->makeHidden(['pivot']);
+    }
+}

app/Http/Tools/Editor.php

@@ -0,0 +1,294 @@
+<?php
+
+namespace App\Http\Tools;
+
+use App;
+use App\Share;
+use App\FileManagerFile;
+use App\FileManagerFolder;
+use App\Http\Requests\FileFunctions\RenameItemRequest;
+use App\User;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+use Intervention\Image\ImageManagerStatic as Image;
+
+
+class Editor
+{
+    /**
+     * Create new directory
+     *
+     * @param $request
+     * @param null $shared
+     * @return FileManagerFolder|\Illuminate\Database\Eloquent\Model
+     */
+    public static function create_folder($request, $shared = null)
+    {
+        // Get variables
+        $user_scope = is_null($shared) ? $request->user()->token()->scopes[0] : 'editor';
+        $name = $request->has('name') ? $request->input('name') : 'New Folder';
+        $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
+
+        // Create folder
+        $folder = FileManagerFolder::create([
+            'parent_id'  => $request->parent_id,
+            'unique_id'  => get_unique_id(),
+            'user_scope' => $user_scope,
+            'user_id'    => $user_id,
+            'type'       => 'folder',
+            'name'       => $name,
+        ]);
+
+        // Return new folder
+        return $folder;
+    }
+
+    /**
+     * Rename item name
+     *
+     * @param RenameItemRequest $request
+     * @param $unique_id
+     * @param null $shared
+     * @return \Illuminate\Database\Eloquent\Builder|\Illuminate\Database\Eloquent\Model
+     * @throws \Exception
+     */
+    public static function rename_item($request, $unique_id, $shared = null)
+    {
+        // Get user id
+        $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
+
+        // Get item
+        $item = get_item($request->type, $unique_id, $user_id);
+
+        // Rename item
+        $item->update([
+            'name' => $request->name
+        ]);
+
+        // Return updated item
+        return $item;
+    }
+
+    /**
+     * Delete file or folder
+     *
+     * @param $request
+     * @param $unique_id
+     * @param null $shared
+     * @throws \Exception
+     */
+    public static function delete_item($request, $unique_id, $shared = null)
+    {
+        // Get user id
+        $user = is_null($shared) ? Auth::user() : User::findOrFail($shared->user_id);
+
+        // Delete folder
+        if ($request->type === 'folder') {
+
+            // Get folder
+            $folder = FileManagerFolder::withTrashed()
+                ->with(['folders'])
+                ->where('user_id', $user->id)
+                ->where('unique_id', $unique_id)
+                ->first();
+
+            // Get folder shared record
+            $shared = Share::where('user_id', $user->id)
+                ->where('type', '=', 'folder')
+                ->where('item_id', $unique_id)
+                ->first();
+
+            // Delete folder shared record
+            if ($shared) {
+                $shared->delete();
+            }
+
+            // Force delete children files
+            if ($request->force_delete) {
+
+                // Get children folder ids
+                $child_folders = filter_folders_ids($folder->trashed_folders, 'unique_id');
+
+                // Get children files
+                $files = FileManagerFile::onlyTrashed()
+                    ->where('user_id', $user->id)
+                    ->whereIn('folder_id', Arr::flatten([$unique_id, $child_folders]))
+                    ->get();
+
+                // Remove all children files
+                foreach ($files as $file) {
+
+                    // Delete file
+                    Storage::disk('local')->delete('/file-manager/' . $file->basename);
+
+                    // Delete thumbnail if exist
+                    if (!is_null($file->thumbnail)) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
+
+                    // Delete file permanently
+                    $file->forceDelete();
+                }
+
+                // Delete folder record
+                $folder->forceDelete();
+            }
+
+            // Soft delete items
+            if (!$request->force_delete) {
+
+                // Remove folder from user favourites
+                $user->favourites()->detach($unique_id);
+
+                // Soft delete folder record
+                $folder->delete();
+            }
+        }
+
+        // Delete item
+        if ($request->type !== 'folder') {
+
+            // Get file
+            $file = FileManagerFile::withTrashed()
+                ->where('user_id', $user->id)
+                ->where('unique_id', $unique_id)
+                ->first();
+
+            // Get folder shared record
+            $shared = Share::where('user_id', $user->id)
+                ->where('type', '=', 'file')
+                ->where('item_id', $unique_id)
+                ->first();
+
+            // Delete file shared record
+            if ($shared) {
+                $shared->delete();
+            }
+
+            // Force delete file
+            if ($request->force_delete) {
+
+                // Delete file
+                Storage::disk('local')->delete('/file-manager/' . $file->basename);
+
+                // Delete thumbnail if exist
+                if ($file->thumbnail) Storage::disk('local')->delete('/file-manager/' . $file->getOriginal('thumbnail'));
+
+                // Delete file permanently
+                $file->forceDelete();
+            }
+
+            // Soft delete file
+            if (!$request->force_delete) {
+
+                // Soft delete file
+                $file->delete();
+            }
+        }
+    }
+
+    /**
+     * Upload file
+     *
+     * @param $request
+     * @param null $shared
+     * @return FileManagerFile|\Illuminate\Database\Eloquent\Model
+     * @throws \Exception
+     */
+    public static function upload($request, $shared = null)
+    {
+        // Get user data
+        $user_scope = is_null($shared) ? $request->user()->token()->scopes[0] : 'editor';
+        $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
+
+        // Get parent_id from request
+        $folder_id = $request->parent_id === 0 ? 0 : $request->parent_id;
+        $file = $request->file('file');
+
+        // File
+        $filename = Str::random() . '-' . str_replace(' ', '', $file->getClientOriginalName());
+        $filetype = get_file_type($file);
+        $filesize = $file->getSize();
+        $directory = 'file-manager';
+        $thumbnail = null;
+
+        // create directory if not exist
+        if (!Storage::disk('local')->exists($directory)) {
+            Storage::disk('local')->makeDirectory($directory);
+        }
+
+        // Store to disk
+        Storage::disk('local')->putFileAs($directory, $file, $filename, 'public');
+
+        // Create image thumbnail
+        if ($filetype == 'image') {
+
+            // Get thumbnail name
+            $thumbnail = 'thumbnail-' . $filename;
+
+            // Create intervention image
+            $image = Image::make($file->getRealPath())->orientate();
+
+            // Resize image
+            $image->resize(256, null, function ($constraint) {
+                $constraint->aspectRatio();
+            })->stream();
+
+            // Store thumbnail to disk
+            Storage::disk('local')->put($directory . '/' . $thumbnail, $image);
+        }
+
+        // Store file
+        $options = [
+            'name'       => pathinfo($file->getClientOriginalName())['filename'],
+            'mimetype'   => $file->getClientOriginalExtension(),
+            'unique_id'  => get_unique_id(),
+            'user_scope' => $user_scope,
+            'folder_id'  => $folder_id,
+            'thumbnail'  => $thumbnail,
+            'basename'   => $filename,
+            'filesize'   => $filesize,
+            'type'       => $filetype,
+            'user_id'    => $user_id,
+        ];
+
+        // Return new file
+        return FileManagerFile::create($options);
+    }
+
+    /**
+     * Move folder or file to new location
+     *
+     * @param $request
+     * @param $unique_id
+     * @param null $shared
+     */
+    public static function move($request, $unique_id, $shared = null)
+    {
+        // Get user id
+        $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
+
+        if ($request->from_type === 'folder') {
+
+            // Move folder
+            $item = FileManagerFolder::where('user_id', $user_id)
+                ->where('unique_id', $unique_id)
+                ->firstOrFail();
+
+            $item->update([
+                'parent_id' => $request->to_unique_id
+            ]);
+
+        } else {
+
+            // Move file under new folder
+            $item = FileManagerFile::where('user_id', $user_id)
+                ->where('unique_id', $unique_id)
+                ->firstOrFail();
+
+            $item->update([
+                'folder_id' => $request->to_unique_id
+            ]);
+        }
+    }
+}

app/Http/Tools/Guardian.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Tools;
+
+use App;
+use App\FileManagerFolder;
+use Illuminate\Support\Arr;
+
+
+class Guardian
+{
+    /**
+     * Check access to requested directory
+     *
+     * @param integer|array $requested_id
+     * @param string $shared Shared record detail
+     */
+    public static function check_item_access($requested_id, $shared)
+    {
+        // Get all children folders
+        $foldersIds = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
+            ->where('user_id', $shared->user_id)
+            ->where('parent_id', $shared->item_id)
+            ->get();
+
+        // Get all authorized parent folders by shared folder as root of tree
+        $accessible_folder_ids = Arr::flatten([filter_folders_ids($foldersIds), $shared->item_id]);
+
+        // Check user access
+        if ( is_array($requested_id) ) {
+            foreach ($requested_id as $id) {
+                if (!in_array($id, $accessible_folder_ids))
+                    abort(403);
+            }
+        }
+
+        if (! is_array($requested_id)) {
+            if (! in_array($requested_id, $accessible_folder_ids))
+                abort(403);
+        }
+    }
+}

app/Http/helpers.php

@@ -1,11 +1,102 @@
 <?php
 
+use App\FileManagerFile;
+use App\FileManagerFolder;
+use App\Share;
 use ByteUnits\Metric;
 use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Intervention\Image\ImageManagerStatic as Image;
 
+/**
+ * Get app version from config
+ *
+ * @return \Illuminate\Config\Repository|mixed
+ */
+function get_version() {
+    return config('vuefilemanager.version');
+}
+
+/**
+ * Check if is demo
+ *
+ * @return mixed
+ */
+function is_demo($user_id) {
+
+    return env('APP_DEMO', false) && $user_id === 1;
+}
+
+/**
+ * Get folder or file item
+ *
+ * @param $type
+ * @param $unique_id
+ * @param $user_id
+ * @return \Illuminate\Database\Eloquent\Builder|Model
+ */
+function get_item($type, $unique_id, $user_id) {
+
+    if ($type === 'folder') {
+
+        // Return folder item
+        return FileManagerFolder::where('unique_id', $unique_id)
+            ->where('user_id', $user_id)
+            ->firstOrFail();
+    }
+
+    // Return file item
+    return FileManagerFile::where('unique_id', $unique_id)
+        ->where('user_id', $user_id)
+        ->firstOrFail();
+}
+
+/**
+ * Get shared token
+ *
+ * @param $token
+ * @return \Illuminate\Database\Eloquent\Builder|Model
+ */
+function get_shared($token) {
+
+    return Share::where(DB::raw('BINARY `token`'), $token)
+        ->firstOrFail();
+}
+
+/**
+ * Check if shared permission is editor
+ *
+ * @param $shared
+ * @return bool
+ */
+function is_editor($shared) {
+
+    return $shared->permission === 'editor';
+}
+
+/**
+ * Get unique id
+ *
+ * @return int
+ */
+function get_unique_id(): int
+{
+    // Get files and folders
+    $folders = FileManagerFolder::withTrashed()->get();
+    $files = FileManagerFile::withTrashed()->get();
+
+    // Get last ids
+    $folders_unique = $folders->isEmpty() ? 0 : $folders->last()->unique_id;
+    $files_unique = $files->isEmpty() ? 0 : $files->last()->unique_id;
+
+    // Count new unique id
+    $unique_id = $folders_unique > $files_unique ? $folders_unique + 1 : $files_unique + 1;
+
+    return $unique_id;
+}
 
 /**
  * Store user avatar to storage
@@ -102,8 +193,7 @@ function get_storage_fill_percentage($used, $capacity)
  */
 function user_storage_percentage()
 {
-
-    $user = \Illuminate\Support\Facades\Auth::user();
+    $user = Auth::user();
 
     return get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity'));
 }

app/Providers/AuthServiceProvider.php

@@ -27,5 +27,17 @@ class AuthServiceProvider extends ServiceProvider
         $this->registerPolicies();
 
         Passport::routes();
+
+        Passport::tokensCan([
+            'master'  => 'Master',
+            'editor'  => 'Editor',
+            'visitor' => 'Visitor',
+        ]);
+
+        Passport::setDefaultScope([
+            'master',
+            'editor',
+            'visitor',
+        ]);
     }
 }

app/Share.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * App\Share
+ *
+ * @property int $id
+ * @property int $user_id
+ * @property string $token
+ * @property int $item_id
+ * @property string $type
+ * @property string|null $permission
+ * @property int $protected
+ * @property string|null $password
+ * @property \Illuminate\Support\Carbon|null $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read string $link
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share newQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share query()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereItemId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share wherePassword($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share wherePermission($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereProtected($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereToken($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereType($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereUpdatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\Share whereUserId($value)
+ * @mixin \Eloquent
+ */
+class Share extends Model
+{
+    protected $guarded = ['id'];
+
+    protected $appends = ['link'];
+
+    /**
+     * Generate share link
+     *
+     * @return string
+     */
+    public function getLinkAttribute() {
+
+        return url('/shared', ['token' => $this->attributes['token']]);
+    }
+}

app/User.php

@@ -12,6 +12,47 @@ use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Notification;
 use Laravel\Passport\HasApiTokens;
 
+/**
+ * App\User
+ *
+ * @property int $id
+ * @property string $name
+ * @property string $email
+ * @property \Illuminate\Support\Carbon|null $email_verified_at
+ * @property string $password
+ * @property \Illuminate\Contracts\Routing\UrlGenerator|string $avatar
+ * @property string|null $remember_token
+ * @property \Illuminate\Support\Carbon|null $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read \Illuminate\Database\Eloquent\Collection|\Laravel\Passport\Client[] $clients
+ * @property-read int|null $clients_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFolder[] $favourites
+ * @property-read int|null $favourites_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFile[] $files
+ * @property-read int|null $files_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFile[] $files_with_trashed
+ * @property-read int|null $files_with_trashed_count
+ * @property-read mixed $used_capacity
+ * @property-read \Illuminate\Database\Eloquent\Collection|\App\FileManagerFile[] $latest_uploads
+ * @property-read int|null $latest_uploads_count
+ * @property-read \Illuminate\Notifications\DatabaseNotificationCollection|\Illuminate\Notifications\DatabaseNotification[] $notifications
+ * @property-read int|null $notifications_count
+ * @property-read \Illuminate\Database\Eloquent\Collection|\Laravel\Passport\Token[] $tokens
+ * @property-read int|null $tokens_count
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User newQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User query()
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereAvatar($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereEmail($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereEmailVerifiedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User wherePassword($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereRememberToken($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|\App\User whereUpdatedAt($value)
+ * @mixin \Eloquent
+ */
 class User extends Authenticatable
 {
     use HasApiTokens, Notifiable;

composer.json

@@ -21,6 +21,7 @@
         "teamtnt/laravel-scout-tntsearch-driver": "^7.2"
     },
     "require-dev": {
+        "barryvdh/laravel-ide-helper": "^2.7",
         "facade/ignition": "^1.4",
         "fzaninotto/faker": "^1.4",
         "mockery/mockery": "^1.0",

config/vuefilemanager.php

@@ -2,6 +2,8 @@
 
 return [
 
+    'version' => '1.4.1',
+
     // Your app name
     'app_name' => 'VueFileManager',
 
@@ -15,5 +17,5 @@ return [
     'limit_storage_by_capacity' => true,
 
     // Define user storage capacity in MB. E.g. value 2000 is 2.00GB
-    'user_storage_capacity' => 5000,
+    'user_storage_capacity' => 300,
 ];

database/migrations/2020_04_20_071047_create_shares_table.php

@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateSharesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('shares', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->bigInteger('user_id');
+            $table->string('token', 16)->unique();
+            $table->bigInteger('item_id');
+            $table->enum('type', ['file', 'files', 'folder']);
+            $table->enum('permission', ['visitor', 'editor'])->nullable();
+            $table->boolean('protected');
+            $table->string('password')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('shares');
+    }
+}

database/migrations/2020_04_24_055817_add_user_scope_to_file_manager_files_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddUserScopeToFileManagerFilesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            $table->string('user_scope')->after('type')->default('master');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2020_04_24_080943_add_user_scope_to_file_manager_folders_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddUserScopeToFileManagerFoldersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('file_manager_folders', function (Blueprint $table) {
+            $table->string('user_scope')->after('type')->default('master');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('file_manager_folders', function (Blueprint $table) {
+            //
+        });
+    }
+}

package-lock.json

@@ -5328,9 +5328,9 @@
             "dev": true
         },
         "in-publish": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-            "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+            "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
         },
         "indent-string": {
             "version": "4.0.0",
@@ -6645,9 +6645,9 @@
             "dev": true
         },
         "node-sass": {
-            "version": "4.13.1",
-            "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-            "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
+            "version": "4.14.0",
+            "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.0.tgz",
+            "integrity": "sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==",
             "requires": {
                 "async-foreach": "^0.1.3",
                 "chalk": "^1.1.1",
@@ -8051,9 +8051,9 @@
             "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
         },
         "psl": {
-            "version": "1.7.0",
-            "resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
-            "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ=="
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+            "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
         },
         "public-encrypt": {
             "version": "4.0.3",
@@ -9316,9 +9316,9 @@
             }
         },
         "spdx-exceptions": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-            "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA=="
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+            "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
         },
         "spdx-expression-parse": {
             "version": "3.0.0",
@@ -10328,9 +10328,9 @@
             "dev": true
         },
         "vee-validate": {
-            "version": "3.2.5",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.2.5.tgz",
-            "integrity": "sha512-qUgx4fcD077aNYuaRmK5qZ6G/qRHI0igC5tvGP1IRtvkScOyhCHuZwCcto4VPy5Cip0yAOqrbFudD9JOevwZhw=="
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.3.0.tgz",
+            "integrity": "sha512-+QQZgA0I9ZTDsYNOSFlUqOvGIqW4yxjloxQCC6TD0rPn407G9hifn6RnId8kzl6+zHfl3/dE+bko49mYzgNNGg=="
         },
         "vendors": {
             "version": "1.0.4",
@@ -10366,9 +10366,9 @@
             "dev": true
         },
         "vue-i18n": {
-            "version": "8.16.0",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.16.0.tgz",
-            "integrity": "sha512-cp9JOsx4ETzlCsnD22FE8ZhAmD8kcyNLRKV0DPsS7bBNTCdIlOKuyTGonWKYcGCUtNMtwemDWRBevRm8eevBVg=="
+            "version": "8.17.4",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.4.tgz",
+            "integrity": "sha512-wpk/drIkPf6gHCtvHc8zAZ1nsWBZ+/OOJYtJxqhYD6CKT0FJAG5oypwgF9kABt30FBWhl8NEb/QY+vaaBARlFg=="
         },
         "vue-loader": {
             "version": "15.9.1",
@@ -10383,6 +10383,11 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-router": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+            "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
+        },
         "vue-style-loader": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -10410,9 +10415,9 @@
             "dev": true
         },
         "vuex": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
-            "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
+            "integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
         },
         "watchpack": {
             "version": "1.6.1",

package.json

@@ -23,10 +23,11 @@
         "@fortawesome/vue-fontawesome": "^0.1.9",
         "css-element-queries": "^1.2.3",
         "lodash": "^4.17.15",
-        "node-sass": "^4.13.1",
-        "vee-validate": "^3.2.5",
+        "node-sass": "^4.14.0",
+        "vee-validate": "^3.3.0",
         "vue": "^2.6.10",
-        "vue-i18n": "^8.16.0",
-        "vuex": "^3.0.1"
+        "vue-i18n": "^8.17.4",
+        "vue-router": "^3.1.6",
+        "vuex": "^3.3.0"
     }
 }

public/css/app.css

@@ -1 +1,3 @@
-@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@200;
+
+300;400;600;700;900&display=swap);#application-wrapper{display:flex;height:100%}#application-wrapper #content{position:relative;width:100%}

public/js/main.js.LICENSE.txt

@@ -4,8 +4,14 @@
  * Released under the MIT License.
  */
 
+/*!
+ * vue-i18n v8.17.4 
+ * (c) 2020 kazuya kawaguchi
+ * Released under the MIT License.
+ */
+
 /**
-  * vee-validate v3.2.5
+  * vee-validate v3.3.0
   * (c) 2020 Abdelrahman Awad
   * @license MIT
   */
@@ -20,7 +26,7 @@
  */
 
 /**
- * vuex v3.1.3
+ * vuex v3.3.0
  * (c) 2020 Evan You
  * @license MIT
  */

resources/js/App.vue

@@ -1,25 +1,134 @@
 <template>
-    <div id="app">
-        <VueFileManager style="height: 100%; width: 100%"/>
+    <div id="vue-file-manager" :class="appSize">
+
+        <!--System alerts-->
+        <Alert />
+
+        <div id="application-wrapper" v-if="layout === 'authorized'">
+
+            <!--Share Item setup-->
+            <ShareCreate />
+            <ShareEdit />
+
+            <!--Move item setup-->
+            <MoveItem />
+
+            <!--Mobile Menu-->
+            <MobileMenu />
+
+            <!--Navigation Sidebar-->
+            <Sidebar/>
+
+            <!--File page-->
+            <router-view/>
+        </div>
+
+        <router-view v-if="layout === 'unauthorized'"/>
+
+        <!--Background vignette-->
+        <Vignette />
     </div>
 </template>
 
 <script>
-    import VueFileManager from './components/VueFileManager.vue'
+    import MobileMenu from '@/components/FilesView/MobileMenu'
+    import ShareCreate from '@/components/Others/ShareCreate'
+    import ShareEdit from '@/components/Others/ShareEdit'
+    import MoveItem from '@/components/Others/MoveItem'
+    import Vignette from '@/components/Others/Vignette'
+    import Sidebar from '@/components/Sidebar/Sidebar'
+    import Alert from '@/components/FilesView/Alert'
+    import {ResizeSensor} from 'css-element-queries'
+    import { includes } from 'lodash'
+    import {mapGetters} from 'vuex'
+    import {events} from "./bus"
 
     export default {
         name: 'app',
         components: {
-            VueFileManager
+            ShareCreate,
+            MobileMenu,
+            ShareEdit,
+            MoveItem,
+            Vignette,
+            Sidebar,
+            Alert,
         },
+        computed: {
+            ...mapGetters([
+                'appSize', 'isLogged', 'isGuest'
+            ]),
+            layout() {
+                if (includes(['VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
+                    return 'unauthorized'
+                }
+
+                return 'authorized'
+            }
+        },
+        methods: {
+            handleAppResize() {
+                let appView = document.getElementById('vue-file-manager')
+                    .offsetWidth
+
+                if (appView <= 690)
+                    this.$store.commit('SET_APP_WIDTH', 'small')
+                if (appView > 690 && appView < 960)
+                    this.$store.commit('SET_APP_WIDTH', 'medium')
+                if (appView > 960)
+                    this.$store.commit('SET_APP_WIDTH', 'large')
+            },
+        },
+        beforeMount() {
+            // Store config to vuex
+            this.$store.commit('SET_AUTHORIZED', this.$root.$data.config.hasAuthCookie)
+            this.$store.commit('SET_CONFIG', this.$root.$data.config)
+        },
+        mounted() {
+            // Handle VueFileManager width
+            var VueFileManager = document.getElementById('vue-file-manager');
+            new ResizeSensor(VueFileManager, this.handleAppResize);
+        }
     }
 </script>
 
 <style lang="scss">
+    @import "@assets/app.scss";
 
-    #app {
-        height: 100%;
+    * {
+        outline: 0;
+        margin: 0;
+        padding: 0;
+        font-family: 'Nunito', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        font-size: 16px;
+    }
+
+    // Dark mode support
+    @media (prefers-color-scheme: dark) {
+
+        body, html {
+            background: $dark_mode_background;
+            color: $dark_mode_text_primary;
+
+            img {
+                opacity: .8;
+            }
+        }
+    }
+
+    #auth {
         width: 100%;
+        height: 100%;
+    }
+
+    #vue-file-manager {
         position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
     }
 </style>

resources/js/components/FilesView/Alert.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-    import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
     import {events} from '@/bus'
 
     export default {
@@ -56,7 +56,7 @@
 
                 this.button = this.$t('alerts.error_confirm')
                 this.emoji = '😢😢😢'
-                this.buttonStyle = 'danger'
+                this.buttonStyle = 'danger-solid'
 
                 if (args.emoji) {
                     this.emoji = args.emoji
@@ -98,6 +98,7 @@
         bottom: 0;
         z-index: 20;
         overflow: auto;
+        height: 100%;
     }
 
     .popup-wrapper {
@@ -109,7 +110,7 @@
         top: 50%;
         transform: translateY(-50%) scale(1);
         margin: 0 auto;
-        padding: 40px;
+        padding: 20px;
         box-shadow: $light_mode_popup_shadow;
         border-radius: 8px;
         text-align: center;
@@ -135,7 +136,7 @@
 
         .message {
             @include font-size(16);
-            color: #8b8f9a;
+            color: #333;
             margin-top: 5px;
         }
     }

resources/js/components/FilesView/ButtonBase.vue

@@ -1,13 +1,16 @@
 <template>
     <button class="button-base" :class="buttonStyle" type="button">
-        <slot></slot>
+        <span v-if="loading" class="icon">
+			<FontAwesomeIcon icon="sync-alt" class="sync-alt"/>
+		</span>
+        <slot v-if="! loading"></slot>
     </button>
 </template>
 
 <script>
     export default {
         name: 'ButtonBase',
-        props: ['buttonStyle']
+        props: ['buttonStyle', 'loading']
     }
 </script>
 
@@ -38,12 +41,30 @@
             background: rgba($danger, .1);
         }
 
+        &.danger-solid {
+            color: white;
+            background: $danger;
+        }
+
         &.secondary {
             color: $text;
             background: $light_background;
         }
     }
 
+    .sync-alt {
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
 
         .button-base {

resources/js/components/FilesView/ContextMenu.vue

@@ -1,34 +1,108 @@
 <template>
     <div
-            ref="contextmenu"
-            class="contextmenu"
             :style="{ top: positionY + 'px', left: positionX + 'px' }"
+            @click="closeAndResetContextMenu"
+            class="contextmenu"
             v-show="isVisible"
+            ref="contextmenu"
     >
-        <ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">
+        <!--ContextMenu for trash location-->
+        <ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options" ref="list">
+            <li class="menu-option" @click="deleteItem" v-if="item">
+                {{ $t('context_menu.delete') }}
+            </li>
+            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
+                {{ $t('context_menu.restore') }}
+            </li>
+            <li class="menu-option" @click="$store.dispatch('emptyTrash')">
+                {{ $t('context_menu.empty_trash') }}
+            </li>
+            <li class="menu-option" @click="ItemDetail" v-if="item">
+                {{ $t('context_menu.detail') }}
+            </li>
+            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
+                {{ $t('context_menu.download') }}
+            </li>
+        </ul>
 
-            <!--View-->
-            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && isFolder">{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}</li>
-            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">{{ $t('context_menu.create_folder') }}</li>
+        <!--ContextMenu for Base location with MASTER permission-->
+        <ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options" ref="list">
+            <li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
+                {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+            </li>
+            <li class="menu-option" @click="deleteItem" v-if="item">
+                {{ $t('context_menu.delete') }}
+            </li>
+            <li class="menu-option" @click="shareItem" v-if="item">
+                {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+            </li>
+            <li class="menu-option" @click="ItemDetail" v-if="item">
+                {{ $t('context_menu.detail') }}
+            </li>
+            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
+                {{ $t('context_menu.download') }}
+            </li>
+        </ul>
 
-            <!--Edits-->
-            <li class="menu-option" @click="removeItem" v-if="item">{{ $t('context_menu.delete') }}</li>
-            <li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.move') }}</li>
+        <!--ContextMenu for Base location with MASTER permission-->
+        <ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options" ref="list">
+            <li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
+                {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+            </li>
+            <li class="menu-option" @click="createFolder">
+                {{ $t('context_menu.create_folder') }}
+            </li>
+            <li class="menu-option" @click="deleteItem" v-if="item">
+                {{ $t('context_menu.delete') }}
+            </li>
+            <li class="menu-option" @click="moveItem" v-if="item">
+                {{ $t('context_menu.move') }}
+            </li>
+            <li class="menu-option" @click="shareItem" v-if="item">
+                {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+            </li>
+            <li class="menu-option" @click="ItemDetail" v-if="item">
+                {{ $t('context_menu.detail') }}
+            </li>
+            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
+                {{ $t('context_menu.download') }}
+            </li>
+        </ul>
 
-            <!--Trash-->
-            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">{{ $t('context_menu.restore') }}</li>
-            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">{{ $t('context_menu.empty_trash') }}</li>
+        <!--ContextMenu for Base location with EDITOR permission-->
+        <ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options" ref="list">
+            <li class="menu-option" @click="createFolder">
+                {{ $t('context_menu.create_folder') }}
+            </li>
+            <li class="menu-option" @click="deleteItem" v-if="item">
+                {{ $t('context_menu.delete') }}
+            </li>
+            <li class="menu-option" @click="moveItem" v-if="item">
+                {{ $t('context_menu.move') }}
+            </li>
+            <li class="menu-option" @click="ItemDetail" v-if="item">
+                {{ $t('context_menu.detail') }}
+            </li>
+            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
+                {{ $t('context_menu.download') }}
+            </li>
+        </ul>
 
-            <!--Others-->
-            <li class="menu-option" @click="ItemDetail" v-if="item">{{ $t('context_menu.detail') }}</li>
-            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">{{ $t('context_menu.download') }}</li>
+        <!--ContextMenu for Base location with VISITOR permission-->
+        <ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options" ref="list">
+            <li class="menu-option" @click="ItemDetail" v-if="item">
+                {{ $t('context_menu.detail') }}
+            </li>
+            <li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
+                {{ $t('context_menu.download') }}
+            </li>
         </ul>
     </div>
 </template>
 
 <script>
-    import {events} from '@/bus'
     import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
 
     export default {
         name: 'ContextMenu',
@@ -57,10 +131,20 @@
         },
         methods: {
             moveItem() {
-                // Move item fire popup
-                events.$emit('popup:move-item', this.item);
+                // Open move item popup
+                events.$emit('popup:open', {name: 'move', item: this.item})
+            },
+            shareItem() {
+                if (this.item.shared) {
+                    // Open share item popup
+                    events.$emit('popup:open', {name: 'share-edit', item: this.item})
+                } else {
+                    // Open share item popup
+                    events.$emit('popup:open', {name: 'share-create', item: this.item})
+                }
             },
             addToFavourites() {
+                // Check if folder is in favourites and then add/remove from favourites
                 if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
                     this.$store.dispatch('addToFavourites', this.item)
                 } else {
@@ -76,14 +160,14 @@
             },
             ItemDetail() {
                 // Dispatch load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.item)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.item)
 
                 // Show panel if is not open
                 this.$store.dispatch('fileInfoToggle', true)
             },
-            removeItem() {
+            deleteItem() {
                 // Dispatch remove item
-                this.$store.dispatch('removeItem', this.item)
+                this.$store.dispatch('deleteItem', this.item)
             },
             createFolder() {
                 // Create folder
@@ -97,7 +181,7 @@
                 this.item = undefined
             },
             showContextMenu(event, item) {
-                let VerticalOffsetArea = item ? this.$refs.list.children.length * 50 : 50
+                let VerticalOffsetArea = item && this.$refs.list.children ? this.$refs.list.children.length * 50 : 50
                 let HorizontalOffsetArea = 190
 
                 let container = document.getElementById('files-view')

resources/js/components/FilesView/DesktopToolbar.vue

@@ -1,6 +1,7 @@
 <template>
-    <div id="desktop-toolbar">
+    <div id="desktop-toolbar" v-if="! $isMinimalScale()">
         <div class="toolbar-wrapper">
+
             <!-- Go back-->
             <div class="toolbar-go-back" v-if="homeDirectory">
                 <div @click="goBack" class="go-back-button">
@@ -9,34 +10,43 @@
                             class="icon-back"
                             icon="chevron-left"
                     ></FontAwesomeIcon>
-                    <span class="back-directory-title">{{
-                            directoryName
-                        }}</span>
+                    <span class="back-directory-title">
+                        {{ directoryName }}
+                    </span>
                 </div>
             </div>
 
             <!-- Tools-->
             <div class="toolbar-tools">
+
+                <!--Search bar-->
                 <div class="toolbar-button-wrapper">
                     <SearchBar/>
                 </div>
-                <div class="toolbar-button-wrapper">
-                    <ToolbarButtonUpload source="upload" action="Upload file"/>
+
+                <!--Files controlls-->
+                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
+                    <ToolbarButtonUpload
+                            source="upload"
+                            :action="$t('actions.upload')"
+                    />
                     <ToolbarButton
                             source="trash-alt"
-                            action="Delete"
+                            :action="$t('actions.delete')"
                             @click.native="deleteItems"
                     />
                     <ToolbarButton
                             @click.native="createFolder"
                             source="folder-plus"
-                            action="Create folder"
+                            :action="$t('actions.create_folder')"
                     />
                 </div>
+
+                <!--View options-->
                 <div class="toolbar-button-wrapper">
                     <ToolbarButton
                             :source="preview"
-                            action=""
+                            :action="$t('actions.preview')"
                             @click.native="$store.dispatch('changePreviewType')"
                     />
                     <ToolbarButton
@@ -52,10 +62,10 @@
 </template>
 
 <script>
-    import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
-    import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
-    import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
-    import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
+    import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
+    import UploadProgress from '@/components/FilesView/UploadProgress'
+    import ToolbarButton from '@/components/FilesView/ToolbarButton'
+    import SearchBar from '@/components/FilesView/SearchBar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -74,7 +84,7 @@
                 'currentFolder',
                 'browseHistory',
                 'homeDirectory',
-                'preview_type',
+                'FilePreviewType',
             ]),
             directoryName() {
                 return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
@@ -85,11 +95,8 @@
                 return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
             },
             preview() {
-                return this.preview_type === 'list' ? 'th' : 'th-list'
+                return this.FilePreviewType === 'list' ? 'th' : 'th-list'
             },
-            isTrash() {
-                return this.currentFolder.location === 'trash' || this.currentFolder.location === 'trash-root'
-            }
         },
         data() {
             return {
@@ -108,14 +115,19 @@
                     this.$store.commit('FLUSH_BROWSER_HISTORY')
 
                 } else {
-                    this.$store.dispatch('goToFolder', [this.previousFolder, true])
+                    if ( this.$isThisLocation('public') ) {
+                        this.$store.dispatch('browseShared', [this.previousFolder, true])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.previousFolder, true])
+                    }
                 }
             },
             deleteItems() {
                 events.$emit('items:delete')
             },
             createFolder() {
-                if (! this.isTrash) this.$createFolder()
+                if (! this.$isThisLocation(['trash', 'trash-root']))
+                    this.$createFolder()
             }
         },
         created() {
@@ -139,7 +151,6 @@
         z-index: 2;
 
         > div {
-            width: 100%;
             flex-grow: 1;
             align-self: center;
             white-space: nowrap;

resources/js/components/FilesView/EmptyMessage.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="empty-message">
+        <div class="message">
+            <FontAwesomeIcon class="icon" :icon="icon"/>
+            <p>{{ message }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'EmptyMessage',
+        props: ['icon', 'message']
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .empty-message {
+        text-align: center;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .message {
+            margin: 0 auto;
+
+            p {
+                margin-top: 10px;
+                max-width: 130px;
+                @include font-size(14);
+                font-weight: 500;
+                color: $text-muted;
+            }
+
+            .icon {
+                @include font-size(36);
+                color: $text;
+
+                path {
+                    fill: $text;
+                }
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .empty-message .message .icon {
+            path {
+                fill: $dark_mode_text_secondary;
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/EmptyPage.vue

@@ -1,20 +1,31 @@
 <template>
     <div class="empty-page" v-if="isLoading || isEmpty">
         <div class="empty-state">
-            <div class="text-content" v-if="isEmpty && !isLoading">
-                <h1 class="title">{{ $t('empty_page.title') }}</h1>
-                <p v-if="! isTrash" class="description">
-                    {{ $t('empty_page.description') }}
-                </p>
-                <ButtonUpload
-                        v-if="! isTrash"
-                        @input.native="$uploadFiles(files)"
-                        v-model="files"
-                        button-style="theme"
-                >{{ $t('empty_page.call_to_action') }}
-                </ButtonUpload
-                >
+
+            <!--Shared empty message-->
+            <div class="text-content" v-if="$isThisLocation(['shared']) && ! isLoading">
+                <h1 class="title">{{ $t('shared.empty_shared') }}</h1>
             </div>
+
+            <!--Trash empty message-->
+            <div class="text-content" v-if="$isThisLocation(['trash', 'trash-root']) && ! isLoading">
+                <h1 class="title">{{ $t('empty_page.title') }}</h1>
+            </div>
+
+            <!--Base file browser empty message-->
+            <div class="text-content" v-if="$isThisLocation(['base', 'public']) && !isLoading">
+                <h1 class="title">{{ $t('empty_page.title') }}</h1>
+                <p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
+                <ButtonUpload
+                        v-if="$checkPermission(['master', 'editor'])"
+                        @input.native="$uploadFiles"
+                        button-style="theme"
+                >
+                    {{ $t('empty_page.call_to_action') }}
+                </ButtonUpload>
+            </div>
+
+            <!--Spinner-->
             <div class="text-content" v-if="isLoading">
                 <Spinner/>
             </div>
@@ -23,8 +34,8 @@
 </template>
 
 <script>
-    import ButtonUpload from '@/components/VueFileManagerComponents/FilesView/ButtonUpload'
-    import Spinner from '@/components/VueFileManagerComponents/FilesView/Spinner'
+    import ButtonUpload from '@/components/FilesView/ButtonUpload'
+    import Spinner from '@/components/FilesView/Spinner'
     import {mapGetters} from 'vuex'
 
     export default {
@@ -37,15 +48,7 @@
         computed: {
             ...mapGetters(['data', 'isLoading', 'currentFolder']),
             isEmpty() {
-                return this.data.length == 0
-            },
-            isTrash() {
-                return this.currentFolder.location === 'trash' || this.currentFolder.location === 'trash-root'
-            }
-        },
-        data() {
-            return {
-                files: undefined
+                return this.data && this.data.length == 0
             }
         }
     }

resources/js/components/FilesView/FileBrowser.vue

@@ -8,30 +8,25 @@
         <div
                 class="files-container"
                 ref="fileContainer"
-                :class="{
-				'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale()
-			}"
+                :class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
                 @click.self="filesContainerClick"
         >
             <!--MobileToolbar-->
-            <MobileToolbar v-if="$isMinimalScale()"/>
+            <MobileToolbar />
 
             <!--Searchbar-->
             <SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
 
             <!--Mobile Actions-->
-            <MobileActions v-if="$isMinimalScale()" />
+            <MobileActions />
 
             <!--Item previews list-->
-            <div
-                    v-if="isList"
-                    class="file-list-wrapper"
-            >
+            <div v-if="isList" class="file-list-wrapper">
                 <transition-group
                         name="file"
                         tag="section"
                         class="file-list"
-                        :class="preview_type"
+                        :class="FilePreviewType"
                 >
                     <FileItemList
                             @dragstart="dragStart(item)"
@@ -51,7 +46,7 @@
                         name="file"
                         tag="section"
                         class="file-list"
-                        :class="preview_type"
+                        :class="FilePreviewType"
                 >
                     <FileItemGrid
                             @dragstart="dragStart(item)"
@@ -66,7 +61,7 @@
             </div>
 
             <!--Show empty page if folder is empty-->
-            <EmptyPage v-if="!isSearching"/>
+            <EmptyPage v-if="! isSearching"/>
 
             <!--Show empty page if no search results-->
             <EmptyMessage
@@ -76,33 +71,26 @@
             />
         </div>
 
-        <div
-                v-if="!$isMinimalScale()"
-                class="file-info-container"
-                :class="{ 'is-fileinfo-visible': fileInfoVisible }"
-        >
+        <!--File Info Panel-->
+        <div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
             <!--File info panel-->
             <FileInfoPanel v-if="fileInfoDetail"/>
 
             <!--If file info panel empty show message-->
-            <EmptyMessage
-                    v-if="!fileInfoDetail"
-                    :message="$t('messages.nothing_to_preview')"
-                    icon="eye-slash"
-            />
+            <EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-slash"/>
         </div>
     </div>
 </template>
 
 <script>
-    import MobileToolbar from '@/components/VueFileManagerComponents/FilesView/MobileToolbar'
-    import MobileActions from '@/components/VueFileManagerComponents/FilesView/MobileActions'
-    import FileInfoPanel from '@/components/VueFileManagerComponents/FilesView/FileInfoPanel'
-    import FileItemList from '@/components/VueFileManagerComponents/FilesView/FileItemList'
-    import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
-    import EmptyMessage from '@/components/VueFileManagerComponents/FilesView/EmptyMessage'
-    import EmptyPage from '@/components/VueFileManagerComponents/FilesView/EmptyPage'
-    import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
+    import MobileToolbar from '@/components/FilesView/MobileToolbar'
+    import MobileActions from '@/components/FilesView/MobileActions'
+    import FileInfoPanel from '@/components/FilesView/FileInfoPanel'
+    import FileItemList from '@/components/FilesView/FileItemList'
+    import FileItemGrid from '@/components/FilesView/FileItemGrid'
+    import EmptyMessage from '@/components/FilesView/EmptyMessage'
+    import EmptyPage from '@/components/FilesView/EmptyPage'
+    import SearchBar from '@/components/FilesView/SearchBar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -124,16 +112,16 @@
                 'fileInfoVisible',
                 'fileInfoDetail',
                 'currentFolder',
-                'preview_type',
+                'FilePreviewType',
                 'isSearching',
                 'isLoading',
                 'data'
             ]),
             isGrid() {
-                return this.preview_type === 'grid'
+                return this.FilePreviewType === 'grid'
             },
             isList() {
-                return this.preview_type === 'list'
+                return this.FilePreviewType === 'list'
             },
             isEmpty() {
                 return this.data.length == 0
@@ -214,27 +202,7 @@
 
             // On items delete
             events.$on('items:delete', () => {
-                this.$store.dispatch('removeItem', this.fileInfoDetail)
-
-                //let ids = []
-                //let items = []
-
-                // Get ids
-                /*this.$children[0].$children.filter(item => {
-
-                            if (item.isClicked) {
-
-                                ids.push(item.data.unique_id)
-
-                                items.push({
-                                    unique_id: item.data.unique_id,
-                                    type: item.data.type,
-                                })
-                            }
-                        })*/
-
-                // Dispatch action
-                /*this.$store.dispatch('removeItems', [ids, items])*/
+                this.$store.dispatch('deleteItem', this.fileInfoDetail)
             })
         }
     }
@@ -311,4 +279,10 @@
     .file-leave-active {
         position: absolute;
     }
+
+    @media only screen and (max-width: 660px) {
+        .file-info-container {
+            display: none;
+        }
+    }
 </style>

resources/js/components/FilesView/FileInfoPanel.vue

@@ -0,0 +1,329 @@
+<template>
+    <div class="file-info-content" v-if="fileInfoDetail">
+        <div class="file-headline" spellcheck="false">
+            <FilePreview />
+
+            <!--File info-->
+            <div class="flex">
+                <div class="icon">
+                    <div class="icon-preview">
+                        <FontAwesomeIcon :icon="filePreviewIcon"></FontAwesomeIcon>
+                    </div>
+                </div>
+                <div class="file-info">
+					<span ref="name" class="name">{{ fileInfoDetail.name }}</span>
+                    <span class="mimetype" v-if="fileInfoDetail.mimetype">{{ fileInfoDetail.mimetype }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!--Info list-->
+        <ul class="list-info">
+
+            <!--Filesize-->
+            <li v-if="fileInfoDetail.filesize" class="list-info-item">
+                <b>{{ $t('file_detail.size') }}</b>
+                <span>{{ fileInfoDetail.filesize }}</span>
+            </li>
+
+            <!--Latest change-->
+            <li v-if="$checkPermission(['master']) && fileInfoDetail.user_scope !== 'master'" class="list-info-item">
+                <b>{{ $t('file_detail.author') }}</b>
+                <span>{{ $t('file_detail.author_participant') }}</span>
+            </li>
+
+            <!--Latest change-->
+            <li class="list-info-item">
+                <b>{{ $t('file_detail.created_at') }}</b>
+                <span>{{ fileInfoDetail.created_at }}</span>
+            </li>
+
+            <!--Parent-->
+            <li v-if="$checkPermission(['master'])" class="list-info-item">
+                <b>{{ $t('file_detail.where') }}</b>
+                <div class="action-button" @click="moveItem">
+                    <FontAwesomeIcon class="icon" icon="pencil-alt" />
+                    <span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
+                </div>
+            </li>
+
+            <!--Parent-->
+            <li v-if="$checkPermission('master') && fileInfoDetail.shared" class="list-info-item">
+                <b>{{ $t('file_detail.shared') }}</b>
+                <div class="action-button" @click="shareItemOptions">
+                    <FontAwesomeIcon class="icon" :icon="sharedIcon" />
+                    <span>{{ sharedInfo }}</span>
+                </div>
+                <div class="sharelink">
+                    <FontAwesomeIcon class="lock-icon" :icon="lockIcon" @click="shareItemOptions" />
+                    <CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link" />
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import FilePreview from '@/components/FilesView/FilePreview'
+    import CopyInput from '@/components/Others/Forms/CopyInput'
+    import {mapGetters} from 'vuex'
+    import {events} from "@/bus"
+
+    export default {
+        name: 'FileInfoPanel',
+        components: {
+            FilePreview,
+            CopyInput,
+        },
+        computed: {
+            ...mapGetters(['fileInfoDetail', 'permissionOptions']),
+            filePreviewIcon() {
+                switch (this.fileInfoDetail.type) {
+                    case 'folder':
+                        return 'folder'
+                    break;
+                    case 'file':
+                        return 'file'
+                    break;
+                    case 'image':
+                        return 'file-image'
+                    break;
+                    case 'video':
+                        return 'file-video'
+                    break;
+                    case 'file':
+                        return 'file-audio'
+                    break;
+                }
+            },
+            sharedInfo() {
+
+                // Get permission title
+                let title = this.permissionOptions.find(option => {
+                    return option.value === this.fileInfoDetail.shared.permission
+                })
+
+                return title ? title.label : this.$t('shared.can_download')
+            },
+            sharedIcon() {
+                switch (this.fileInfoDetail.shared.permission) {
+                    case 'editor':
+                        return 'user-edit'
+                    break
+                    case 'visitor':
+                        return 'user'
+                    break
+                    default:
+                        return 'download'
+                }
+            },
+            lockIcon() {
+                return this.fileInfoDetail.shared.protected ? 'lock' : 'lock-open'
+            }
+        },
+        methods: {
+            shareItemOptions() {
+                // Open share item popup
+                events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
+            },
+            moveItem() {
+                // Move item fire popup
+                events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .file-info-content {
+        padding-bottom: 20px;
+    }
+
+    .file-headline {
+        background: $light_background;
+        padding: 12px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+
+        .flex {
+            display: flex;
+            align-items: flex-start;
+        }
+
+        .icon-preview {
+            height: 42px;
+            width: 42px;
+            border-radius: 8px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            background: white;
+            text-align: center;
+            cursor: pointer;
+            white-space: nowrap;
+            outline: none;
+            border: none;
+
+            /deep/ svg {
+                @include font-size(22);
+
+                path {
+                    fill: $theme;
+                }
+            }
+
+            &:hover {
+                .icon path {
+                    fill: $theme;
+                }
+            }
+        }
+
+        .file-info {
+            padding-left: 12px;
+            width: 100%;
+            word-break: break-all;
+
+            .name {
+                @include font-size(14);
+                font-weight: 700;
+                line-height: 1.4;
+                display: block;
+                color: $text;
+            }
+
+            .mimetype {
+                @include font-size(14);
+                font-weight: 600;
+                color: $theme;
+                display: block;
+            }
+        }
+    }
+
+    .list-info {
+        padding-left: 12px;
+
+        .list-info-item {
+            display: block;
+            padding-top: 15px;
+
+            &:first-child {
+                padding-top: 0;
+            }
+
+            .action-button {
+                cursor: pointer;
+
+                .icon {
+                    @include font-size(10);
+                    display: inline-block;
+                    margin-right: 2px;
+
+                    path {
+                        fill: $theme;
+                    }
+                }
+            }
+
+            b {
+                display: block;
+                @include font-size(13);
+                color: $theme;
+                margin-bottom: 2px;
+            }
+
+            span {
+                display: inline-block;
+                @include font-size(14);
+                font-weight: bold;
+                color: $text;
+            }
+        }
+    }
+
+    .sharelink {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        margin-top: 10px;
+
+        .lock-icon {
+            @include font-size(10);
+            display: inline-block;
+            width: 10px;
+            margin-right: 9px;
+            cursor: pointer;
+
+            path {
+                fill: $text;
+            }
+
+            &:hover {
+
+                path {
+                    fill: $theme;
+                }
+            }
+        }
+
+        .copy-sharelink {
+            width: 100%;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .file-headline {
+            background: $dark_mode_foreground;
+
+            .icon-preview {
+                background: $dark_mode_background;
+            }
+
+            .file-info {
+
+                .name {
+                    color: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .list-info {
+
+            .list-info-item {
+
+                span {
+                    color: $dark_mode_text_primary
+                }
+
+                .action-button {
+
+                    .icon {
+                        color: $dark_mode_text_primary;
+                    }
+                }
+            }
+        }
+
+        .sharelink {
+
+            .lock-icon {
+
+                path {
+                    fill: $dark_mode_text_primary;
+                }
+
+                &:hover {
+
+                    path {
+                        fill: $theme;
+                    }
+                }
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/FileItemGrid.vue

@@ -7,7 +7,7 @@
     >
         <!--Grid preview-->
         <div
-                :draggable="! isDeleted"
+                :draggable="canDrag"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -20,10 +20,11 @@
         >
             <!--Thumbnail for item-->
             <div class="icon-item">
+
                 <!--If is file or image, then link item-->
-                <span v-if="isFile" class="file-icon-text">{{
-					data.mimetype
-				}}</span>
+                <span v-if="isFile" class="file-icon-text">
+                    {{ data.mimetype }}
+                </span>
 
                 <!--Folder thumbnail-->
                 <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
@@ -38,27 +39,41 @@
             <!--Name-->
             <div class="item-name">
                 <!--Name-->
-                <span
+                <b
                         ref="name"
-                        @input="changeItemName"
-                        :contenteditable="!$isMobile()"
+                        @input="renameItem"
+                        :contenteditable="canEditName"
                         class="name"
-                >{{ itemName }}</span
                 >
+                    {{ itemName }}
+                </b>
 
-                <!--Other attributes-->
-                <span v-if="! isFolder" class="item-size">{{
-					data.filesize
-				}}</span>
+                <div class="item-info">
 
-                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}
-				</span>
+                    <!--Shared Icon-->
+                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                        <FontAwesomeIcon class="shared-icon" icon="share"/>
+                    </div>
+
+                    <!--Participant owner Icon-->
+                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                        <FontAwesomeIcon class="shared-icon" icon="user-edit"/>
+                    </div>
+
+                    <!--Filesize-->
+                    <span v-if="! isFolder" class="item-size">{{ data.filesize }}</span>
+
+                    <!--Folder item counts-->
+                    <span v-if="isFolder" class="item-length">
+                        {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}
+				    </span>
+                </div>
             </div>
 
-            <span @click.stop="showItemActions" class="show-actions" v-if="$isMobile()">
-					<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
-				</span>
+            <span @click.stop="showItemActions" class="show-actions"
+                  v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder ) && canShowMobileOptions">
+                <FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
+            </span>
         </div>
     </div>
 </template>
@@ -69,10 +84,12 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'FileItem',
+        name: 'FileItemGrid',
         props: ['data'],
         computed: {
-            ...mapGetters(['preview_type']),
+            ...mapGetters([
+                'FilePreviewType', 'sharedDetail'
+            ]),
             isFolder() {
                 return this.data.type === 'folder'
             },
@@ -82,6 +99,18 @@
             isImage() {
                 return this.data.type === 'image'
             },
+            canEditName() {
+                return !this.$isMobile()
+                    && !this.$isThisLocation(['trash', 'trash-root'])
+                    && !this.$checkPermission('visitor')
+                    && !(this.sharedDetail && this.sharedDetail.type === 'file')
+            },
+            canShowMobileOptions() {
+                return ! (this.sharedDetail && this.sharedDetail.type === 'file')
+            },
+            canDrag() {
+                return !this.isDeleted && this.$checkPermission(['master', 'editor'])
+            },
             timeStamp() {
                 return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
             },
@@ -102,7 +131,7 @@
         methods: {
             showItemActions() {
                 // Load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.data)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 events.$emit('mobileMenu:show')
             },
@@ -125,11 +154,15 @@
                 if (this.$isMobile() && this.isFolder) {
 
                     // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [this.data, false])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.data, false])
+                    }
                 }
 
                 // Load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.data)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 // Get target classname
                 let itemClass = e.target.className
@@ -155,15 +188,19 @@
 
                 if (this.isFolder) {
                     // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [this.data, false])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.data, false])
+                    }
                 }
             },
-            changeItemName: debounce(function (e) {
+            renameItem: debounce(function (e) {
 
                 // Prevent submit empty string
-                if (e.target.innerText === '') return
+                if (e.target.innerText.trim() === '') return
 
-                this.$store.dispatch('changeItemName', {
+                this.$store.dispatch('renameItem', {
                     unique_id: this.data.unique_id,
                     type: this.data.type,
                     name: e.target.innerText
@@ -220,19 +257,29 @@
                 @include font-size(12);
                 font-weight: 400;
                 color: $text-muted;
-                display: block;
+                display: inline-block;
             }
 
-            .name {
+            .item-info {
                 display: block;
+                line-height: 1;
+            }
 
-                &[contenteditable] {
-                    -webkit-user-select: text;
-                    user-select: text;
+            .item-shared {
+                display: inline-block;
+
+                .label {
+                    @include font-size(12);
+                    font-weight: 400;
+                    color: $theme;
                 }
 
-                &[contenteditable='true']:hover {
-                    text-decoration: underline;
+                .shared-icon {
+                    @include font-size(9);
+
+                    path {
+                        fill: $theme;
+                    }
                 }
             }
 
@@ -243,6 +290,16 @@
                 max-height: 40px;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                word-break: break-all;
+
+                &[contenteditable] {
+                    -webkit-user-select: text;
+                    user-select: text;
+                }
+
+                &[contenteditable='true']:hover {
+                    text-decoration: underline;
+                }
 
                 &.actived {
                     max-height: initial;
@@ -326,6 +383,7 @@
                 height: 110px;
                 border-radius: 5px;
                 margin: 0 auto;
+                pointer-events: none;
             }
 
             .folder-icon {
@@ -377,4 +435,6 @@
             }
         }
     }
+
+
 </style>

resources/js/components/FilesView/FileItemList.vue

@@ -1,12 +1,13 @@
 <template>
     <div
-            @click.stop="clickedItem" @dblclick="goToItem"
             class="file-wrapper"
+            @click.stop="clickedItem"
+            @dblclick="goToItem"
             spellcheck="false"
     >
         <!--List preview-->
         <div
-                :draggable="! isDeleted"
+                :draggable="canDrag"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -20,9 +21,9 @@
             <!--Thumbnail for item-->
             <div class="icon-item">
                 <!--If is file or image, then link item-->
-                <span v-if="isFile" class="file-icon-text">{{
-					data.mimetype | limitCharacters
-				}}</span>
+                <span v-if="isFile" class="file-icon-text">
+                    {{ data.mimetype | limitCharacters }}
+                </span>
 
                 <!--Folder thumbnail-->
                 <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
@@ -37,23 +38,39 @@
             <!--Name-->
             <div class="item-name">
                 <!--Name-->
-                <span
+                <b
                         ref="name"
-                        @input="changeItemName"
-                        :contenteditable="!$isMobile() && !$isTrashLocation()"
+                        @input="renameItem"
+                        :contenteditable="canEditName"
                         class="name"
-                >{{ itemName }}</span>
+                >
+                    {{ itemName }}
+                </b>
 
-                <!--Other attributes-->
-                <span v-if="! isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+                <div class="item-info">
 
-                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
-				</span>
+                    <!--Shared Icon-->
+                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                        <FontAwesomeIcon class="shared-icon" icon="share"/>
+                    </div>
+
+                    <!--Participant owner Icon-->
+                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                        <FontAwesomeIcon class="shared-icon" icon="user-edit"/>
+                    </div>
+
+                    <!--Filesize and timestamp-->
+                    <span v-if="! isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+
+                    <!--Folder item counts-->
+                    <span v-if="isFolder" class="item-length">
+                        {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
+                    </span>
+                </div>
             </div>
 
             <!--Go Next icon-->
-            <div class="actions" v-if="$isMobile()">
+            <div class="actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder )">
 				<span @click.stop="showItemActions" class="show-actions">
 					<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
 				</span>
@@ -68,10 +85,10 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'FileItem',
+        name: 'FileItemList',
         props: ['data'],
         computed: {
-            ...mapGetters(['preview_type']),
+            ...mapGetters(['FilePreviewType']),
             isFolder() {
                 return this.data.type === 'folder'
             },
@@ -81,6 +98,15 @@
             isImage() {
                 return this.data.type === 'image'
             },
+            canEditName() {
+                return !this.$isMobile()
+                    && !this.$isThisLocation(['trash', 'trash-root'])
+                    && !this.$checkPermission('visitor')
+                    && !(this.sharedDetail && this.sharedDetail.type === 'file')
+            },
+            canDrag() {
+                return !this.isDeleted && this.$checkPermission(['master', 'editor'])
+            },
             timeStamp() {
                 return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
             },
@@ -112,7 +138,7 @@
         methods: {
             showItemActions() {
                 // Load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.data)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 //this.isClicked = true
 
@@ -137,20 +163,20 @@
                 if (this.$isMobile() && this.isFolder) {
 
                     // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [this.data, false])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.data, false])
+                    }
                 }
 
                 // Load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.data)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 // Get target classname
                 let itemClass = e.target.className
 
-                if (
-                    ['name', 'icon', 'file-link', 'file-icon-text'].includes(
-                        itemClass
-                    )
-                )
+                if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass))
                     return
             },
             goToItem() {
@@ -166,16 +192,20 @@
                 }
 
                 if (this.isFolder) {
-                    // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [this.data, false])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.data, false])
+                    }
                 }
             },
-            changeItemName: debounce(function (e) {
+            renameItem: debounce(function (e) {
 
                 // Prevent submit empty string
-                if (e.target.innerText === '') return
+                if (e.target.innerText.trim() === '') return
 
-                this.$store.dispatch('changeItemName', {
+                this.$store.dispatch('renameItem', {
                     unique_id: this.data.unique_id,
                     type: this.data.type,
                     name: e.target.innerText
@@ -233,12 +263,34 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
+            .item-info {
+                display: block;
+                line-height: 1;
+            }
+
+            .item-shared {
+                display: inline-block;
+
+                .label {
+                    @include font-size(12);
+                    font-weight: 400;
+                    color: $theme;
+                }
+
+                .shared-icon {
+                    @include font-size(9);
+
+                    path {
+                        fill: $theme;
+                    }
+                }
+            }
+
             .item-size,
             .item-length {
                 @include font-size(12);
                 font-weight: 400;
                 color: $text-muted;
-                display: block;
             }
 
             .name {
@@ -331,6 +383,7 @@
                 border-radius: 5px;
                 width: 50px;
                 height: 50px;
+                pointer-events: none;
             }
         }
 

resources/js/components/FilesView/MobileActionButton.vue

@@ -1,7 +1,9 @@
 <template>
     <button class="mobile-action-button">
         <FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
-        <span class="label">{{ text }}</span>
+        <span class="label">
+            <slot></slot>
+        </span>
     </button>
 </template>
 
@@ -9,7 +11,7 @@
     export default {
         name: 'MobileActionButton',
         props: [
-            'icon', 'text'
+            'icon'
         ],
     }
 </script>

resources/js/components/FilesView/MobileActionButtonUpload.vue

@@ -2,7 +2,7 @@
     <button class="mobile-action-button">
         <FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
         <label label="file" class="label button file-input button-base">
-            {{ text }}
+            <slot></slot>
             <input
                     accept="*"
                     v-show="false"
@@ -20,7 +20,7 @@
     export default {
         name: 'MobileActionButtonUpload',
         props: [
-            'icon', 'text'
+            'icon'
         ],
         data() {
             return {

resources/js/components/FilesView/MobileActions.vue

@@ -0,0 +1,106 @@
+<template>
+    <div id="mobile-actions-wrapper" v-if="$isMinimalScale()">
+
+        <!--Actions for trash location with MASTER permission--->
+        <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
+            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
+                {{ previewText }}
+            </MobileActionButton>
+            <MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash-alt">
+                {{ $t('context_menu.empty_trash') }}
+            </MobileActionButton>
+        </div>
+
+        <!--ContextMenu for Base location with MASTER permission-->
+        <div v-if="$isThisLocation(['base', 'shared', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
+            <MobileActionButton @click.native="createFolder" icon="folder-plus">
+                {{ $t('context_menu.add_folder') }}
+            </MobileActionButton>
+            <MobileActionButtonUpload @input.native="$uploadFiles" icon="upload">
+                {{ $t('context_menu.upload') }}
+            </MobileActionButtonUpload>
+            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
+                {{ previewText }}
+            </MobileActionButton>
+        </div>
+
+        <!--ContextMenu for Base location with VISITOR permission-->
+        <div v-if="$isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')" class="mobile-actions">
+            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
+                {{ previewText }}
+            </MobileActionButton>
+        </div>
+
+        <!--Upload Progressbar-->
+        <UploadProgress />
+    </div>
+</template>
+
+<script>
+    import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import UploadProgress from '@/components/FilesView/UploadProgress'
+    import {mapGetters} from 'vuex'
+    import {debounce} from 'lodash'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'MobileActions',
+        components: {
+            MobileActionButtonUpload,
+            MobileActionButton,
+            UploadProgress,
+        },
+        computed: {
+            ...mapGetters(['FilePreviewType']),
+            previewIcon() {
+                return this.FilePreviewType === 'list' ? 'th' : 'th-list'
+            },
+            previewText() {
+                return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
+            }
+        },
+        methods: {
+            switchPreview() {
+                this.$store.dispatch('changePreviewType')
+            },
+            createFolder() {
+                if (this.$isMobile()) {
+                    // Get folder name
+                    let folderName = prompt(this.$t('popup_create_folder.title'))
+
+                    // Create folder
+                    if (folderName) this.$createFolder(folderName)
+                } else {
+                    // Create folder
+                    this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
+                }
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+
+    #mobile-actions-wrapper {
+        background: white;
+        position: sticky;
+        top: 35px;
+        z-index: 3;
+    }
+
+    .mobile-actions {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        white-space: nowrap;
+        overflow-x: auto;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        #mobile-actions-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>

resources/js/components/FilesView/MobileMenu.vue

@@ -8,58 +8,85 @@
                     @click="closeAndResetContextMenu"
             >
                 <div class="menu-wrapper">
-                    <ul class="menu-options">
-                        <li class="menu-option"
-                            @click="addToFavourites"
-                            v-if="! $isTrashLocation() && fileInfoDetail && isFolder"
-                        >
-                            {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
-                        </li>
 
-                        <li class="menu-option"
-                            @click="$store.dispatch('restoreItem', fileInfoDetail)"
-                            v-if="fileInfoDetail && $isTrashLocation()"
-                        >
+                    <!--Mobile for trash location-->
+                    <ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
+                        <li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
                             {{ $t('context_menu.restore') }}
                         </li>
-                        <li
-                                class="menu-option"
-                                @click="renameItem"
-                                v-if="fileInfoDetail"
-                        >
-                            {{ $t('context_menu.rename') }}
-                        </li>
-                        <li
-                                class="menu-option"
-                                @click="moveItem"
-                                v-if="fileInfoDetail"
-                        >
-                            {{ $t('context_menu.move') }}
-                        </li>
-                        <li
-                                class="menu-option"
-                                @click="downloadItem"
-                                v-if="! isFolder"
-                        >
+                        <li class="menu-option" @click="downloadItem" v-if="! isFolder">
                             {{ $t('context_menu.download') }}
                         </li>
-                        <li
-                                class="menu-option delete"
-                                @click="removeItem"
-                                v-if="fileInfoDetail"
-                        >
+                        <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
                             {{ $t('context_menu.delete') }}
                         </li>
                     </ul>
+
+                    <!--Mobile for Base location-->
+                    <ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
+                        <li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
+                            {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                        </li>
+                        <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.rename') }}
+                        </li>
+                        <li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
+                            {{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                        </li>
+                        <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                            {{ $t('context_menu.download') }}
+                        </li>
+                        <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.delete') }}
+                        </li>
+                    </ul>
+
+                    <!--Mobile for Base location-->
+                    <ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options">
+                        <li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
+                            {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                        </li>
+                        <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.rename') }}
+                        </li>
+                        <li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.move') }}
+                        </li>
+                        <li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
+                            {{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                        </li>
+                        <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                            {{ $t('context_menu.download') }}
+                        </li>
+                        <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.delete') }}
+                        </li>
+                    </ul>
+
+                    <!--Mobile for Base location with EDITOR permission-->
+                    <ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options">
+                        <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.rename') }}
+                        </li>
+                        <li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
+                            {{ $t('context_menu.move') }}
+                        </li>
+                        <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                            {{ $t('context_menu.download') }}
+                        </li>
+                    </ul>
+
+                    <!--Mobile for Base location with VISITOR permission-->
+                    <ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options">
+                        <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                            {{ $t('context_menu.download') }}
+                        </li>
+                    </ul>
                 </div>
             </div>
         </transition>
         <transition name="fade">
-            <div
-                    v-show="isVisible"
-                    class="vignette"
-                    @click="closeAndResetContextMenu"
-            ></div>
+            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
         </transition>
     </div>
 </template>
@@ -69,7 +96,7 @@
     import {mapGetters} from 'vuex'
 
     export default {
-        name: 'MobileOptionList',
+        name: 'MobileMenu',
         computed: {
             ...mapGetters(['fileInfoDetail', 'app']),
             isInFavourites() {
@@ -92,11 +119,20 @@
         },
         methods: {
             moveItem() {
-                // Move item fire popup
-                events.$emit('popup:move-item', this.fileInfoDetail);
+                // Open move item popup
+                events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
+            },
+            shareItem() {
+                if (this.fileInfoDetail.shared) {
+                    // Open share item popup
+                    events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
+                } else {
+                    // Open share item popup
+                    events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
+                }
             },
             addToFavourites() {
-                if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
+                if (this.app.favourites && !this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
                     this.$store.dispatch('addToFavourites', this.fileInfoDetail)
                 } else {
                     this.$store.dispatch('removeFromFavourites', this.fileInfoDetail)
@@ -109,9 +145,9 @@
                     this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
                 )
             },
-            removeItem() {
+            deleteItem() {
                 // Dispatch remove item
-                this.$store.dispatch('removeItem', this.fileInfoDetail)
+                this.$store.dispatch('deleteItem', this.fileInfoDetail)
             },
             renameItem() {
                 let itemName = prompt(
@@ -127,10 +163,10 @@
                         name: itemName
                     }
 
-                    this.$store.dispatch('changeItemName', item)
+                    this.$store.dispatch('renameItem', item)
 
                     // Change item name if is mobile device or prompted
-                    if ( this.$isMobile() ) {
+                    if (this.$isMobile()) {
                         events.$emit('change:name', item)
                     }
                 }

resources/js/components/FilesView/MobileToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="mobile-toolbar">
+    <div class="mobile-toolbar" v-if="$isMinimalScale()">
 
         <!-- Go back-->
         <div @click="goBack" class="go-back-button">
@@ -14,8 +14,8 @@
         <div class="directory-name">{{ directoryName }}</div>
 
         <!--More Actions-->
-        <div class="more-actions-button" @click="showSidebarMenu">
-            <div class="tap-area">
+        <div class="more-actions-button">
+            <div class="tap-area" @click="showSidebarMenu" v-if="$checkPermission('master')">
                 <FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
             </div>
         </div>
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-    import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
-    import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
-    import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
+    import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
+    import ToolbarButton from '@/components/FilesView/ToolbarButton'
+    import SearchBar from '@/components/FilesView/SearchBar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -39,11 +39,11 @@
         computed: {
             ...mapGetters([
                 'fileInfoVisible',
+                'FilePreviewType',
                 'fileInfoDetail',
                 'currentFolder',
                 'browseHistory',
                 'homeDirectory',
-                'preview_type',
                 'appSize',
             ]),
             directoryName() {
@@ -75,7 +75,11 @@
                     this.$store.commit('FLUSH_BROWSER_HISTORY')
 
                 } else {
-                    this.$store.dispatch('goToFolder', [this.previousFolder, true])
+                    if ( this.$isThisLocation('public') ) {
+                        this.$store.dispatch('browseShared', [this.previousFolder, true])
+                    } else {
+                        this.$store.dispatch('getFolder', [this.previousFolder, true])
+                    }
                 }
             },
         },

resources/js/components/FilesView/SearchBar.vue

@@ -49,11 +49,13 @@
                     this.$store.dispatch('getSearchResult', value)
                 } else if (typeof value !== 'undefined') {
                     if (this.currentFolder) {
+
                         // Get back after delete query to previosly folder
-                        this.$store.dispatch('goToFolder', [
-                            this.currentFolder,
-                            true
-                        ])
+                        if ( this.$isThisLocation('public') ) {
+                            this.$store.dispatch('browseShared', [this.currentFolder, true])
+                        } else {
+                            this.$store.dispatch('getFolder', [this.currentFolder, true])
+                        }
                     }
 
                     this.$store.commit('CHANGE_SEARCHING_STATE', false)

resources/js/components/FilesView/ToolbarButtonUpload.vue

@@ -8,7 +8,7 @@
                 type="file"
                 name="files[]"
                 multiple
-                :disabled="$isTrashLocation() ? true : false"
+                :disabled="$isThisLocation(['trash', 'trash-root'])"
         />
     </label>
 </template>

resources/js/components/FilesView/UploadProgress.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-    import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
+    import ProgressBar from '@/components/FilesView/ProgressBar'
     import {mapGetters} from 'vuex'
 
     export default {

resources/js/components/Others/ActionButton.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="action-button">
+        <FontAwesomeIcon class="icon" :icon="icon" />
+        <span class="label">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ActionButton',
+        props: ['icon'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .action-button {
+        cursor: pointer;
+
+        .label {
+            @include font-size(12);
+            color: $theme;
+            font-weight: 600;
+            text-decoration: underline;
+        }
+
+        .icon {
+            @include font-size(10);
+            display: inline-block;
+            margin-right: 2px;
+
+            path {
+                fill: $theme;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+</style>

resources/js/components/Others/Forms/CopyInput.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
+        <input ref="sel" :value="value" id="link-input" type="text" class="input-text" readonly>
+        <div class="icon">
+            <FontAwesomeIcon :icon="isCopiedLink ? 'check' : 'link'"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'CopyInput',
+        props: ['size', 'value'],
+        data() {
+            return {
+                isCopiedLink: false,
+            }
+        },
+        methods: {
+            copyUrl() {
+
+                // Get input value
+                var copyText = document.getElementById("link-input");
+
+                // select link
+                copyText.select();
+                copyText.setSelectionRange(0, 99999);
+
+                // Copy
+                document.execCommand("copy");
+
+                // Mark button as copied
+                this.isCopiedLink = true
+
+                // Reset copy button
+                setTimeout(() => {this.isCopiedLink = false}, 1000)
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+
+    // Single page
+    .copy-input {
+
+        &.small {
+
+            &.icon-append {
+
+                .icon {
+                    padding: 8px 10px;
+                    @include font-size(11);
+                }
+            }
+
+            input {
+                padding: 6px 10px;
+                @include font-size(13);
+            }
+        }
+
+        .icon {
+            cursor: pointer;
+        }
+
+        input {
+            text-overflow: ellipsis;
+
+            &:disabled {
+                color: $text;
+                cursor: pointer;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .copy-input {
+            input {
+                color: $dark_mode_text_primary;
+
+                &:disabled {
+                }
+            }
+        }
+    }
+</style>

resources/js/components/Others/Forms/SelectInput.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="select">
+
+        <!--Area-->
+        <div class="input-area" :class="{'is-active': isOpen, 'is-error': isError}" @click="openMenu">
+
+            <!--If is selected-->
+            <div class="selected" v-if="selected">
+                <div class="option-icon" v-if="selected.icon">
+                    <FontAwesomeIcon :icon="selected.icon" />
+                </div>
+                <span class="option-value">{{ selected.label }}</span>
+            </div>
+
+            <!--If is empty-->
+            <div class="not-selected" v-if="! selected">
+                <span class="option-value placehoder">{{ placeholder }}</span>
+            </div>
+
+            <FontAwesomeIcon icon="chevron-down" class="chevron"/>
+        </div>
+
+        <!--Options-->
+        <transition name="slide-in">
+            <ul class="input-options" v-if="isOpen">
+                <li class="option-item" @click="selectOption(option)" v-for="(option, i) in options" :key="i">
+                    <div class="option-icon" v-if="option.icon">
+                        <FontAwesomeIcon :icon="option.icon" />
+                    </div>
+                    <span class="option-value">{{ option.label }}</span>
+                </li>
+            </ul>
+        </transition>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:'SelectInput',
+        props: ['options', 'isError', 'default', 'placeholder'],
+        data() {
+            return {
+                selected: undefined,
+                isOpen: false,
+            }
+        },
+        methods: {
+            selectOption(option) {
+
+                // Emit selected
+                this.$emit('input', option.value)
+
+                // Get selected
+                this.selected = option
+
+                // Close menu
+                this.isOpen = false
+            },
+            openMenu() {
+                this.isOpen = ! this.isOpen
+            },
+        },
+        created() {
+
+            if (this.default)
+                this.selected = this.options.find(option => option.value === this.default)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .select {
+        position: relative;
+        user-select: none;
+    }
+
+    .input-options {
+        background: $light_background;
+        border-radius: 8px;
+        position: absolute;
+        overflow: hidden;
+        top: 65px;
+        left: 0;
+        right: 0;
+        z-index: 9;
+
+        .option-item {
+            padding: 13px 20px;
+            display: block;
+            border-bottom: 1px solid #EBEBEB;
+            cursor: pointer;
+
+            &:hover {
+                color: $theme;
+                background: rgba($theme, .1);
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
+    .input-area {
+        justify-content: space-between;
+        background: $light_background;
+        border: 1px solid transparent;
+        @include transition(150ms);
+        align-items: center;
+        border-radius: 8px;
+        padding: 13px 20px;
+        display: flex;
+        outline: 0;
+        width: 100%;
+        cursor: pointer;
+
+        .chevron {
+            @include transition(150ms);
+        }
+
+        &.is-active {
+            border-color: $theme;
+            box-shadow: 0 0 7px rgba($theme, 0.3);
+
+            .chevron {
+                @include transform(rotate(180deg));
+            }
+        }
+
+        &.is-error {
+            border-color: $danger;
+            box-shadow: 0 0 7px rgba($danger, 0.3);
+        }
+    }
+
+    .option-icon {
+        width: 20px;
+        display: inline-block;
+        @include font-size(12);
+    }
+
+    .option-value {
+        @include font-size(15);
+        font-weight: 700;
+        width: 100%;
+
+        &.placehoder {
+            color: $light_text;
+        }
+    }
+
+    .slide-in-enter-active {
+        transition: all 150ms ease;
+    }
+
+    .slide-in-enter /* .list-leave-active below version 2.1.8 */
+    {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .input-area {
+            background: $dark_mode_foreground;
+
+            .option-icon {
+                path {
+                    fill: $theme
+                }
+            }
+        }
+
+        .input-options {
+            background: $dark_mode_foreground;
+
+            .option-item {
+                border-bottom: none;
+
+                &:hover {
+                    color: $theme;
+                    background: rgba($theme, .1);
+                }
+
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+</style>

resources/js/components/Others/Forms/SwitchInput.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="input-wrapper">
+        <div class="switch-content">
+            <label class="input-label" v-if="label">{{ label }}:</label>
+            <small class="input-info" v-if="info">{{ info }}</small>
+        </div>
+
+        <div class="switch-content text-right">
+            <div
+                    class="switch"
+                    :class="{ active: isSwitched }"
+                    @click="changeState"
+            >
+                <div class="switch-button"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:'SwitchInput',
+        props: ['label', 'name', 'state', 'info'],
+        data() {
+            return {
+                isSwitched: undefined
+            }
+        },
+        methods: {
+            changeState() {
+                this.isSwitched = ! this.isSwitched
+                this.$emit('input', this.isSwitched)
+            }
+        },
+        mounted() {
+            this.isSwitched = this.state
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .input-wrapper {
+        display: flex;
+        width: 100%;
+
+        .input-label {
+            color: $text;
+        }
+
+        .switch-content {
+            width: 100%;
+
+            &:last-child {
+                width: 80px;
+            }
+        }
+    }
+
+    .switch {
+        width: 50px;
+        height: 28px;
+        border-radius: 50px;
+        display: block;
+        background: #f1f1f5;
+        position: relative;
+        @include transition;
+
+        .switch-button {
+            @include transition;
+            width: 22px;
+            height: 22px;
+            border-radius: 50px;
+            display: block;
+            background: white;
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
+            cursor: pointer;
+        }
+
+        &.active {
+            background: $theme;
+
+            .switch-button {
+                left: 25px;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .switch {
+            background: $dark_mode_foreground;
+        }
+    }
+</style>

resources/js/components/Others/MoveItem.vue

@@ -0,0 +1,132 @@
+<template>
+    <PopupWrapper name="move">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_move_item.title')" />
+
+        <!--Content-->
+        <PopupContent type="height-limited" v-if="pickedItem">
+
+            <!--Show Spinner when loading folders-->
+            <Spinner v-if="isLoadingTree"/>
+
+            <!--Folder tree-->
+            <div v-if="! isLoadingTree && navigation">
+                <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="location"/>
+                <TreeMenu :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
+            </div>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="$closePopup()"
+                    button-style="secondary"
+            >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="moveItem"
+                    :button-style="selectedFolder ? 'theme' : 'secondary'"
+            >{{ $t('popup_move_item.submit') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import Spinner from '@/components/FilesView/Spinner'
+    import TreeMenu from '@/components/Others/TreeMenu'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'MoveItem',
+        components: {
+            ThumbnailItem,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            TreeMenu,
+            Spinner,
+        },
+        computed: {
+            ...mapGetters(['navigation']),
+        },
+        data() {
+            return {
+                selectedFolder: undefined,
+                pickedItem: undefined,
+                isLoadingTree: true,
+            }
+        },
+        methods: {
+            moveItem() {
+
+                // Prevent empty submit
+                if (! this.selectedFolder) return
+
+                // Move item
+                this.$store.dispatch('moveItem', [this.pickedItem, this.selectedFolder])
+
+                // Close popup
+                events.$emit('popup:close')
+            },
+        },
+        mounted() {
+
+            // Select folder in tree
+            events.$on('pick-folder', folder => {
+
+                if (folder.unique_id === this.pickedItem.unique_id) {
+                    this.selectedFolder = undefined
+                } else {
+                    this.selectedFolder = folder
+                }
+            })
+
+            // Show Move item popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'move') return
+
+                // Show tree spinner
+                this.isLoadingTree = true
+
+                // Get folder tree and hide spinner
+                this.$store.dispatch('getFolderTree').then(() => {
+                    this.isLoadingTree = false
+                })
+
+                // Store picked item
+                this.pickedItem = args.item
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Clear selected folder
+                setTimeout(() => {
+                    this.selectedFolder = undefined
+                }, 150)
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+
+</style>

resources/js/components/Others/PageHeader.vue

@@ -26,7 +26,10 @@
         },
         methods: {
             goHome() {
-                if (this.isSmallAppSize) events.$emit('show:sidebar')
+                if (this.isSmallAppSize) {
+                    events.$emit('show:sidebar')
+                    this.$router.push({name: 'Files'})
+                }
             }
         }
     }

resources/js/components/Others/Popup/PopupActions.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="actions">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupActions',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .actions {
+        padding: 20px;
+        margin: 0 -10px;
+        display: flex;
+
+        .popup-button {
+            width: 100%;
+            margin: 0 10px;
+        }
+    }
+
+    .small {
+        .actions {
+            padding: 15px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+</style>

resources/js/components/Others/Popup/PopupContent.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="popup-content" :class="type">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupContent',
+        props: [
+            'type'
+        ]
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup-content {
+
+        &.height-limited {
+            height: 400px;
+            overflow-y: auto;
+        }
+    }
+
+    .small {
+
+        .popup-content {
+            top: 57px;
+            bottom: 72px;
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: initial;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+</style>

resources/js/components/Others/Popup/PopupHeader.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="popup-header">
+        <h1 class="title">{{ title }}</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PopupHeader',
+        props: [
+            'title'
+        ]
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup-header {
+        padding: 20px;
+
+        .title {
+            @include font-size(18);
+            font-weight: 700;
+            color: $text;
+        }
+
+        .message {
+            @include font-size(16);
+            color: #8b8f9a;
+            margin-top: 5px;
+        }
+    }
+
+    .small {
+        .popup-header {
+            padding: 15px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .popup-header {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+
+            .message {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+</style>

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -0,0 +1,144 @@
+<template>
+    <transition name="popup">
+        <div class="popup" @click.self="closePopup" v-show="isVisibleWrapper">
+            <div class="popup-wrapper">
+                <slot></slot>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    export default {
+        name: 'PopupWrapper',
+        props: [
+            'name'
+        ],
+        data() {
+            return {
+                isVisibleWrapper: false,
+            }
+        },
+        methods: {
+            closePopup() {
+                events.$emit('popup:close')
+            }
+        },
+        created() {
+
+            // Open called popup
+            events.$on('popup:open', ({name}) => {
+
+                if (this.name === name)
+                    this.isVisibleWrapper = true
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Close popup
+                this.isVisibleWrapper = false
+            })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 20;
+        overflow-y: auto;
+        display: grid;
+        padding: 40px;
+        height: 100%;
+    }
+
+    .popup-wrapper {
+        box-shadow: $light_mode_popup_shadow;
+        border-radius: 8px;
+        background: white;
+        margin: auto;
+        width: 480px;
+        z-index: 12;
+    }
+
+    // Desktop, tablet
+    .medium, .large {
+
+        // Animations
+        .popup-enter-active {
+            animation: popup-in 0.35s 0.15s ease both;
+        }
+
+        .popup-leave-active {
+            animation: popup-in 0.15s ease reverse;
+        }
+    }
+
+    .small {
+        .popup {
+            overflow: hidden;
+        }
+
+        .popup-wrapper {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            transform: translateY(0) scale(1);
+            box-shadow: none;
+            width: 100%;
+            border-radius: 0px;
+        }
+
+        // Animations
+        .popup-enter-active {
+            animation: popup-slide-in 0.35s 0.15s ease both;
+        }
+
+        .popup-leave-active {
+            animation: popup-slide-in 0.15s ease reverse;
+        }
+    }
+
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .popup-wrapper {
+            background: $dark_mode_background;
+            box-shadow: $dark_mode_popup_shadow;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) and (max-width: 690px) {
+        .popup-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>

resources/js/components/Others/ShareCreate.vue

@@ -0,0 +1,213 @@
+<template>
+    <PopupWrapper name="share-create">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Item Thumbnail-->
+            <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
+
+            <!--Form to set sharing-->
+            <ValidationObserver v-if="! isGeneratedShared" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--Permision Select-->
+                <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
+                    <label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
+                    <SelectInput v-model="shareOptions.permission" :options="permissionOptions" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                <!--Password Switch-->
+                <div class="input-wrapper">
+                    <div class="inline-wrapper">
+                        <label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
+                        <SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0"/>
+                    </div>
+                </div>
+
+                <!--Set password-->
+                <ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+
+            <!--Copy generated link-->
+            <div v-if="isGeneratedShared" class="form-wrapper">
+                <div class="input-wrapper">
+                    <label class="input-label">{{ $t('shared_form.label_shared_url') }}:</label>
+                    <CopyInput size="small" :value="shareLink" />
+                </div>
+            </div>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    v-if="! isGeneratedShared"
+                    class="popup-button"
+                    @click.native="$closePopup()"
+                    button-style="secondary"
+            >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="submitShareOptions"
+                    button-style="theme"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+            >{{ submitButtonText }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import CopyInput from '@/components/Others/Forms/CopyInput'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+    import axios from 'axios'
+
+    export default {
+        name: 'ShareCreate',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ThumbnailItem,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            SelectInput,
+            SwitchInput,
+            ButtonBase,
+            CopyInput,
+            required,
+        },
+        computed: {
+            ...mapGetters(['app', 'permissionOptions']),
+            itemTypeTitle() {
+                return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
+            },
+            isFolder() {
+                return this.pickedItem && this.pickedItem.type === 'folder'
+            },
+            submitButtonText() {
+                return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
+            }
+        },
+        data() {
+            return {
+                shareOptions: {
+                    isPassword: false,
+                    password: undefined,
+                    permission: undefined,
+                    type: undefined,
+                    unique_id: undefined,
+                },
+                pickedItem: undefined,
+                shareLink: undefined,
+                isGeneratedShared: false,
+                isLoading: false,
+            }
+        },
+        methods: {
+            async submitShareOptions() {
+
+                // If shared was generated, then close popup
+                if (this.isGeneratedShared) {
+                    events.$emit('popup:close')
+
+                    return;
+                }
+
+                // Validate fields
+                const isValid = await this.$refs.shareForm.validate();
+
+                if (!isValid) return;
+
+                this.isLoading = true
+
+                // Send request to get share link
+                axios
+                    .post('/api/share', this.shareOptions)
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        this.shareLink = response.data.data.attributes.link
+                        this.isGeneratedShared = true
+
+                        this.$store.commit('UPDATE_SHARED_ITEM', response.data.data.attributes)
+                    })
+                    .catch(error => {
+
+                        // todo: catch errors
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        },
+        mounted() {
+
+            // Show popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'share-create') return
+
+                // Store picked item
+                this.pickedItem = args.item
+
+                this.shareOptions.type = args.item.type
+                this.shareOptions.unique_id = args.item.unique_id
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Restore data
+                setTimeout(() => {
+                    this.isGeneratedShared = false
+                    this.shareLink = undefined
+                    this.shareOptions = {
+                        permission: undefined,
+                        password: undefined,
+                        isPassword: false,
+                        type: undefined,
+                        unique_id: undefined,
+                    }
+                }, 150)
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+
+    .input-wrapper {
+
+        &.password {
+            margin-top: -10px;
+        }
+    }
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>

resources/js/components/Others/ShareEdit.vue

@@ -0,0 +1,259 @@
+<template>
+    <PopupWrapper name="share-edit">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_share_edit.title')" />
+
+        <!--Content-->
+        <PopupContent v-if="pickedItem && pickedItem.shared">
+
+            <!--Item Thumbnail-->
+            <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
+
+            <!--Form to set sharing-->
+            <ValidationObserver ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--Share link-->
+                <div class="input-wrapper">
+                    <label class="input-label">{{ $t('shared_form.label_shared_url') }}:</label>
+                    <CopyInput size="small" :value="pickedItem.shared.link" />
+                </div>
+
+                <!--Permision Select-->
+                <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
+                    <label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
+                    <SelectInput v-model="shareOptions.permission" :options="permissionOptions" :default="shareOptions.permission" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                <!--Password Switch-->
+                <div class="input-wrapper">
+                    <div class="inline-wrapper">
+                        <label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
+                        <SwitchInput v-model="shareOptions.isProtected" :state="shareOptions.isProtected" class="switch"/>
+                    </div>
+                    <ActionButton v-if="(pickedItem.shared.protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" icon="pencil-alt">{{ $t('popup_share_edit.change_pass') }}</ActionButton>
+                </div>
+
+                <!--Set password-->
+                <ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+            </ValidationObserver>
+
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="destroySharing"
+                    :button-style="destroyButtonStyle"
+                    :loading="isDeleting"
+                    :disabled="isDeleting"
+            >{{ destroyButtonText }}
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="updateShareOptions"
+                    button-style="theme"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+            >{{ $t('popup_share_edit.save') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ActionButton from '@/components/Others/ActionButton'
+    import CopyInput from '@/components/Others/Forms/CopyInput'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+    import axios from 'axios'
+
+    export default {
+        name: 'ShareEdit',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ThumbnailItem,
+            ActionButton,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            SelectInput,
+            SwitchInput,
+            ButtonBase,
+            CopyInput,
+            required,
+        },
+        computed: {
+            ...mapGetters(['app', 'permissionOptions', 'currentFolder']),
+            isFolder() {
+                return this.pickedItem && this.pickedItem.type === 'folder'
+            },
+            destroyButtonText() {
+                return this.isConfirmedDestroy ? this.$t('popup_share_edit.confirm') : this.$t('popup_share_edit.stop')
+            },
+            destroyButtonStyle() {
+                return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
+            },
+            isSharedLocation() {
+                return this.currentFolder && this.currentFolder.location === 'shared'
+            },
+        },
+        data() {
+            return {
+                shareOptions: undefined,
+                pickedItem: undefined,
+                isLoading: false,
+                isDeleting: false,
+                canChangePassword: false,
+                isConfirmedDestroy: false,
+            }
+        },
+        methods: {
+            changePassword() {
+                this.canChangePassword = false
+            },
+            destroySharing() {
+
+                // Set confirm button
+                if (! this.isConfirmedDestroy) {
+
+                    this.isConfirmedDestroy = true
+                } else {
+
+                    // Start deleting spinner button
+                    this.isDeleting = true
+
+                    // Send delete request
+                    axios
+                        .delete('/api/share/' + this.pickedItem.shared.token)
+                        .then(() => {
+                            // Remove item from file browser
+                            if ( this.isSharedLocation ) {
+                                this.$store.commit('REMOVE_ITEM', this.pickedItem.unique_id)
+                            }
+
+                            // Flush shared data
+                            this.$store.commit('FLUSH_SHARED', this.pickedItem.unique_id)
+
+                            // End deleting spinner button
+                            setTimeout(() => this.isDeleting = false, 150)
+
+                            this.$closePopup()
+                        })
+                        .catch(() => {
+
+                            // End deleting spinner button
+                            this.isDeleting = false
+                        })
+                }
+            },
+            async updateShareOptions() {
+
+                // If shared was generated, then close popup
+                if (this.isGeneratedShared) {
+
+                    events.$emit('popup:close')
+                    return
+                }
+
+                // Validate fields
+                const isValid = await this.$refs.shareForm.validate();
+
+                if (!isValid) return;
+
+                this.isLoading = true
+
+                // Send request to get share link
+                axios
+                    .patch('/api/share/' + this.shareOptions.token, {
+                        permission: this.shareOptions.permission,
+                        protected: this.shareOptions.isProtected,
+                        password: this.shareOptions.password ? this.shareOptions.password : undefined,
+                    })
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Update shared data
+                        this.$store.commit('UPDATE_SHARED_ITEM', response.data.data.attributes)
+
+                        events.$emit('popup:close')
+                    })
+                    .catch(error => {
+
+                        // todo: catch errors
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        },
+        mounted() {
+
+            // Show popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'share-edit') return
+
+                // Store picked item
+                this.pickedItem = args.item
+
+                // Store shared options
+                this.shareOptions = {
+                    token: args.item.shared.token,
+                    isProtected: args.item.shared.protected,
+                    permission: args.item.shared.permission,
+                    password: undefined,
+                }
+
+                this.canChangePassword = args.item.shared.protected
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Restore data
+                setTimeout(() => {
+                    this.isConfirmedDestroy = false
+                    this.canChangePassword = false
+                    this.pickedItem = undefined
+                    this.shareOptions = undefined
+                }, 150)
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+
+    .input-wrapper {
+
+        &.password {
+            margin-top: -10px;
+        }
+    }
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>

resources/js/components/Others/TextLabel.vue

@@ -24,7 +24,7 @@
 
     @media (prefers-color-scheme: dark) {
         .text-label {
-            color: rgba($dark_mode_text_secondary, .4);
+            color: $theme;
         }
     }
 </style>

resources/js/components/Others/ThumbnailItem.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="file-item">
+    <div class="file-item" v-if="item">
 
         <!--Thumbnail for item-->
         <div class="icon-item">
 
             <!--If is file or image, then link item-->
-            <span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
+            <span v-if="isFile" class="file-icon-text">{{ item.mimetype }}</span>
 
             <!--Folder thumbnail-->
             <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
 
             <!--Image thumbnail-->
-            <img v-if="isImage" class="image" :src="file.thumbnail" :alt="file.name"/>
+            <img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
 
             <!--Else show only folder icon-->
             <FontAwesomeIcon v-if="isFolder" class="folder-icon" icon="folder"/>
@@ -21,10 +21,20 @@
         <div class="item-name">
 
             <!--Name-->
-            <span class="name">{{ file.name }}</span>
+            <span class="name">{{ item.name }}</span>
+
+            <div v-if="info === 'location'">
+                <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span>
+            </div>
+
+            <div v-if="info === 'metadata'">
+                <span v-if="! isFolder" class="item-size">{{ item.filesize }}, {{ item.created_at }}</span>
+
+                <span v-if="isFolder" class="item-length">
+                    {{ item.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', item.items) }}, {{ item.created_at }}
+                </span>
+            </div>
 
-            <!--Other attributes-->
-            <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span>
         </div>
     </div>
 </template>
@@ -34,18 +44,18 @@
 
     export default {
         name: 'ThumbnailItem',
-        props: ['file'],
+        props: ['item', 'info'],
         computed: {
             ...mapGetters(['currentFolder']),
             isFolder() {
-                return this.file.type === 'folder'
+                return this.item.type === 'folder'
             },
             isFile() {
-                return this.file.type !== 'folder' && this.file.type !== 'image'
+                return this.item.type !== 'folder' && this.item.type !== 'image'
             },
             isImage() {
-                return this.file.type === 'image'
-            }
+                return this.item.type === 'image'
+            },
         },
     }
 </script>
@@ -66,6 +76,14 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
+            .item-size,
+            .item-length {
+                @include font-size(12);
+                font-weight: 400;
+                color: $text-muted;
+                display: block;
+            }
+
             .subtitle {
                 @include font-size(11);
                 font-weight: 400;
@@ -141,7 +159,7 @@
     .small {
         .file-item {
             padding: 0 15px;
-            margin-bottom: 10px;
+            margin-bottom: 25px;
         }
     }
 

resources/js/components/Others/TreeMenu.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-    import TreeMenu from '@/components/VueFileManagerComponents/Others/TreeMenu'
+    import TreeMenu from '@/components/Others/TreeMenu'
     import {events} from "@/bus"
 
     export default {

resources/js/components/Others/Vignette.vue

@@ -26,7 +26,7 @@
             events.$on('popup:close', () => this.isVisibleVignette = false)
 
             // Show vignette
-            events.$on('popup:move-item', () => this.isVisibleVignette = true)
+            events.$on('popup:open', () => this.isVisibleVignette = true)
             events.$on('alert:open', () => this.isVisibleVignette = true)
             events.$on('success:open', () => this.isVisibleVignette = true)
         }

resources/js/components/Sidebar/FileListItemThumbnail.vue

@@ -24,7 +24,7 @@
             <span class="name" >{{ file.name }}</span>
 
             <!--Other attributes-->
-            <span v-if="! isFolder" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>
+            <span v-if="! isFolder" class="item-size">{{ file.filesize }}</span>
 
             <span v-if="isFolder" class="item-length">{{ file.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ file.created_at }}</span>
         </div>

resources/js/components/Sidebar/Sidebar.vue

@@ -1,25 +1,26 @@
 <template>
     <transition name="sidebar">
-        <div id="sidebar" v-if="isVisibleSidebar || ! isSmallAppSize">
+        <div id="sidebar" v-if="app && (isVisibleSidebar || ! isSmallAppSize)">
 
             <!--User Headline-->
             <UserHeadline/>
 
-            <div v-if="app" class="content-scroller">
+            <!--Content-->
+            <div class="content-scroller">
 
                 <!--Locations-->
                 <div class="menu-list-wrapper">
                     <TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
                     <ul class="menu-list">
-                        <li class="menu-list-item" @click="goHome">
+                        <li class="menu-list-item" :class="{'is-active': isBaseLocation}" @click="goHome">
                             <FontAwesomeIcon class="icon" icon="hdd"/>
                             <span class="label">{{ $t('locations.home') }}</span>
                         </li>
-                        <!--<li class="menu-list-item">
+                        <li class="menu-list-item" :class="{'is-active': isSharedLocation}" @click="getShared">
                             <FontAwesomeIcon class="icon" icon="share"/>
-                            <span class="label">Shared</span>
-                        </li>-->
-                        <li class="menu-list-item" @click="getTrash">
+                            <span class="label">{{ $t('locations.shared') }}</span>
+                        </li>
+                        <li class="menu-list-item" :class="{'is-active': isTrashLocation}" @click="getTrash">
                             <FontAwesomeIcon class="icon" icon="trash-alt"/>
                             <span class="label">{{ $t('locations.trash') }}</span>
                         </li>
@@ -63,6 +64,7 @@
             <!--Storage Size Info-->
             <StorageSize v-if="config.storageLimit"/>
 
+            <!--Mobile logout button-->
             <div v-if="isSmallAppSize" class="log-out-button">
                 <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
             </div>
@@ -71,11 +73,11 @@
 </template>
 
 <script>
-    import FileListItemThumbnail from '@/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail'
-    import UserHeadline from '@/components/VueFileManagerComponents/Sidebar/UserHeadline'
-    import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
-    import StorageSize from '@/components/VueFileManagerComponents/Sidebar/StorageSize'
-    import TextLabel from '@/components/VueFileManagerComponents/Others/TextLabel'
+    import FileListItemThumbnail from '@/components/Sidebar/FileListItemThumbnail'
+    import UserHeadline from '@/components/Sidebar/UserHeadline'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import StorageSize from '@/components/Sidebar/StorageSize'
+    import TextLabel from '@/components/Others/TextLabel'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -89,7 +91,16 @@
             TextLabel,
         },
         computed: {
-            ...mapGetters(['homeDirectory', 'app', 'appSize', 'config']),
+            ...mapGetters(['homeDirectory', 'app', 'appSize', 'config', 'currentFolder']),
+            isTrashLocation() {
+                return this.currentFolder && this.currentFolder.location === 'trash-root' || this.currentFolder && this.currentFolder.location === 'trash'
+            },
+            isBaseLocation() {
+                return this.currentFolder && this.currentFolder.location === 'base'
+            },
+            isSharedLocation() {
+                return this.currentFolder && this.currentFolder.location === 'shared'
+            },
             isSmallAppSize() {
                 return this.appSize === 'small'
             }
@@ -102,17 +113,20 @@
             }
         },
         methods: {
+            getShared() {
+                this.$store.dispatch('getShared')
+            },
             getTrash() {
                 this.$store.dispatch('getTrash')
             },
             goHome() {
                 this.$store.commit('FLUSH_BROWSER_HISTORY')
-                this.$store.dispatch('goToFolder', [this.homeDirectory, true])
+                this.$store.dispatch('getFolder', [this.homeDirectory, true])
             },
             openFolder(folder) {
 
                 // Go to folder
-                this.$store.dispatch('goToFolder', [folder, false])
+                this.$store.dispatch('getFolder', [folder, false])
             },
             downloadFile(file) {
 
@@ -120,7 +134,7 @@
             },
             showFileDetail(file) {
                 // Dispatch load file info detail
-                this.$store.dispatch('getLatestUploadDetail', file)
+                this.$store.dispatch('getFileDetail', file)
 
                 // Show panel if is not open
                 this.$store.dispatch('fileInfoToggle', true)
@@ -245,7 +259,8 @@
                     display: inline-block;
                 }
 
-                &:hover {
+                &:hover,
+                &.is-active {
                     background: rgba($theme, .1);
 
                     .icon {
@@ -379,7 +394,7 @@
     @media (prefers-color-scheme: dark) {
 
         #sidebar {
-            background: $dark_mode_foreground;
+            background: $dark_mode_background;
         }
 
         .menu-list-wrapper {