Merge branch 'dev'

* dev:
  v1.5.2

.env.example

@@ -5,6 +5,8 @@ APP_DEBUG=true
 APP_URL=http://localhost
 
 LOG_CHANNEL=stack
+SCOUT_DRIVER=tntsearch
+FILESYSTEM_DRIVER=local
 
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
@@ -37,6 +39,12 @@ AWS_SECRET_ACCESS_KEY=
 AWS_DEFAULT_REGION=us-east-1
 AWS_BUCKET=
 
+DO_SPACES_KEY=
+DO_SPACES_SECRET=
+DO_SPACES_ENDPOINT=
+DO_SPACES_REGION=
+DO_SPACES_BUCKET=
+
 PUSHER_APP_ID=
 PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
@@ -44,3 +52,8 @@ PUSHER_APP_CLUSTER=mt1
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+PASSPORT_CLIENT_ID=
+PASSPORT_CLIENT_SECRET=
+
+APP_DEPLOY_SECRET=

README.md

@@ -1,50 +1,52 @@
-## 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:**
+### Demo & dev preview links
+* For visit demo version click here [demo.vuefilemanager.com](https://demo.vuefilemanager.com/) 
+* For visit dev version click here [dev.vuefilemanager.com](https://dev.vuefilemanager.com/) (It's auto deployed dev branch. Can be unstable and not ready for production)
 
-### Drag & Drop
-Reorder your files easily, just drag your folder or file and drop to another folder.
+### Installation setup
 
-### List & Grid Preview
-You can change from two types of file and folder previews. Show your items in list or grid preview.
+Run these commands to install vendors:
+```
+composer install
+```
+```
+npm install
+```
 
-### Background Uploading
-Your files is uploaded in the background, so nothing will stop you from working with the files.
+Setup your database in .env and run this command:
+```
+php artisan setup:prod
+```
 
-### File & Folder searching
-Search your items quickly, from anywhere in the app you are.
+It automatically:
+* Migrate database
+* Generate Application key
+* Create Passport Encryption keys
+* Create Password grant client
+* Create Personal access client
 
-### Custom Context Menu
-Quick actions next to your file on your right click.
+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
 
-### File Details
-Get preview of your files quickli in right panel next to your files.
+### Run Application
+To start server on your localhost, run this command
+```
+php artisan serve
+```
 
-### Improved Mobile User Experience
-Need to quickly upload or get your files on your smartphone? It’s not problem.
+To compiles and hot-reloads for development, run this command
+```
+npm run hot
+```
 
-### 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/Deploy.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Log;
+
+class Deploy extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'deploy:production';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Automatic deployment for production';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        // Start deployment
+        $this->info('Running auto deployment');
+        $this->call('down');
+
+        // Exec commands
+        exec('git pull origin ' . config('app.deploy_branch'));
+        //exec('composer update --no-interaction --prefer-dist');
+        $this->migrateDatabase();
+
+        // Stop deployment
+        $this->call('up');
+        $this->info('Everything is done, congratulations! 🥳🥳🥳');
+
+        Log::info('Application was updated!');
+    }
+
+    /**
+     * Migrate database
+     */
+    public function migrateDatabase()
+    {
+        $this->call('migrate', [
+            '--force' => true,
+        ]);
+    }
+}

app/Console/Commands/SetupDevEnvironment.php

@@ -0,0 +1,117 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\User;
+use Illuminate\Console\Command;
+
+class SetupDevEnvironment extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'setup:dev';
+
+    /**
+     * 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->createDefaultUser();
+
+        $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',
+        ]);
+    }
+
+    /**
+     * Create Default User
+     */
+    public function createDefaultUser()
+    {
+        $user = User::create([
+            'name'     => 'Jane Doe',
+            'email'    => 'howdy@hi5ve.digital',
+            'password' => \Hash::make('secret'),
+        ]);
+
+        $this->info('Test user created. Email: ' . $user->email . ' Password: secret');
+    }
+}

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,9 @@
 
 namespace App\Console;
 
+use App\Console\Commands\Deploy;
+use App\Console\Commands\SetupDevEnvironment;
+use App\Console\Commands\SetupProductionEnvironment;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
@@ -13,7 +16,9 @@ class Kernel extends ConsoleKernel
      * @var array
      */
     protected $commands = [
-        //
+        SetupProductionEnvironment::class,
+        SetupDevEnvironment::class,
+        Deploy::class,
     ];
 
     /**

app/FileManagerFile.php

@@ -3,18 +3,61 @@
 namespace App;
 
 use ByteUnits\Metric;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Laravel\Scout\Searchable;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
-use \Askedio\SoftCascade\Traits\SoftCascadeTrait;
 
+/**
+ * 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, SoftCascadeTrait;
+    use Searchable, SoftDeletes;
 
+    public $public_access = null;
 
     protected $guarded = [
         'id'
@@ -24,6 +67,16 @@ 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
      *
@@ -31,7 +84,7 @@ class FileManagerFile extends Model
      */
     public function getCreatedAtAttribute()
     {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');;
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
     }
 
     /**
@@ -41,15 +94,14 @@ class FileManagerFile extends Model
      */
     public function getDeletedAtAttribute()
     {
-        if (! $this->attributes['deleted_at']) return null;
+        if (!$this->attributes['deleted_at']) return null;
 
-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y at H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
     }
 
     /**
-     * Format filesize
+     * Format fileSize
      *
-     * @param $value
      * @return string
      */
     public function getFilesizeAttribute()
@@ -60,23 +112,64 @@ 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;
+        // Get thumbnail from s3
+        if ($this->attributes['thumbnail'] && is_storage_driver(['s3', 'spaces'])) {
+
+            return Storage::temporaryUrl('file-manager/' . $this->attributes['thumbnail'], now()->addDay());
+        }
+
+        // Get thumbnail from local storage
+        if ($this->attributes['thumbnail'] && is_storage_driver('local')) {
+
+            // 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']]);
+        // Get file from s3
+        if (is_storage_driver(['s3', 'spaces'])) {
+
+            $header = [
+                "ResponseAcceptRanges"       => "bytes",
+                "ResponseContentType"        => $this->attributes['mimetype'],
+                "ResponseContentLength"      => $this->attributes['filesize'],
+                "ResponseContentRange"       => "bytes 0-600/" . $this->attributes['filesize'],
+                'ResponseContentDisposition' => 'attachment; filename=' . $this->attributes['name'] . '.' . $this->attributes['mimetype'],
+            ];
+
+            return Storage::temporaryUrl('file-manager/' . $this->attributes['basename'], now()->addDay(), $header);
+        }
+
+        // Get thumbnail from local storage
+        if (is_storage_driver('local')) {
+
+            $route = route('file', ['name' => $this->attributes['basename']]);
+
+            if ($this->public_access) {
+                return $route . '/public/' . $this->public_access;
+            }
+
+            return $route;
+        }
     }
 
     /**
@@ -115,4 +208,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

@@ -11,20 +11,62 @@ use RecursiveArrayIterator;
 use RecursiveIteratorIterator;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
-use \Askedio\SoftCascade\Traits\SoftCascadeTrait;
 
+/**
+ * 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, SoftCascadeTrait;
+    use Searchable, SoftDeletes;
 
     protected $guarded = [
         'id'
     ];
 
-    protected $softCascade = [
-        'children', 'files'
-    ];
-
     protected $appends = [
         'items', 'trashed_items'
     ];
@@ -79,7 +121,7 @@ class FileManagerFolder extends Model
      */
     public function getCreatedAtAttribute()
     {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
     }
 
     /**
@@ -91,7 +133,7 @@ class FileManagerFolder extends Model
     {
         if (! $this->attributes['deleted_at']) return null;
 
-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
     }
 
     /**
@@ -116,7 +158,6 @@ class FileManagerFolder extends Model
      */
     public function files()
     {
-
         return $this->hasMany('App\FileManagerFile', 'folder_id', 'unique_id');
     }
 
@@ -171,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()
     {
@@ -178,9 +229,22 @@ class FileManagerFolder extends Model
 
         static::deleting(function ($item) {
 
-            $item->children()->each(function($folder) {
-                $folder->delete();
-            });
+            if ( $item->isForceDeleting() ) {
+
+                $item->trashed_children()->each(function($folder) {
+                    $folder->forceDelete();
+                });
+
+            } else {
+
+                $item->children()->each(function($folder) {
+                    $folder->delete();
+                });
+
+                $item->files()->each(function($file) {
+                    $file->delete();
+                });
+            }
         });
 
         static::restoring(function ($item) {
@@ -196,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();
@@ -43,7 +31,7 @@ class AuthController extends Controller
         ];
 
         // Abort with 404, user not found
-        return abort('404', 'We can\'t find a user with that e-mail address.');
+        return abort('404', __('vuefilemanager.user_not_fount'));
     }
     /**
      * Login user
@@ -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/DeployController.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Artisan;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Validation\UnauthorizedException;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+
+class DeployController extends Controller
+{
+    /**
+     * Get web hook payload and verify request
+     *
+     * @param Request $request
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
+     */
+    public function github(Request $request)   {
+
+        if (($signature = $request->headers->get('X-Hub-Signature')) == null) {
+            throw new BadRequestHttpException('Header not set');
+        }
+
+        $signature_parts = explode('=', $signature);
+
+        if (count($signature_parts) != 2) {
+            throw new BadRequestHttpException('signature has invalid format');
+        }
+
+        $known_signature = hash_hmac('sha1', $request->getContent(), config('app.deploy_secret'));
+
+        if (! hash_equals($known_signature, $signature_parts[1])) {
+            throw new UnauthorizedException('Could not verify request signature ' . $signature_parts[1]);
+        }
+
+        // Run deploying
+        Artisan::call('deploy:production');
+
+        Log::info('The GitHub webhook was accepted');
+
+        return response('The GitHub webhook was accepted', 202);
+    }
+}

app/Http/Controllers/FileAccessController.php

@@ -0,0 +1,217 @@
+<?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\Facades\Storage;
+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 = '/avatars/' . $basename;
+
+        // Check if file exist
+        if (!Storage::exists($path)) abort(404);
+
+        // Return avatar
+        return Storage::download($path, $basename);
+    }
+
+    /**
+     * 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 = '/file-manager/' . $file->basename;
+
+        // Check if file exist
+        if (!Storage::exists($path)) abort(404);
+
+        $header = [
+            "Content-Type"   => Storage::mimeType($path),
+            "Content-Length" => Storage::size($path),
+            "Accept-Ranges"  => "bytes",
+            "Content-Range"  => "bytes 0-600/" . Storage::size($path),
+        ];
+
+        // Get file
+        return Storage::download($path, $file_pretty_name, $header);
+    }
+
+    /**
+     * @param $file
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    private function thumbnail_file($file)
+    {
+        // Get file path
+        $path = '/file-manager/' . $file->getOriginal('thumbnail');
+
+        // Check if file exist
+        if (!Storage::exists($path)) abort(404);
+
+        // Return image thumbnail
+        return Storage::download($path, $file->getOriginal('thumbnail'));
+    }
+}

app/Http/Controllers/FileBrowser/BrowseController.php

@@ -0,0 +1,224 @@
+<?php
+
+namespace App\Http\Controllers\FileBrowser;
+
+use App\Http\Requests\FileBrowser\SearchRequest;
+use App\User;
+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', 'parent'])
+            ->where('user_id', $user_id)
+            ->get(['parent_id', 'unique_id', 'name']);
+
+        $folders = FileManagerFolder::onlyTrashed()
+            ->with(['parent'])
+            ->where('user_id', $user_id)
+            ->whereIn('unique_id', filter_folders_ids($folders_trashed))
+            ->get();
+
+        // Get files trashed
+        $files_trashed = FileManagerFile::onlyTrashed()
+            ->with(['parent'])
+            ->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 latest user uploads
+     *
+     * @return mixed
+     */
+    public function latest() {
+
+        // Get User
+        $user = User::with(['latest_uploads'])
+            ->where('id', Auth::id())
+            ->first();
+
+        return $user->latest_uploads->makeHidden(['user_id', 'basename']);
+    }
+
+    /**
+     * Get participant uploads
+     *
+     * @return mixed
+     */
+    public function participant_uploads() {
+
+        // Get User
+        $uploads = FileManagerFile::with(['parent'])->where('user_id', Auth::id())
+            ->whereUserScope('editor')->orderBy('created_at', 'DESC')->get();
+
+        return $uploads;
+    }
+
+    /**
+     * 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()
+                ->with('parent')
+                ->where('user_id', $user_id)
+                ->where('parent_id', $unique_id)
+                ->get();
+
+            $files = FileManagerFile::onlyTrashed()
+                ->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();
+        }
+
+        // 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)
+            ->orderBy('created_at', 'DESC')
+            ->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::delete('/file-manager/' . $file->basename);
+
+            // Delete thumbnail if exist
+            if ($file->thumbnail) Storage::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,620 +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') {
-
-            $item = FileManagerFolder::withTrashed()
-                ->with('folders')
-                ->where('user_id', $user->id)
-                ->where('unique_id', $request->unique_id)
-                ->first();
-
-            // Remove folder from user favourites
-            $user->favourites()->detach($request->unique_id);
-
-            foreach ($item->files as $file) {
-
-                if ($request->force_delete) {
-
-                    // 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();
-                } else {
-
-                    // Delete file from visibility
-                    $file->delete();
-                }
-            }
-
-            // Delete record
-            if ($request->force_delete) {
-
-                $item->forceDelete();
-            } else {
-
-                $item->delete();
-            }
-        }
-
-        if ($request->type === 'file' || $request->type === 'image') {
-
-            $item = 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/' . $item->basename);
-
-                // Delete thumbnail if exist
-                if (!is_null($item->thumbnail)) Storage::disk('local')->delete('/file-manager/' . $item->thumbnail);
-
-                // Delete file permanently
-                $item->forceDelete();
-            } else {
-
-                // Delete file from visibility
-                $item->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 every item
-        $folders->each->forceDelete();
-        $files->each->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();
-            }
-        }
-
-        // Get file
-        if ($request->type === 'file' || $request->type === 'image') {
-
-            // 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();
-    }
-
-    /**
-     * Delete Item
-     *
-     * @param Request $request
-     */
-    public function delete_items(Request $request)
-    {
-        // Validate request
-        $validator = Validator::make($request->all(), [
-            'items' => 'required|json',
-        ]);
-
-        // Return error
-        if ($validator->fails()) abort(400, 'Bad input');
-
-        foreach ($request->input('items') as $file) {
-
-            if ($file['type'] === 'file' || $file['type'] === 'image') {
-
-                $item = FileManagerFile::where('unique_id', $file['unique_id'])->first();
-
-            } else {
-
-                $item = FileManagerFolder::where('unique_id', $file['unique_id'])->first();
-            }
-
-            // Delete file
-            Storage::disk('local')->delete('/file-manager/' . $item->basename);
-
-            // Delete thumbnail if exist
-            if (!is_null($item->thumbnail)) {
-                Storage::disk('local')->delete('/file-manager/' . $item->thumbnail);
-            }
-
-            // Permanently delete file
-            $item->forceDelete();
-        }
-    }
-
-    /**
-     * 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 = '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 (substr($file->getMimeType(), 0, 5) == 'image') {
-
-            $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);
-
-        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,405 @@
+<?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 http\Env\Response;
+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;
+use Illuminate\Support\Facades\Storage;
+
+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);
+        }
+
+        // Check if shared is image file and then show it
+        if ($shared->type === 'file' && ! $shared->protected) {
+
+            $image = FileManagerFile::where('user_id', $shared->user_id)
+                ->where('type', 'image')
+                ->where('unique_id', $shared->item_id)
+                ->first();
+
+            if ($image) {
+                return $this->show_image($image);
+            }
+        }
+
+        // Return page index
+        return view("index");
+    }
+
+    /**
+     * Get image from storage and show it
+     *
+     * @param $file
+     * @return \Symfony\Component\HttpFoundation\StreamedResponse
+     */
+    private function show_image($file)
+    {
+        // Format pretty filename
+        $file_pretty_name = $file->name . '.' . $file->mimetype;
+
+        // Get file path
+        $path = '/file-manager/' . $file->basename;
+
+        // Check if file exist
+        if (!Storage::exists($path)) abort(404);
+
+        $header = [
+            "Content-Type"   => Storage::mimeType($path),
+            "Content-Length" => Storage::size($path),
+            "Accept-Ranges"  => "bytes",
+            "Content-Range"  => "bytes 0-600/" . Storage::size($path),
+        ];
+
+        // Get file
+        return Storage::response($path, $file_pretty_name, $header);
+    }
+
+    /**
+     * 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,201 @@
+<?php
+
+namespace App\Http\Controllers\User;
+
+use App\FileManagerFile;
+use App\FileManagerFolder;
+use App\Http\Resources\StorageDetailResource;
+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();
+
+        // Get folder tree
+        $tree = FileManagerFolder::with(['folders.shared', 'shared:token,id,item_id,permission,protected'])
+            ->where('parent_id', 0)
+            ->where('user_id', $user->id)
+            ->get();
+
+        return [
+            'user'       => $user->only(['name', 'email', 'avatar']),
+            'favourites' => $user->favourites->makeHidden(['pivot']),
+            'tree'       => $tree,
+            '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 storage details
+     *
+     * @return array
+     */
+    public function storage()
+    {
+        $document_mimetypes = [
+            'pdf', 'numbers', 'xlsx', 'xls', 'txt', 'md', 'rtf', 'pptx', 'ppt', 'odt', 'ods', 'odp', 'epub', 'docx', 'doc', 'csv', 'pages'
+        ];
+
+        $user = Auth::user();
+        $storage_capacity = config('vuefilemanager.user_storage_capacity');
+
+        $images = FileManagerFile::where('user_id', $user->id)
+            ->where('type', 'image')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        $audios = FileManagerFile::where('user_id', $user->id)
+            ->where('type', 'audio')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        $videos = FileManagerFile::where('user_id', $user->id)
+            ->where('type', 'video')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        $documents = FileManagerFile::where('user_id', $user->id)
+            ->whereIn('mimetype', $document_mimetypes)->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        $others = FileManagerFile::where('user_id', $user->id)
+            ->whereNotIn('mimetype', $document_mimetypes)
+            ->whereNotIn('type', ['audio', 'video', 'image'])
+            ->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        $usage = collect([
+            'images'    => [
+                'used'       => $images,
+                'percentage' => get_storage_fill_percentage($images, $storage_capacity),
+            ],
+            'audios'    => [
+                'used'       => $audios,
+                'percentage' => get_storage_fill_percentage($audios, $storage_capacity),
+            ],
+            'videos'    => [
+                'used'       => $videos,
+                'percentage' => get_storage_fill_percentage($videos, $storage_capacity),
+            ],
+            'documents' => [
+                'used'       => $documents,
+                'percentage' => get_storage_fill_percentage($documents, $storage_capacity),
+            ],
+            'others'    => [
+                'used'       => $others,
+                'percentage' => get_storage_fill_percentage($others, $storage_capacity),
+            ],
+        ]);
+
+        return [
+            'data' => [
+                'id'            => '1',
+                'type'          => 'disk',
+                'attributes'    => [
+                    'used'       => Metric::bytes($user->used_capacity)->format(),
+                    'capacity'   => format_gigabytes($storage_capacity),
+                    'percentage' => get_storage_fill_percentage($user->used_capacity, $storage_capacity),
+                ],
+                'relationships' => $usage->map(function ($item) {
+                    return [
+                        'used'       => Metric::bytes($item['used'])->format(),
+                        'percentage' => $item['percentage']
+                    ];
+                })
+            ]
+        ];
+    }
+
+    /**
+     * 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,178 +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'      => '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/Middleware/VerifyCsrfToken.php

@@ -19,6 +19,6 @@ class VerifyCsrfToken extends Middleware
      * @var array
      */
     protected $except = [
-        //
+        '/deploy',
     ];
 }

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::delete('/file-manager/' . $file->basename);
+
+                    // Delete thumbnail if exist
+                    if (!is_null($file->thumbnail)) Storage::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::delete('/file-manager/' . $file->basename);
+
+                // Delete thumbnail if exist
+                if ($file->thumbnail) Storage::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::exists($directory)) {
+            Storage::makeDirectory($directory);
+        }
+
+        // Store to disk
+        Storage::putFileAs($directory, $file, $filename, 'private');
+
+        // 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(564, null, function ($constraint) {
+                $constraint->aspectRatio();
+            })->stream();
+
+            // Store thumbnail to disk
+            Storage::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,10 +1,125 @@
 <?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_storage() {
+    return env('FILESYSTEM_DRIVER');
+}
+
+/**
+ * Check if is running AWS s3 as storage
+ *
+ * @return bool
+ */
+function is_storage_driver($driver) {
+
+    if (is_array($driver)) {
+        return in_array(env('FILESYSTEM_DRIVER'), $driver);
+    }
+
+    return env('FILESYSTEM_DRIVER') === $driver;
+}
+
+/**
+ * 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
@@ -19,16 +134,19 @@ function store_avatar($image, $path)
     $path = check_directory($path);
 
     // Store avatar
-    $image_path = $path . '/' . Str::random(8) . '-' . $image->getClientOriginalName();
+    $image_path = Str::random(8) . '-' . $image->getClientOriginalName();
 
     // Create intervention image
     $img = Image::make($image->getRealPath());
 
     // Generate thumbnail
-    $img->fit('150', '150')->save(storage_path() . "/app/" . $image_path, 90);
+    $img->fit('150', '150')->stream();
+
+    // Store thumbnail to disk
+    Storage::put($path . '/' . $image_path, $img);
 
     // Return path to image
-    return $image_path;
+    return $path . '/' . $image_path;
 }
 
 /**
@@ -54,7 +172,6 @@ function check_directory($directory)
  */
 function make_single_input($request)
 {
-
     // Create container
     $data = [];
 
@@ -100,9 +217,9 @@ function get_storage_fill_percentage($used, $capacity)
  *
  * @return string
  */
-function user_storage_percentage() {
-
-    $user = \Illuminate\Support\Facades\Auth::user();
+function user_storage_percentage()
+{
+    $user = Auth::user();
 
     return get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity'));
 }
@@ -152,9 +269,49 @@ function appeared_once($arr)
  * @param $folders
  * @return array
  */
-function filter_folders_ids($folders)
+function filter_folders_ids($folders, $by_column = 'unique_id')
 {
-    $folder_unique_ids = recursiveFind($folders->toArray(), 'unique_id');
+    $folder_unique_ids = recursiveFind($folders->toArray(), $by_column);
 
     return appeared_once($folder_unique_ids);
+}
+
+/**
+ * Format localized date
+ *
+ * @param $date
+ * @param string $format
+ * @return string
+ */
+function format_date($date, $format = '%d. %B. %Y, %H:%M')
+{
+    $start = Carbon::parse($date);
+
+    return $start->formatLocalized($format);
+}
+
+/**
+ * Get file type from mimetype
+ *
+ * @param $file
+ * @return string
+ */
+function get_file_type($file)
+{
+    // Get mimetype from file
+    $mimetype = explode('/', $file->getMimeType());
+
+    switch ($mimetype[0]) {
+        case 'image':
+            return 'image';
+            break;
+        case 'video':
+            return 'video';
+            break;
+        case 'audio':
+            return 'audio';
+            break;
+        default:
+            return 'file';
+    }
 }

app/Notifications/ResetPassword.php

@@ -43,10 +43,12 @@ class ResetPassword extends Notification
         $reset_url = url('/create-new-password?token=' . $this->token);
 
         return (new MailMessage)
-            ->subject('Reset password for your account on ' . config('vuefilemanager.app_name'))
-            ->line('You are receiving this email because we received a password reset request for your account.')
-            ->action('Reset Password', $reset_url)
-            ->line('If you did not request a password reset, no further action is required.');
+            ->subject(__('vuefilemanager.reset_password_subject') . config('vuefilemanager.app_name'))
+            ->greeting(__('vuefilemanager.reset_password_greeting'))
+            ->line(__('vuefilemanager.reset_password_line_1'))
+            ->action(__('vuefilemanager.reset_password_action'), $reset_url)
+            ->line(__('vuefilemanager.reset_password_line_2'))
+            ->salutation(__('vuefilemanager.salutation') . ', ' . config('vuefilemanager.app_name'));
     }
 
     /**

app/Providers/AppServiceProvider.php

@@ -2,6 +2,8 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -23,6 +25,11 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        //
+        Schema::defaultStringLength(191);
+
+        $get_time_locale = App::getLocale() . '_' . mb_strtoupper(App::getLocale());
+
+        // Set locale for carbon dates
+        setlocale(LC_TIME, $get_time_locale);
     }
 }

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;
@@ -94,7 +135,7 @@ class User extends Authenticatable
      */
     public function favourites()
     {
-        return $this->belongsToMany(FileManagerFolder::class, 'favourite_folder', 'user_id', 'folder_unique_id', 'id', 'unique_id')->select(['unique_id', 'name', 'type']);
+        return $this->belongsToMany(FileManagerFolder::class, 'favourite_folder', 'user_id', 'folder_unique_id', 'id', 'unique_id')->with('shared:token,id,item_id,permission,protected');
     }
 
     /**
@@ -104,7 +145,7 @@ class User extends Authenticatable
      */
     public function latest_uploads() {
 
-        return $this->hasMany(FileManagerFile::class)->orderBy('created_at', 'DESC')->take(7);
+        return $this->hasMany(FileManagerFile::class)->with(['parent'])->orderBy('created_at', 'DESC')->take(40);
     }
 
     /**

composer.json

@@ -9,7 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^7.2",
-        "askedio/laravel-soft-cascade": "^6.0",
+        "doctrine/dbal": "^2.10",
         "fideloper/proxy": "^4.0",
         "fruitcake/laravel-cors": "^1.0",
         "gabrielelana/byte-units": "^0.5.0",
@@ -18,9 +18,12 @@
         "laravel/passport": "^8.4",
         "laravel/scout": "^7.2",
         "laravel/tinker": "^2.0",
+        "league/flysystem-aws-s3-v3": "^1.0",
+        "league/flysystem-cached-adapter": "^1.0",
         "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/app.php

@@ -233,6 +233,9 @@ return [
 
     ],
 
+    'deploy_secret' => env('APP_DEPLOY_SECRET'),
+    'deploy_branch' => env('APP_DEPLOY_BRANCH'),
+
     'debug_blacklist' => [
         '_ENV' => [
             'APP_KEY',

config/filesystems.php

@@ -64,6 +64,15 @@ return [
             'url' => env('AWS_URL'),
         ],
 
+        'spaces' => [
+            'driver' => 's3',
+            'key' => env('DO_SPACES_KEY'),
+            'secret' => env('DO_SPACES_SECRET'),
+            'endpoint' => env('DO_SPACES_ENDPOINT'),
+            'region' => env('DO_SPACES_REGION'),
+            'bucket' => env('DO_SPACES_BUCKET'),
+        ],
+
     ],
 
 ];

config/vuefilemanager.php

@@ -2,6 +2,8 @@
 
 return [
 
+    'version' => '1.5.1',
+
     // Your app name
     'app_name' => 'VueFileManager',
 

database/migrations/2020_04_02_055021_change_type_attribute_in_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 ChangeTypeAttributeInFileManagerFilesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            DB::statement('ALTER TABLE file_manager_files MODIFY type TEXT;');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            //
+        });
+    }
+}

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) {
+            //
+        });
+    }
+}

database/vue-file-manager-127.0.0.103-04-2020

@@ -7,7 +7,7 @@
 #
 # Host: 127.0.0.1 (MySQL 5.7.25)
 # Database: file-manager
-# Generation Time: 2020-03-14 17:32:56 +0000
+# Generation Time: 2020-04-03 07:57:39 +0000
 # ************************************************************
 
 
@@ -64,7 +64,7 @@ CREATE TABLE `file_manager_files` (
   `basename` text COLLATE utf8mb4_unicode_ci,
   `mimetype` text COLLATE utf8mb4_unicode_ci,
   `filesize` text COLLATE utf8mb4_unicode_ci,
-  `type` enum('image','file') COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `type` text COLLATE utf8mb4_unicode_ci,
   `deleted_at` timestamp NULL DEFAULT NULL,
   `created_at` timestamp NULL DEFAULT NULL,
   `updated_at` timestamp NULL DEFAULT NULL,
@@ -122,7 +122,8 @@ VALUES
 	(10,'2019_08_19_000000_create_failed_jobs_table',1),
 	(11,'2020_03_03_065147_add_user_id_to_file_manager_files_table',2),
 	(12,'2020_03_03_065155_add_user_id_to_file_manager_folders_table',2),
-	(13,'2020_03_03_070319_create_favourites_folders_table',3);
+	(13,'2020_03_03_070319_create_favourites_folders_table',3),
+	(14,'2020_04_02_055021_change_type_attribute_in_file_manager_files_table',4);
 
 /*!40000 ALTER TABLE `migrations` ENABLE KEYS */;
 UNLOCK TABLES;
@@ -249,11 +250,11 @@ DROP TABLE IF EXISTS `users`;
 
 CREATE TABLE `users` (
   `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `name` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `email` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
   `email_verified_at` timestamp NULL DEFAULT NULL,
-  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `password` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `avatar` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `created_at` timestamp NULL DEFAULT NULL,
   `updated_at` timestamp NULL DEFAULT NULL,

package.json

@@ -12,20 +12,23 @@
     "devDependencies": {
         "axios": "^0.19",
         "cross-env": "^5.1",
-        "laravel-mix": "^5.0.1",
+        "laravel-mix": "^5.0.4",
         "resolve-url-loader": "^2.3.1",
         "sass-loader": "^8.0.2",
         "vue-template-compiler": "^2.6.11"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.26",
-        "@fortawesome/free-solid-svg-icons": "^5.12.0",
+        "@fortawesome/fontawesome-svg-core": "^1.2.28",
+        "@fortawesome/free-solid-svg-icons": "^5.13.0",
         "@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",
-        "vuex": "^3.0.1"
+        "vue-feather-icons": "^5.0.0",
+        "vue-i18n": "^8.17.4",
+        "vue-router": "^3.1.6",
+        "vuex": "^3.3.0"
     }
 }

public/.htaccess

@@ -5,6 +5,13 @@
 
     RewriteEngine On
 
+    AddType video/ogg .ogv
+    AddType video/mp4 .mp4
+    AddType video/webm .webm
+    <ifModule mod_headers.c>
+        Header set Connection keep-alive
+    </ifModule>
+
     # Handle Authorization Header
     RewriteCond %{HTTP:Authorization} .
     RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

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
  */

public/mix-manifest.json

@@ -1,249 +1,4 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css",
-    "/js/main.36df5424dd932bd30f74.hot-update.js": "/js/main.36df5424dd932bd30f74.hot-update.js",
-    "/js/main.de09a450b740c9685feb.hot-update.js": "/js/main.de09a450b740c9685feb.hot-update.js",
-    "/js/main.31a3eca7c2342fa121dd.hot-update.js": "/js/main.31a3eca7c2342fa121dd.hot-update.js",
-    "/js/main.42c65585e8023b9698f0.hot-update.js": "/js/main.42c65585e8023b9698f0.hot-update.js",
-    "/js/main.f43b15ea8dc57424419c.hot-update.js": "/js/main.f43b15ea8dc57424419c.hot-update.js",
-    "/js/main.653b4946ab1bc346ca68.hot-update.js": "/js/main.653b4946ab1bc346ca68.hot-update.js",
-    "/js/main.7c243b5d053a8d0dc2b9.hot-update.js": "/js/main.7c243b5d053a8d0dc2b9.hot-update.js",
-    "/js/main.3c227ef426613ed5d773.hot-update.js": "/js/main.3c227ef426613ed5d773.hot-update.js",
-    "/js/main.5bf243e5587d855112c6.hot-update.js": "/js/main.5bf243e5587d855112c6.hot-update.js",
-    "/js/main.f8ba08f1021af3a3529d.hot-update.js": "/js/main.f8ba08f1021af3a3529d.hot-update.js",
-    "/js/main.68b09738fdc75c16500c.hot-update.js": "/js/main.68b09738fdc75c16500c.hot-update.js",
-    "/js/main.6db7b6cf394e21e087fd.hot-update.js": "/js/main.6db7b6cf394e21e087fd.hot-update.js",
-    "/js/main.e6a5b81289b95501bdb1.hot-update.js": "/js/main.e6a5b81289b95501bdb1.hot-update.js",
-    "/js/main.95f2b217e5e1e815d550.hot-update.js": "/js/main.95f2b217e5e1e815d550.hot-update.js",
-    "/js/main.29aae7d3a4bac5cf3715.hot-update.js": "/js/main.29aae7d3a4bac5cf3715.hot-update.js",
-    "/js/main.1ccd2fe6f216173db7ea.hot-update.js": "/js/main.1ccd2fe6f216173db7ea.hot-update.js",
-    "/js/main.41f3eb2dede8f28341e0.hot-update.js": "/js/main.41f3eb2dede8f28341e0.hot-update.js",
-    "/js/main.5c2db1ff09fb420f4a1f.hot-update.js": "/js/main.5c2db1ff09fb420f4a1f.hot-update.js",
-    "/js/main.486fdd73725da4624738.hot-update.js": "/js/main.486fdd73725da4624738.hot-update.js",
-    "/js/main.0b4b61f92bfc8af065df.hot-update.js": "/js/main.0b4b61f92bfc8af065df.hot-update.js",
-    "/js/main.22a296026cdf2e3df0d2.hot-update.js": "/js/main.22a296026cdf2e3df0d2.hot-update.js",
-    "/js/main.99d7e0b721a99851d7de.hot-update.js": "/js/main.99d7e0b721a99851d7de.hot-update.js",
-    "/js/main.28a4d19c7b8e2c29d616.hot-update.js": "/js/main.28a4d19c7b8e2c29d616.hot-update.js",
-    "/js/main.83eff80d8e062bc358d3.hot-update.js": "/js/main.83eff80d8e062bc358d3.hot-update.js",
-    "/js/main.f90e00f0b87eb215ab02.hot-update.js": "/js/main.f90e00f0b87eb215ab02.hot-update.js",
-    "/js/main.3f57f62724e54fede92e.hot-update.js": "/js/main.3f57f62724e54fede92e.hot-update.js",
-    "/js/main.7b8a28e12388efec7afc.hot-update.js": "/js/main.7b8a28e12388efec7afc.hot-update.js",
-    "/js/main.6f9870778c8c1d4ebda5.hot-update.js": "/js/main.6f9870778c8c1d4ebda5.hot-update.js",
-    "/js/main.ee042fe50949a7666b82.hot-update.js": "/js/main.ee042fe50949a7666b82.hot-update.js",
-    "/js/main.927dbadc707e3220b549.hot-update.js": "/js/main.927dbadc707e3220b549.hot-update.js",
-    "/js/main.f4623e08503ea0ad408a.hot-update.js": "/js/main.f4623e08503ea0ad408a.hot-update.js",
-    "/js/main.64e698be82fa86830096.hot-update.js": "/js/main.64e698be82fa86830096.hot-update.js",
-    "/js/main.2f3926c313c008d3e865.hot-update.js": "/js/main.2f3926c313c008d3e865.hot-update.js",
-    "/js/main.c7646fe892e07122fe90.hot-update.js": "/js/main.c7646fe892e07122fe90.hot-update.js",
-    "/js/main.10580c7dacaa2251a774.hot-update.js": "/js/main.10580c7dacaa2251a774.hot-update.js",
-    "/js/main.8038f4e69a18040afbf8.hot-update.js": "/js/main.8038f4e69a18040afbf8.hot-update.js",
-    "/js/main.5d60294395b20ab918d3.hot-update.js": "/js/main.5d60294395b20ab918d3.hot-update.js",
-    "/js/main.e9af313e58f9a16ec648.hot-update.js": "/js/main.e9af313e58f9a16ec648.hot-update.js",
-    "/js/main.056335ccd1446758d9f0.hot-update.js": "/js/main.056335ccd1446758d9f0.hot-update.js",
-    "/js/main.ca5ec6e497226f5d1dab.hot-update.js": "/js/main.ca5ec6e497226f5d1dab.hot-update.js",
-    "/js/main.3c648af049aebd944de1.hot-update.js": "/js/main.3c648af049aebd944de1.hot-update.js",
-    "/js/main.1f0c295e9adb7b4fca6f.hot-update.js": "/js/main.1f0c295e9adb7b4fca6f.hot-update.js",
-    "/js/main.4b33d4e911de5ec0811c.hot-update.js": "/js/main.4b33d4e911de5ec0811c.hot-update.js",
-    "/js/main.587f7df46a60ffc22cd4.hot-update.js": "/js/main.587f7df46a60ffc22cd4.hot-update.js",
-    "/js/main.6bbccb523005ea4d0671.hot-update.js": "/js/main.6bbccb523005ea4d0671.hot-update.js",
-    "/js/main.2f1255acf7e146583b24.hot-update.js": "/js/main.2f1255acf7e146583b24.hot-update.js",
-    "/js/main.adba7d6747f7052a8670.hot-update.js": "/js/main.adba7d6747f7052a8670.hot-update.js",
-    "/js/main.294c9d40e42abf3a56f7.hot-update.js": "/js/main.294c9d40e42abf3a56f7.hot-update.js",
-    "/js/main.eb85de6d925db756b84c.hot-update.js": "/js/main.eb85de6d925db756b84c.hot-update.js",
-    "/js/main.b5a9199ad5bce5aba3f8.hot-update.js": "/js/main.b5a9199ad5bce5aba3f8.hot-update.js",
-    "/js/main.f3311a1aac9906befcc2.hot-update.js": "/js/main.f3311a1aac9906befcc2.hot-update.js",
-    "/js/main.40a07f1a0110e6662abc.hot-update.js": "/js/main.40a07f1a0110e6662abc.hot-update.js",
-    "/js/main.68617f18a1a6ffa23b24.hot-update.js": "/js/main.68617f18a1a6ffa23b24.hot-update.js",
-    "/js/main.aafc6f3248ba60ea15ae.hot-update.js": "/js/main.aafc6f3248ba60ea15ae.hot-update.js",
-    "/js/main.7a2f5f0d468e2faa519d.hot-update.js": "/js/main.7a2f5f0d468e2faa519d.hot-update.js",
-    "/js/main.9b4345e2392947a80d3e.hot-update.js": "/js/main.9b4345e2392947a80d3e.hot-update.js",
-    "/js/main.0a09af37b1d06d149895.hot-update.js": "/js/main.0a09af37b1d06d149895.hot-update.js",
-    "/js/main.4109f0c6cd2b84f785b4.hot-update.js": "/js/main.4109f0c6cd2b84f785b4.hot-update.js",
-    "/js/main.9883b699731ec03a7d5e.hot-update.js": "/js/main.9883b699731ec03a7d5e.hot-update.js",
-    "/js/main.18cb51cfea65a7a264b3.hot-update.js": "/js/main.18cb51cfea65a7a264b3.hot-update.js",
-    "/js/main.ae7f4be4f3f0366f87ce.hot-update.js": "/js/main.ae7f4be4f3f0366f87ce.hot-update.js",
-    "/js/main.c58699bfcbc89ada5e92.hot-update.js": "/js/main.c58699bfcbc89ada5e92.hot-update.js",
-    "/js/main.9450700c3b11fa506614.hot-update.js": "/js/main.9450700c3b11fa506614.hot-update.js",
-    "/js/main.c32f44aac284473fdeac.hot-update.js": "/js/main.c32f44aac284473fdeac.hot-update.js",
-    "/js/main.24514af5bbe024b6ec51.hot-update.js": "/js/main.24514af5bbe024b6ec51.hot-update.js",
-    "/js/main.bbfd2f46936f41f11a3c.hot-update.js": "/js/main.bbfd2f46936f41f11a3c.hot-update.js",
-    "/js/main.425158bb74930c327e37.hot-update.js": "/js/main.425158bb74930c327e37.hot-update.js",
-    "/js/main.ab301d78b46cd83c908e.hot-update.js": "/js/main.ab301d78b46cd83c908e.hot-update.js",
-    "/js/main.08be8ec49ec017b419ba.hot-update.js": "/js/main.08be8ec49ec017b419ba.hot-update.js",
-    "/js/main.5902509e54722435a01b.hot-update.js": "/js/main.5902509e54722435a01b.hot-update.js",
-    "/js/main.9249200d7fa42c288a42.hot-update.js": "/js/main.9249200d7fa42c288a42.hot-update.js",
-    "/js/main.8a48eaa79b89c21215b5.hot-update.js": "/js/main.8a48eaa79b89c21215b5.hot-update.js",
-    "/js/main.73098fb7c47fa3cebe37.hot-update.js": "/js/main.73098fb7c47fa3cebe37.hot-update.js",
-    "/js/main.4a31570dc92456b66580.hot-update.js": "/js/main.4a31570dc92456b66580.hot-update.js",
-    "/js/main.84855cbff31316c3060c.hot-update.js": "/js/main.84855cbff31316c3060c.hot-update.js",
-    "/js/main.1cf56d3b783512ee7678.hot-update.js": "/js/main.1cf56d3b783512ee7678.hot-update.js",
-    "/js/main.80a12b408701dd4794b4.hot-update.js": "/js/main.80a12b408701dd4794b4.hot-update.js",
-    "/js/main.082a390427496610b2a2.hot-update.js": "/js/main.082a390427496610b2a2.hot-update.js",
-    "/js/main.f6e9da1a7704a1d1b96a.hot-update.js": "/js/main.f6e9da1a7704a1d1b96a.hot-update.js",
-    "/js/main.2f90f82e2bab419d7048.hot-update.js": "/js/main.2f90f82e2bab419d7048.hot-update.js",
-    "/js/main.914d1e3a53f5c782f4e4.hot-update.js": "/js/main.914d1e3a53f5c782f4e4.hot-update.js",
-    "/js/main.87ed1b434a045a7d49af.hot-update.js": "/js/main.87ed1b434a045a7d49af.hot-update.js",
-    "/js/main.29c5bd7b7dd8eb64c131.hot-update.js": "/js/main.29c5bd7b7dd8eb64c131.hot-update.js",
-    "/js/main.56efe4a8fe0039b074b8.hot-update.js": "/js/main.56efe4a8fe0039b074b8.hot-update.js",
-    "/js/main.d73188066c126281d0e4.hot-update.js": "/js/main.d73188066c126281d0e4.hot-update.js",
-    "/js/main.4e8ac32986ecec44e495.hot-update.js": "/js/main.4e8ac32986ecec44e495.hot-update.js",
-    "/js/main.424d6c175581040a3d5a.hot-update.js": "/js/main.424d6c175581040a3d5a.hot-update.js",
-    "/js/main.1419778a403719812edf.hot-update.js": "/js/main.1419778a403719812edf.hot-update.js",
-    "/js/main.26bd18af2345a2e7e617.hot-update.js": "/js/main.26bd18af2345a2e7e617.hot-update.js",
-    "/js/main.edf91fc9e80ce289bcfb.hot-update.js": "/js/main.edf91fc9e80ce289bcfb.hot-update.js",
-    "/js/main.e3b8efde1826f4626473.hot-update.js": "/js/main.e3b8efde1826f4626473.hot-update.js",
-    "/js/main.b17fb703155bfb11df2a.hot-update.js": "/js/main.b17fb703155bfb11df2a.hot-update.js",
-    "/js/main.82ba1eaa291963b50d07.hot-update.js": "/js/main.82ba1eaa291963b50d07.hot-update.js",
-    "/js/main.aefc455ee962cf8c9e97.hot-update.js": "/js/main.aefc455ee962cf8c9e97.hot-update.js",
-    "/js/main.3fb21f7e0ceba441ba97.hot-update.js": "/js/main.3fb21f7e0ceba441ba97.hot-update.js",
-    "/js/main.b2c2b800e17c1f5919a6.hot-update.js": "/js/main.b2c2b800e17c1f5919a6.hot-update.js",
-    "/js/main.df8746deb62e689bbecc.hot-update.js": "/js/main.df8746deb62e689bbecc.hot-update.js",
-    "/js/main.44f33233b8062cd41035.hot-update.js": "/js/main.44f33233b8062cd41035.hot-update.js",
-    "/js/main.a0a0931657a1c846edef.hot-update.js": "/js/main.a0a0931657a1c846edef.hot-update.js",
-    "/js/main.f2388f593b13448cf11f.hot-update.js": "/js/main.f2388f593b13448cf11f.hot-update.js",
-    "/js/main.0e3e2d850a78479ef732.hot-update.js": "/js/main.0e3e2d850a78479ef732.hot-update.js",
-    "/js/main.d7c9b886f53f46f5166c.hot-update.js": "/js/main.d7c9b886f53f46f5166c.hot-update.js",
-    "/js/main.fd45c00377ff61f16358.hot-update.js": "/js/main.fd45c00377ff61f16358.hot-update.js",
-    "/js/main.95821f0a8266426f4d27.hot-update.js": "/js/main.95821f0a8266426f4d27.hot-update.js",
-    "/js/main.47ea7a38cbb4ff6dd9ab.hot-update.js": "/js/main.47ea7a38cbb4ff6dd9ab.hot-update.js",
-    "/js/main.12c383f74f8568edceef.hot-update.js": "/js/main.12c383f74f8568edceef.hot-update.js",
-    "/js/main.5e8dedefb4c7eff6d80a.hot-update.js": "/js/main.5e8dedefb4c7eff6d80a.hot-update.js",
-    "/js/main.ee33246cfffafc539e90.hot-update.js": "/js/main.ee33246cfffafc539e90.hot-update.js",
-    "/js/main.6742d157d3503543a405.hot-update.js": "/js/main.6742d157d3503543a405.hot-update.js",
-    "/js/main.1deb0e670326692595ae.hot-update.js": "/js/main.1deb0e670326692595ae.hot-update.js",
-    "/js/main.0935db05580076ac16ff.hot-update.js": "/js/main.0935db05580076ac16ff.hot-update.js",
-    "/js/main.35f63833ff4c5603f8ba.hot-update.js": "/js/main.35f63833ff4c5603f8ba.hot-update.js",
-    "/js/main.f6acb760f78f342f3f64.hot-update.js": "/js/main.f6acb760f78f342f3f64.hot-update.js",
-    "/js/main.02c38d98379e6d0f1d0b.hot-update.js": "/js/main.02c38d98379e6d0f1d0b.hot-update.js",
-    "/js/main.9ea8a46e2bb05fb226d6.hot-update.js": "/js/main.9ea8a46e2bb05fb226d6.hot-update.js",
-    "/js/main.56d081d16b24dc6dc234.hot-update.js": "/js/main.56d081d16b24dc6dc234.hot-update.js",
-    "/js/main.24a0b1aa34e5980a31fd.hot-update.js": "/js/main.24a0b1aa34e5980a31fd.hot-update.js",
-    "/js/main.c365894e991fa325ba1a.hot-update.js": "/js/main.c365894e991fa325ba1a.hot-update.js",
-    "/js/main.a7fa26a0ff81d99c9434.hot-update.js": "/js/main.a7fa26a0ff81d99c9434.hot-update.js",
-    "/js/main.7a3acf4468d4c3e3a237.hot-update.js": "/js/main.7a3acf4468d4c3e3a237.hot-update.js",
-    "/js/main.29f88756cd6e7f338649.hot-update.js": "/js/main.29f88756cd6e7f338649.hot-update.js",
-    "/js/main.65a45c1c59cd899b874b.hot-update.js": "/js/main.65a45c1c59cd899b874b.hot-update.js",
-    "/js/main.b667703e2c093cd8e969.hot-update.js": "/js/main.b667703e2c093cd8e969.hot-update.js",
-    "/js/main.a673b66401a1e25e60e8.hot-update.js": "/js/main.a673b66401a1e25e60e8.hot-update.js",
-    "/js/main.d5783f35338b7f225d15.hot-update.js": "/js/main.d5783f35338b7f225d15.hot-update.js",
-    "/js/main.098853e7c493d33e7ddc.hot-update.js": "/js/main.098853e7c493d33e7ddc.hot-update.js",
-    "/js/main.f3fe08f24e1ae2c57686.hot-update.js": "/js/main.f3fe08f24e1ae2c57686.hot-update.js",
-    "/js/main.f3beba6136c46ad360f5.hot-update.js": "/js/main.f3beba6136c46ad360f5.hot-update.js",
-    "/js/main.1efdaf5af47e6d6d6d06.hot-update.js": "/js/main.1efdaf5af47e6d6d6d06.hot-update.js",
-    "/js/main.ad589cdd48b175d9fa7c.hot-update.js": "/js/main.ad589cdd48b175d9fa7c.hot-update.js",
-    "/js/main.e1020b5ecc38d70c6bc5.hot-update.js": "/js/main.e1020b5ecc38d70c6bc5.hot-update.js",
-    "/js/main.cb79ffb1a1e3e6ce815a.hot-update.js": "/js/main.cb79ffb1a1e3e6ce815a.hot-update.js",
-    "/js/main.4ecc5d25de8475809154.hot-update.js": "/js/main.4ecc5d25de8475809154.hot-update.js",
-    "/js/main.65de52bc3aab3e85787b.hot-update.js": "/js/main.65de52bc3aab3e85787b.hot-update.js",
-    "/js/main.c9ea06012df1ddf208f4.hot-update.js": "/js/main.c9ea06012df1ddf208f4.hot-update.js",
-    "/js/main.6f79c1030d7ca630328b.hot-update.js": "/js/main.6f79c1030d7ca630328b.hot-update.js",
-    "/js/main.24f126dc652f88f2141b.hot-update.js": "/js/main.24f126dc652f88f2141b.hot-update.js",
-    "/js/main.332a087ce57632155a56.hot-update.js": "/js/main.332a087ce57632155a56.hot-update.js",
-    "/js/main.9244960556ba1061ed9c.hot-update.js": "/js/main.9244960556ba1061ed9c.hot-update.js",
-    "/js/main.5edfba5e8c25f560a4d1.hot-update.js": "/js/main.5edfba5e8c25f560a4d1.hot-update.js",
-    "/js/main.411938193b1f3b0eeb71.hot-update.js": "/js/main.411938193b1f3b0eeb71.hot-update.js",
-    "/js/main.fe8be750aaffc4239c5c.hot-update.js": "/js/main.fe8be750aaffc4239c5c.hot-update.js",
-    "/js/main.0f391a33f31d87dcd2e0.hot-update.js": "/js/main.0f391a33f31d87dcd2e0.hot-update.js",
-    "/js/main.3558ef25b7272809d5e1.hot-update.js": "/js/main.3558ef25b7272809d5e1.hot-update.js",
-    "/js/main.6ec6afd2f7afaf27e869.hot-update.js": "/js/main.6ec6afd2f7afaf27e869.hot-update.js",
-    "/js/main.3bb1ce050c9c48c283ce.hot-update.js": "/js/main.3bb1ce050c9c48c283ce.hot-update.js",
-    "/js/main.e36903b50d23cfbcf661.hot-update.js": "/js/main.e36903b50d23cfbcf661.hot-update.js",
-    "/js/main.ea2227ff34f48d5ba61a.hot-update.js": "/js/main.ea2227ff34f48d5ba61a.hot-update.js",
-    "/js/main.c2a5f80d36bc3a684a32.hot-update.js": "/js/main.c2a5f80d36bc3a684a32.hot-update.js",
-    "/js/main.20b7c97aa9ef6cfeec6a.hot-update.js": "/js/main.20b7c97aa9ef6cfeec6a.hot-update.js",
-    "/js/main.866622aa09142f918fa0.hot-update.js": "/js/main.866622aa09142f918fa0.hot-update.js",
-    "/js/main.043b384ebc73467822a9.hot-update.js": "/js/main.043b384ebc73467822a9.hot-update.js",
-    "/js/main.a7ad265532dffe197e49.hot-update.js": "/js/main.a7ad265532dffe197e49.hot-update.js",
-    "/js/main.ec6b71774c45d1248e83.hot-update.js": "/js/main.ec6b71774c45d1248e83.hot-update.js",
-    "/js/main.94d99ffeb5c492acf013.hot-update.js": "/js/main.94d99ffeb5c492acf013.hot-update.js",
-    "/js/main.b9ca1a01e8fc9b7852db.hot-update.js": "/js/main.b9ca1a01e8fc9b7852db.hot-update.js",
-    "/js/main.152e100587403a3671d4.hot-update.js": "/js/main.152e100587403a3671d4.hot-update.js",
-    "/js/main.0692dbe4cfda0bab0801.hot-update.js": "/js/main.0692dbe4cfda0bab0801.hot-update.js",
-    "/js/main.4f4ba4b72f46c0794524.hot-update.js": "/js/main.4f4ba4b72f46c0794524.hot-update.js",
-    "/js/main.e07a96c6849af55655de.hot-update.js": "/js/main.e07a96c6849af55655de.hot-update.js",
-    "/js/main.d7cbc94a638459e4b5eb.hot-update.js": "/js/main.d7cbc94a638459e4b5eb.hot-update.js",
-    "/js/main.80d01b9d919015b07505.hot-update.js": "/js/main.80d01b9d919015b07505.hot-update.js",
-    "/js/main.bba1a3734d9cd9452661.hot-update.js": "/js/main.bba1a3734d9cd9452661.hot-update.js",
-    "/js/main.b713c9c3db3083b822ef.hot-update.js": "/js/main.b713c9c3db3083b822ef.hot-update.js",
-    "/js/main.3811ccb3550ba1a0952d.hot-update.js": "/js/main.3811ccb3550ba1a0952d.hot-update.js",
-    "/js/main.46db9fb909656581a5de.hot-update.js": "/js/main.46db9fb909656581a5de.hot-update.js",
-    "/js/main.ebf08c4ca417a8f1e763.hot-update.js": "/js/main.ebf08c4ca417a8f1e763.hot-update.js",
-    "/js/main.ac4075ec9c765036f162.hot-update.js": "/js/main.ac4075ec9c765036f162.hot-update.js",
-    "/js/main.15f446e25d884898180c.hot-update.js": "/js/main.15f446e25d884898180c.hot-update.js",
-    "/js/main.0d08a535ec91bba93fed.hot-update.js": "/js/main.0d08a535ec91bba93fed.hot-update.js",
-    "/js/main.d84d57d8a92fb421772c.hot-update.js": "/js/main.d84d57d8a92fb421772c.hot-update.js",
-    "/js/main.ab964c97d421f8f7a964.hot-update.js": "/js/main.ab964c97d421f8f7a964.hot-update.js",
-    "/js/main.2109dd98db944799f6c2.hot-update.js": "/js/main.2109dd98db944799f6c2.hot-update.js",
-    "/js/main.eff55a2474844427341b.hot-update.js": "/js/main.eff55a2474844427341b.hot-update.js",
-    "/js/main.f009fcd456f9b665a179.hot-update.js": "/js/main.f009fcd456f9b665a179.hot-update.js",
-    "/js/main.ded98c2171f06bed7fd6.hot-update.js": "/js/main.ded98c2171f06bed7fd6.hot-update.js",
-    "/js/main.4b3d2879d3083a3cc589.hot-update.js": "/js/main.4b3d2879d3083a3cc589.hot-update.js",
-    "/js/main.e41088a9b0e64502279d.hot-update.js": "/js/main.e41088a9b0e64502279d.hot-update.js",
-    "/js/main.57df11b3319382988398.hot-update.js": "/js/main.57df11b3319382988398.hot-update.js",
-    "/js/main.bc564877036d45d2961f.hot-update.js": "/js/main.bc564877036d45d2961f.hot-update.js",
-    "/js/main.6d6e0817676e96f59bc7.hot-update.js": "/js/main.6d6e0817676e96f59bc7.hot-update.js",
-    "/js/main.4a3a761238627697032e.hot-update.js": "/js/main.4a3a761238627697032e.hot-update.js",
-    "/js/main.bd4c1ae712568802b9a7.hot-update.js": "/js/main.bd4c1ae712568802b9a7.hot-update.js",
-    "/js/main.542c87c77cbc8da89222.hot-update.js": "/js/main.542c87c77cbc8da89222.hot-update.js",
-    "/js/main.6d6605d12a8fbf3201b6.hot-update.js": "/js/main.6d6605d12a8fbf3201b6.hot-update.js",
-    "/js/main.3c7f2219eadeab8ead48.hot-update.js": "/js/main.3c7f2219eadeab8ead48.hot-update.js",
-    "/js/main.37a4a867605a3772a3db.hot-update.js": "/js/main.37a4a867605a3772a3db.hot-update.js",
-    "/js/main.cfdbcc4700657bda3a7b.hot-update.js": "/js/main.cfdbcc4700657bda3a7b.hot-update.js",
-    "/js/main.249eba47e32249a07df9.hot-update.js": "/js/main.249eba47e32249a07df9.hot-update.js",
-    "/js/main.558f05e309822ad70122.hot-update.js": "/js/main.558f05e309822ad70122.hot-update.js",
-    "/js/main.54df741b4bc56ae39e55.hot-update.js": "/js/main.54df741b4bc56ae39e55.hot-update.js",
-    "/js/main.9d1a8ce0df5787d2cafc.hot-update.js": "/js/main.9d1a8ce0df5787d2cafc.hot-update.js",
-    "/js/main.7d7fd1f42d0457b148c4.hot-update.js": "/js/main.7d7fd1f42d0457b148c4.hot-update.js",
-    "/js/main.bc7891b203e9f4194c99.hot-update.js": "/js/main.bc7891b203e9f4194c99.hot-update.js",
-    "/js/main.963d2fe31a8e29a670d4.hot-update.js": "/js/main.963d2fe31a8e29a670d4.hot-update.js",
-    "/js/main.44e60a4b5184f05fbd47.hot-update.js": "/js/main.44e60a4b5184f05fbd47.hot-update.js",
-    "/js/main.2f5d2ec57fe32d4c871c.hot-update.js": "/js/main.2f5d2ec57fe32d4c871c.hot-update.js",
-    "/js/main.4d9367a8bd496eb4e40b.hot-update.js": "/js/main.4d9367a8bd496eb4e40b.hot-update.js",
-    "/js/main.0461026179fbc40fff4a.hot-update.js": "/js/main.0461026179fbc40fff4a.hot-update.js",
-    "/js/main.ba653d54085191a1e890.hot-update.js": "/js/main.ba653d54085191a1e890.hot-update.js",
-    "/js/main.5a85f4046db3bb257412.hot-update.js": "/js/main.5a85f4046db3bb257412.hot-update.js",
-    "/js/main.6829c03b048666663da5.hot-update.js": "/js/main.6829c03b048666663da5.hot-update.js",
-    "/js/main.2631d90401c8b27fd104.hot-update.js": "/js/main.2631d90401c8b27fd104.hot-update.js",
-    "/js/main.258bbdc98f9ff318d2c6.hot-update.js": "/js/main.258bbdc98f9ff318d2c6.hot-update.js",
-    "/js/main.72794ef6cad1d9f7bbe0.hot-update.js": "/js/main.72794ef6cad1d9f7bbe0.hot-update.js",
-    "/js/main.048a18e0998f469d7c65.hot-update.js": "/js/main.048a18e0998f469d7c65.hot-update.js",
-    "/js/main.e913cd0ce33fc092f961.hot-update.js": "/js/main.e913cd0ce33fc092f961.hot-update.js",
-    "/js/main.c6f1f32b2464d5f78fef.hot-update.js": "/js/main.c6f1f32b2464d5f78fef.hot-update.js",
-    "/js/main.312fc05b07e823512269.hot-update.js": "/js/main.312fc05b07e823512269.hot-update.js",
-    "/js/main.e58a51e609734fe20fc1.hot-update.js": "/js/main.e58a51e609734fe20fc1.hot-update.js",
-    "/js/main.6a1420dc51c6553b95c5.hot-update.js": "/js/main.6a1420dc51c6553b95c5.hot-update.js",
-    "/js/main.f4f22bb8b34f4892876d.hot-update.js": "/js/main.f4f22bb8b34f4892876d.hot-update.js",
-    "/js/main.d28e2cddacfac4a0cc56.hot-update.js": "/js/main.d28e2cddacfac4a0cc56.hot-update.js",
-    "/js/main.94fbfa0aa93670b84362.hot-update.js": "/js/main.94fbfa0aa93670b84362.hot-update.js",
-    "/js/main.84637dacfaf1ebbbafbb.hot-update.js": "/js/main.84637dacfaf1ebbbafbb.hot-update.js",
-    "/js/main.2bd3c434bce4d2cbc8fd.hot-update.js": "/js/main.2bd3c434bce4d2cbc8fd.hot-update.js",
-    "/js/main.49d02105c8ddd22620f1.hot-update.js": "/js/main.49d02105c8ddd22620f1.hot-update.js",
-    "/js/main.5e6d15ad2b660e2e7c1f.hot-update.js": "/js/main.5e6d15ad2b660e2e7c1f.hot-update.js",
-    "/js/main.fc313528e3059c907504.hot-update.js": "/js/main.fc313528e3059c907504.hot-update.js",
-    "/js/main.bd4674b4a67e2c701e13.hot-update.js": "/js/main.bd4674b4a67e2c701e13.hot-update.js",
-    "/js/main.06eec4d613ba3518d05a.hot-update.js": "/js/main.06eec4d613ba3518d05a.hot-update.js",
-    "/js/main.8d526e129ea1e0343040.hot-update.js": "/js/main.8d526e129ea1e0343040.hot-update.js",
-    "/js/main.d3a79980cfef0c6cc74c.hot-update.js": "/js/main.d3a79980cfef0c6cc74c.hot-update.js",
-    "/js/main.fce072f4dff0e68d2a57.hot-update.js": "/js/main.fce072f4dff0e68d2a57.hot-update.js",
-    "/js/main.97563845b16f45e9a8d1.hot-update.js": "/js/main.97563845b16f45e9a8d1.hot-update.js",
-    "/js/main.ba3d22fd6d9940f71dd8.hot-update.js": "/js/main.ba3d22fd6d9940f71dd8.hot-update.js",
-    "/js/main.2c17142ff0ab23b6d82f.hot-update.js": "/js/main.2c17142ff0ab23b6d82f.hot-update.js",
-    "/js/main.37052661dae06b434627.hot-update.js": "/js/main.37052661dae06b434627.hot-update.js",
-    "/js/main.3bdcd8addd49f70a64f2.hot-update.js": "/js/main.3bdcd8addd49f70a64f2.hot-update.js",
-    "/js/main.d547052fbb0ff2ba0d1e.hot-update.js": "/js/main.d547052fbb0ff2ba0d1e.hot-update.js",
-    "/js/main.59bc62047bf7e6834add.hot-update.js": "/js/main.59bc62047bf7e6834add.hot-update.js",
-    "/js/main.2d5d82b04761b683a9fa.hot-update.js": "/js/main.2d5d82b04761b683a9fa.hot-update.js",
-    "/js/main.64a5b7a80976a7646b66.hot-update.js": "/js/main.64a5b7a80976a7646b66.hot-update.js",
-    "/js/main.410f16eec4fa17aabd85.hot-update.js": "/js/main.410f16eec4fa17aabd85.hot-update.js",
-    "/js/main.325be87c77872931f8f4.hot-update.js": "/js/main.325be87c77872931f8f4.hot-update.js",
-    "/js/main.681dd3757ea03104eb38.hot-update.js": "/js/main.681dd3757ea03104eb38.hot-update.js",
-    "/js/main.cdf420b18a4bab5558c2.hot-update.js": "/js/main.cdf420b18a4bab5558c2.hot-update.js",
-    "/js/main.2e3705b4474fb644fe7a.hot-update.js": "/js/main.2e3705b4474fb644fe7a.hot-update.js",
-    "/js/main.1d27d7234750097930a4.hot-update.js": "/js/main.1d27d7234750097930a4.hot-update.js",
-    "/js/main.4b79dd93b6746dfef172.hot-update.js": "/js/main.4b79dd93b6746dfef172.hot-update.js",
-    "/js/main.08e43801d9ff79a3d91d.hot-update.js": "/js/main.08e43801d9ff79a3d91d.hot-update.js",
-    "/js/main.303e4e90dfdbdfd1b8cd.hot-update.js": "/js/main.303e4e90dfdbdfd1b8cd.hot-update.js",
-    "/js/main.82ea3399e06303901a6b.hot-update.js": "/js/main.82ea3399e06303901a6b.hot-update.js",
-    "/js/main.d06d7a6bf733a980ca4d.hot-update.js": "/js/main.d06d7a6bf733a980ca4d.hot-update.js",
-    "/js/main.ed2bf9003180229090e6.hot-update.js": "/js/main.ed2bf9003180229090e6.hot-update.js"
+    "/css/app.css": "/css/app.css"
 }

resources/js/App.vue

@@ -1,25 +1,171 @@
 <template>
-    <div id="app">
-        <VueFileManager style="height: 100%; width: 100%"/>
+    <div id="vue-file-manager" :class="appSize" v-cloak>
+
+        <!--System alerts-->
+        <Alert/>
+
+        <div id="application-wrapper" v-if="layout === 'authorized'">
+
+            <MobileNavigation />
+
+            <!--Share Item setup-->
+            <ShareCreate/>
+            <ShareEdit/>
+
+            <!--Move item setup-->
+            <MoveItem/>
+
+            <!--Mobile Menu-->
+            <MobileMenu/>
+
+            <!--Navigation Sidebar-->
+            <MenuBar/>
+
+            <!--File page-->
+            <router-view :class="{'is-scaled-down': isScaledDown}"/>
+        </div>
+
+        <router-view v-if="layout === 'unauthorized'"/>
+
+        <!--Background vignette-->
+        <Vignette/>
     </div>
 </template>
 
 <script>
-    import VueFileManager from './components/VueFileManager.vue'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
+    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 MenuBar from '@/components/Sidebar/MenuBar'
+    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
+            MobileNavigation,
+            ShareCreate,
+            MobileMenu,
+            ShareEdit,
+            MoveItem,
+            Vignette,
+            MenuBar,
+            Alert,
         },
+        computed: {
+            ...mapGetters([
+                'appSize', 'isLogged', 'isGuest'
+            ]),
+            layout() {
+                if (includes(['VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
+                    return 'unauthorized'
+                }
+
+                return 'authorized'
+            }
+        },
+        data() {
+            return {
+                isScaledDown: false,
+            }
+        },
+        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('INIT', {
+                authCookie: this.$root.$data.config.hasAuthCookie,
+                config: this.$root.$data.config,
+                rootDirectory: {
+                    name: this.$t('locations.home'),
+                    location: 'base',
+                    unique_id: 0,
+                }
+            })
+        },
+        mounted() {
+            // Handle VueFileManager width
+            var VueFileManager = document.getElementById('vue-file-manager');
+            new ResizeSensor(VueFileManager, this.handleAppResize);
+
+            // Handle mobile navigation scale animation
+            events.$on('show:mobile-navigation', () => this.isScaledDown = true)
+            events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
+            events.$on('mobileMenu:show', () => this.isScaledDown = true)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+        }
     }
 </script>
 
 <style lang="scss">
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
-    #app {
-        height: 100%;
+    [v-cloak],
+    [v-cloak] > * {
+        display: none
+    }
+
+    * {
+        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;
+    }
+
+    #auth {
         width: 100%;
+        height: 100%;
+    }
+
+    #vue-file-manager {
         position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
+    }
+
+    // Dark mode support
+    @media (prefers-color-scheme: dark) {
+
+        body, html {
+            background: $dark_mode_background;
+            color: $dark_mode_text_primary;
+
+            img {
+                opacity: .95;
+            }
+        }
     }
 </style>

resources/js/components/Auth/AuthButton.vue

@@ -28,7 +28,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button {
         cursor: pointer;

resources/js/components/Auth/AuthContent.vue

@@ -19,8 +19,3 @@
         }
     }
 </script>
-
-<style scoped lang="scss">
-
-
-</style>

resources/js/components/Auth/AuthContentWrapper.vue

@@ -5,21 +5,16 @@
 </template>
 
 <script>
-
     export default {
         name: 'AuthContentWrapper',
     }
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
 
     #auth {
         height: 100%;
         width: 100%;
         display: table;
-        //display: flex;
-        //align-items: center;
-        //justify-content: center;
     }
 </style>

resources/js/components/FilesView/Alert.vue

@@ -1,32 +1,29 @@
 <template>
-    <transition name="vignette">
-        <div class="popup" v-show="isVisibleWrapper">
-            <transition name="popup">
-                <div v-show="isVisiblePopup" class="popup-wrapper">
-                    <div class="popup-image">
-                        <span class="emoji">{{ emoji }}</span>
-                    </div>
-                    <div class="popup-content">
-                        <h1 v-if="title" class="title">{{ title }}</h1>
-                        <p v-if="message" class="message">{{ message }}</p>
-                    </div>
-                    <div class="popup-actions">
-                        <ButtonBase
-                                @click.native="closePopup"
-                                :button-style="buttonStyle"
-                                class="action-confirm"
-                        >{{ button }}
-                        </ButtonBase>
-                    </div>
+    <transition name="popup">
+        <div @click.self="closePopup" class="popup" v-if="isVisibleWrapper">
+            <div class="popup-wrapper">
+                <div class="popup-image">
+                    <span class="emoji">{{ emoji }}</span>
                 </div>
-            </transition>
-            <div class="popup-vignette" @click="closePopup"></div>
+                <div class="popup-content">
+                    <h1 v-if="title" class="title">{{ title }}</h1>
+                    <p v-if="message" class="message">{{ message }}</p>
+                </div>
+                <div class="popup-actions">
+                    <ButtonBase
+                            @click.native="closePopup"
+                            :button-style="buttonStyle"
+                            class="action-confirm"
+                    >{{ button }}
+                    </ButtonBase>
+                </div>
+            </div>
         </div>
     </transition>
 </template>
 
 <script>
-    import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
     import {events} from '@/bus'
 
     export default {
@@ -38,7 +35,6 @@
             return {
                 isVisibleWrapper: false,
                 buttonStyle: undefined,
-                isVisiblePopup: false,
                 message: undefined,
                 title: undefined,
                 button: undefined,
@@ -47,26 +43,20 @@
         },
         methods: {
             closePopup() {
-                // Emit event
-                events.$emit('alert:close')
-
-                // Hide popup wrapper
-                this.isVisibleWrapper = false
-                this.isVisiblePopup = false
+                events.$emit('popup:close')
             }
         },
         mounted() {
             // Show alert
             events.$on('alert:open', args => {
                 this.isVisibleWrapper = true
-                this.isVisiblePopup = true
 
                 this.title = args.title
                 this.message = args.message
 
-                this.button = 'That’s horrible!'
+                this.button = this.$t('alerts.error_confirm')
                 this.emoji = '😢😢😢'
-                this.buttonStyle = 'danger'
+                this.buttonStyle = 'danger-solid'
 
                 if (args.emoji) {
                     this.emoji = args.emoji
@@ -76,12 +66,11 @@
             // Show alert
             events.$on('success:open', args => {
                 this.isVisibleWrapper = true
-                this.isVisiblePopup = true
 
                 this.title = args.title
                 this.message = args.message
 
-                this.button = 'Awesome!'
+                this.button = this.$t('alerts.success_confirm')
                 this.emoji = '🥳🥳🥳'
                 this.buttonStyle = 'theme'
 
@@ -92,7 +81,6 @@
 
             // Close popup
             events.$on('popup:close', () => {
-                this.isVisiblePopup = false
                 this.isVisibleWrapper = false
             })
         }
@@ -100,7 +88,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .popup {
         position: absolute;
@@ -110,15 +99,7 @@
         bottom: 0;
         z-index: 20;
         overflow: auto;
-
-        .popup-vignette {
-            position: absolute;
-            top: 0;
-            right: 0;
-            left: 0;
-            bottom: 0;
-            background: rgba(17, 20, 29, 0.5);
-        }
+        height: 100%;
     }
 
     .popup-wrapper {
@@ -130,8 +111,8 @@
         top: 50%;
         transform: translateY(-50%) scale(1);
         margin: 0 auto;
-        padding: 40px;
-        box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
+        padding: 20px;
+        box-shadow: $light_mode_popup_shadow;
         border-radius: 8px;
         text-align: center;
         background: white;
@@ -156,7 +137,7 @@
 
         .message {
             @include font-size(16);
-            color: #8b8f9a;
+            color: #333;
             margin-top: 5px;
         }
     }
@@ -180,12 +161,8 @@
 
     @media (prefers-color-scheme: dark) {
 
-        .popup .popup-vignette {
-            background: $dark_mode_vignette;
-        }
-
         .popup-wrapper {
-            background: $dark_mode_foreground;
+            background: $dark_mode_background;
         }
 
         .popup-content {
@@ -211,28 +188,11 @@
     @keyframes popup-in {
         0% {
             opacity: 0;
-            transform: translateY(-50%) scale(0.7);
-        }
-        100% {
-            opacity: 1;
-            transform: translateY(-50%) scale(1);
-        }
-    }
-
-    .vignette-enter-active {
-        animation: vignette-in 0.15s ease;
-    }
-
-    .vignette-leave-active {
-        animation: vignette-in 0.15s 0.15s ease reverse;
-    }
-
-    @keyframes vignette-in {
-        0% {
-            opacity: 0;
+            transform: scale(0.7);
         }
         100% {
             opacity: 1;
+            transform: scale(1);
         }
     }
 </style>

resources/js/components/FilesView/ButtonBase.vue

@@ -1,22 +1,26 @@
 <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>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button-base {
-        @include font-size(16);
-        font-weight: 600;
+        @include font-size(15);
+        font-weight: 700;
         cursor: pointer;
         transition: 0.15s all ease;
         border-radius: 8px;
@@ -38,12 +42,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/ButtonUpload.vue

@@ -31,11 +31,12 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button-base {
-        @include font-size(16);
-        font-weight: 600;
+        @include font-size(15);
+        font-weight: 700;
         cursor: pointer;
         transition: 0.15s all ease;
         border-radius: 8px;

resources/js/components/FilesView/ContextMenu.vue

@@ -0,0 +1,515 @@
+<template>
+    <div
+            :style="{ top: positionY + 'px', left: positionX + 'px' }"
+            @click="closeAndResetContextMenu"
+            class="contextmenu"
+            v-show="isVisible"
+            ref="contextmenu"
+    >
+        <!--ContextMenu for trash location-->
+        <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
+                    <div class="icon">
+                        <life-buoy-icon size="17"></life-buoy-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.restore') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="deleteItem" v-if="item">
+                    <div class="icon">
+                        <trash-2-icon size="17"></trash-2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.delete') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="$store.dispatch('emptyTrash')">
+                    <div class="icon">
+                        <trash-icon size="17"></trash-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.empty_trash') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="ItemDetail">
+                    <div class="icon">
+                        <eye-icon size="17"></eye-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.detail') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!--ContextMenu for Base location with MASTER permission-->
+        <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
+            <ul class="menu-option-group" v-if="item && isFolder">
+                <li class="menu-option" @click="addToFavourites">
+                    <div class="icon">
+                        <star-icon size="17"></star-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="shareItem">
+                    <div class="icon">
+                        <link-icon size="17"></link-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="deleteItem">
+                    <div class="icon">
+                        <trash-2-icon size="17"></trash-2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.delete') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="ItemDetail" v-if="item">
+                    <div class="icon">
+                        <eye-icon size="17"></eye-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.detail') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!--ContextMenu for Base location with MASTER permission-->
+        <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
+
+            <ul class="menu-option-group" v-if="! $isThisLocation(['participant_uploads', 'latest'])">
+                <li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
+                    <div class="icon">
+                        <star-icon size="17"></star-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="createFolder">
+                    <div class="icon">
+                        <folder-plus-icon size="17"></folder-plus-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.create_folder') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="moveItem">
+                    <div class="icon">
+                        <corner-down-right-icon size="17"></corner-down-right-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.move') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="shareItem">
+                    <div class="icon">
+                        <link-icon size="17"></link-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="deleteItem">
+                    <div class="icon">
+                        <trash-2-icon size="17"></trash-2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.delete') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="ItemDetail">
+                    <div class="icon">
+                        <eye-icon size="17"></eye-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.detail') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!--ContextMenu for Base location with EDITOR permission-->
+        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="createFolder">
+                    <div class="icon">
+                        <folder-plus-icon size="17"></folder-plus-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.create_folder') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="moveItem">
+                    <div class="icon">
+                        <corner-down-right-icon size="17"></corner-down-right-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.move') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="deleteItem">
+                    <div class="icon">
+                        <trash-2-icon size="17"></trash-2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.delete') }}
+                    </div>
+                </li>
+            </ul>
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="ItemDetail">
+                    <div class="icon">
+                        <eye-icon size="17"></eye-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.detail') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!--ContextMenu for Base location with VISITOR permission-->
+        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
+            <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="ItemDetail">
+                    <div class="icon">
+                        <eye-icon size="17"></eye-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.detail') }}
+                    </div>
+                </li>
+                <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                    <div class="icon">
+                        <download-cloud-icon size="17"></download-cloud-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.download') }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        CornerDownRightIcon,
+        DownloadCloudIcon,
+        FolderPlusIcon,
+        LifeBuoyIcon,
+        Trash2Icon,
+        TrashIcon,
+        StarIcon,
+        LinkIcon,
+        EyeIcon,
+    } from 'vue-feather-icons'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'ContextMenu',
+        components: {
+            CornerDownRightIcon,
+            DownloadCloudIcon,
+            FolderPlusIcon,
+            LifeBuoyIcon,
+            Trash2Icon,
+            TrashIcon,
+            LinkIcon,
+            StarIcon,
+            EyeIcon,
+        },
+        computed: {
+            ...mapGetters(['app']),
+            isFolder() {
+                return this.item && this.item.type === 'folder'
+            },
+            isFile() {
+                return (this.item && this.item.type !== 'folder') && (this.item && this.item.type !== 'image')
+            },
+            isImage() {
+                return this.item && this.item.type === 'image'
+            },
+            isInFavourites() {
+                return this.app.favourites.find(el => el.unique_id == this.item.unique_id)
+            },
+        },
+        data() {
+            return {
+                item: undefined,
+                isVisible: false,
+                positionX: 0,
+                positionY: 0
+            }
+        },
+        methods: {
+            moveItem() {
+                // 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 {
+                    this.$store.dispatch('removeFromFavourites', this.item)
+                }
+            },
+            downloadItem() {
+                // Download file
+                this.$downloadFile(
+                    this.item.file_url,
+                    this.item.name + '.' + this.item.mimetype
+                )
+            },
+            ItemDetail() {
+
+                // Dispatch load file info detail
+                this.$store.commit('GET_FILEINFO_DETAIL', this.item)
+
+                // Show panel if is not open
+                this.$store.dispatch('fileInfoToggle', true)
+            },
+            deleteItem() {
+                // Dispatch remove item
+                this.$store.dispatch('deleteItem', this.item)
+            },
+            createFolder() {
+                // Create folder
+                this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
+            },
+            closeAndResetContextMenu() {
+                // Close context menu
+                this.isVisible = false
+
+                // Reset item container
+                this.item = undefined
+            },
+            showFolderActionsMenu() {
+                let container = document.getElementById('folder-actions')
+
+                this.positionX = container.offsetLeft + 16
+                this.positionY = container.offsetTop + 30
+
+                // Show context menu
+                this.isVisible = true
+            },
+            showContextMenu(event) {
+                let parent = document.getElementById('menu-list')
+                let nodesSameClass = parent.getElementsByClassName("menu-option")
+
+                let VerticalOffsetArea = nodesSameClass.length * 50
+                let HorizontalOffsetArea = 190
+
+                let container = document.getElementById('files-view')
+
+                var offset = container.getClientRects()[0];
+
+                let x = event.clientX - offset.left
+                let y = event.clientY - offset.top
+
+                // Set position Y
+                if ((container.offsetHeight - y) < VerticalOffsetArea) {
+                    this.positionY = y - VerticalOffsetArea
+                } else {
+                    this.positionY = y
+                }
+
+                // Set position X
+                if ((container.offsetWidth - x) < HorizontalOffsetArea) {
+                    this.positionX = x - HorizontalOffsetArea
+                } else {
+                    this.positionX = x
+                }
+
+                // Show context menu
+                this.isVisible = true
+            }
+        },
+        created() {
+            events.$on('contextMenu:show', (event, item) => {
+
+                // Store item
+                this.item = item
+
+                // Show context menu
+                setTimeout(() => this.showContextMenu(event, item), 10)
+            })
+
+            events.$on('contextMenu:hide', () => (this.closeAndResetContextMenu()))
+
+            events.$on('folder:actions', folder => {
+
+                // Store item
+                this.item = folder
+
+                if (this.isVisible)
+                    this.isVisible = false
+                else
+                    this.showFolderActionsMenu()
+
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .menu-option {
+        display: flex;
+        align-items: center;
+
+        .icon {
+            margin-right: 20px;
+            line-height: 0;
+        }
+
+        .text-label {
+            @include font-size(16);
+        }
+    }
+
+    .contextmenu {
+        min-width: 250px;
+        position: absolute;
+        z-index: 99;
+        box-shadow: $shadow;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+
+        &.showed {
+            display: block;
+        }
+    }
+
+    .menu-options {
+        list-style: none;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+
+        .menu-option-group {
+            padding: 5px 0;
+            border-bottom: 1px solid $light_mode_border;
+
+            &:first-child {
+                padding-top: 0;
+            }
+
+            &:last-child {
+                padding-bottom: 0;
+                border-bottom: none;
+            }
+        }
+
+        .menu-option {
+            white-space: nowrap;
+            font-weight: 700;
+            @include font-size(14);
+            padding: 15px 20px;
+            cursor: pointer;
+            width: 100%;
+            color: $text;
+
+            &:hover {
+                background: $light_background;
+
+                .text-label {
+                    color: $theme;
+                }
+
+                path, line, polyline, rect, circle, polygon {
+                    stroke: $theme;
+                }
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .contextmenu {
+            background: $dark_mode_foreground;
+
+            .menu-options {
+
+                .menu-option-group {
+                    border-color: $dark_mode_border_color;
+                }
+
+                .menu-option {
+                    color: $dark_mode_text_primary;
+
+                    &:hover {
+                        background: rgba($theme, 0.1);
+                    }
+                }
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/DesktopToolbar.vue

@@ -0,0 +1,354 @@
+<template>
+    <div id="desktop-toolbar">
+        <div class="toolbar-wrapper">
+
+            <!-- Go back-->
+            <div class="toolbar-go-back" v-if="homeDirectory">
+                <div @click="goBack" class="go-back-button">
+                    <chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
+
+                    <span class="back-directory-title">
+                        {{ directoryName }}
+                    </span>
+
+                    <span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
+                        <more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
+                    </span>
+                </div>
+            </div>
+
+            <!-- Tools-->
+            <div class="toolbar-tools">
+                <!--Search bar-->
+                <div class="toolbar-button-wrapper">
+                    <SearchBar/>
+                </div>
+
+                <!--Files controlls-->
+                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
+                    <ToolbarButtonUpload
+                            :class="{'is-inactive': canUploadInView}"
+                            :action="$t('actions.upload')"
+                    />
+                    <ToolbarButton
+                            :class="{'is-inactive': canCreateFolderInView}"
+                            @click.native="createFolder"
+                            source="folder-plus"
+                            :action="$t('actions.create_folder')"
+                    />
+                </div>
+
+                <div class="toolbar-button-wrapper"
+                     v-if="$checkPermission(['master', 'editor'])">
+                    <ToolbarButton
+                            source="move"
+                            :class="{'is-inactive': canMoveInView}"
+                            :action="$t('actions.move')"
+                            @click.native="moveItem"
+                    />
+                    <ToolbarButton
+                            v-if="! $isThisLocation(['public'])"
+                            source="share"
+                            :class="{'is-inactive': canShareInView}"
+                            :action="$t('actions.share')"
+                            @click.native="shareItem"
+                    />
+                    <ToolbarButton
+                            source="trash"
+                            :class="{'is-inactive': canDeleteInView}"
+                            :action="$t('actions.delete')"
+                            @click.native="deleteItem"
+                    />
+                </div>
+
+                <!--View options-->
+                <div class="toolbar-button-wrapper">
+                    <ToolbarButton
+                            :source="preview"
+                            :action="$t('actions.preview')"
+                            @click.native="$store.dispatch('changePreviewType')"
+                    />
+                    <ToolbarButton
+                            :class="{ active: fileInfoVisible }"
+                            @click.native="$store.dispatch('fileInfoToggle')"
+                            source="info"
+                    />
+                </div>
+            </div>
+        </div>
+        <UploadProgress />
+    </div>
+</template>
+
+<script>
+    import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
+    import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
+    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'
+    import {last} from 'lodash'
+
+    export default {
+        name: 'ToolBar',
+        components: {
+            ToolbarButtonUpload,
+            MoreHorizontalIcon,
+            ChevronLeftIcon,
+            UploadProgress,
+            ToolbarButton,
+            SearchBar
+        },
+        computed: {
+            ...mapGetters([
+                'FilePreviewType',
+                'fileInfoVisible',
+                'fileInfoDetail',
+                'currentFolder',
+                'browseHistory',
+                'homeDirectory',
+            ]),
+            directoryName() {
+                return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
+            },
+            preview() {
+                return this.FilePreviewType === 'list' ? 'th' : 'th-list'
+            },
+            canCreateFolderInView() {
+                return ! this.$isThisLocation(['base', 'public'])
+            },
+            canDeleteInView() {
+                return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
+            },
+            canUploadInView() {
+                return ! this.$isThisLocation(['base', 'public'])
+            },
+            canMoveInView() {
+                return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
+            },
+            canShareInView() {
+                return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
+            }
+        },
+        methods: {
+            goBack() {
+                // Get previous folder
+                let previousFolder = last(this.browseHistory)
+
+                if (! previousFolder)
+                    return
+
+                if (previousFolder.location === 'trash-root') {
+                    this.$store.dispatch('getTrash')
+
+                } else if (previousFolder.location === 'shared') {
+                    this.$store.dispatch('getShared')
+
+                } else {
+
+                    if ( this.$isThisLocation('public') ) {
+                        this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
+                    }
+                }
+            },
+            folderActions() {
+                events.$emit('folder:actions', this.currentFolder)
+            },
+            deleteItem() {
+                events.$emit('items:delete')
+            },
+            createFolder() {
+                this.$createFolder()
+            },
+            moveItem() {
+                events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
+            },
+            shareItem() {
+                if (this.fileInfoDetail.shared) {
+                    events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
+                } else {
+                    events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .toolbar-wrapper {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        display: flex;
+        position: relative;
+        z-index: 2;
+
+        > div {
+            flex-grow: 1;
+            align-self: center;
+            white-space: nowrap;
+        }
+    }
+
+    .directory-name {
+        vertical-align: middle;
+        @include font-size(17);
+        color: $text;
+        font-weight: 700;
+        max-width: 220px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+    }
+
+    .icon-back {
+        vertical-align: middle;
+        cursor: pointer;
+        margin-right: 6px;
+        opacity: 0.15;
+        pointer-events: none;
+        @include transition(150ms);
+
+        &.is-active {
+            opacity: 1;
+            pointer-events: initial;
+        }
+    }
+
+    .toolbar-go-back {
+        cursor: pointer;
+
+        .folder-options {
+            vertical-align: middle;
+            margin-left: 6px;
+            padding: 1px 4px;
+            line-height: 0;
+            border-radius: 3px;
+            @include transition(150ms);
+
+            svg circle {
+                @include transition(150ms);
+            }
+
+            &:hover {
+                background: $light_background;
+
+                svg circle {
+                    stroke: $theme;
+                }
+            }
+
+            .icon-more {
+                vertical-align: middle;
+            }
+        }
+
+
+        .back-directory-title {
+            @include font-size(15);
+            line-height: 1;
+            font-weight: 700;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            vertical-align: middle;
+            color: $text;
+        }
+    }
+
+    .toolbar-position {
+        text-align: center;
+
+        span {
+            @include font-size(17);
+            font-weight: 600;
+        }
+    }
+
+    .toolbar-tools {
+        text-align: right;
+
+        .toolbar-button-wrapper {
+            margin-left: 28px;
+            display: inline-block;
+            vertical-align: middle;
+
+            &:first-child {
+                margin-left: 0 !important;
+            }
+        }
+
+        .button {
+            margin-left: 5px;
+
+            &.active {
+                /deep/ svg {
+                    line, circle {
+                        stroke: $theme;
+                    }
+                }
+            }
+
+            &.is-inactive {
+                opacity: 0.25;
+                pointer-events: none;
+            }
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 1024px) {
+
+        .toolbar-go-back .back-directory-title {
+            max-width: 120px;
+        }
+
+        .toolbar-tools {
+
+            .button {
+                margin-left: 0;
+                height: 40px;
+                width: 40px;
+            }
+
+            .toolbar-button-wrapper {
+                margin-left: 25px;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #desktop-toolbar {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .toolbar .directory-name {
+            color: $dark_mode_text_primary;
+        }
+
+        .toolbar-go-back {
+
+            .back-directory-title {
+                color: $dark_mode_text_primary;
+            }
+
+            .folder-options {
+
+                &:hover {
+                    background: $dark_mode_foreground;
+                }
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/EmptyMessage.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="empty-message">
+        <div class="message">
+            <eye-off-icon v-if="icon === 'eye-off'" size="36" class="icon"></eye-off-icon>
+            <p>{{ message }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { EyeOffIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'EmptyMessage',
+        props: ['icon', 'message'],
+        components: {
+            EyeOffIcon
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .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(13);
+                font-weight: 500;
+                color: $text-muted;
+            }
+
+            .icon {
+                path, line, polyline, rect, circle {
+                    stroke: $text;
+                }
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .empty-message {
+
+            .message {
+                .icon {
+                    path, line, polyline, rect, circle {
+                        stroke: $dark_mode_text_secondary;
+                    }
+                }
+
+                p {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/EmptyPage.vue

@@ -1,20 +1,35 @@
 <template>
     <div class="empty-page" v-if="isLoading || isEmpty">
         <div class="empty-state">
-            <div class="text-content" v-if="isEmpty && !isLoading">
-                <h1 class="title">There is Nothing</h1>
-                <p v-if="! isTrash" class="description">
-                    Upload some files here easily via upload button
-                </p>
-                <ButtonUpload
-                        v-if="! isTrash"
-                        @input.native="$uploadFiles(files)"
-                        v-model="files"
-                        button-style="theme"
-                >Upload File
-                </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>
+
+            <!--Trash empty message-->
+            <div class="text-content" v-if="$isThisLocation(['participant_uploads']) && ! isLoading">
+                <h1 class="title">{{ $t('messages.nothing_from_participants') }}</h1>
+            </div>
+
+            <!--Base file browser empty message-->
+            <div class="text-content" v-if="$isThisLocation(['base', 'public', 'latest']) && !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'])"
+                        button-style="theme"
+                >
+                    {{ $t('empty_page.call_to_action') }}
+                </ButtonUpload>
+            </div>
+
+            <!--Spinner-->
             <div class="text-content" v-if="isLoading">
                 <Spinner/>
             </div>
@@ -23,8 +38,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,22 +52,15 @@
         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
             }
         }
     }
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .empty-page {
         position: absolute;
@@ -76,14 +84,14 @@
         margin: 30px 0;
 
         .title {
-            @include font-size(24);
+            @include font-size(20);
             color: $text;
-            font-weight: 600;
+            font-weight: 700;
             margin: 0;
         }
 
         .description {
-            @include font-size(15);
+            @include font-size(13);
             color: $text-muted;
             margin-bottom: 20px;
             display: block;

resources/js/components/FilesView/FileBrowser.vue

@@ -1,21 +1,24 @@
 <template>
-    <div class="file-content" :class="{ 'is-offset': uploadingFilesCount }">
+    <div class="file-content" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
+         @dragover.prevent
+         @drop.stop.prevent="dropUpload($event)"
+         @dragover="dragEnter"
+         @dragleave="dragLeave"
+    >
         <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"/>
+            <SearchBar class="mobile-search" />
 
             <!--Mobile Actions-->
-            <MobileActions v-if="$isMinimalScale()" />
+            <MobileActions />
 
             <!--Item previews list-->
             <div v-if="isList" class="file-list-wrapper">
@@ -23,11 +26,11 @@
                         name="file"
                         tag="section"
                         class="file-list"
-                        :class="preview_type"
+                        :class="FilePreviewType"
                 >
                     <FileItemList
                             @dragstart="dragStart(item)"
-                            @drop="dragFinish(item)"
+                            @drop.stop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
                             :data="item"
                             v-for="item in data"
@@ -43,11 +46,11 @@
                         name="file"
                         tag="section"
                         class="file-list"
-                        :class="preview_type"
+                        :class="FilePreviewType"
                 >
                     <FileItemGrid
                             @dragstart="dragStart(item)"
-                            @drop="dragFinish(item)"
+                            @drop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
                             :data="item"
                             v-for="item in data"
@@ -58,43 +61,36 @@
             </div>
 
             <!--Show empty page if folder is empty-->
-            <EmptyPage v-if="!isSearching"/>
+            <EmptyPage v-if="! isSearching"/>
 
             <!--Show empty page if no search results-->
             <EmptyMessage
                     v-if="isSearching && isEmpty"
-                    message="Nothing was found."
+                    :message="$t('messages.nothing_was_found')"
                     icon="eye-slash"
             />
         </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="There is nothing to preview."
-                    icon="eye-slash"
-            />
+            <EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
         </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'
 
@@ -116,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
@@ -133,10 +129,23 @@
         },
         data() {
             return {
-                draggingId: undefined
+                draggingId: undefined,
+                isDragging: false,
             }
         },
         methods: {
+            dropUpload(event) {
+                // Upload external file
+                this.$uploadExternalFiles(event, this.currentFolder.unique_id)
+
+                this.isDragging = false
+            },
+            dragEnter() {
+                this.isDragging = true
+            },
+            dragLeave() {
+                this.isDragging = false
+            },
             dragStart(data) {
 
                 events.$emit('dragstart', data)
@@ -144,15 +153,26 @@
                 // Store dragged folder
                 this.draggingId = data
             },
-            dragFinish(data) {
-                // Prevent to drop on file or image
-                if (data.type !== 'folder' || this.draggingId === data) return
+            dragFinish(data, event) {
 
-                // Move folder to new parent
-                this.moveTo(this.draggingId, data)
-            },
-            moveTo(from_item, to_item) {
-                this.$store.dispatch('moveItem', [from_item, to_item])
+                if (event.dataTransfer.items.length == 0) {
+
+                    // Prevent to drop on file or image
+                    if (data.type !== 'folder' || this.draggingId === data) return
+
+                    // Move folder to new parent
+                    this.$store.dispatch('moveItem', [this.draggingId, data])
+
+                } else {
+
+                    // Get unique_id of current folder
+                    const unique_id = data.type !== 'folder' ? this.currentFolder.unique_id : data.unique_id
+
+                    // Upload external file
+                    this.$uploadExternalFiles(event, unique_id)
+                }
+
+                this.isDragging = false
             },
             contextMenu(event, item) {
                 events.$emit('contextMenu:show', event, item)
@@ -182,34 +202,15 @@
 
             // 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)
             })
         }
     }
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button-upload {
         display: block;
@@ -218,6 +219,7 @@
     }
 
     .mobile-search {
+        display: none;
         margin-bottom: 10px;
         margin-top: 10px;
     }
@@ -225,9 +227,15 @@
     .file-content {
         display: flex;
         flex-wrap: nowrap;
+        height: 100%;
+
+        &.is-dragging {
+            @include transform(scale(0.99));
+        }
     }
 
     .files-container {
+        overflow-x: hidden;
         overflow-y: auto;
         flex: 0 0 100%;
         @include transition(150ms);
@@ -272,7 +280,72 @@
         transform: translateX(-20px);
     }
 
-    .file-leave-active {
-        position: absolute;
+    @media only screen and (min-width: 960px) {
+
+        .file-content {
+            position: absolute;
+            top: 72px;
+            left: 15px;
+            right: 15px;
+            bottom: 0;
+            @include transition;
+
+            &.is-offset {
+                margin-top: 50px;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .file-info-container {
+            display: none;
+        }
+
+        .mobile-search {
+            display: block;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .files-container {
+            padding-left: 15px;
+            padding-right: 15px;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            position: fixed;
+            overflow-y: auto;
+
+            .file-list {
+
+                &.grid {
+                    grid-template-columns: repeat(auto-fill, 120px);
+                }
+            }
+        }
+
+        .file-content {
+            position: absolute;
+            top: 0;
+            left: 0px;
+            right: 0px;
+            bottom: 0;
+            @include transition;
+
+            &.is-offset {
+                margin-top: 50px;
+            }
+        }
+
+        .mobile-search {
+            margin-bottom: 0;
+        }
+        
+        .file-info-container {
+            display: none;
+        }
     }
 </style>

resources/js/components/FilesView/FileInfoPanel.vue

@@ -0,0 +1,297 @@
+<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">
+                        <image-icon v-if="fileType === 'image'" size="21"></image-icon>
+                        <video-icon v-if="fileType === 'video'" size="21"></video-icon>
+                        <folder-icon v-if="fileType === 'folder'" size="21"></folder-icon>
+                        <file-icon v-if="fileType === 'file'" size="21"></file-icon>
+                    </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">
+                    <span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
+                    <edit-2-icon size="10" class="edit-icon"></edit-2-icon>
+                </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">
+                    <span>{{ sharedInfo }}</span>
+                    <edit-2-icon size="10" class="edit-icon"></edit-2-icon>
+                </div>
+                <div class="sharelink">
+                    <lock-icon v-if="isLocked" @click="shareItemOptions" class="lock-icon" size="17"></lock-icon>
+                    <unlock-icon v-if="! isLocked" @click="shareItemOptions" class="lock-icon" size="17"></unlock-icon>
+
+                    <CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link" />
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import { Edit2Icon, LockIcon, UnlockIcon, ImageIcon, VideoIcon, FolderIcon, FileIcon } from 'vue-feather-icons'
+    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,
+            FolderIcon,
+            UnlockIcon,
+            VideoIcon,
+            CopyInput,
+            ImageIcon,
+            FileIcon,
+            Edit2Icon,
+            LockIcon,
+        },
+        computed: {
+            ...mapGetters(['fileInfoDetail', 'permissionOptions']),
+            fileType() {
+                return this.fileInfoDetail.type
+/*                switch () {
+                    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'
+                }
+            },
+            isLocked() {
+                return this.fileInfoDetail.shared.protected
+            }
+        },
+        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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .file-info-content {
+        padding-bottom: 20px;
+    }
+
+    .file-headline {
+        margin-bottom: 20px;
+        border-radius: 8px;
+
+        .flex {
+            display: flex;
+            align-items: flex-start;
+        }
+
+        .icon-preview {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            text-align: center;
+            cursor: pointer;
+            white-space: nowrap;
+            outline: none;
+            border: none;
+        }
+
+        .file-info {
+            padding-left: 10px;
+            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(12);
+                font-weight: 600;
+                color: $theme;
+                display: block;
+            }
+        }
+    }
+
+    .list-info {
+
+        .list-info-item {
+            display: block;
+            padding-top: 20px;
+
+            &:first-child {
+                padding-top: 0;
+            }
+
+            .action-button {
+                cursor: pointer;
+
+                .edit-icon {
+                    display: inline-block;
+                    margin-left: 3px;
+                }
+            }
+
+            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 {
+            display: inline-block;
+            width: 15px;
+            margin-right: 9px;
+            cursor: pointer;
+        }
+
+        .copy-sharelink {
+            width: 100%;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .file-headline {
+
+            .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 {
+
+                &:hover {
+
+                    path, rect {
+                        stroke: $theme;
+                    }
+                }
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/FileItemGrid.vue

@@ -7,7 +7,7 @@
     >
         <!--Grid preview-->
         <div
-                draggable="true"
+                :draggable="canDrag"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -19,76 +19,105 @@
                 :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
         >
             <!--Thumbnail for item-->
-            <div class="icon-item" :class="data.type">
+            <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"/>
 
                 <!--Image thumbnail-->
-                <img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
+                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
 
                 <!--Else show only folder icon-->
-                <FontAwesomeIcon
-                        v-if="isFolder"
-                        :class="{'is-deleted': isDeleted}"
-                        class="folder-icon"
-                        icon="folder"
-                />
+                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
             </div>
 
             <!--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="isFile || isImage" class="item-size">{{
-					data.filesize
-				}}</span>
+                <div class="item-info">
 
-                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
-				</span>
+                    <!--Shared Icon-->
+                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                        <link-icon size="12" class="shared-icon"></link-icon>
+                    </div>
+
+                    <!--Participant owner Icon-->
+                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+                    </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>
 
 <script>
+    import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
     import {debounce} from 'lodash'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
     export default {
-        name: 'FileItem',
+        name: 'FileItemGrid',
         props: ['data'],
+        components: {
+            UserPlusIcon,
+            LinkIcon,
+        },
         computed: {
-            ...mapGetters(['preview_type']),
+            ...mapGetters([
+                'FilePreviewType', 'sharedDetail'
+            ]),
             isFolder() {
                 return this.data.type === 'folder'
             },
             isFile() {
-                return this.data.type === 'file'
+                return this.data.type !== 'folder' && this.data.type !== 'image'
             },
             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 ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
             },
             folderItems() {
                 return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,11 +126,6 @@
                 return this.data.deleted_at ? true : false
             }
         },
-        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            }
-        },
         data() {
             return {
                 isClicked: false,
@@ -112,7 +136,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')
             },
@@ -135,11 +159,15 @@
                 if (this.$isMobile() && this.isFolder) {
 
                     // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: 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
@@ -164,16 +192,20 @@
                 }
 
                 if (this.isFolder) {
-                    // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: 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
@@ -197,7 +229,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .show-actions {
         cursor: pointer;
@@ -212,8 +245,8 @@
         }
     }
 
-
     .file-wrapper {
+        user-select: none;
         position: relative;
         text-align: center;
         display: inline-block;
@@ -228,27 +261,52 @@
 
             .item-size,
             .item-length {
-                @include font-size(12);
-                font-weight: 100;
-                color: $text-muted;
-                display: block;
+                @include font-size(11);
+                font-weight: 400;
+                color: rgba($text, 0.7);
+                display: inline-block;
             }
 
-            .name {
+            .item-info {
                 display: block;
+                line-height: 1;
+            }
 
-                &[contenteditable='true']:hover {
-                    text-decoration: underline;
+            .item-shared {
+                display: inline-block;
+
+                .label {
+                    @include font-size(12);
+                    font-weight: 400;
+                    color: $theme;
+                }
+
+                .shared-icon {
+                    vertical-align: middle;
+
+                    path, circle, line {
+                        stroke: $theme;
+                    }
                 }
             }
 
             .name {
                 color: $text;
-                @include font-size(15);
+                @include font-size(14);
                 font-weight: 700;
                 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;
@@ -287,6 +345,7 @@
         }
 
         .icon-item {
+            text-align: center;
             position: relative;
             height: 110px;
             margin-bottom: 20px;
@@ -308,41 +367,35 @@
                 }
             }
 
-            &.file {
-
-                .file-icon-text {
-                    margin: 5px auto 0;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    color: $theme;
-                    font-weight: 600;
-                    user-select: none;
-                    max-width: 65px;
-                    max-height: 20px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+            .file-icon-text {
+                margin: 5px auto 0;
+                position: absolute;
+                text-align: center;
+                left: 0;
+                right: 0;
+                color: $theme;
+                @include font-size(12);
+                font-weight: 600;
+                user-select: none;
+                max-width: 65px;
+                max-height: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
-            &.image {
-                img {
-                    max-width: 95%;
-                    object-fit: cover;
-                    user-select: none;
-                    height: 110px;
-                    border-radius: 5px;
-                    margin: 0 auto;
-                }
-            }
-
-            &.folder {
-                align-items: flex-end;
+            .image {
+                max-width: 95%;
+                object-fit: cover;
+                user-select: none;
+                height: 110px;
+                border-radius: 5px;
+                margin: 0 auto;
+                pointer-events: none;
             }
 
             .folder-icon {
+                align-items: flex-end;
                 @include font-size(80);
                 margin: 0 auto;
 
@@ -359,14 +412,75 @@
         }
     }
 
+    @media only screen and (max-width: 960px) {
+
+        .file-wrapper {
+
+            .icon-item {
+                margin-bottom: 15px;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .file-wrapper {
+
+            .file-item {
+                width: 120px;
+            }
+
+            .icon-item {
+                margin-bottom: 10px;
+                height: 90px;
+
+                .file-icon {
+                    @include font-size(75);
+                }
+
+                .file-icon-text {
+                    @include font-size(12);
+                }
+
+                .folder-icon {
+                    @include font-size(75);
+                    margin-top: 0;
+                    margin-bottom: 0;
+                }
+
+                .image {
+                    width: 90px;
+                    height: 90px;
+                }
+            }
+
+            .item-name .name {
+                @include font-size(13);
+                line-height: .9;
+                max-height: 30px;
+            }
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
         .file-wrapper {
 
-            .icon-item .file-icon {
+            .icon-item {
 
-                path {
-                    fill: $dark_mode_foreground;
-                    stroke: #2F3C54;
+                .file-icon {
+
+                    path {
+                        fill: $dark_mode_foreground;
+                        stroke: #2F3C54;
+                    }
+                }
+
+                .folder-icon {
+
+                    &.is-deleted {
+                        path {
+                            fill: lighten($dark_mode_foreground, 5%);
+                        }
+                    }
                 }
             }
 
@@ -385,9 +499,20 @@
                 }
             }
 
-            .item-name .name {
-                color: $dark_mode_text_primary;
+            .item-name {
+
+                .name {
+                    color: $dark_mode_text_primary;
+                }
+
+                .item-size,
+                .item-length {
+                    color: $dark_mode_text_secondary;
+                }
             }
+
         }
     }
+
+
 </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="true"
+                :draggable="canDrag"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -18,47 +19,58 @@
                 :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
         >
             <!--Thumbnail for item-->
-            <div class="icon-item" :class="data.type">
+            <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"/>
 
                 <!--Image thumbnail-->
-                <img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
+                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
 
                 <!--Else show only folder icon-->
-                <FontAwesomeIcon
-                        v-if="isFolder"
-                        :class="{'is-deleted': isDeleted}"
-                        class="folder-icon"
-                        icon="folder"
-                />
+                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
             </div>
 
             <!--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="isFile || isImage" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+                <div class="item-info">
 
-                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' Item') | pluralize(folderItems) }}, {{ timeStamp }}
-				</span>
+                    <!--Shared Icon-->
+                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                        <link-icon size="12" class="shared-icon"></link-icon>
+                    </div>
+
+                    <!--Participant owner Icon-->
+                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+                    </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,26 +80,40 @@
 </template>
 
 <script>
+    import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
     import {debounce} from 'lodash'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
     export default {
-        name: 'FileItem',
+        name: 'FileItemList',
         props: ['data'],
+        components: {
+            UserPlusIcon,
+            LinkIcon,
+        },
         computed: {
-            ...mapGetters(['preview_type']),
+            ...mapGetters(['FilePreviewType']),
             isFolder() {
                 return this.data.type === 'folder'
             },
             isFile() {
-                return this.data.type === 'file'
+                return this.data.type !== 'folder' && this.data.type !== 'image'
             },
             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 ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
             },
             folderItems() {
                 return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,9 +123,6 @@
             }
         },
         filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            },
             limitCharacters(str) {
 
                 if (str.length > 3) {
@@ -120,7 +143,7 @@
         methods: {
             showItemActions() {
                 // Load file info detail
-                this.$store.dispatch('loadFileInfoDetail', this.data)
+                this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
                 //this.isClicked = true
 
@@ -145,20 +168,20 @@
                 if (this.$isMobile() && this.isFolder) {
 
                     // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: 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() {
@@ -174,16 +197,20 @@
                 }
 
                 if (this.isFolder) {
-                    // Go to folder
-                    this.$store.dispatch('goToFolder', [this.data, false])
+
+                    if (this.$isThisLocation('public')) {
+                        this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: 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
@@ -207,9 +234,11 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .file-wrapper {
+        user-select: none;
         position: relative;
 
         &:hover {
@@ -241,17 +270,43 @@
             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 {
+                    vertical-align: middle;
+
+                    path, circle, line {
+                        stroke: $theme;
+                    }
+                }
+            }
+
             .item-size,
             .item-length {
-                @include font-size(12);
-                font-weight: 100;
-                color: $text-muted;
-                display: block;
+                @include font-size(11);
+                font-weight: 400;
+                color: rgba($text, 0.7);
             }
 
             .name {
                 white-space: nowrap;
-                //display: inline-block;
+
+                &[contenteditable] {
+                    -webkit-user-select: text;
+                    user-select: text;
+                }
 
                 &[contenteditable='true']:hover {
                     text-decoration: underline;
@@ -260,7 +315,7 @@
 
             .name {
                 color: $text;
-                @include font-size(15);
+                @include font-size(14);
                 font-weight: 700;
                 max-height: 40px;
                 overflow: hidden;
@@ -279,6 +334,7 @@
         }
 
         .icon-item {
+            text-align: center;
             position: relative;
             flex: 0 0 50px;
             line-height: 0;
@@ -308,38 +364,33 @@
                 }
             }
 
-            &.file {
+            .file-icon-text {
+                line-height: 1;
+                top: 40%;
+                @include font-size(11);
+                margin: 0 auto;
+                position: absolute;
                 text-align: center;
-
-                .file-icon-text {
-                    line-height: 1;
-                    top: 40%;
-                    @include font-size(11);
-                    margin: 0 auto;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    color: $theme;
-                    font-weight: 600;
-                    user-select: none;
-                    max-width: 50px;
-                    max-height: 20px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+                left: 0;
+                right: 0;
+                color: $theme;
+                font-weight: 600;
+                user-select: none;
+                max-width: 50px;
+                max-height: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
-            &.image {
-                img {
-                    object-fit: cover;
-                    user-select: none;
-                    max-width: 100%;
-                    border-radius: 5px;
-                    width: 50px;
-                    height: 50px;
-                }
+            .image {
+                object-fit: cover;
+                user-select: none;
+                max-width: 100%;
+                border-radius: 5px;
+                width: 50px;
+                height: 50px;
+                pointer-events: none;
             }
         }
 
@@ -368,16 +419,29 @@
     }
 
     @media (prefers-color-scheme: dark) {
+
         .file-wrapper {
 
-            .icon-item .file-icon {
+            .icon-item {
+                .file-icon {
 
-                path {
-                    fill: $dark_mode_foreground;
-                    stroke: #2F3C54;
+                    path {
+                        fill: $dark_mode_foreground;
+                        stroke: #2F3C54;
+                    }
+                }
+
+                .folder-icon {
+
+                    &.is-deleted {
+                        path {
+                            fill: lighten($dark_mode_foreground, 5%);
+                        }
+                    }
                 }
             }
 
+
             .file-item {
 
                 &:hover,
@@ -393,8 +457,16 @@
                 }
             }
 
-            .item-name .name {
-                color: $dark_mode_text_primary;
+            .item-name {
+
+                .name {
+                    color: $dark_mode_text_primary;
+                }
+
+                .item-size,
+                .item-length {
+                    color: $dark_mode_text_secondary;
+                }
             }
         }
     }

resources/js/components/FilesView/FilePreview.vue

@@ -0,0 +1,61 @@
+<template>
+    <div v-if="canBePreview" class="preview">
+        <img v-if="fileInfoDetail.type == 'image'" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
+        <audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
+        <video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+            <source :src="fileInfoDetail.file_url" type="video/mp4">
+        </video>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import { includes } from 'lodash'
+
+    export default {
+        name: 'FilePreview',
+        computed: {
+            ...mapGetters(['fileInfoDetail']),
+            canBePreview() {
+                return this.fileInfoDetail && ! includes([
+                    'folder', 'file'
+                ], this.fileInfoDetail.type)
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .preview {
+        width: 100%;
+        display: block;
+        margin-bottom: 7px;
+
+        img {
+            border-radius: 4px;
+            overflow: hidden;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        audio {
+            width: 100%;
+            &::-webkit-media-controls-panel {
+                background-color: $light_background;
+            }
+
+            &::-webkit-media-controls-play-button {
+                color: $theme;
+            }
+        }
+
+        video {
+            width: 100%;
+            height: auto;
+            border-radius: 3px;
+        }
+    }
+</style>

resources/js/components/FilesView/MobileActionButton.vue

@@ -0,0 +1,74 @@
+<template>
+    <button class="mobile-action-button">
+        <div class="flex">
+            <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon"></folder-plus-icon>
+            <list-icon v-if="icon === 'th-list'" size="15" class="icon"></list-icon>
+            <trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
+            <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
+            <span class="label">
+                <slot></slot>
+            </span>
+        </div>
+    </button>
+</template>
+
+<script>
+    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'MobileActionButton',
+        props: [
+            'icon'
+        ],
+        components: {
+            FolderPlusIcon,
+            TrashIcon,
+            ListIcon,
+            GridIcon,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-action-button {
+        background: $light_background;
+        margin-right: 15px;
+        border-radius: 8px;
+        padding: 7px 10px;
+        cursor: pointer;
+        border: none;
+
+        .flex {
+            display: flex;
+            align-items: center;
+        }
+
+        .icon {
+            margin-right: 10px;
+            @include font-size(14);
+        }
+
+        .label {
+            @include font-size(14);
+            font-weight: 700;
+            color: $text;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-action-button {
+            background: $dark_mode_foreground;
+
+            path, line, polyline, rect, circle {
+                stroke: $theme;
+            }
+
+            .label {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/MobileActionButtonUpload.vue

@@ -0,0 +1,80 @@
+<template>
+    <button class="mobile-action-button">
+        <div class="flex">
+            <upload-cloud-icon class="icon" size="15"></upload-cloud-icon>
+            <label label="file" class="label button file-input button-base">
+                <slot></slot>
+                <input
+                        @change="emmitFiles"
+                        v-show="false"
+                        id="file"
+                        type="file"
+                        name="files[]"
+                        multiple
+                />
+            </label>
+        </div>
+    </button>
+</template>
+
+<script>
+    import { UploadCloudIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'MobileActionButtonUpload',
+        components: {
+            UploadCloudIcon,
+        },
+        methods: {
+            emmitFiles(e) {
+                this.$uploadFiles(e.target.files)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-action-button {
+        background: $light_background;
+        margin-right: 15px;
+        border-radius: 8px;
+        padding: 7px 10px;
+        cursor: pointer;
+        border: none;
+
+        .flex {
+            display: flex;
+            align-items: center;
+        }
+
+        .icon {
+            vertical-align: middle;
+            margin-right: 10px;
+            @include font-size(14);
+        }
+
+        .label {
+            vertical-align: middle;
+            @include font-size(14);
+            font-weight: 700;
+            color: $text;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-action-button {
+            background: $dark_mode_foreground;
+
+            path, line, polyline, rect, circle {
+                stroke: $theme;
+            }
+
+            .label {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/MobileActions.vue

@@ -0,0 +1,114 @@
+<template>
+    <div id="mobile-actions-wrapper">
+
+        <!--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">
+                {{ $t('context_menu.empty_trash') }}
+            </MobileActionButton>
+        </div>
+
+        <!--ContextMenu for Base location with MASTER permission-->
+        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
+            <MobileActionButton @click.native="createFolder" icon="folder-plus">
+                {{ $t('context_menu.add_folder') }}
+            </MobileActionButton>
+            <MobileActionButtonUpload>
+                {{ $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')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" 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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    #mobile-actions-wrapper {
+        display: none;
+        background: white;
+        position: sticky;
+        top: 35px;
+        z-index: 3;
+    }
+
+    .mobile-actions {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        white-space: nowrap;
+        overflow-x: auto;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #mobile-actions-wrapper {
+            display: block;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        #mobile-actions-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>

resources/js/components/FilesView/MobileMenu.vue

@@ -0,0 +1,487 @@
+<template>
+    <div class="options-wrapper">
+        <transition name="context-menu">
+            <div
+                    v-if="isVisible"
+                    ref="contextmenu"
+                    class="options"
+                    @click="closeAndResetContextMenu"
+            >
+                <div class="menu-wrapper">
+
+                    <!--Item Thumbnail-->
+                    <ThumbnailItem class="item-thumbnail" :item="fileInfoDetail" info="metadata"/>
+
+                    <!--Mobile for trash location-->
+                    <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <life-buoy-icon size="17"></life-buoy-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.restore') }}
+                                </div>
+                            </li>
+                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <trash-2-icon size="17"></trash-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.delete') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group" v-if="! isFolder">
+                            <li class="menu-option" @click="downloadItem">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!--Mobile for Base location-->
+                    <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
+                                <div class="icon">
+                                    <star-icon size="17"></star-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ isInFavourites ? $t('context_menu.remove_from_favourites') :
+                                    $t('context_menu.add_to_favourites') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <edit-2-icon size="17"></edit-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.rename') }}
+                                </div>
+                            </li>
+                            <li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <link-icon size="17"></link-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                                </div>
+                            </li>
+                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <trash-2-icon size="17"></trash-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.delete') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!--Mobile for Base location-->
+                    <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" class="menu-options">
+                        <ul class="menu-option-group" v-if="fileInfoDetail && isFolder">
+                            <li class="menu-option" @click="addToFavourites">
+                                <div class="icon">
+                                    <star-icon size="17"></star-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ isInFavourites ? $t('context_menu.remove_from_favourites') :
+                                    $t('context_menu.add_to_favourites') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <edit-2-icon size="17"></edit-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.rename') }}
+                                </div>
+                            </li>
+                            <li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <corner-down-right-icon size="17"></corner-down-right-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.move') }}
+                                </div>
+                            </li>
+                            <li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <link-icon size="17"></link-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
+                                </div>
+                            </li>
+                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <trash-2-icon size="17"></trash-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.delete') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!--Mobile for Base location with EDITOR permission-->
+                    <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options">
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <edit-2-icon size="17"></edit-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.rename') }}
+                                </div>
+                            </li>
+                            <li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
+                                <div class="icon">
+                                    <corner-down-right-icon size="17"></corner-down-right-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.move') }}
+                                </div>
+                            </li>
+                            <li class="menu-option" @click="deleteItem">
+                                <div class="icon">
+                                    <trash-2-icon size="17"></trash-2-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.delete') }}
+                                </div>
+                            </li>
+                        </ul>
+
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!--Mobile for Base location with VISITOR permission-->
+                    <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options">
+                        <ul class="menu-option-group">
+                            <li class="menu-option" @click="downloadItem" v-if="! isFolder">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </transition>
+        <transition name="fade">
+            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import {
+        CornerDownRightIcon,
+        DownloadCloudIcon,
+        FolderPlusIcon,
+        LifeBuoyIcon,
+        Trash2Icon,
+        Edit2Icon,
+        TrashIcon,
+        StarIcon,
+        LinkIcon,
+        EyeIcon,
+    } from 'vue-feather-icons'
+    import {events} from '@/bus'
+    import {mapGetters} from 'vuex'
+
+    export default {
+        name: 'MobileMenu',
+        components: {
+            CornerDownRightIcon,
+            DownloadCloudIcon,
+            FolderPlusIcon,
+            ThumbnailItem,
+            LifeBuoyIcon,
+            Trash2Icon,
+            Edit2Icon,
+            TrashIcon,
+            LinkIcon,
+            StarIcon,
+            EyeIcon,
+        },
+        computed: {
+            ...mapGetters(['fileInfoDetail', 'app']),
+            isInFavourites() {
+                return this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)
+            },
+            isFile() {
+                return (this.fileInfoDetail && this.fileInfoDetail.type !== 'folder') && (this.fileInfoDetail && this.fileInfoDetail.type !== 'image')
+            },
+            isImage() {
+                return this.fileInfoDetail && this.fileInfoDetail.type === 'image'
+            },
+            isFolder() {
+                return this.fileInfoDetail && this.fileInfoDetail.type === 'folder'
+            }
+        },
+        data() {
+            return {
+                isVisible: false
+            }
+        },
+        methods: {
+            moveItem() {
+                // 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)) {
+                    this.$store.dispatch('addToFavourites', this.fileInfoDetail)
+                } else {
+                    this.$store.dispatch('removeFromFavourites', this.fileInfoDetail)
+                }
+            },
+            downloadItem() {
+                this.$downloadFile(
+                    this.fileInfoDetail.file_url,
+                    this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
+                )
+            },
+            deleteItem() {
+                this.$store.dispatch('deleteItem', this.fileInfoDetail)
+            },
+            renameItem() {
+                let itemName = prompt(
+                    this.$t('popup_rename.title'),
+                    this.fileInfoDetail.name
+                )
+
+                if (itemName && itemName !== '') {
+
+                    let item = {
+                        unique_id: this.fileInfoDetail.unique_id,
+                        type: this.fileInfoDetail.type,
+                        name: itemName
+                    }
+
+                    this.$store.dispatch('renameItem', item)
+
+                    // Change item name if is mobile device or prompted
+                    if (this.$isMobile()) {
+                        events.$emit('change:name', item)
+                    }
+                }
+            },
+            closeAndResetContextMenu() {
+                events.$emit('fileItem:deselect')
+
+                // Close context menu
+                this.isVisible = false
+            }
+        },
+        created() {
+
+            // Show context menu
+            events.$on('mobileMenu:show', () => {
+                this.isVisible = !this.isVisible
+            })
+
+            // Hide mobile menu
+            events.$on('mobileMenu:hide', () => {
+                this.isVisible = false
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .menu-option {
+        display: flex;
+        align-items: center;
+
+        .icon {
+            margin-right: 20px;
+            line-height: 0;
+        }
+
+        .text-label {
+            @include font-size(16);
+        }
+    }
+
+    .vignette {
+        background: rgba(0, 0, 0, 0.35);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 9;
+        cursor: pointer;
+        opacity: 1;
+    }
+
+    .options {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        overflow: hidden;
+        background: white;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+
+        &.showed {
+            display: block;
+        }
+
+        .item-thumbnail {
+            padding: 20px 20px 10px;
+            margin-bottom: 0px;
+        }
+
+        .menu-options {
+            margin-top: 10px;
+            list-style: none;
+            width: 100%;
+
+            .menu-option-group {
+                padding: 5px 0;
+                border-bottom: 1px solid $light_mode_border;
+
+                &:first-child {
+                    padding-top: 0;
+                }
+
+                &:last-child {
+                    padding-bottom: 0;
+                    border-bottom: none;
+                }
+            }
+
+            .menu-option {
+                font-weight: 700;
+                letter-spacing: 0.15px;
+                @include font-size(14);
+                cursor: pointer;
+                width: 100%;
+                padding: 17px 20px;
+                text-align: center;
+
+                &:last-child {
+                    border: none;
+                }
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .vignette {
+            background: $dark_mode_vignette;
+        }
+
+        .options {
+            background: $dark_mode_background;
+
+            .menu-options {
+                background: $dark_mode_background;
+
+                .menu-option-group {
+                    border-color: $dark_mode_border_color;
+                }
+
+                .menu-option {
+                    color: $dark_mode_text_primary;
+                }
+            }
+        }
+    }
+
+    // Transition
+    .context-menu-enter-active,
+    .fade-enter-active {
+        transition: all 200ms;
+    }
+
+    .context-menu-leave-active,
+    .fade-leave-active {
+        transition: all 200ms;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+    }
+
+    .context-menu-enter,
+    .context-menu-leave-to {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    .context-menu-leave-active {
+        position: absolute;
+    }
+</style>

resources/js/components/FilesView/MobileToolbar.vue

@@ -3,79 +3,77 @@
 
         <!-- Go back-->
         <div @click="goBack" class="go-back-button">
-            <FontAwesomeIcon
-                    :class="{'is-visible': browseHistory.length > 0}"
-                    class="icon-back"
-                    icon="chevron-left"
-            ></FontAwesomeIcon>
+            <chevron-left-icon size="17" :class="{'is-visible': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
         </div>
 
         <!--Folder Title-->
         <div class="directory-name">{{ directoryName }}</div>
 
         <!--More Actions-->
-        <div class="more-actions-button" @click="showSidebarMenu">
-            <div class="tap-area">
-                <FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
+        <div class="more-actions-button">
+            <div class="tap-area" @click="showMobileNavigation" v-if="$checkPermission('master')">
+                <menu-icon size="17"></menu-icon>
             </div>
         </div>
     </div>
 </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 { MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
+    import {last} from 'lodash'
 
     export default {
         name: 'MobileToolBar',
         components: {
             ToolbarButtonUpload,
+            ChevronLeftIcon,
             ToolbarButton,
-            SearchBar
+            SearchBar,
+            MenuIcon,
         },
         computed: {
             ...mapGetters([
                 'fileInfoVisible',
+                'FilePreviewType',
                 'fileInfoDetail',
                 'currentFolder',
                 'browseHistory',
                 'homeDirectory',
-                'preview_type',
                 'appSize',
             ]),
             directoryName() {
                 return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
             },
-            previousFolder() {
-                const length = this.browseHistory.length - 2
-
-                return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
-            },
             isSmallAppSize() {
                 return this.appSize === 'small'
             }
         },
-        data() {
-            return {
-                isSidebarMenu: false,
-            }
-        },
         methods: {
-            showSidebarMenu() {
-                this.isSidebarMenu = ! this.isSidebarMenu
-                events.$emit('show:sidebar')
+            showMobileNavigation() {
+                events.$emit('show:mobile-navigation')
             },
             goBack() {
 
-                if (this.previousFolder.location === 'trash-root') {
+                let previousFolder = last(this.browseHistory)
+
+                if (previousFolder.location === 'trash-root') {
                     this.$store.dispatch('getTrash')
-                    this.$store.commit('FLUSH_BROWSER_HISTORY')
+
+                } else if (previousFolder.location === 'shared') {
+                    this.$store.dispatch('getShared')
 
                 } else {
-                    this.$store.dispatch('goToFolder', [this.previousFolder, true])
+
+                    if ( this.$isThisLocation('public') ) {
+                        this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
+                    } else {
+                        this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
+                    }
                 }
             },
         },
@@ -89,13 +87,13 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
-
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .mobile-toolbar {
         background: white;
         text-align: center;
-        display: flex;
+        display: none;
         padding: 10px 0;
         position: sticky;
         top: 0;
@@ -117,6 +115,7 @@
                 cursor: pointer;
                 opacity: 0;
                 visibility: hidden;
+                margin-top: -2px;
 
                 &.is-visible {
                     opacity: 1;
@@ -130,9 +129,9 @@
             text-align: center;
             width: 100%;
             vertical-align: middle;
-            @include font-size(17);
+            @include font-size(16);
             color: $text;
-            font-weight: 600;
+            font-weight: 700;
             max-width: 220px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -150,10 +149,21 @@
                 position: absolute;
                 right: -10px;
                 top: -20px;
+
+                path, line, polyline, rect, circle {
+                    stroke: $text;
+                }
             }
         }
     }
 
+    @media only screen and (max-width: 960px) {
+
+        .mobile-toolbar {
+            display: flex;
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
 
         .mobile-toolbar {
@@ -163,8 +173,11 @@
                 color: $dark_mode_text_primary;
             }
 
-            .more-actions-button svg path {
-                fill: $dark_mode_text_primary;
+            .more-actions-button .tap-area {
+
+                path, line, polyline, rect, circle {
+                    stroke: $dark_mode_text_primary;
+                }
             }
         }
     }

resources/js/components/FilesView/ProgressBar.vue

@@ -12,7 +12,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "@assets/app.scss";
+	@import '@assets/vue-file-manager/_variables';
+	@import '@assets/vue-file-manager/_mixins';
 
 	.progress-bar {
 		width: 100%;
@@ -40,7 +41,7 @@ export default {
 	@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
 
 		.progress-bar {
-			background: $dark_mode_background;
+			background: $dark_mode_foreground;
 		}
 	}
 </style>

resources/js/components/FilesView/SearchBar.vue

@@ -1,28 +1,33 @@
 <template>
     <div class="search-bar">
+        <div class="icon" v-if="!isQuery">
+            <search-icon size="19"></search-icon>
+        </div>
+        <div class="icon" v-if="isQuery" @click="resetQuery">
+            <x-icon class="pointer" size="19"></x-icon>
+        </div>
         <input
                 v-model="query"
                 class="query"
                 type="text"
                 name="query"
-                placeholder="Search files…"
+                :placeholder="$t('inputs.placeholder_search_files')"
         />
-        <div class="icon" v-if="!isQuery">
-            <FontAwesomeIcon icon="search"></FontAwesomeIcon>
-        </div>
-        <div class="icon" v-if="isQuery" @click="resetQuery">
-            <FontAwesomeIcon icon="times" class="pointer"></FontAwesomeIcon>
-        </div>
     </div>
 </template>
 
 <script>
+    import { SearchIcon, XIcon } from 'vue-feather-icons'
     import {mapGetters} from 'vuex'
     import {debounce} from 'lodash'
     import {events} from '@/bus'
 
     export default {
         name: 'SearchBar',
+        components: {
+            SearchIcon,
+            XIcon,
+        },
         computed: {
             ...mapGetters(['currentFolder']),
             isQuery() {
@@ -49,11 +54,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', [{folder: this.currentFolder, back: true, init: false}])
+                        } else {
+                            this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
+                        }
                     }
 
                     this.$store.commit('CHANGE_SEARCHING_STATE', false)
@@ -67,20 +74,20 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .search-bar {
         position: relative;
 
         input {
-            //width: 100%;
-            background: $light_background;
+            background: transparent;
             border-radius: 8px;
             outline: 0;
-            padding: 9px 20px;
-            font-weight: 100;
+            padding: 9px 20px 9px 43px;
+            font-weight: 400;
             @include font-size(16);
-            min-width: 380px;
+            min-width: 175px;
             transition: 0.15s all ease;
             border: 1px solid white;
             -webkit-appearance: none;
@@ -88,6 +95,7 @@
             &::placeholder {
                 color: $text;
                 @include font-size(14);
+                font-weight: 500;
             }
 
             &:focus {
@@ -105,8 +113,8 @@
         .icon {
             position: absolute;
             top: 0;
-            right: 0;
-            padding: 10px 15px;
+            left: 0;
+            padding: 11px 15px;
 
             .pointer {
                 cursor: pointer;
@@ -114,11 +122,42 @@
         }
     }
 
+    @media only screen and (max-width: 1024px) {
+
+        .search-bar input {
+            max-width: 190px;
+            padding-right: 0;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .search-bar {
+
+            input {
+                min-width: initial;
+                width: 100%;
+                max-width: initial;
+                padding: 9px 20px 9px 30px;
+
+                &:focus {
+                    border: 1px solid transparent;
+                    box-shadow: none;
+                }
+            }
+
+            .icon {
+                padding: 11px 15px 11px 0;
+            }
+        }
+
+    }
+
     @media (prefers-color-scheme: dark) {
         .search-bar {
             input {
-                background: $dark_mode_foreground;
-                border-color: $dark_mode_foreground;
+                border-color: transparent;
+                color: $dark_mode_text_primary;
 
                 &::placeholder {
                     color: $dark_mode_text_secondary;

resources/js/components/FilesView/Spinner.vue

@@ -11,7 +11,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     #loading-bar-spinner.spinner {
         left: 50%;

resources/js/components/FilesView/ToolbarButton.vue

@@ -0,0 +1,75 @@
+<template>
+    <button class="button" :title="action">
+        <corner-down-right-icon v-if="source === 'move'" size="19"></corner-down-right-icon>
+        <folder-plus-icon v-if="source === 'folder-plus'" size="19"></folder-plus-icon>
+        <trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
+        <list-icon v-if="source === 'th-list'" size="19"></list-icon>
+        <info-icon v-if="source === 'info'" size="19"></info-icon>
+        <grid-icon v-if="source === 'th'" size="19"></grid-icon>
+        <link-icon v-if="source === 'share'" size="19"></link-icon>
+    </button>
+</template>
+
+<script>
+    import {FolderPlusIcon, Trash2Icon, GridIcon, ListIcon, InfoIcon, CornerDownRightIcon, LinkIcon} from 'vue-feather-icons'
+
+    export default {
+        name: 'ToolbarButton',
+        props: ['source', 'action'],
+        components: {
+            CornerDownRightIcon,
+            FolderPlusIcon,
+            Trash2Icon,
+            ListIcon,
+            GridIcon,
+            InfoIcon,
+            LinkIcon,
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .button {
+        height: 42px;
+        width: 42px;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        text-align: center;
+        cursor: pointer;
+        white-space: nowrap;
+        outline: none;
+        border: none;
+        @include transition(150ms);
+        background: transparent;
+
+        &:hover {
+            background: $light_background;
+
+            path, line, polyline, rect, circle {
+                @include transition(150ms);
+                stroke: $theme;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .button {
+            background: transparent;
+
+            &:hover {
+                background: $dark_mode_foreground;
+            }
+
+            path, line, polyline, rect, circle {
+                stroke: $dark_mode_text_primary;
+            }
+        }
+    }
+</style>

resources/js/components/FilesView/ToolbarButtonUpload.vue

@@ -1,6 +1,6 @@
 <template>
     <label label="file" class="button file-input">
-        <FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
+        <upload-cloud-icon size="17"></upload-cloud-icon>
         <input
                 @change="emmitFiles"
                 v-show="false"
@@ -8,15 +8,19 @@
                 type="file"
                 name="files[]"
                 multiple
-                :disabled="$isTrashLocation() ? true : false"
         />
     </label>
 </template>
 
 <script>
+    import { UploadCloudIcon } from 'vue-feather-icons'
+
     export default {
         name: 'ToolbarButtonUpload',
-        props: ['source', 'action'],
+        props: ['action'],
+        components: {
+            UploadCloudIcon,
+        },
         methods: {
             emmitFiles(e) {
                 this.$uploadFiles(e.target.files)
@@ -26,7 +30,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .button {
         height: 42px;
@@ -36,7 +41,6 @@
         align-items: center;
         justify-content: center;
         padding: 0;
-        background: $light_background;
         text-align: center;
         cursor: pointer;
         white-space: nowrap;
@@ -44,26 +48,27 @@
         border: none;
 
         &:hover {
-            background: rgba($theme, .1);
+            background: $light_background;
 
-            /deep/ svg path {
-                @include transition;
-                fill: $theme;
+            path, line, polyline, rect, circle {
+                @include transition(150ms);
+                stroke: $theme;
             }
         }
-
-        .icon {
-            @include font-size(16);
-        }
     }
 
     @media (prefers-color-scheme: dark) {
-        .button {
-            background: $dark_mode_foreground;
-        }
 
-        .icon path {
-            fill: $dark_mode_text_primary;
+        .button {
+            background: transparent;
+
+            &:hover {
+                background: $dark_mode_foreground;
+            }
+
+            path, line, polyline, rect, circle {
+                stroke: $dark_mode_text_primary;
+            }
         }
     }
 </style>

resources/js/components/FilesView/UploadProgress.vue

@@ -2,11 +2,7 @@
     <transition name="info-panel">
         <div v-if="uploadingFilesCount" class="upload-progress">
             <div class="progress-title">
-				<span
-                >Uploading files {{ uploadingFilesCount.current }}/{{
-						uploadingFilesCount.total
-					}}</span
-                >
+				<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total}) }}</span>
             </div>
             <ProgressBar :progress="uploadingFileProgress"/>
         </div>
@@ -14,7 +10,7 @@
 </template>
 
 <script>
-    import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
+    import ProgressBar from '@/components/FilesView/ProgressBar'
     import {mapGetters} from 'vuex'
 
     export default {
@@ -29,7 +25,8 @@
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
     .info-panel-enter-active,
     .info-panel-leave-active {

resources/js/components/Mobile/MenuItemList.vue

@@ -0,0 +1,121 @@
+<template>
+    <ul class="link-group">
+        <router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
+            <div class="menu-icon">
+                <hard-drive-icon v-if="link.icon === 'hard-drive'" size="17"></hard-drive-icon>
+                <share-icon v-if="link.icon === 'share'" size="17"></share-icon>
+                <trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
+                <power-icon v-if="link.icon === 'power'" size="17"></power-icon>
+                <settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
+                <upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
+                <user-icon v-if="link.icon === 'user'" size="17"></user-icon>
+                <lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
+            </div>
+            <b class="menu-link">
+                <span>{{ link.title }}</span>
+                <chevron-right-icon size="15" class="arrow-right"></chevron-right-icon>
+            </b>
+        </router-link>
+    </ul>
+</template>
+
+<script>
+    import {
+        ChevronRightIcon,
+        UploadCloudIcon,
+        HardDriveIcon,
+        SettingsIcon,
+        Trash2Icon,
+        PowerIcon,
+        ShareIcon,
+        UserIcon,
+        LockIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'MenuBar',
+        components: {
+            ChevronRightIcon,
+            UploadCloudIcon,
+            HardDriveIcon,
+            SettingsIcon,
+            Trash2Icon,
+            PowerIcon,
+            ShareIcon,
+            LockIcon,
+            UserIcon,
+        },
+        props: [
+            'navigation'
+        ],
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .link-item {
+        display: flex;
+        text-decoration: none;
+        padding: 17px 0;
+        width: 100%;
+
+        &.power {
+
+            .menu-icon {
+
+                path, line, polyline, rect, circle {
+                    stroke: $red;
+                }
+            }
+
+            .menu-link {
+                color: $red;
+            }
+        }
+
+        .menu-icon {
+            display: block;
+            margin-right: 20px;
+
+            svg {
+                margin-top: -1px;
+                vertical-align: middle;
+            }
+
+            path, line, polyline, rect, circle {
+                stroke: $text;
+            }
+        }
+
+        .menu-link {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: $text;
+
+            span {
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .link-item {
+
+            .menu-icon {
+
+                path, line, polyline, rect, circle {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+
+            .menu-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>

resources/js/components/Mobile/MobileHeader.vue

@@ -0,0 +1,108 @@
+<template>
+    <header class="mobile-header">
+
+        <!-- Go back-->
+        <div @click="goBack" class="go-back">
+            <chevron-left-icon size="17" class="icon"></chevron-left-icon>
+        </div>
+
+        <!--Folder Title-->
+        <div class="location-name">{{ $router.currentRoute.meta.title }}</div>
+
+        <!--More Actions-->
+        <div @click="showMobileNavigation" class="mobile-menu">
+            <menu-icon size="17" class="icon"></menu-icon>
+        </div>
+    </header>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    import {
+        ChevronLeftIcon,
+        MenuIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'MenuBar',
+        components: {
+            ChevronLeftIcon,
+            MenuIcon,
+        },
+        methods: {
+            showMobileNavigation() {
+                events.$emit('show:mobile-navigation')
+            },
+            goBack() {
+                this.$router.back();
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-header {
+        padding: 10px 15px;
+        text-align: center;
+        background: white;
+        position: sticky;
+        display: none;
+        z-index: 6;
+        top: 0;
+
+        > div {
+            flex-grow: 1;
+            align-self: center;
+            white-space: nowrap;
+        }
+
+        .go-back {
+            text-align: left;
+        }
+
+        .location-name {
+            line-height: 1;
+            text-align: center;
+            width: 100%;
+            vertical-align: middle;
+            @include font-size(15);
+            color: $text;
+            font-weight: 700;
+            max-width: 220px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
+        .mobile-menu {
+            text-align: right;
+        }
+
+        .icon {
+            vertical-align: middle;
+            margin-top: -4px;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .mobile-header {
+            display: flex;
+            margin-bottom: 25px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .mobile-header {
+            background: $dark_mode_background;
+
+            .location-name {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>

resources/js/components/Others/ActionButton.vue

@@ -0,0 +1,45 @@
+<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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .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/ContentFileview.vue

@@ -0,0 +1,63 @@
+<template>
+    <div @click="fileViewClick"
+         @contextmenu.prevent.capture="contextMenu($event, undefined)"
+         id="files-view">
+        <ContextMenu/>
+        <DesktopToolbar/>
+        <FileBrowser/>
+    </div>
+</template>
+
+<script>
+    import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
+    import FileBrowser from '@/components/FilesView/FileBrowser'
+    import ContextMenu from '@/components/FilesView/ContextMenu'
+    import {ResizeSensor} from 'css-element-queries'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            DesktopToolbar,
+            FileBrowser,
+            ContextMenu,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        methods: {
+            fileViewClick() {
+                events.$emit('contextMenu:hide')
+            },
+            contextMenu(event, item) {
+                events.$emit('contextMenu:show', event, item)
+            },
+        },
+    }
+</script>
+
+<style lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    #files-view {
+        font-family: 'Nunito', sans-serif;
+        font-size: 16px;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        min-width: 320px;
+        overflow-x: hidden;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    @media only screen and (max-width: 690px) {
+        #files-view {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+</style>

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

@@ -0,0 +1,95 @@
+<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">
+            <link-icon v-if="! isCopiedLink" size="14"></link-icon>
+            <check-icon v-if="isCopiedLink" size="14"></check-icon>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { LinkIcon, CheckIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'CopyInput',
+        props: ['size', 'value'],
+        components: {
+            CheckIcon,
+            LinkIcon,
+        },
+        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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import "@assets/vue-file-manager/_forms.scss";
+
+    // Single page
+    .copy-input {
+
+        &.small {
+
+            &.icon-append {
+
+                .icon {
+                    padding: 10px;
+                }
+            }
+
+            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;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,217 @@
+<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">
+                    <user-icon v-if="selected.icon === 'user'" size="14"></user-icon>
+                    <edit2-icon v-if="selected.icon === 'user-edit'" size="14"></edit2-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>
+
+            <chevron-down-icon size="19" class="chevron"></chevron-down-icon>
+        </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">
+                        <user-icon v-if="option.icon === 'user'" size="14"></user-icon>
+                        <edit2-icon v-if="option.icon === 'user-edit'" size="14"></edit2-icon>
+                    </div>
+                    <span class="option-value">{{ option.label }}</span>
+                </li>
+            </ul>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import { ChevronDownIcon, Edit2Icon, UserIcon } from 'vue-feather-icons'
+
+    export default {
+        name:'SelectInput',
+        props: ['options', 'isError', 'default', 'placeholder'],
+        components: {
+            Edit2Icon,
+            UserIcon,
+            ChevronDownIcon
+        },
+        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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .select {
+        position: relative;
+        user-select: none;
+    }
+
+    .input-options {
+        background: $light_mode_input_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_mode_input_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(10);
+
+        svg {
+            margin-top: -4px;
+            vertical-align: middle;
+        }
+    }
+
+    .option-value {
+        @include font-size(14);
+        font-weight: 700;
+        width: 100%;
+        vertical-align: middle;
+
+        &.placehoder {
+            color: rgba($text, 0.5);
+        }
+    }
+
+    .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;
+                }
+            }
+        }
+
+        .option-value {
+
+            &.placehoder {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+
+</style>

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

@@ -0,0 +1,99 @@
+<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/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .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>