v1.6 released

.env.example

@@ -45,11 +45,6 @@ DO_SPACES_ENDPOINT=
 DO_SPACES_REGION=
 DO_SPACES_BUCKET=
 
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
-PUSHER_APP_CLUSTER=mt1
-
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 

app/Console/Commands/SetupDevEnvironment.php

@@ -3,6 +3,7 @@
 namespace App\Console\Commands;
 
 use App\User;
+use App\UserSettings;
 use Illuminate\Console\Command;
 
 class SetupDevEnvironment extends Command
@@ -109,9 +110,15 @@ class SetupDevEnvironment extends Command
         $user = User::create([
             'name'     => 'Jane Doe',
             'email'    => 'howdy@hi5ve.digital',
+            'role'     => 'admin',
             'password' => \Hash::make('vuefilemanager'),
         ]);
 
+        // Create settings
+        $settings = UserSettings::create([
+            'user_id' => $user->id
+        ]);
+
         $this->info('Test user created. Email: ' . $user->email . ' Password: vuefilemanager');
     }
 }

app/Console/Commands/UpgradeApp.php

@@ -40,12 +40,14 @@ class UpgradeApp extends Command
     public function handle()
     {
         $this->info('Upgrading your application to version ' . $this->argument('version'));
+        $this->call('down');
 
         // Version 1.6
         if ($this->argument('version') === 'v1.6') {
             $this->version_1_6();
         }
 
+        $this->call('up');
         $this->info('Your application was upgraded! 🥳🥳🥳');
     }
 

app/Http/Controllers/Admin/UserController.php

@@ -5,14 +5,23 @@ namespace App\Http\Controllers\Admin;
 use App\FileManagerFile;
 use App\FileManagerFolder;
 use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\ChangeRoleRequest;
+use App\Http\Requests\Admin\ChangeStorageCapacityRequest;
+use App\Http\Requests\Admin\CreateUserByAdmin;
+use App\Http\Requests\Admin\DeleteUserRequest;
 use App\Http\Resources\UsersCollection;
 use App\Http\Resources\UserResource;
 use App\Http\Resources\UserStorageResource;
+use App\Http\Tools\Demo;
 use App\Share;
 use App\User;
+use App\UserSettings;
+use Illuminate\Contracts\Routing\ResponseFactory;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Password;
 use Illuminate\Support\Str;
 use Storage;
 
@@ -53,16 +62,19 @@ class UserController extends Controller
     /**
      * Change user role
      *
-     * @param Request $request
+     * @param ChangeRoleRequest $request
      * @param $id
      * @return UserResource
      */
-    public function change_role(Request $request, $id)
+    public function change_role(ChangeRoleRequest $request, $id)
     {
-        // TODO: validacia
-
         $user = User::findOrFail($id);
 
+        // Demo preview
+        if (env('APP_DEMO') && $id == 1) {
+            return new UserResource($user);
+        }
+
         $user->update($request->input('attributes'));
 
         return new UserResource($user);
@@ -71,14 +83,12 @@ class UserController extends Controller
     /**
      * Change user storage capacity
      *
-     * @param Request $request
+     * @param ChangeStorageCapacityRequest $request
      * @param $id
      * @return UserStorageResource
      */
-    public function change_storage_capacity(Request $request, $id)
+    public function change_storage_capacity(ChangeStorageCapacityRequest $request, $id)
     {
-        // TODO: validacia
-
         $user = User::findOrFail($id);
 
         $user->settings()->update($request->input('attributes'));
@@ -90,29 +100,76 @@ class UserController extends Controller
      * Send user password reset link
      *
      * @param $id
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
+     * @return ResponseFactory|\Illuminate\Http\Response
      */
     public function send_password_reset_email($id)
     {
         $user = User::findOrFail($id);
 
-        $user->sendPasswordResetNotification(Str::random(60));
+        // Demo preview
+        if (env('APP_DEMO')) {
+            return response('Done!', 204);
+        }
+
+        // Get password token
+        $token = Password::getRepository()->create($user);
+
+        // Send user email
+        $user->sendPasswordResetNotification($token);
 
         return response('Done!', 204);
     }
 
+    /**
+     * Create new user by admin
+     *
+     * @param CreateUserByAdmin $request
+     * @return UserResource
+     */
+    public function create_user(CreateUserByAdmin $request)
+    {
+        // Store avatar
+        if ($request->hasFile('avatar')) {
+
+            // Update avatar
+            $avatar = store_avatar($request->file('avatar'), 'avatars');
+        }
+
+        // Create user
+        $user = User::create([
+            'avatar'   => $request->hasFile('avatar') ? $avatar : null,
+            'name'     => $request->name,
+            'role'     => $request->role,
+            'email'    => $request->email,
+            'password' => Hash::make($request->password),
+        ]);
+
+        // Create settings
+        $settings = UserSettings::create([
+            'user_id'          => $user->id,
+            'storage_capacity' => $request->storage_capacity,
+        ]);
+
+        return new UserResource($user);
+    }
+
     /**
      * Delete user with all user data
      *
-     * @param Request $request
+     * @param DeleteUserRequest $request
      * @param $id
-     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
+     * @return ResponseFactory|\Illuminate\Http\Response
      * @throws \Exception
      */
-    public function delete_user(Request $request, $id)
+    public function delete_user(DeleteUserRequest $request, $id)
     {
         $user = User::findOrFail($id);
 
+        // Demo preview
+        if (env('APP_DEMO')) {
+            return response('Done!', 204);
+        }
+
         // Check for self deleted account
         if ($user->id === Auth::id()) {
             abort(406, 'You can\'t delete your account');
@@ -121,9 +178,13 @@ class UserController extends Controller
         // Validate user name
         if ($user->name !== $request->name) abort(403);
 
-        $files = FileManagerFile::where('user_id', $user->id)->get();
         $shares = Share::where('user_id', $user->id)->get();
-        $folders = FileManagerFolder::where('user_id', $user->id)->get();
+        $files = FileManagerFile::withTrashed()
+            ->where('user_id', $user->id)
+            ->get();
+        $folders = FileManagerFolder::withTrashed()
+            ->where('user_id', $user->id)
+            ->get();
 
         // Remove all files and thumbnails
         $files->each(function ($file) {

app/Http/Controllers/User/AccountController.php

@@ -42,8 +42,8 @@ class AccountController extends Controller
             'tree'       => $tree,
             'storage'    => [
                 'used'       => Metric::bytes($user->used_capacity)->format(),
-                'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
+                'capacity'   => format_gigabytes($user->settings->storage_capacity),
-                'percentage' => get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity')),
+                'percentage' => get_storage_fill_percentage($user->used_capacity, $user->settings->storage_capacity),
             ],
         ];
     }

app/Http/Requests/Admin/ChangeRoleRequest.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Requests\Admin;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ChangeRoleRequest 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 [
+            'attributes'      => 'required|array',
+            'attributes.role' => 'required|string'
+        ];
+    }
+}

app/Http/Requests/Admin/ChangeStorageCapacityRequest.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Requests\Admin;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ChangeStorageCapacityRequest 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 [
+            'attributes'                  => 'required|array',
+            'attributes.storage_capacity' => 'required|digits_between:1,9'
+        ];
+    }
+}

app/Http/Requests/Admin/CreateUserByAdmin.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Requests\Admin;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class CreateUserByAdmin 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|max:255|unique:users',
+            'password'         => 'required|string|min:6|confirmed',
+            'name'             => 'required|string|max:255',
+            'storage_capacity' => 'required|digits_between:1,9',
+            'role'             => 'required|string',
+            'avatar'           => 'sometimes|file',
+        ];
+    }
+}

app/Http/Requests/Admin/DeleteUserRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests\Admin;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class DeleteUserRequest 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|max:255',
+        ];
+    }
+}

app/Http/Resources/UserResource.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources;
 
+use Faker\Factory;
 use Illuminate\Http\Resources\Json\JsonResource;
 
 class UserResource extends JsonResource
@@ -14,16 +15,20 @@ class UserResource extends JsonResource
      */
     public function toArray($request)
     {
+        // Faker only for demo purpose
+        $faker = Factory::create();
+
         return [
             'data' => [
                 'id'         => (string)$this->id,
                 'type'       => 'user',
                 'attributes' => [
-                    'name'       => $this->name,
+                    'name'                 => env('APP_DEMO') ? $faker->name : $this->name,
-                    'email'      => $this->email,
+                    'email'                => env('APP_DEMO') ? $faker->email : $this->email,
                     'avatar'               => $this->avatar,
                     'role'                 => $this->role,
                     'storage'              => $this->storage,
+                    'created_at_formatted' => format_date($this->created_at, '%d. %B. %Y'),
                     'created_at'           => $this->created_at,
                     'updated_at'           => $this->updated_at,
                 ]

app/Http/helpers.php

@@ -221,7 +221,7 @@ function user_storage_percentage()
 {
     $user = Auth::user();
 
-    return get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity'));
+    return get_storage_fill_percentage($user->used_capacity, $user->settings->storage_capacity);
 }
 
 /**

config/app.php

@@ -80,7 +80,7 @@ return [
     |
     */
 
-    'locale' => 'sk',
+    'locale' => 'en',
 
     /*
     |--------------------------------------------------------------------------

config/vuefilemanager.php

@@ -2,7 +2,7 @@
 
 return [
 
-    'version' => '1.5.1',
+    'version' => '1.6',
 
     // Your app name
     'app_name' => 'VueFileManager',
@@ -15,7 +15,4 @@ return [
 
     // Limit your storage size for every user if this option is enabled
     'limit_storage_by_capacity' => true,
-
-    // Define user storage capacity in MB. E.g. value 2000 is 2.00GB
-    'user_storage_capacity' => 5000,
 ];

database/migrations/2020_05_26_092649_create_user_settings_table.php

@@ -16,7 +16,7 @@ class CreateUserSettingsTable extends Migration
         Schema::create('user_settings', function (Blueprint $table) {
             $table->bigIncrements('id');
             $table->integer('user_id');
-            $table->integer('storage_capacity')->default(2);
+            $table->integer('storage_capacity')->default(5);
         });
     }
 

package-lock.json

@@ -2760,11 +2760,6 @@
                 "timsort": "^0.3.0"
             }
         },
-        "css-element-queries": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
-            "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
-        },
         "css-loader": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",

package.json

@@ -21,7 +21,6 @@
         "@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.14.0",
         "vee-validate": "^3.3.0",

public/mix-manifest.json

@@ -1,596 +1,4 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css",
+    "/css/app.css": "/css/app.css"
-    "/js/main.3dd338451f68970bced1.hot-update.js": "/js/main.3dd338451f68970bced1.hot-update.js",
-    "/js/main.12aa9f4ce802ec82ab8c.hot-update.js": "/js/main.12aa9f4ce802ec82ab8c.hot-update.js",
-    "/js/main.ac9451e97022a3960780.hot-update.js": "/js/main.ac9451e97022a3960780.hot-update.js",
-    "/js/main.96ef714ce250baa3d14c.hot-update.js": "/js/main.96ef714ce250baa3d14c.hot-update.js",
-    "/js/main.c10c3165a75768c3dfad.hot-update.js": "/js/main.c10c3165a75768c3dfad.hot-update.js",
-    "/js/main.11a79a95575d94a05192.hot-update.js": "/js/main.11a79a95575d94a05192.hot-update.js",
-    "/js/main.26f16d86d2e67e50e7ac.hot-update.js": "/js/main.26f16d86d2e67e50e7ac.hot-update.js",
-    "/js/main.3bb21f8a47bcf5d1e40b.hot-update.js": "/js/main.3bb21f8a47bcf5d1e40b.hot-update.js",
-    "/js/main.c681a17a89abb4213188.hot-update.js": "/js/main.c681a17a89abb4213188.hot-update.js",
-    "/js/main.f05200d62a725048de95.hot-update.js": "/js/main.f05200d62a725048de95.hot-update.js",
-    "/js/main.fa55081afcc42cf95592.hot-update.js": "/js/main.fa55081afcc42cf95592.hot-update.js",
-    "/js/main.5ca387780ae24431224f.hot-update.js": "/js/main.5ca387780ae24431224f.hot-update.js",
-    "/js/main.35abfc4583013de328a3.hot-update.js": "/js/main.35abfc4583013de328a3.hot-update.js",
-    "/js/main.d639949d61b0f5211702.hot-update.js": "/js/main.d639949d61b0f5211702.hot-update.js",
-    "/js/main.a3da9f4a03887a8d53cf.hot-update.js": "/js/main.a3da9f4a03887a8d53cf.hot-update.js",
-    "/js/main.6ca04fe98a6d09989dc5.hot-update.js": "/js/main.6ca04fe98a6d09989dc5.hot-update.js",
-    "/js/main.d910955a3c506cbe530f.hot-update.js": "/js/main.d910955a3c506cbe530f.hot-update.js",
-    "/js/main.8309bd19779407d2e263.hot-update.js": "/js/main.8309bd19779407d2e263.hot-update.js",
-    "/js/main.07b95c2e1360b15d8723.hot-update.js": "/js/main.07b95c2e1360b15d8723.hot-update.js",
-    "/js/main.55d63eb9f0fdd04c8de3.hot-update.js": "/js/main.55d63eb9f0fdd04c8de3.hot-update.js",
-    "/js/main.162034794ea3728179ec.hot-update.js": "/js/main.162034794ea3728179ec.hot-update.js",
-    "/js/main.32468c633a8bbb0a8383.hot-update.js": "/js/main.32468c633a8bbb0a8383.hot-update.js",
-    "/js/main.401e26f939b385f8a9df.hot-update.js": "/js/main.401e26f939b385f8a9df.hot-update.js",
-    "/js/main.5a894d8e1dd217203b4d.hot-update.js": "/js/main.5a894d8e1dd217203b4d.hot-update.js",
-    "/js/main.27b3b4e1f8baa8ceda59.hot-update.js": "/js/main.27b3b4e1f8baa8ceda59.hot-update.js",
-    "/js/main.f4692b60b34ca492cad0.hot-update.js": "/js/main.f4692b60b34ca492cad0.hot-update.js",
-    "/js/main.51f7eb251bf11b33f90e.hot-update.js": "/js/main.51f7eb251bf11b33f90e.hot-update.js",
-    "/js/main.9f1d7d189c6a60640d91.hot-update.js": "/js/main.9f1d7d189c6a60640d91.hot-update.js",
-    "/js/main.7717f5b0770ee4c578fa.hot-update.js": "/js/main.7717f5b0770ee4c578fa.hot-update.js",
-    "/js/main.65c424d53e39ee7a201c.hot-update.js": "/js/main.65c424d53e39ee7a201c.hot-update.js",
-    "/js/main.b71f1df797e730b212a4.hot-update.js": "/js/main.b71f1df797e730b212a4.hot-update.js",
-    "/js/main.5e6e4c0ff92f3adafbc7.hot-update.js": "/js/main.5e6e4c0ff92f3adafbc7.hot-update.js",
-    "/js/main.1750cfe36af5d795204b.hot-update.js": "/js/main.1750cfe36af5d795204b.hot-update.js",
-    "/js/main.b5bf78ecab782aa1d2ca.hot-update.js": "/js/main.b5bf78ecab782aa1d2ca.hot-update.js",
-    "/js/main.e1b27577aa188bbebf6d.hot-update.js": "/js/main.e1b27577aa188bbebf6d.hot-update.js",
-    "/js/main.01e734ac264d3f69d10d.hot-update.js": "/js/main.01e734ac264d3f69d10d.hot-update.js",
-    "/js/main.39d92351aeacbe9d03eb.hot-update.js": "/js/main.39d92351aeacbe9d03eb.hot-update.js",
-    "/js/main.faba3be6e0aa2ac30696.hot-update.js": "/js/main.faba3be6e0aa2ac30696.hot-update.js",
-    "/js/main.685d1b28512dae4824c7.hot-update.js": "/js/main.685d1b28512dae4824c7.hot-update.js",
-    "/js/main.49dca14393d54f6e6f40.hot-update.js": "/js/main.49dca14393d54f6e6f40.hot-update.js",
-    "/js/main.80789257a533bca9204e.hot-update.js": "/js/main.80789257a533bca9204e.hot-update.js",
-    "/js/main.e3c90d040ecf55e850bc.hot-update.js": "/js/main.e3c90d040ecf55e850bc.hot-update.js",
-    "/js/main.e60ab11c10f6b1d015b1.hot-update.js": "/js/main.e60ab11c10f6b1d015b1.hot-update.js",
-    "/js/main.0f4253f0d3b275136bfa.hot-update.js": "/js/main.0f4253f0d3b275136bfa.hot-update.js",
-    "/js/main.6f9904f98d825db125bb.hot-update.js": "/js/main.6f9904f98d825db125bb.hot-update.js",
-    "/js/main.31a7e14b76e73e0334eb.hot-update.js": "/js/main.31a7e14b76e73e0334eb.hot-update.js",
-    "/js/main.992f11a2f9d6afff9625.hot-update.js": "/js/main.992f11a2f9d6afff9625.hot-update.js",
-    "/js/main.aaa19efd57ff4afe70cc.hot-update.js": "/js/main.aaa19efd57ff4afe70cc.hot-update.js",
-    "/js/main.19c7d026fea62a313d35.hot-update.js": "/js/main.19c7d026fea62a313d35.hot-update.js",
-    "/js/main.3680b10e4fa3ad09b233.hot-update.js": "/js/main.3680b10e4fa3ad09b233.hot-update.js",
-    "/js/main.27966d137d03a7a57ab5.hot-update.js": "/js/main.27966d137d03a7a57ab5.hot-update.js",
-    "/js/main.9d94a6dc68b6a295c96c.hot-update.js": "/js/main.9d94a6dc68b6a295c96c.hot-update.js",
-    "/js/main.c984e054dd0f73e7359e.hot-update.js": "/js/main.c984e054dd0f73e7359e.hot-update.js",
-    "/js/main.983c9d320d9e9f68574a.hot-update.js": "/js/main.983c9d320d9e9f68574a.hot-update.js",
-    "/js/main.7e6fa243dec77037b5f1.hot-update.js": "/js/main.7e6fa243dec77037b5f1.hot-update.js",
-    "/js/main.a6304cf09eea8f946e7c.hot-update.js": "/js/main.a6304cf09eea8f946e7c.hot-update.js",
-    "/js/main.ba25a8e45b2915263cf3.hot-update.js": "/js/main.ba25a8e45b2915263cf3.hot-update.js",
-    "/js/main.fd8e81c8bd79bed667b4.hot-update.js": "/js/main.fd8e81c8bd79bed667b4.hot-update.js",
-    "/js/main.844b417efcacd8cce4a1.hot-update.js": "/js/main.844b417efcacd8cce4a1.hot-update.js",
-    "/js/main.c30c439e4f9e31652022.hot-update.js": "/js/main.c30c439e4f9e31652022.hot-update.js",
-    "/js/main.2d332a34e81de59dcc75.hot-update.js": "/js/main.2d332a34e81de59dcc75.hot-update.js",
-    "/js/main.d9413ceed539ae61b4e0.hot-update.js": "/js/main.d9413ceed539ae61b4e0.hot-update.js",
-    "/js/main.e2d00402318077a58342.hot-update.js": "/js/main.e2d00402318077a58342.hot-update.js",
-    "/js/main.57220b2ddb8c08143623.hot-update.js": "/js/main.57220b2ddb8c08143623.hot-update.js",
-    "/js/main.38e6f6cddd4177bbc7df.hot-update.js": "/js/main.38e6f6cddd4177bbc7df.hot-update.js",
-    "/js/main.67d60bda48c1d66c227a.hot-update.js": "/js/main.67d60bda48c1d66c227a.hot-update.js",
-    "/js/main.9643094933d6d1a99414.hot-update.js": "/js/main.9643094933d6d1a99414.hot-update.js",
-    "/js/main.affa048cb045db174681.hot-update.js": "/js/main.affa048cb045db174681.hot-update.js",
-    "/js/main.602cdb8b7e823262b2b4.hot-update.js": "/js/main.602cdb8b7e823262b2b4.hot-update.js",
-    "/js/main.ec31c2cf87c9716df434.hot-update.js": "/js/main.ec31c2cf87c9716df434.hot-update.js",
-    "/js/main.ea60eeabc27d31a06c4a.hot-update.js": "/js/main.ea60eeabc27d31a06c4a.hot-update.js",
-    "/js/main.3acda460b68c9f62b77d.hot-update.js": "/js/main.3acda460b68c9f62b77d.hot-update.js",
-    "/js/main.22abf00bbbabf09b2c00.hot-update.js": "/js/main.22abf00bbbabf09b2c00.hot-update.js",
-    "/js/main.99e50940b823005382e7.hot-update.js": "/js/main.99e50940b823005382e7.hot-update.js",
-    "/js/main.9117dd9b5b80e862f7b4.hot-update.js": "/js/main.9117dd9b5b80e862f7b4.hot-update.js",
-    "/js/main.679ee415f6f8b290db04.hot-update.js": "/js/main.679ee415f6f8b290db04.hot-update.js",
-    "/js/main.5ee24a6a5ce23f4218d8.hot-update.js": "/js/main.5ee24a6a5ce23f4218d8.hot-update.js",
-    "/js/main.ebb98b8a760572080377.hot-update.js": "/js/main.ebb98b8a760572080377.hot-update.js",
-    "/js/main.42bf899fbafa44b0d42f.hot-update.js": "/js/main.42bf899fbafa44b0d42f.hot-update.js",
-    "/js/main.15a3fdd6dd60700ec140.hot-update.js": "/js/main.15a3fdd6dd60700ec140.hot-update.js",
-    "/js/main.5bf56dcbc2b85c8673ac.hot-update.js": "/js/main.5bf56dcbc2b85c8673ac.hot-update.js",
-    "/js/main.785e0567878425632d34.hot-update.js": "/js/main.785e0567878425632d34.hot-update.js",
-    "/js/main.34c5ef7944985d704df2.hot-update.js": "/js/main.34c5ef7944985d704df2.hot-update.js",
-    "/js/main.1df92a748dcd37c12a5f.hot-update.js": "/js/main.1df92a748dcd37c12a5f.hot-update.js",
-    "/js/main.7dd9e539cc46595f50d0.hot-update.js": "/js/main.7dd9e539cc46595f50d0.hot-update.js",
-    "/js/main.c30c3eeb4e46167c21f3.hot-update.js": "/js/main.c30c3eeb4e46167c21f3.hot-update.js",
-    "/js/main.11c641a71c4437cff0c3.hot-update.js": "/js/main.11c641a71c4437cff0c3.hot-update.js",
-    "/js/main.3174dd18f1ba5ef8a7c0.hot-update.js": "/js/main.3174dd18f1ba5ef8a7c0.hot-update.js",
-    "/js/main.08857808de18ceb9627a.hot-update.js": "/js/main.08857808de18ceb9627a.hot-update.js",
-    "/js/main.f31b23ed6521d18096d9.hot-update.js": "/js/main.f31b23ed6521d18096d9.hot-update.js",
-    "/js/main.3baa84b7c57c17f3541b.hot-update.js": "/js/main.3baa84b7c57c17f3541b.hot-update.js",
-    "/js/main.96e5f338043127621426.hot-update.js": "/js/main.96e5f338043127621426.hot-update.js",
-    "/js/main.cf0184e277041a611954.hot-update.js": "/js/main.cf0184e277041a611954.hot-update.js",
-    "/js/main.752a36cf27a4a9756af1.hot-update.js": "/js/main.752a36cf27a4a9756af1.hot-update.js",
-    "/js/main.c4acadee860b4247f07f.hot-update.js": "/js/main.c4acadee860b4247f07f.hot-update.js",
-    "/js/main.97ca100040cbee688d32.hot-update.js": "/js/main.97ca100040cbee688d32.hot-update.js",
-    "/js/main.e8146d7be692f527b9a5.hot-update.js": "/js/main.e8146d7be692f527b9a5.hot-update.js",
-    "/js/main.c1049ee8db07c983857e.hot-update.js": "/js/main.c1049ee8db07c983857e.hot-update.js",
-    "/js/main.ded820bc44fc14a17525.hot-update.js": "/js/main.ded820bc44fc14a17525.hot-update.js",
-    "/js/main.e5c549662135fa583704.hot-update.js": "/js/main.e5c549662135fa583704.hot-update.js",
-    "/js/main.265c793ad1f387bdd074.hot-update.js": "/js/main.265c793ad1f387bdd074.hot-update.js",
-    "/js/main.9b95eb50849b686101b6.hot-update.js": "/js/main.9b95eb50849b686101b6.hot-update.js",
-    "/js/main.1219dbfc5609325eb25d.hot-update.js": "/js/main.1219dbfc5609325eb25d.hot-update.js",
-    "/js/main.a2ed8ea896eb2721a542.hot-update.js": "/js/main.a2ed8ea896eb2721a542.hot-update.js",
-    "/js/main.a08bc97fa3ae43e36ea4.hot-update.js": "/js/main.a08bc97fa3ae43e36ea4.hot-update.js",
-    "/js/main.70c82919cb2d7e586652.hot-update.js": "/js/main.70c82919cb2d7e586652.hot-update.js",
-    "/js/main.902ae71f1eab4a6bb682.hot-update.js": "/js/main.902ae71f1eab4a6bb682.hot-update.js",
-    "/js/main.d182617879fcda92ef75.hot-update.js": "/js/main.d182617879fcda92ef75.hot-update.js",
-    "/js/main.cacbf012ad28c1cc87f2.hot-update.js": "/js/main.cacbf012ad28c1cc87f2.hot-update.js",
-    "/js/main.54cabf2dc7a1d20a138a.hot-update.js": "/js/main.54cabf2dc7a1d20a138a.hot-update.js",
-    "/js/main.38eb47fc025ea2ca8f68.hot-update.js": "/js/main.38eb47fc025ea2ca8f68.hot-update.js",
-    "/js/main.f2b24a13f43a1b88d6be.hot-update.js": "/js/main.f2b24a13f43a1b88d6be.hot-update.js",
-    "/js/main.b9a22c04d9be75b6cc2d.hot-update.js": "/js/main.b9a22c04d9be75b6cc2d.hot-update.js",
-    "/js/main.7679a90861df68c8b25f.hot-update.js": "/js/main.7679a90861df68c8b25f.hot-update.js",
-    "/js/main.4a3f94a6334393d78a24.hot-update.js": "/js/main.4a3f94a6334393d78a24.hot-update.js",
-    "/js/main.0acb519adc2ff5c9b572.hot-update.js": "/js/main.0acb519adc2ff5c9b572.hot-update.js",
-    "/js/main.9bd6ccc9e674692083de.hot-update.js": "/js/main.9bd6ccc9e674692083de.hot-update.js",
-    "/js/main.d0a62850c64b990680a7.hot-update.js": "/js/main.d0a62850c64b990680a7.hot-update.js",
-    "/js/main.5dd561bc7454aaed1d0b.hot-update.js": "/js/main.5dd561bc7454aaed1d0b.hot-update.js",
-    "/js/main.1466dae6e7fd275b72d1.hot-update.js": "/js/main.1466dae6e7fd275b72d1.hot-update.js",
-    "/js/main.f84dbdaa089465c479bb.hot-update.js": "/js/main.f84dbdaa089465c479bb.hot-update.js",
-    "/js/main.03d7a06820c81e14f19c.hot-update.js": "/js/main.03d7a06820c81e14f19c.hot-update.js",
-    "/js/main.a4b8f92663ea36d1328f.hot-update.js": "/js/main.a4b8f92663ea36d1328f.hot-update.js",
-    "/js/main.d467838e18c3696ed04c.hot-update.js": "/js/main.d467838e18c3696ed04c.hot-update.js",
-    "/js/main.cc5b7d43f9a1a161c5d9.hot-update.js": "/js/main.cc5b7d43f9a1a161c5d9.hot-update.js",
-    "/js/main.867b8e99fda93930eb14.hot-update.js": "/js/main.867b8e99fda93930eb14.hot-update.js",
-    "/js/main.e500397c4ae68832ddbf.hot-update.js": "/js/main.e500397c4ae68832ddbf.hot-update.js",
-    "/js/main.6bb784d64f5eca11cb08.hot-update.js": "/js/main.6bb784d64f5eca11cb08.hot-update.js",
-    "/js/main.538e8e9ae9ad265d2984.hot-update.js": "/js/main.538e8e9ae9ad265d2984.hot-update.js",
-    "/js/main.83351684a0cca0f3c3c6.hot-update.js": "/js/main.83351684a0cca0f3c3c6.hot-update.js",
-    "/js/main.c7950fcdf2b461e09d74.hot-update.js": "/js/main.c7950fcdf2b461e09d74.hot-update.js",
-    "/js/main.67cee5b5e90ac8da7a05.hot-update.js": "/js/main.67cee5b5e90ac8da7a05.hot-update.js",
-    "/js/main.2cf1fc5ad3da25630a3c.hot-update.js": "/js/main.2cf1fc5ad3da25630a3c.hot-update.js",
-    "/js/main.b4caece028fd99ff7ec1.hot-update.js": "/js/main.b4caece028fd99ff7ec1.hot-update.js",
-    "/js/main.4edee0365fad4160993c.hot-update.js": "/js/main.4edee0365fad4160993c.hot-update.js",
-    "/js/main.5f8c1cd4f3148c990e0c.hot-update.js": "/js/main.5f8c1cd4f3148c990e0c.hot-update.js",
-    "/js/main.2cacdf693a5728a2d578.hot-update.js": "/js/main.2cacdf693a5728a2d578.hot-update.js",
-    "/js/main.fd9727b378d5ab57594c.hot-update.js": "/js/main.fd9727b378d5ab57594c.hot-update.js",
-    "/js/main.8228744ab97ee2fc5f8a.hot-update.js": "/js/main.8228744ab97ee2fc5f8a.hot-update.js",
-    "/js/main.1880ceaddef0e4cf107a.hot-update.js": "/js/main.1880ceaddef0e4cf107a.hot-update.js",
-    "/js/main.b837177c28e88161bd2b.hot-update.js": "/js/main.b837177c28e88161bd2b.hot-update.js",
-    "/js/main.e2f7f9744d79b6ba0cf2.hot-update.js": "/js/main.e2f7f9744d79b6ba0cf2.hot-update.js",
-    "/js/main.2e52098fd255fe911193.hot-update.js": "/js/main.2e52098fd255fe911193.hot-update.js",
-    "/js/main.c2b2fd355d1d8e8345af.hot-update.js": "/js/main.c2b2fd355d1d8e8345af.hot-update.js",
-    "/js/main.4526aa0aa070815c9c87.hot-update.js": "/js/main.4526aa0aa070815c9c87.hot-update.js",
-    "/js/main.0197d9423a21c0106b00.hot-update.js": "/js/main.0197d9423a21c0106b00.hot-update.js",
-    "/js/main.8bb0c4112b3eca66259c.hot-update.js": "/js/main.8bb0c4112b3eca66259c.hot-update.js",
-    "/js/main.9ff07430092394888962.hot-update.js": "/js/main.9ff07430092394888962.hot-update.js",
-    "/js/main.2102905dbd97295c6b0a.hot-update.js": "/js/main.2102905dbd97295c6b0a.hot-update.js",
-    "/js/main.adea7c5d35e5bb537304.hot-update.js": "/js/main.adea7c5d35e5bb537304.hot-update.js",
-    "/js/main.3a82d97bb4635db8836f.hot-update.js": "/js/main.3a82d97bb4635db8836f.hot-update.js",
-    "/js/main.a474bc6795594cb1f223.hot-update.js": "/js/main.a474bc6795594cb1f223.hot-update.js",
-    "/js/main.94ae243f6a5c87096cc7.hot-update.js": "/js/main.94ae243f6a5c87096cc7.hot-update.js",
-    "/js/main.7024a72399bceb3f1b67.hot-update.js": "/js/main.7024a72399bceb3f1b67.hot-update.js",
-    "/js/main.58bbaca231a35c626621.hot-update.js": "/js/main.58bbaca231a35c626621.hot-update.js",
-    "/js/main.133b7a1008de3fe604f9.hot-update.js": "/js/main.133b7a1008de3fe604f9.hot-update.js",
-    "/js/main.0915482bfe1fc341d3dd.hot-update.js": "/js/main.0915482bfe1fc341d3dd.hot-update.js",
-    "/js/main.7d2e8c281941c5cbe36b.hot-update.js": "/js/main.7d2e8c281941c5cbe36b.hot-update.js",
-    "/js/main.8a9c00bdbaf1603acc1a.hot-update.js": "/js/main.8a9c00bdbaf1603acc1a.hot-update.js",
-    "/js/main.f60b9250b23297ad206a.hot-update.js": "/js/main.f60b9250b23297ad206a.hot-update.js",
-    "/js/main.6fcbe91675fb6b692eff.hot-update.js": "/js/main.6fcbe91675fb6b692eff.hot-update.js",
-    "/js/main.0fb17ea70124f2657d5b.hot-update.js": "/js/main.0fb17ea70124f2657d5b.hot-update.js",
-    "/js/main.60d1fbd33000af13d00a.hot-update.js": "/js/main.60d1fbd33000af13d00a.hot-update.js",
-    "/js/main.bf5d82b21fe67a3e10db.hot-update.js": "/js/main.bf5d82b21fe67a3e10db.hot-update.js",
-    "/js/main.97a4d4d9f3a33b950b2f.hot-update.js": "/js/main.97a4d4d9f3a33b950b2f.hot-update.js",
-    "/js/main.24e04c5666f61600a4bc.hot-update.js": "/js/main.24e04c5666f61600a4bc.hot-update.js",
-    "/js/main.8d2c76c4a562fd7df04a.hot-update.js": "/js/main.8d2c76c4a562fd7df04a.hot-update.js",
-    "/js/main.d76607f83c3a844509dc.hot-update.js": "/js/main.d76607f83c3a844509dc.hot-update.js",
-    "/js/main.1212e0e8334c2d9a3b01.hot-update.js": "/js/main.1212e0e8334c2d9a3b01.hot-update.js",
-    "/js/main.8f6b799ec1877d6f6ed7.hot-update.js": "/js/main.8f6b799ec1877d6f6ed7.hot-update.js",
-    "/js/main.99e789c12ea6a66724f6.hot-update.js": "/js/main.99e789c12ea6a66724f6.hot-update.js",
-    "/js/main.cff69f42e5bd05df1e4c.hot-update.js": "/js/main.cff69f42e5bd05df1e4c.hot-update.js",
-    "/js/main.616e7949b6c4ea9ccf1b.hot-update.js": "/js/main.616e7949b6c4ea9ccf1b.hot-update.js",
-    "/js/main.e38ef07df9b010c415c4.hot-update.js": "/js/main.e38ef07df9b010c415c4.hot-update.js",
-    "/js/main.c865e11b85afd2e5859a.hot-update.js": "/js/main.c865e11b85afd2e5859a.hot-update.js",
-    "/js/main.5f12b58cc6d46c0ae987.hot-update.js": "/js/main.5f12b58cc6d46c0ae987.hot-update.js",
-    "/js/main.3ce7cbe46319cf6c220b.hot-update.js": "/js/main.3ce7cbe46319cf6c220b.hot-update.js",
-    "/js/main.b156c8d68be4198a1e7d.hot-update.js": "/js/main.b156c8d68be4198a1e7d.hot-update.js",
-    "/js/main.6bbdd4d3c8dee6b7807d.hot-update.js": "/js/main.6bbdd4d3c8dee6b7807d.hot-update.js",
-    "/js/main.3c34a196761307ee1fbd.hot-update.js": "/js/main.3c34a196761307ee1fbd.hot-update.js",
-    "/js/main.e23c720cff8d7a9b8127.hot-update.js": "/js/main.e23c720cff8d7a9b8127.hot-update.js",
-    "/js/main.880609348582800d0f1e.hot-update.js": "/js/main.880609348582800d0f1e.hot-update.js",
-    "/js/main.5b67efe97f269a08c61b.hot-update.js": "/js/main.5b67efe97f269a08c61b.hot-update.js",
-    "/js/main.2d94634b9757405abcfd.hot-update.js": "/js/main.2d94634b9757405abcfd.hot-update.js",
-    "/js/main.97a09d50b1e1f222f355.hot-update.js": "/js/main.97a09d50b1e1f222f355.hot-update.js",
-    "/js/main.161a77a8377c67308c48.hot-update.js": "/js/main.161a77a8377c67308c48.hot-update.js",
-    "/js/main.849e1e0ae42f8139bfeb.hot-update.js": "/js/main.849e1e0ae42f8139bfeb.hot-update.js",
-    "/js/main.9ad2902da71cc6efddb3.hot-update.js": "/js/main.9ad2902da71cc6efddb3.hot-update.js",
-    "/js/main.e158f155f9edd0714130.hot-update.js": "/js/main.e158f155f9edd0714130.hot-update.js",
-    "/js/main.ae1b372db472bcf35cd7.hot-update.js": "/js/main.ae1b372db472bcf35cd7.hot-update.js",
-    "/js/main.64df6c87a347bace510c.hot-update.js": "/js/main.64df6c87a347bace510c.hot-update.js",
-    "/js/main.2a72ff431324305189c1.hot-update.js": "/js/main.2a72ff431324305189c1.hot-update.js",
-    "/js/main.fd43c016473ae0d3b74b.hot-update.js": "/js/main.fd43c016473ae0d3b74b.hot-update.js",
-    "/js/main.9b2ba99ecf1612657b34.hot-update.js": "/js/main.9b2ba99ecf1612657b34.hot-update.js",
-    "/js/main.23d70fe952adda867efb.hot-update.js": "/js/main.23d70fe952adda867efb.hot-update.js",
-    "/js/main.95c6064d19277a6de5c3.hot-update.js": "/js/main.95c6064d19277a6de5c3.hot-update.js",
-    "/js/main.fefcf8f92641da936085.hot-update.js": "/js/main.fefcf8f92641da936085.hot-update.js",
-    "/js/main.0df4b67f371dc0ca62c6.hot-update.js": "/js/main.0df4b67f371dc0ca62c6.hot-update.js",
-    "/js/main.703055e59498de76fc04.hot-update.js": "/js/main.703055e59498de76fc04.hot-update.js",
-    "/js/main.2ec6c1d28a367ce37a2f.hot-update.js": "/js/main.2ec6c1d28a367ce37a2f.hot-update.js",
-    "/js/main.1dedc621ab109f9095c1.hot-update.js": "/js/main.1dedc621ab109f9095c1.hot-update.js",
-    "/js/main.4ebeb357417b1c2daac2.hot-update.js": "/js/main.4ebeb357417b1c2daac2.hot-update.js",
-    "/js/main.3a042ad46f00aeac3719.hot-update.js": "/js/main.3a042ad46f00aeac3719.hot-update.js",
-    "/js/main.a3a7e1e0ad636eab7f1d.hot-update.js": "/js/main.a3a7e1e0ad636eab7f1d.hot-update.js",
-    "/js/main.012566f521bac6801a90.hot-update.js": "/js/main.012566f521bac6801a90.hot-update.js",
-    "/js/main.74d0ead4f1126da59fa0.hot-update.js": "/js/main.74d0ead4f1126da59fa0.hot-update.js",
-    "/js/main.db13877043428e9c907d.hot-update.js": "/js/main.db13877043428e9c907d.hot-update.js",
-    "/js/main.c38d4d5fb58cec37301a.hot-update.js": "/js/main.c38d4d5fb58cec37301a.hot-update.js",
-    "/js/main.226a31a656ea8d6b04e2.hot-update.js": "/js/main.226a31a656ea8d6b04e2.hot-update.js",
-    "/js/main.5920fe4499c7cfafca9b.hot-update.js": "/js/main.5920fe4499c7cfafca9b.hot-update.js",
-    "/js/main.84688184553ff3085c5b.hot-update.js": "/js/main.84688184553ff3085c5b.hot-update.js",
-    "/js/main.9ca8e70e39f2d7aa662f.hot-update.js": "/js/main.9ca8e70e39f2d7aa662f.hot-update.js",
-    "/js/main.2406ec0a22e3031568a8.hot-update.js": "/js/main.2406ec0a22e3031568a8.hot-update.js",
-    "/js/main.fa74712a2135249d987e.hot-update.js": "/js/main.fa74712a2135249d987e.hot-update.js",
-    "/js/main.d8be0eca05198857eed3.hot-update.js": "/js/main.d8be0eca05198857eed3.hot-update.js",
-    "/js/main.a8500d295b09f56835b3.hot-update.js": "/js/main.a8500d295b09f56835b3.hot-update.js",
-    "/js/main.e2e8216e836c86e073fa.hot-update.js": "/js/main.e2e8216e836c86e073fa.hot-update.js",
-    "/js/main.d456488feef6366c9bc4.hot-update.js": "/js/main.d456488feef6366c9bc4.hot-update.js",
-    "/js/main.5b0f69aaed0d1d98c844.hot-update.js": "/js/main.5b0f69aaed0d1d98c844.hot-update.js",
-    "/js/main.762c49c4ea393cc2c217.hot-update.js": "/js/main.762c49c4ea393cc2c217.hot-update.js",
-    "/js/main.9efa2f6d279d8e501db2.hot-update.js": "/js/main.9efa2f6d279d8e501db2.hot-update.js",
-    "/js/main.5d2bcc06b7cad9589a55.hot-update.js": "/js/main.5d2bcc06b7cad9589a55.hot-update.js",
-    "/js/main.38ad0d501ac2b92681d1.hot-update.js": "/js/main.38ad0d501ac2b92681d1.hot-update.js",
-    "/js/main.92a5be0863e6af63144b.hot-update.js": "/js/main.92a5be0863e6af63144b.hot-update.js",
-    "/js/main.e3f30b334778b69f6c08.hot-update.js": "/js/main.e3f30b334778b69f6c08.hot-update.js",
-    "/js/main.85c0bac27eada871681f.hot-update.js": "/js/main.85c0bac27eada871681f.hot-update.js",
-    "/js/main.13035d54f03c789b16bf.hot-update.js": "/js/main.13035d54f03c789b16bf.hot-update.js",
-    "/js/main.1e3c72709bfff3eb8add.hot-update.js": "/js/main.1e3c72709bfff3eb8add.hot-update.js",
-    "/js/main.a518cf2cd048554cd180.hot-update.js": "/js/main.a518cf2cd048554cd180.hot-update.js",
-    "/js/main.bbad149905adb3374640.hot-update.js": "/js/main.bbad149905adb3374640.hot-update.js",
-    "/js/main.aabffd4cdfec3d6247d3.hot-update.js": "/js/main.aabffd4cdfec3d6247d3.hot-update.js",
-    "/js/main.5c46916c5e5b343e97d6.hot-update.js": "/js/main.5c46916c5e5b343e97d6.hot-update.js",
-    "/js/main.696b9f3ba9489e735b8e.hot-update.js": "/js/main.696b9f3ba9489e735b8e.hot-update.js",
-    "/js/main.72a88bff5c7de577ba2e.hot-update.js": "/js/main.72a88bff5c7de577ba2e.hot-update.js",
-    "/js/main.76470d1b934b8920a079.hot-update.js": "/js/main.76470d1b934b8920a079.hot-update.js",
-    "/js/main.503a81cfe038812213d3.hot-update.js": "/js/main.503a81cfe038812213d3.hot-update.js",
-    "/js/main.0060f2fec17f4d6403bb.hot-update.js": "/js/main.0060f2fec17f4d6403bb.hot-update.js",
-    "/js/main.dc162838263c29a98da2.hot-update.js": "/js/main.dc162838263c29a98da2.hot-update.js",
-    "/js/main.0de479293588cf9476e9.hot-update.js": "/js/main.0de479293588cf9476e9.hot-update.js",
-    "/js/main.6d5d15cf41166e6112d6.hot-update.js": "/js/main.6d5d15cf41166e6112d6.hot-update.js",
-    "/js/main.5a8f8ae2ccd08e2ddadf.hot-update.js": "/js/main.5a8f8ae2ccd08e2ddadf.hot-update.js",
-    "/js/main.1942136466672e64ce52.hot-update.js": "/js/main.1942136466672e64ce52.hot-update.js",
-    "/js/main.61d0c0d282d2c9ea2eae.hot-update.js": "/js/main.61d0c0d282d2c9ea2eae.hot-update.js",
-    "/js/main.46de3c5fd275ff33e2fc.hot-update.js": "/js/main.46de3c5fd275ff33e2fc.hot-update.js",
-    "/js/main.e2f966400ef1ab9cc6ce.hot-update.js": "/js/main.e2f966400ef1ab9cc6ce.hot-update.js",
-    "/js/main.83273b71e71333629687.hot-update.js": "/js/main.83273b71e71333629687.hot-update.js",
-    "/js/main.f9869afbdf50ab1e951f.hot-update.js": "/js/main.f9869afbdf50ab1e951f.hot-update.js",
-    "/js/main.508c6d33fc655d4437eb.hot-update.js": "/js/main.508c6d33fc655d4437eb.hot-update.js",
-    "/js/main.a2276a28d4b997e1c73a.hot-update.js": "/js/main.a2276a28d4b997e1c73a.hot-update.js",
-    "/js/main.4fc1706dc6c129db554c.hot-update.js": "/js/main.4fc1706dc6c129db554c.hot-update.js",
-    "/js/main.84ddc37731cb00b2f19a.hot-update.js": "/js/main.84ddc37731cb00b2f19a.hot-update.js",
-    "/js/main.a7d9f3b0792ce675e817.hot-update.js": "/js/main.a7d9f3b0792ce675e817.hot-update.js",
-    "/js/main.a0cdf17b4dda38b1978c.hot-update.js": "/js/main.a0cdf17b4dda38b1978c.hot-update.js",
-    "/js/main.0a391998abd625e76b1a.hot-update.js": "/js/main.0a391998abd625e76b1a.hot-update.js",
-    "/js/main.bf7d30138dde657bb97a.hot-update.js": "/js/main.bf7d30138dde657bb97a.hot-update.js",
-    "/js/main.ef9bfd7bc8df010d5a73.hot-update.js": "/js/main.ef9bfd7bc8df010d5a73.hot-update.js",
-    "/js/main.b44c12add2757434034d.hot-update.js": "/js/main.b44c12add2757434034d.hot-update.js",
-    "/js/main.4c8509954989d9384fa9.hot-update.js": "/js/main.4c8509954989d9384fa9.hot-update.js",
-    "/js/main.d82055bf577f17cc58df.hot-update.js": "/js/main.d82055bf577f17cc58df.hot-update.js",
-    "/js/main.706d54559faf6f9a7038.hot-update.js": "/js/main.706d54559faf6f9a7038.hot-update.js",
-    "/js/main.b1c80f859d4a36972a57.hot-update.js": "/js/main.b1c80f859d4a36972a57.hot-update.js",
-    "/js/main.8c883fec9181847cfa5f.hot-update.js": "/js/main.8c883fec9181847cfa5f.hot-update.js",
-    "/js/main.5c1482d20a8b9c735f66.hot-update.js": "/js/main.5c1482d20a8b9c735f66.hot-update.js",
-    "/js/main.275fcdd2aba1825be1da.hot-update.js": "/js/main.275fcdd2aba1825be1da.hot-update.js",
-    "/js/main.c0e733032101a53c7091.hot-update.js": "/js/main.c0e733032101a53c7091.hot-update.js",
-    "/js/main.13985c7bcfc8a93e2d98.hot-update.js": "/js/main.13985c7bcfc8a93e2d98.hot-update.js",
-    "/js/main.8c5589b89b5da3f7411b.hot-update.js": "/js/main.8c5589b89b5da3f7411b.hot-update.js",
-    "/js/main.008c1a12421fe6a1ab51.hot-update.js": "/js/main.008c1a12421fe6a1ab51.hot-update.js",
-    "/js/main.61a62f4c3033f74550ee.hot-update.js": "/js/main.61a62f4c3033f74550ee.hot-update.js",
-    "/js/main.eeba8c9ec1e9d679d877.hot-update.js": "/js/main.eeba8c9ec1e9d679d877.hot-update.js",
-    "/js/main.cf2d03bc9b613fb8beef.hot-update.js": "/js/main.cf2d03bc9b613fb8beef.hot-update.js",
-    "/js/main.6a833d0f875aec4535fb.hot-update.js": "/js/main.6a833d0f875aec4535fb.hot-update.js",
-    "/js/main.d8b05cb8d6f5bf38d8e8.hot-update.js": "/js/main.d8b05cb8d6f5bf38d8e8.hot-update.js",
-    "/js/main.fd16d46b903fe2f7b761.hot-update.js": "/js/main.fd16d46b903fe2f7b761.hot-update.js",
-    "/js/main.94804070af06423b1452.hot-update.js": "/js/main.94804070af06423b1452.hot-update.js",
-    "/js/main.6bf908a54e5a965dbd1e.hot-update.js": "/js/main.6bf908a54e5a965dbd1e.hot-update.js",
-    "/js/main.c000ef35e51d9cd6a0b8.hot-update.js": "/js/main.c000ef35e51d9cd6a0b8.hot-update.js",
-    "/js/main.13db06039f0bd3d98dec.hot-update.js": "/js/main.13db06039f0bd3d98dec.hot-update.js",
-    "/js/main.2847e9a0cfc1c33896a4.hot-update.js": "/js/main.2847e9a0cfc1c33896a4.hot-update.js",
-    "/js/main.49d075d76ddcdbe01bc0.hot-update.js": "/js/main.49d075d76ddcdbe01bc0.hot-update.js",
-    "/js/main.6fba33ffd26bb24744bc.hot-update.js": "/js/main.6fba33ffd26bb24744bc.hot-update.js",
-    "/js/main.48d7a515d3708857d024.hot-update.js": "/js/main.48d7a515d3708857d024.hot-update.js",
-    "/js/main.fcfaf10aa69ed54f7fff.hot-update.js": "/js/main.fcfaf10aa69ed54f7fff.hot-update.js",
-    "/js/main.ebcedc7c96c7dc29c909.hot-update.js": "/js/main.ebcedc7c96c7dc29c909.hot-update.js",
-    "/js/main.c47218fed726b2025111.hot-update.js": "/js/main.c47218fed726b2025111.hot-update.js",
-    "/js/main.1f1eea3f2998d7946ad3.hot-update.js": "/js/main.1f1eea3f2998d7946ad3.hot-update.js",
-    "/js/main.6f05dd58acd02e7a9ac8.hot-update.js": "/js/main.6f05dd58acd02e7a9ac8.hot-update.js",
-    "/js/main.645bcfc651a09fcd8b41.hot-update.js": "/js/main.645bcfc651a09fcd8b41.hot-update.js",
-    "/js/main.07b333e87eb1d23a18f0.hot-update.js": "/js/main.07b333e87eb1d23a18f0.hot-update.js",
-    "/js/main.32215b613e1338a88bcb.hot-update.js": "/js/main.32215b613e1338a88bcb.hot-update.js",
-    "/js/main.4d3a4fe80d9bcfc72394.hot-update.js": "/js/main.4d3a4fe80d9bcfc72394.hot-update.js",
-    "/js/main.ac9f729fd29150f923f9.hot-update.js": "/js/main.ac9f729fd29150f923f9.hot-update.js",
-    "/js/main.f55211322c4fbcc2031c.hot-update.js": "/js/main.f55211322c4fbcc2031c.hot-update.js",
-    "/js/main.68cf9d3e94cc40d219a2.hot-update.js": "/js/main.68cf9d3e94cc40d219a2.hot-update.js",
-    "/js/main.5813fefe31104adbf782.hot-update.js": "/js/main.5813fefe31104adbf782.hot-update.js",
-    "/js/main.d738b6b526450b7520b2.hot-update.js": "/js/main.d738b6b526450b7520b2.hot-update.js",
-    "/js/main.d66204e72db3353e0483.hot-update.js": "/js/main.d66204e72db3353e0483.hot-update.js",
-    "/js/main.efcc0ce1e5e9c2fb5826.hot-update.js": "/js/main.efcc0ce1e5e9c2fb5826.hot-update.js",
-    "/js/main.00203064a06eddb664a1.hot-update.js": "/js/main.00203064a06eddb664a1.hot-update.js",
-    "/js/main.acba202eee75ad0727e7.hot-update.js": "/js/main.acba202eee75ad0727e7.hot-update.js",
-    "/js/main.8b66d572ff040ba4b029.hot-update.js": "/js/main.8b66d572ff040ba4b029.hot-update.js",
-    "/js/main.5d811dc298f257054503.hot-update.js": "/js/main.5d811dc298f257054503.hot-update.js",
-    "/js/main.a5e7719581aa79b97d2b.hot-update.js": "/js/main.a5e7719581aa79b97d2b.hot-update.js",
-    "/js/main.fd30fcb079c5bcc6379a.hot-update.js": "/js/main.fd30fcb079c5bcc6379a.hot-update.js",
-    "/js/main.1e2e4209e075b83db8b0.hot-update.js": "/js/main.1e2e4209e075b83db8b0.hot-update.js",
-    "/js/main.66c75b2cc8f97e1333ce.hot-update.js": "/js/main.66c75b2cc8f97e1333ce.hot-update.js",
-    "/js/main.af073d1d0044d59c811a.hot-update.js": "/js/main.af073d1d0044d59c811a.hot-update.js",
-    "/js/main.61889adc59ce1c04de39.hot-update.js": "/js/main.61889adc59ce1c04de39.hot-update.js",
-    "/js/main.6effac6a7f232d4dd0eb.hot-update.js": "/js/main.6effac6a7f232d4dd0eb.hot-update.js",
-    "/js/main.28cd358437908784bc5e.hot-update.js": "/js/main.28cd358437908784bc5e.hot-update.js",
-    "/js/main.e97f1ffe9d4f314547aa.hot-update.js": "/js/main.e97f1ffe9d4f314547aa.hot-update.js",
-    "/js/main.cf8f745d1ebf84cfe831.hot-update.js": "/js/main.cf8f745d1ebf84cfe831.hot-update.js",
-    "/js/main.5ea27989e4de705036dd.hot-update.js": "/js/main.5ea27989e4de705036dd.hot-update.js",
-    "/js/main.458849b5d9fbe21a5881.hot-update.js": "/js/main.458849b5d9fbe21a5881.hot-update.js",
-    "/js/main.fdd16260207dab7226d4.hot-update.js": "/js/main.fdd16260207dab7226d4.hot-update.js",
-    "/js/main.714da47263a0752f3c94.hot-update.js": "/js/main.714da47263a0752f3c94.hot-update.js",
-    "/js/main.56249a41f8212f2ce968.hot-update.js": "/js/main.56249a41f8212f2ce968.hot-update.js",
-    "/js/main.bd805db39c54fd93334b.hot-update.js": "/js/main.bd805db39c54fd93334b.hot-update.js",
-    "/js/main.6ec61f57c8ea56443d84.hot-update.js": "/js/main.6ec61f57c8ea56443d84.hot-update.js",
-    "/js/main.37f9baf84aafb26f0175.hot-update.js": "/js/main.37f9baf84aafb26f0175.hot-update.js",
-    "/js/main.6b1e82c1a015d0be066f.hot-update.js": "/js/main.6b1e82c1a015d0be066f.hot-update.js",
-    "/js/main.96e65f4bd988c374a1b1.hot-update.js": "/js/main.96e65f4bd988c374a1b1.hot-update.js",
-    "/js/main.46cde5de1bff6d7c670e.hot-update.js": "/js/main.46cde5de1bff6d7c670e.hot-update.js",
-    "/js/main.7628f20f95072e0686a7.hot-update.js": "/js/main.7628f20f95072e0686a7.hot-update.js",
-    "/js/main.305c6ab7bebc87b3a79f.hot-update.js": "/js/main.305c6ab7bebc87b3a79f.hot-update.js",
-    "/js/main.87b0afe3aae2456af4cb.hot-update.js": "/js/main.87b0afe3aae2456af4cb.hot-update.js",
-    "/js/main.85ad0378b889084fb508.hot-update.js": "/js/main.85ad0378b889084fb508.hot-update.js",
-    "/js/main.ce44a0ff823fb9a35d91.hot-update.js": "/js/main.ce44a0ff823fb9a35d91.hot-update.js",
-    "/js/main.d3e004715014e3a88041.hot-update.js": "/js/main.d3e004715014e3a88041.hot-update.js",
-    "/js/main.6383f10d536425b32875.hot-update.js": "/js/main.6383f10d536425b32875.hot-update.js",
-    "/js/main.7a9a68c4cec8710cc58b.hot-update.js": "/js/main.7a9a68c4cec8710cc58b.hot-update.js",
-    "/js/main.6c919ae632048dae61e1.hot-update.js": "/js/main.6c919ae632048dae61e1.hot-update.js",
-    "/js/main.81f8d536826c12b83ff2.hot-update.js": "/js/main.81f8d536826c12b83ff2.hot-update.js",
-    "/js/main.2dd9766b0d236c7917af.hot-update.js": "/js/main.2dd9766b0d236c7917af.hot-update.js",
-    "/js/main.7790d68c2cf1197f26d1.hot-update.js": "/js/main.7790d68c2cf1197f26d1.hot-update.js",
-    "/js/main.beeccd411777f84b87e1.hot-update.js": "/js/main.beeccd411777f84b87e1.hot-update.js",
-    "/js/main.53c8008eb2964e620621.hot-update.js": "/js/main.53c8008eb2964e620621.hot-update.js",
-    "/js/main.ad29af3a3b60e15b9803.hot-update.js": "/js/main.ad29af3a3b60e15b9803.hot-update.js",
-    "/js/main.a357b7e54859929fbd3e.hot-update.js": "/js/main.a357b7e54859929fbd3e.hot-update.js",
-    "/js/main.5730a6b1deb8c3a5c354.hot-update.js": "/js/main.5730a6b1deb8c3a5c354.hot-update.js",
-    "/js/main.1524261d99f46e499821.hot-update.js": "/js/main.1524261d99f46e499821.hot-update.js",
-    "/js/main.bb5a67d4bca583f0dbb9.hot-update.js": "/js/main.bb5a67d4bca583f0dbb9.hot-update.js",
-    "/js/main.83f2dd14426000e363e1.hot-update.js": "/js/main.83f2dd14426000e363e1.hot-update.js",
-    "/js/main.bb6900bdfcd701783f61.hot-update.js": "/js/main.bb6900bdfcd701783f61.hot-update.js",
-    "/js/main.996f394572a71fc8fa89.hot-update.js": "/js/main.996f394572a71fc8fa89.hot-update.js",
-    "/js/main.25fc723305daf9aa69f3.hot-update.js": "/js/main.25fc723305daf9aa69f3.hot-update.js",
-    "/js/main.39132189178880209291.hot-update.js": "/js/main.39132189178880209291.hot-update.js",
-    "/js/main.0470b75433a3686133ab.hot-update.js": "/js/main.0470b75433a3686133ab.hot-update.js",
-    "/js/main.4b86075308792514d216.hot-update.js": "/js/main.4b86075308792514d216.hot-update.js",
-    "/js/main.3180dc74ec3de8cac3b7.hot-update.js": "/js/main.3180dc74ec3de8cac3b7.hot-update.js",
-    "/js/main.15b3c807d0f5d27a445a.hot-update.js": "/js/main.15b3c807d0f5d27a445a.hot-update.js",
-    "/js/main.cddb3db8f6f1a8a33f16.hot-update.js": "/js/main.cddb3db8f6f1a8a33f16.hot-update.js",
-    "/js/main.3e0b75cba85bafd5859d.hot-update.js": "/js/main.3e0b75cba85bafd5859d.hot-update.js",
-    "/js/main.d49d3bdcaa040d4e96e1.hot-update.js": "/js/main.d49d3bdcaa040d4e96e1.hot-update.js",
-    "/js/main.95977f8bcb6d45d0ec9b.hot-update.js": "/js/main.95977f8bcb6d45d0ec9b.hot-update.js",
-    "/js/main.92adfabcd73cfc26f9fd.hot-update.js": "/js/main.92adfabcd73cfc26f9fd.hot-update.js",
-    "/js/main.ed016623643a44ba1558.hot-update.js": "/js/main.ed016623643a44ba1558.hot-update.js",
-    "/js/main.fbb5a8e70923ffa03426.hot-update.js": "/js/main.fbb5a8e70923ffa03426.hot-update.js",
-    "/js/main.65f36ea593976f3ab721.hot-update.js": "/js/main.65f36ea593976f3ab721.hot-update.js",
-    "/js/main.f736a5253937e336fed7.hot-update.js": "/js/main.f736a5253937e336fed7.hot-update.js",
-    "/js/main.7bf2da21c358de7c83ab.hot-update.js": "/js/main.7bf2da21c358de7c83ab.hot-update.js",
-    "/js/main.a460e227ccfb796047da.hot-update.js": "/js/main.a460e227ccfb796047da.hot-update.js",
-    "/js/main.ff7517e0810cf81aadfe.hot-update.js": "/js/main.ff7517e0810cf81aadfe.hot-update.js",
-    "/js/main.79d32a9dc5c7dff11633.hot-update.js": "/js/main.79d32a9dc5c7dff11633.hot-update.js",
-    "/js/main.9ab0a7b36d96aa4e7468.hot-update.js": "/js/main.9ab0a7b36d96aa4e7468.hot-update.js",
-    "/js/main.318283376256676952d3.hot-update.js": "/js/main.318283376256676952d3.hot-update.js",
-    "/js/main.9a1875af8ce17df04326.hot-update.js": "/js/main.9a1875af8ce17df04326.hot-update.js",
-    "/js/main.98cec2daf5c3aeeb4851.hot-update.js": "/js/main.98cec2daf5c3aeeb4851.hot-update.js",
-    "/js/main.17d987639a415b63c740.hot-update.js": "/js/main.17d987639a415b63c740.hot-update.js",
-    "/js/main.c18a1fce1aa6b0db900d.hot-update.js": "/js/main.c18a1fce1aa6b0db900d.hot-update.js",
-    "/js/main.b967f47263d78e4fdfb8.hot-update.js": "/js/main.b967f47263d78e4fdfb8.hot-update.js",
-    "/js/main.b4e9c2a8b70259108136.hot-update.js": "/js/main.b4e9c2a8b70259108136.hot-update.js",
-    "/js/main.a5c36422c0bc840482c0.hot-update.js": "/js/main.a5c36422c0bc840482c0.hot-update.js",
-    "/js/main.74db753dfdb8b88158cb.hot-update.js": "/js/main.74db753dfdb8b88158cb.hot-update.js",
-    "/js/main.d7d39db248e4719a60ab.hot-update.js": "/js/main.d7d39db248e4719a60ab.hot-update.js",
-    "/js/main.59978da94a029a25bb30.hot-update.js": "/js/main.59978da94a029a25bb30.hot-update.js",
-    "/js/main.53e143f5d968bafd7792.hot-update.js": "/js/main.53e143f5d968bafd7792.hot-update.js",
-    "/js/main.8b2b3b102f8a2ddc7424.hot-update.js": "/js/main.8b2b3b102f8a2ddc7424.hot-update.js",
-    "/js/main.90ce070a4720f595bc97.hot-update.js": "/js/main.90ce070a4720f595bc97.hot-update.js",
-    "/js/main.c4151fded81481817c1d.hot-update.js": "/js/main.c4151fded81481817c1d.hot-update.js",
-    "/js/main.561fe85403abb8776608.hot-update.js": "/js/main.561fe85403abb8776608.hot-update.js",
-    "/js/main.4da43f5d26a07ae3f93f.hot-update.js": "/js/main.4da43f5d26a07ae3f93f.hot-update.js",
-    "/js/main.b36a1ca0c354c8cf7bcc.hot-update.js": "/js/main.b36a1ca0c354c8cf7bcc.hot-update.js",
-    "/js/main.14868fbb606f664ea5bb.hot-update.js": "/js/main.14868fbb606f664ea5bb.hot-update.js",
-    "/js/main.d16c99a3410886780fa5.hot-update.js": "/js/main.d16c99a3410886780fa5.hot-update.js",
-    "/js/main.9fe8134512f0d996a2f0.hot-update.js": "/js/main.9fe8134512f0d996a2f0.hot-update.js",
-    "/js/main.8a29b9c350d4e5ac6505.hot-update.js": "/js/main.8a29b9c350d4e5ac6505.hot-update.js",
-    "/js/main.301d5ebab07e9c271bac.hot-update.js": "/js/main.301d5ebab07e9c271bac.hot-update.js",
-    "/js/main.6329eea364055d91a914.hot-update.js": "/js/main.6329eea364055d91a914.hot-update.js",
-    "/js/main.92004d982cae461f05f3.hot-update.js": "/js/main.92004d982cae461f05f3.hot-update.js",
-    "/js/main.9d7e4c27540c6a8aeecd.hot-update.js": "/js/main.9d7e4c27540c6a8aeecd.hot-update.js",
-    "/js/main.8fe13b782cc900bc7837.hot-update.js": "/js/main.8fe13b782cc900bc7837.hot-update.js",
-    "/js/main.84003066d95f2b92234a.hot-update.js": "/js/main.84003066d95f2b92234a.hot-update.js",
-    "/js/main.3d56c20b27c4e139ee27.hot-update.js": "/js/main.3d56c20b27c4e139ee27.hot-update.js",
-    "/js/main.4c49b03dbfec4a43f690.hot-update.js": "/js/main.4c49b03dbfec4a43f690.hot-update.js",
-    "/js/main.2d6a896a123772d2de86.hot-update.js": "/js/main.2d6a896a123772d2de86.hot-update.js",
-    "/js/main.cd13fc41d04c324b7c76.hot-update.js": "/js/main.cd13fc41d04c324b7c76.hot-update.js",
-    "/js/main.b6b1c8fb0ec2275e6c20.hot-update.js": "/js/main.b6b1c8fb0ec2275e6c20.hot-update.js",
-    "/js/main.207048475a13b2117d96.hot-update.js": "/js/main.207048475a13b2117d96.hot-update.js",
-    "/js/main.67edde7f1cb4d984db51.hot-update.js": "/js/main.67edde7f1cb4d984db51.hot-update.js",
-    "/js/main.f7d78144d208165f438c.hot-update.js": "/js/main.f7d78144d208165f438c.hot-update.js",
-    "/js/main.08a79f6fa19bb1b209a2.hot-update.js": "/js/main.08a79f6fa19bb1b209a2.hot-update.js",
-    "/js/main.4320f3ac9712839b5548.hot-update.js": "/js/main.4320f3ac9712839b5548.hot-update.js",
-    "/js/main.6a135010a10c609d2f58.hot-update.js": "/js/main.6a135010a10c609d2f58.hot-update.js",
-    "/js/main.f3552f764990725e543d.hot-update.js": "/js/main.f3552f764990725e543d.hot-update.js",
-    "/js/main.bbdbdc46dd554ae44bd8.hot-update.js": "/js/main.bbdbdc46dd554ae44bd8.hot-update.js",
-    "/js/main.2c74e28829080afad11d.hot-update.js": "/js/main.2c74e28829080afad11d.hot-update.js",
-    "/js/main.2ed0b7da32dc29e38c14.hot-update.js": "/js/main.2ed0b7da32dc29e38c14.hot-update.js",
-    "/js/main.458565a6f3de7a57a5b7.hot-update.js": "/js/main.458565a6f3de7a57a5b7.hot-update.js",
-    "/js/main.f9c153f3e09b4cf07e6e.hot-update.js": "/js/main.f9c153f3e09b4cf07e6e.hot-update.js",
-    "/js/main.10ad5d46c07b05aef31c.hot-update.js": "/js/main.10ad5d46c07b05aef31c.hot-update.js",
-    "/js/main.ff7fe3c47bff51a3f7dd.hot-update.js": "/js/main.ff7fe3c47bff51a3f7dd.hot-update.js",
-    "/js/main.3a8a0cca0aeb2193f1ab.hot-update.js": "/js/main.3a8a0cca0aeb2193f1ab.hot-update.js",
-    "/js/main.8f4148496d1446a6eeb9.hot-update.js": "/js/main.8f4148496d1446a6eeb9.hot-update.js",
-    "/js/main.a3e5069b994fa7db7fd7.hot-update.js": "/js/main.a3e5069b994fa7db7fd7.hot-update.js",
-    "/js/main.8b8be8804908dcac5a4d.hot-update.js": "/js/main.8b8be8804908dcac5a4d.hot-update.js",
-    "/js/main.7989d31b0d32a9d9345c.hot-update.js": "/js/main.7989d31b0d32a9d9345c.hot-update.js",
-    "/js/main.a4901aa1e431bac4a075.hot-update.js": "/js/main.a4901aa1e431bac4a075.hot-update.js",
-    "/js/main.02a2d1809a088ea2fc72.hot-update.js": "/js/main.02a2d1809a088ea2fc72.hot-update.js",
-    "/js/main.7bef0f4bae3af5488655.hot-update.js": "/js/main.7bef0f4bae3af5488655.hot-update.js",
-    "/js/main.75d191047e0cfb269ccc.hot-update.js": "/js/main.75d191047e0cfb269ccc.hot-update.js",
-    "/js/main.b2a6e02624a451300b4d.hot-update.js": "/js/main.b2a6e02624a451300b4d.hot-update.js",
-    "/js/main.ea9ba804d0207cfa5f55.hot-update.js": "/js/main.ea9ba804d0207cfa5f55.hot-update.js",
-    "/js/main.8ef68d3a33c95b255f20.hot-update.js": "/js/main.8ef68d3a33c95b255f20.hot-update.js",
-    "/js/main.37bde84b2328de041ae8.hot-update.js": "/js/main.37bde84b2328de041ae8.hot-update.js",
-    "/js/main.b3c9fb85c9e0b4e0206d.hot-update.js": "/js/main.b3c9fb85c9e0b4e0206d.hot-update.js",
-    "/js/main.4214319eb01578b35e24.hot-update.js": "/js/main.4214319eb01578b35e24.hot-update.js",
-    "/js/main.1f07a9fec6911ea1288c.hot-update.js": "/js/main.1f07a9fec6911ea1288c.hot-update.js",
-    "/js/main.0f1ec39441f888245236.hot-update.js": "/js/main.0f1ec39441f888245236.hot-update.js",
-    "/js/main.d37e65d427d27b7a17a1.hot-update.js": "/js/main.d37e65d427d27b7a17a1.hot-update.js",
-    "/js/main.76b3e75afa33101a15ba.hot-update.js": "/js/main.76b3e75afa33101a15ba.hot-update.js",
-    "/js/main.383d21702d67fd2366b0.hot-update.js": "/js/main.383d21702d67fd2366b0.hot-update.js",
-    "/js/main.6a6666b8095e056e7f4d.hot-update.js": "/js/main.6a6666b8095e056e7f4d.hot-update.js",
-    "/js/main.3d2d1995689661e132b6.hot-update.js": "/js/main.3d2d1995689661e132b6.hot-update.js",
-    "/js/main.33e9fb04ce5d9af24e01.hot-update.js": "/js/main.33e9fb04ce5d9af24e01.hot-update.js",
-    "/js/main.30567c0321b019e7b9de.hot-update.js": "/js/main.30567c0321b019e7b9de.hot-update.js",
-    "/js/main.3c75f9160da0a6bde936.hot-update.js": "/js/main.3c75f9160da0a6bde936.hot-update.js",
-    "/js/main.f81d6548d2887a6d74b2.hot-update.js": "/js/main.f81d6548d2887a6d74b2.hot-update.js",
-    "/js/main.27441cac90de92e8292b.hot-update.js": "/js/main.27441cac90de92e8292b.hot-update.js",
-    "/js/main.8b11060f6608bac82043.hot-update.js": "/js/main.8b11060f6608bac82043.hot-update.js",
-    "/js/main.536ac94086af4176cc46.hot-update.js": "/js/main.536ac94086af4176cc46.hot-update.js",
-    "/js/main.0a95cf07fc37c3d8f087.hot-update.js": "/js/main.0a95cf07fc37c3d8f087.hot-update.js",
-    "/js/main.35e387dadcbfdb390240.hot-update.js": "/js/main.35e387dadcbfdb390240.hot-update.js",
-    "/js/main.ed00c5a22ed4aebadabc.hot-update.js": "/js/main.ed00c5a22ed4aebadabc.hot-update.js",
-    "/js/main.23b42f8f9fdcff71344a.hot-update.js": "/js/main.23b42f8f9fdcff71344a.hot-update.js",
-    "/js/main.fed45e8da7aed8c961bd.hot-update.js": "/js/main.fed45e8da7aed8c961bd.hot-update.js",
-    "/js/main.6a9b2bd31199e221f54c.hot-update.js": "/js/main.6a9b2bd31199e221f54c.hot-update.js",
-    "/js/main.33b4006b284ede5eb471.hot-update.js": "/js/main.33b4006b284ede5eb471.hot-update.js",
-    "/js/main.e4aa63df9e904a9d2ebb.hot-update.js": "/js/main.e4aa63df9e904a9d2ebb.hot-update.js",
-    "/js/main.70bc8e08b0c25bb74677.hot-update.js": "/js/main.70bc8e08b0c25bb74677.hot-update.js",
-    "/js/main.085ee4ec8d355d13dcaf.hot-update.js": "/js/main.085ee4ec8d355d13dcaf.hot-update.js",
-    "/js/main.b380d09aa76c0a47ca37.hot-update.js": "/js/main.b380d09aa76c0a47ca37.hot-update.js",
-    "/js/main.e83b273682d25495964e.hot-update.js": "/js/main.e83b273682d25495964e.hot-update.js",
-    "/js/main.75068c5643854b7837f1.hot-update.js": "/js/main.75068c5643854b7837f1.hot-update.js",
-    "/js/main.e451dc7f926bac12a294.hot-update.js": "/js/main.e451dc7f926bac12a294.hot-update.js",
-    "/js/main.1d58faf0160fb7beafa5.hot-update.js": "/js/main.1d58faf0160fb7beafa5.hot-update.js",
-    "/js/main.0c9d8a2658d8c1a92074.hot-update.js": "/js/main.0c9d8a2658d8c1a92074.hot-update.js",
-    "/js/main.4d104052d308d5b19cb2.hot-update.js": "/js/main.4d104052d308d5b19cb2.hot-update.js",
-    "/js/main.757aa9ae3031e0ae63a1.hot-update.js": "/js/main.757aa9ae3031e0ae63a1.hot-update.js",
-    "/js/main.0c572b6f83f24c99a9dc.hot-update.js": "/js/main.0c572b6f83f24c99a9dc.hot-update.js",
-    "/js/main.4795de0c724312385765.hot-update.js": "/js/main.4795de0c724312385765.hot-update.js",
-    "/js/main.243e61e9d600f63f105e.hot-update.js": "/js/main.243e61e9d600f63f105e.hot-update.js",
-    "/js/main.160d95e205b5dd2fc638.hot-update.js": "/js/main.160d95e205b5dd2fc638.hot-update.js",
-    "/js/main.ddce7e26701449aa0ef1.hot-update.js": "/js/main.ddce7e26701449aa0ef1.hot-update.js",
-    "/js/main.c6adf6970580a3b8d735.hot-update.js": "/js/main.c6adf6970580a3b8d735.hot-update.js",
-    "/js/main.d4a6c876c0c9701f683e.hot-update.js": "/js/main.d4a6c876c0c9701f683e.hot-update.js",
-    "/js/main.9969f5d4ae16d134e98b.hot-update.js": "/js/main.9969f5d4ae16d134e98b.hot-update.js",
-    "/js/main.7e27a5f9f49e3b24aeff.hot-update.js": "/js/main.7e27a5f9f49e3b24aeff.hot-update.js",
-    "/js/main.6d67f38cb314814d0066.hot-update.js": "/js/main.6d67f38cb314814d0066.hot-update.js",
-    "/js/main.9da6fabe69cbf32e094d.hot-update.js": "/js/main.9da6fabe69cbf32e094d.hot-update.js",
-    "/js/main.9d3b73e48ba5b0a4ad17.hot-update.js": "/js/main.9d3b73e48ba5b0a4ad17.hot-update.js",
-    "/js/main.68289d97144316f1948c.hot-update.js": "/js/main.68289d97144316f1948c.hot-update.js",
-    "/js/main.22b8e3cb5c2d2832de9a.hot-update.js": "/js/main.22b8e3cb5c2d2832de9a.hot-update.js",
-    "/js/main.9a24134a9fed6ab9bbad.hot-update.js": "/js/main.9a24134a9fed6ab9bbad.hot-update.js",
-    "/js/main.6dccc4e5d45060a931cf.hot-update.js": "/js/main.6dccc4e5d45060a931cf.hot-update.js",
-    "/js/main.cb1987c54118e3f0a304.hot-update.js": "/js/main.cb1987c54118e3f0a304.hot-update.js",
-    "/js/main.86dee3ab50085d0f3173.hot-update.js": "/js/main.86dee3ab50085d0f3173.hot-update.js",
-    "/js/main.fe57e61e20004aefa69c.hot-update.js": "/js/main.fe57e61e20004aefa69c.hot-update.js",
-    "/js/main.b4b03911f4311dac8d0d.hot-update.js": "/js/main.b4b03911f4311dac8d0d.hot-update.js",
-    "/js/main.6ff976f81f2f8a51753e.hot-update.js": "/js/main.6ff976f81f2f8a51753e.hot-update.js",
-    "/js/main.43c192c2a0d8008c5ea8.hot-update.js": "/js/main.43c192c2a0d8008c5ea8.hot-update.js",
-    "/js/main.e4b7104a8b223f3356b9.hot-update.js": "/js/main.e4b7104a8b223f3356b9.hot-update.js",
-    "/js/main.309b242021e8364451f1.hot-update.js": "/js/main.309b242021e8364451f1.hot-update.js",
-    "/js/main.981f0d1b1c2541ca6a40.hot-update.js": "/js/main.981f0d1b1c2541ca6a40.hot-update.js",
-    "/js/main.8a350cce314e52cf4be8.hot-update.js": "/js/main.8a350cce314e52cf4be8.hot-update.js",
-    "/js/main.fcc6c1e934990ce87950.hot-update.js": "/js/main.fcc6c1e934990ce87950.hot-update.js",
-    "/js/main.2e6385f8afa912f21637.hot-update.js": "/js/main.2e6385f8afa912f21637.hot-update.js",
-    "/js/main.5286b7a4895efa8c66e4.hot-update.js": "/js/main.5286b7a4895efa8c66e4.hot-update.js",
-    "/js/main.8b4459985e4d44701620.hot-update.js": "/js/main.8b4459985e4d44701620.hot-update.js",
-    "/js/main.d422f0cb2379d97529ae.hot-update.js": "/js/main.d422f0cb2379d97529ae.hot-update.js",
-    "/js/main.4ab57a74ed7367ee2633.hot-update.js": "/js/main.4ab57a74ed7367ee2633.hot-update.js",
-    "/js/main.b8a86d495d111b887e18.hot-update.js": "/js/main.b8a86d495d111b887e18.hot-update.js",
-    "/js/main.3fe794db1f8868bd0088.hot-update.js": "/js/main.3fe794db1f8868bd0088.hot-update.js",
-    "/js/main.9778aa6fe1fc88152525.hot-update.js": "/js/main.9778aa6fe1fc88152525.hot-update.js",
-    "/js/main.1547ee1b45aacc110648.hot-update.js": "/js/main.1547ee1b45aacc110648.hot-update.js",
-    "/js/main.2d6a0a8d20c0179f847c.hot-update.js": "/js/main.2d6a0a8d20c0179f847c.hot-update.js",
-    "/js/main.4f264fa35de76703d1f8.hot-update.js": "/js/main.4f264fa35de76703d1f8.hot-update.js",
-    "/js/main.7724ce1cb72798e001f2.hot-update.js": "/js/main.7724ce1cb72798e001f2.hot-update.js",
-    "/js/main.c05bebc6266d97fa89bb.hot-update.js": "/js/main.c05bebc6266d97fa89bb.hot-update.js",
-    "/js/main.3614d1a4a2e60a3dd929.hot-update.js": "/js/main.3614d1a4a2e60a3dd929.hot-update.js",
-    "/js/main.81863c14bd11efa05692.hot-update.js": "/js/main.81863c14bd11efa05692.hot-update.js",
-    "/js/main.a48c3b16c51e8032ca4d.hot-update.js": "/js/main.a48c3b16c51e8032ca4d.hot-update.js",
-    "/js/main.9e0137a4e23b86624a32.hot-update.js": "/js/main.9e0137a4e23b86624a32.hot-update.js",
-    "/js/main.8e8710239f2c2b752f10.hot-update.js": "/js/main.8e8710239f2c2b752f10.hot-update.js",
-    "/js/main.f909e06cd0ca2c14aa45.hot-update.js": "/js/main.f909e06cd0ca2c14aa45.hot-update.js",
-    "/js/main.a161f210d420160d06a8.hot-update.js": "/js/main.a161f210d420160d06a8.hot-update.js",
-    "/js/main.3befa0311ea403e1572e.hot-update.js": "/js/main.3befa0311ea403e1572e.hot-update.js",
-    "/js/main.db8d70dd89c7ef6c738a.hot-update.js": "/js/main.db8d70dd89c7ef6c738a.hot-update.js",
-    "/js/main.972301b4fa76efa9dffd.hot-update.js": "/js/main.972301b4fa76efa9dffd.hot-update.js",
-    "/js/main.5db00e8ee96a0ca0fb98.hot-update.js": "/js/main.5db00e8ee96a0ca0fb98.hot-update.js",
-    "/js/main.52e3dd2a611c66292649.hot-update.js": "/js/main.52e3dd2a611c66292649.hot-update.js",
-    "/js/main.ef9f76ed68601de1cf8f.hot-update.js": "/js/main.ef9f76ed68601de1cf8f.hot-update.js",
-    "/js/main.8840cea4fbcd38c11b71.hot-update.js": "/js/main.8840cea4fbcd38c11b71.hot-update.js",
-    "/js/main.d3c2b07dfb991004bf76.hot-update.js": "/js/main.d3c2b07dfb991004bf76.hot-update.js",
-    "/js/main.82223e60857d0d2b5732.hot-update.js": "/js/main.82223e60857d0d2b5732.hot-update.js",
-    "/js/main.1a41a59629e38656a89f.hot-update.js": "/js/main.1a41a59629e38656a89f.hot-update.js",
-    "/js/main.127031f0f37bf3c0becd.hot-update.js": "/js/main.127031f0f37bf3c0becd.hot-update.js",
-    "/js/main.2118071dd4af646404b1.hot-update.js": "/js/main.2118071dd4af646404b1.hot-update.js",
-    "/js/main.f963f56e91f7d35e3dea.hot-update.js": "/js/main.f963f56e91f7d35e3dea.hot-update.js",
-    "/js/main.4a7379b05317614cabf2.hot-update.js": "/js/main.4a7379b05317614cabf2.hot-update.js",
-    "/js/main.6edc2bdd9db6789dea34.hot-update.js": "/js/main.6edc2bdd9db6789dea34.hot-update.js",
-    "/js/main.12ec77d67a5b032fabd2.hot-update.js": "/js/main.12ec77d67a5b032fabd2.hot-update.js",
-    "/js/main.68347c96b4ef7478bfa7.hot-update.js": "/js/main.68347c96b4ef7478bfa7.hot-update.js",
-    "/js/main.625992e32118ea473b74.hot-update.js": "/js/main.625992e32118ea473b74.hot-update.js",
-    "/js/main.1588e641a690b51e1a21.hot-update.js": "/js/main.1588e641a690b51e1a21.hot-update.js",
-    "/js/main.91c1813e5f939de50ff5.hot-update.js": "/js/main.91c1813e5f939de50ff5.hot-update.js",
-    "/js/main.0bb0cc1d5f01b1f8c11e.hot-update.js": "/js/main.0bb0cc1d5f01b1f8c11e.hot-update.js",
-    "/js/main.285221e0a44fc7cd108a.hot-update.js": "/js/main.285221e0a44fc7cd108a.hot-update.js",
-    "/js/main.b57f7075d1ce55c689ca.hot-update.js": "/js/main.b57f7075d1ce55c689ca.hot-update.js",
-    "/js/main.ce964398f205c40f1740.hot-update.js": "/js/main.ce964398f205c40f1740.hot-update.js",
-    "/js/main.1574e7416c21f0f8eddd.hot-update.js": "/js/main.1574e7416c21f0f8eddd.hot-update.js",
-    "/js/main.dcb6be139ce04e9ff8d3.hot-update.js": "/js/main.dcb6be139ce04e9ff8d3.hot-update.js",
-    "/js/main.9c98a367ee0455106a6a.hot-update.js": "/js/main.9c98a367ee0455106a6a.hot-update.js",
-    "/js/main.0f60c905b23eb81445a4.hot-update.js": "/js/main.0f60c905b23eb81445a4.hot-update.js",
-    "/js/main.f7b009801c2dc76e9571.hot-update.js": "/js/main.f7b009801c2dc76e9571.hot-update.js",
-    "/js/main.e20a46bf66d9a3d84d15.hot-update.js": "/js/main.e20a46bf66d9a3d84d15.hot-update.js",
-    "/js/main.5640968b567a3dd9cb56.hot-update.js": "/js/main.5640968b567a3dd9cb56.hot-update.js",
-    "/js/main.59f5f6c0d834735c0999.hot-update.js": "/js/main.59f5f6c0d834735c0999.hot-update.js",
-    "/js/main.2628688346e14eb08a0c.hot-update.js": "/js/main.2628688346e14eb08a0c.hot-update.js",
-    "/js/main.fe087a19d9845c265fb2.hot-update.js": "/js/main.fe087a19d9845c265fb2.hot-update.js",
-    "/js/main.54bfef329d9f4fa9d48d.hot-update.js": "/js/main.54bfef329d9f4fa9d48d.hot-update.js",
-    "/js/main.280beb740b06f6de020b.hot-update.js": "/js/main.280beb740b06f6de020b.hot-update.js",
-    "/js/main.818cf5e77cd815f7d0ad.hot-update.js": "/js/main.818cf5e77cd815f7d0ad.hot-update.js",
-    "/js/main.c34f0dbf235d0b229cbb.hot-update.js": "/js/main.c34f0dbf235d0b229cbb.hot-update.js",
-    "/js/main.b84796d790b4f0039a5e.hot-update.js": "/js/main.b84796d790b4f0039a5e.hot-update.js",
-    "/js/main.e58035632e0941c5e188.hot-update.js": "/js/main.e58035632e0941c5e188.hot-update.js",
-    "/js/main.8c1674eb0e630af71f90.hot-update.js": "/js/main.8c1674eb0e630af71f90.hot-update.js",
-    "/js/main.095fcc2cacc8074c6397.hot-update.js": "/js/main.095fcc2cacc8074c6397.hot-update.js",
-    "/js/main.6a9df2085a650ac3b389.hot-update.js": "/js/main.6a9df2085a650ac3b389.hot-update.js",
-    "/js/main.5a14206f0b04e1220d63.hot-update.js": "/js/main.5a14206f0b04e1220d63.hot-update.js",
-    "/js/main.e11bc9de718b28148998.hot-update.js": "/js/main.e11bc9de718b28148998.hot-update.js",
-    "/js/main.bc5cbac168dc48006cb2.hot-update.js": "/js/main.bc5cbac168dc48006cb2.hot-update.js",
-    "/js/main.4ce4ba76504ee49386ee.hot-update.js": "/js/main.4ce4ba76504ee49386ee.hot-update.js",
-    "/js/main.a1b9d0ab2b9e89ba67e2.hot-update.js": "/js/main.a1b9d0ab2b9e89ba67e2.hot-update.js",
-    "/js/main.a0a68e4071989f497d6f.hot-update.js": "/js/main.a0a68e4071989f497d6f.hot-update.js",
-    "/js/main.dd8119d9f5b45f8f97d2.hot-update.js": "/js/main.dd8119d9f5b45f8f97d2.hot-update.js",
-    "/js/main.769d21bc3782197901df.hot-update.js": "/js/main.769d21bc3782197901df.hot-update.js",
-    "/js/main.cbeb749c57d960e13a0e.hot-update.js": "/js/main.cbeb749c57d960e13a0e.hot-update.js",
-    "/js/main.0c595b9161c3c191f5d6.hot-update.js": "/js/main.0c595b9161c3c191f5d6.hot-update.js",
-    "/js/main.89c6c37c84f679595d72.hot-update.js": "/js/main.89c6c37c84f679595d72.hot-update.js",
-    "/js/main.adcefdfda0be683cab45.hot-update.js": "/js/main.adcefdfda0be683cab45.hot-update.js",
-    "/js/main.b63f0a062f40c6ba3e2b.hot-update.js": "/js/main.b63f0a062f40c6ba3e2b.hot-update.js",
-    "/js/main.31996c27f536c6bbcc2a.hot-update.js": "/js/main.31996c27f536c6bbcc2a.hot-update.js",
-    "/js/main.c52e584ac4307e3b0436.hot-update.js": "/js/main.c52e584ac4307e3b0436.hot-update.js",
-    "/js/main.c1b44e4447977996ad77.hot-update.js": "/js/main.c1b44e4447977996ad77.hot-update.js",
-    "/js/main.c1bc740a6297fd9deb87.hot-update.js": "/js/main.c1bc740a6297fd9deb87.hot-update.js",
-    "/js/main.5785103a8e60c8081957.hot-update.js": "/js/main.5785103a8e60c8081957.hot-update.js",
-    "/js/main.a0aa1cf467c3ffa055c1.hot-update.js": "/js/main.a0aa1cf467c3ffa055c1.hot-update.js",
-    "/js/main.7c94928bc440c5fbf611.hot-update.js": "/js/main.7c94928bc440c5fbf611.hot-update.js",
-    "/js/main.f3b445784b1e387df20f.hot-update.js": "/js/main.f3b445784b1e387df20f.hot-update.js",
-    "/js/main.173cb4b23e27e0178ef3.hot-update.js": "/js/main.173cb4b23e27e0178ef3.hot-update.js",
-    "/js/main.033e51ca68ca55af353c.hot-update.js": "/js/main.033e51ca68ca55af353c.hot-update.js",
-    "/js/main.46741d44b2cd3f879e23.hot-update.js": "/js/main.46741d44b2cd3f879e23.hot-update.js",
-    "/js/main.51e9fabbefcd4dc54d77.hot-update.js": "/js/main.51e9fabbefcd4dc54d77.hot-update.js",
-    "/js/main.594c8133e5a0e0c71d0a.hot-update.js": "/js/main.594c8133e5a0e0c71d0a.hot-update.js",
-    "/js/main.beb7a857783a803a33b1.hot-update.js": "/js/main.beb7a857783a803a33b1.hot-update.js",
-    "/js/main.13662b4209653a9033f9.hot-update.js": "/js/main.13662b4209653a9033f9.hot-update.js",
-    "/js/main.b5ac0141be3ec0af4faf.hot-update.js": "/js/main.b5ac0141be3ec0af4faf.hot-update.js",
-    "/js/main.c33ef86cdadd2c227c3b.hot-update.js": "/js/main.c33ef86cdadd2c227c3b.hot-update.js",
-    "/js/main.afeb2a0bbc68d2ab2e61.hot-update.js": "/js/main.afeb2a0bbc68d2ab2e61.hot-update.js",
-    "/js/main.9761f93de39ea7222a06.hot-update.js": "/js/main.9761f93de39ea7222a06.hot-update.js",
-    "/js/main.4fc00007e30f398370b2.hot-update.js": "/js/main.4fc00007e30f398370b2.hot-update.js",
-    "/js/main.8871073e918be2d78fcc.hot-update.js": "/js/main.8871073e918be2d78fcc.hot-update.js",
-    "/js/main.fb4f0e1d6b7c84cc3141.hot-update.js": "/js/main.fb4f0e1d6b7c84cc3141.hot-update.js",
-    "/js/main.3484ede672c8ef7ae79d.hot-update.js": "/js/main.3484ede672c8ef7ae79d.hot-update.js",
-    "/js/main.17287a08d3ea46553424.hot-update.js": "/js/main.17287a08d3ea46553424.hot-update.js",
-    "/js/main.f481e24aa4e7a91b58cc.hot-update.js": "/js/main.f481e24aa4e7a91b58cc.hot-update.js",
-    "/js/main.06af250d47b7a1733021.hot-update.js": "/js/main.06af250d47b7a1733021.hot-update.js",
-    "/js/main.39325a9d61dbc0834ee8.hot-update.js": "/js/main.39325a9d61dbc0834ee8.hot-update.js",
-    "/js/main.063c4f0000fc48d3cb53.hot-update.js": "/js/main.063c4f0000fc48d3cb53.hot-update.js",
-    "/js/main.09f7a3a48b5163efd036.hot-update.js": "/js/main.09f7a3a48b5163efd036.hot-update.js",
-    "/js/main.77f9ea8af14ddb9627ab.hot-update.js": "/js/main.77f9ea8af14ddb9627ab.hot-update.js"
 }

resources/js/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="vue-file-manager" :class="appSize" v-cloak>
+    <div id="vue-file-manager" v-cloak>
 
         <!--System alerts-->
         <Alert/>
@@ -25,7 +25,9 @@
             <ToastrWrapper/>
 
             <!--File page-->
+            <keep-alive :include="['Admin', 'Users']">
                 <router-view :class="{'is-scaled-down': isScaledDown}"/>
+            </keep-alive>
         </div>
 
         <router-view v-if="layout === 'unauthorized'"/>
@@ -45,7 +47,6 @@
     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"
@@ -65,7 +66,7 @@
         },
         computed: {
             ...mapGetters([
-                'appSize', 'isLogged', 'isGuest'
+                'isLogged', 'isGuest'
             ]),
             layout() {
                 if (includes(['VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
@@ -80,19 +81,6 @@
                 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
@@ -107,10 +95,6 @@
             })
         },
         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)

resources/js/components/FilesView/MobileActionButton.vue

@@ -5,6 +5,7 @@
             <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>
+            <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
             <span class="label">
                 <slot></slot>
             </span>
@@ -13,7 +14,7 @@
 </template>
 
 <script>
-    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon } from 'vue-feather-icons'
+    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon } from 'vue-feather-icons'
 
     export default {
         name: 'MobileActionButton',
@@ -22,6 +23,7 @@
         ],
         components: {
             FolderPlusIcon,
+            UserPlusIcon,
             TrashIcon,
             ListIcon,
             GridIcon,
@@ -40,6 +42,7 @@
         padding: 7px 10px;
         cursor: pointer;
         border: none;
+        @include transition(150ms);
 
         .flex {
             display: flex;
@@ -49,13 +52,36 @@
         .icon {
             margin-right: 10px;
             @include font-size(14);
+
+            path, line, polyline, rect, circle {
+                @include transition(150ms);
+            }
         }
 
         .label {
+            @include transition(150ms);
             @include font-size(14);
             font-weight: 700;
             color: $text;
         }
+
+        &:active {
+            @include transform(scale(0.95));
+        }
+
+        &:hover {
+            background: rgba($theme, 0.1);
+
+            .icon {
+                path, line, polyline, rect, circle {
+                    stroke: $theme;
+                }
+            }
+
+            .label {
+                color: $theme;
+            }
+        }
     }
 
     @media (prefers-color-scheme: dark) {

resources/js/components/FilesView/MobileToolbar.vue

@@ -44,13 +44,9 @@
                 'currentFolder',
                 'browseHistory',
                 'homeDirectory',
-                'appSize',
             ]),
             directoryName() {
                 return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
-            },
-            isSmallAppSize() {
-                return this.appSize === 'small'
             }
         },
         methods: {

resources/js/components/Mobile/MobileHeader.vue

@@ -94,7 +94,7 @@
     @media only screen and (max-width: 690px) {
         .mobile-header {
             display: flex;
-            margin-bottom: 25px;
+            margin-bottom: 15px;
         }
     }
 

resources/js/components/Others/ContentFileview.vue

@@ -12,7 +12,6 @@
     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'
 

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

@@ -0,0 +1,166 @@
+<template>
+    <div class="dropzone" :class="{ 'is-error': error }">
+        <input
+                ref="file"
+                type="file"
+                @change="showImagePreview($event)"
+                class="dummy"
+        />
+        <img
+                ref="image"
+                :src="imagePreview"
+                class="image-preview"
+                v-if="imagePreview"
+        />
+
+        <div class="dropzone-message" v-show="! isData">
+            <upload-icon size="19" class="icon-upload"></upload-icon>
+            <span class="dropzone-title">
+                {{ $t('input_image.title') }}
+            </span>
+            <span class="dropzone-description">
+                {{ $t('input_image.supported') }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { UploadIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'ImageInput',
+        props: [
+            'image', 'error'
+        ],
+        components: {
+            UploadIcon
+        },
+        data() {
+            return {
+                imagePreview: undefined
+            }
+        },
+        computed: {
+            isData() {
+                return typeof this.imagePreview === 'undefined' || this.imagePreview === '' ? false : true
+            },
+        },
+        methods: {
+            showImagePreview(event) {
+                const imgPath = event.target.files[0].name,
+                    extn = imgPath
+                        .substring(imgPath.lastIndexOf('.') + 1)
+                        .toLowerCase()
+
+                if (['png', 'jpg', 'jpeg'].includes(extn)) {
+                    const file = event.target.files[0],
+                        reader = new FileReader()
+
+                    reader.onload = () => (this.imagePreview = reader.result)
+
+                    reader.readAsDataURL(file)
+
+                    // Update user avatar
+                    this.$emit('input', event.target.files[0])
+                } else {
+                    alert( this.$t('validation_errors.wrong_image') )
+                }
+            }
+        },
+        created() {
+            // If has default image then load
+            if (this.image) this.imagePreview = this.image
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .dropzone {
+        border: 1px dashed #a1abc2;
+        border-radius: 8px;
+        position: relative;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        min-height: 210px;
+
+        &.is-error {
+            border: 2px dashed rgba(253, 57, 122, 0.3);
+
+            .dropzone-title {
+                color: $danger;
+            }
+
+            .icon-upload path {
+                fill: $danger
+            }
+        }
+
+        input[type='file'] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            cursor: pointer;
+        }
+
+        .image-preview {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            left: 0;
+            padding: 7px;
+            display: block;
+
+            &.fit-image {
+                object-fit: cover;
+                border-radius: 12px;
+                overflow: hidden;
+
+            }
+        }
+
+        .dropzone-message {
+            padding: 50px 0;
+            width: 100%;
+
+            .dropzone-title {
+                @include font-size(16);
+                font-weight: 700;
+                display: block;
+            }
+
+            .dropzone-description {
+                color: $text_muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .dropzone {
+
+            .dropzone-message {
+
+                .icon-upload {
+                    path, polyline, line {
+                        stroke: $theme;
+                    }
+                }
+
+                .dropzone-description {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+</style>

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

@@ -115,9 +115,9 @@
     }
 
     .input-area {
+        border: 1px solid #ebebeb;
         justify-content: space-between;
         background: $light_mode_input_background;
-        border: 1px solid transparent;
         @include transition(150ms);
         align-items: center;
         border-radius: 8px;
@@ -182,6 +182,7 @@
 
         .input-area {
             background: $dark_mode_foreground;
+            border-color: $dark_mode_foreground;
 
             .option-icon {
                 path {

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

@@ -25,7 +25,6 @@
             @include font-size(19);
             margin-bottom: 15px;
             display: block;
-            //color: $theme;
         }
 
         .description {
@@ -46,6 +45,19 @@
             }
         }
 
+        /deep/ input {
+
+            &[type='text'],
+            &[type='number'],
+            .input-area {
+                background: white;
+            }
+        }
+
+        /deep/ .input-area {
+            background: white;
+        }
+
         /deep/ .form {
             margin-top: 20px;
 
@@ -83,6 +95,16 @@
     @media only screen and (max-width: 690px) {
 
         .setup-box {
+            padding: 15px;
+
+            .title {
+                @include font-size(17);
+                margin-bottom: 10px;
+            }
+
+            .description {
+                @include font-size(14);
+            }
 
             /deep/ .form.block-form {
 

resources/js/components/Others/MobileNavigation.vue

@@ -64,7 +64,7 @@
                     {
                         icon: 'settings',
                         title: this.$t('menu.settings'),
-                        routeName: 'MobileSettings',
+                        routeName: 'Profile',
                         isVisible: true,
                     },
                     {

resources/js/components/Others/Notifications/ToastrItem.vue

@@ -45,7 +45,7 @@
 
     .fade-enter-active,
     .fade-leave-active {
-        transition: 0.8s ease;
+        transition: 0.3s ease;
     }
 
     .fade-enter,
@@ -107,6 +107,7 @@
             justify-content: center;
             padding: 0;
             font-size: 20px;
+            margin-right: 10px;
         }
 
         &.success {
@@ -133,4 +134,28 @@
             }
         }
     }
+
+    @media only screen and (max-width: 690px) {
+
+        .toastr-item {
+            margin-bottom: 0;
+            margin-top: 20px;
+            max-width: 100%;
+        }
+
+        .fade-enter,
+        .fade-leave-to {
+            opacity: 0;
+            @include transform(translateY(100%));
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .toastr-item {
+
+            &.success, &.danger {
+                background: $dark_mode_foreground;
+            }
+        }
+    }
 </style>

resources/js/components/Others/Notifications/ToastrWrapper.vue

@@ -48,4 +48,15 @@
         top: 30px;
         z-index: 10;
     }
+
+    @media only screen and (max-width: 690px) {
+
+        #toastr-wrapper {
+            top: initial;
+            right: 15px;
+            left: 15px;
+            bottom: 15px;
+        }
+    }
+
 </style>

resources/js/components/Others/PageHeader.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="page-header" @click="goHome">
+    <div class="page-header">
-        <div class="icon" v-if="isSmallAppSize">
+        <div class="go-back" v-if="canBack" @click="$router.back()">
-            <FontAwesomeIcon icon="chevron-left" />
+            <chevron-left-icon size="17"></chevron-left-icon>
         </div>
         <div class="content">
             <h1 class="title">{{ title }}</h1>
@@ -10,28 +10,16 @@
 </template>
 
 <script>
-    import {mapGetters} from 'vuex'
+    import { ChevronLeftIcon } from 'vue-feather-icons'
-    import {events} from '@/bus'
 
     export default {
         name: 'PageHeader',
         props: [
-            'title'
+            'title', 'canBack'
         ],
-        computed: {
+        components: {
-            ...mapGetters(['appSize']),
+            ChevronLeftIcon
-            isSmallAppSize() {
-                return this.appSize === 'small'
-            }
         },
-        methods: {
-            goHome() {
-                if (this.isSmallAppSize) {
-                    events.$emit('show:sidebar')
-                    this.$router.push({name: 'Files'})
-                }
-            }
-        }
     }
 </script>
 
@@ -55,10 +43,14 @@
             color: $text;
         }
 
-        .icon {
+        .go-back {
-            @include font-size(16);
+            margin-right: 10px;
-            margin-right: 15px;
             cursor: pointer;
+
+            svg {
+                vertical-align: middle;
+                margin-top: -4px;
+            }
         }
     }
 

resources/js/components/Others/Tables/DatatableWrapper.vue

@@ -173,6 +173,7 @@
     .table {
         width: 100%;
         border-collapse: collapse;
+        overflow-x: auto;
 
         tr {
             width: 100%;
@@ -194,13 +195,13 @@
 
             tr {
                 td {
-                    padding-top: 10px;
+                    padding: 12px;
-                    padding-bottom: 10px;
 
                     span {
                         color: #AFAFAF;
                         font-weight: 700;
                         @include font-size(12);
+                        white-space: nowrap;
                     }
 
                     &.sortable {
@@ -243,8 +244,7 @@
                 }
 
                 td {
-                    padding-top: 12px;
+                    padding: 12px;
-                    padding-bottom: 12px;
 
                     &:last-child {
                         button {
@@ -332,6 +332,18 @@
         }
     }
 
+    @media only screen and (max-width: 690px) {
+        .paginator-wrapper {
+            display: block;
+            text-align: center;
+
+            .paginator-info {
+                margin-top: 10px;
+                display: block;
+            }
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
 
         .table {

resources/js/components/Others/UserImageInput.vue

@@ -80,8 +80,8 @@
         }
 
         .image-preview {
-            width: 56px;
+            width: 62px;
-            height: 56px;
+            height: 62px;
             object-fit: cover;
             border-radius: 8px;
         }

resources/js/components/Sidebar/MenuBar.vue

@@ -32,7 +32,7 @@
                 </div>
             </router-link>
 
-            <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, ['Users'])}" class="icon-navigation-item users">
+            <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, ['Users', 'User', 'UserDetail', 'UserStorage', 'UserPassword', 'UserDelete'])}" class="icon-navigation-item users">
                 <div class="button-icon">
                     <users-icon size="19"></users-icon>
                 </div>
@@ -190,6 +190,7 @@
 
     @media only screen and (max-width: 1024px) {
         .menu-bar {
+            min-width: 60px;
             width: 60px;
         }
 

resources/js/i18n/lang/cn.json

@@ -3,22 +3,22 @@
         "create_new_password": "创建新密码"
     },
     "routes_title": {
-        "profile": "User Profile",
+        "profile": "My Profile",
         "settings_password": "Change Password",
         "settings_storage": "Storage",
         "settings_mobile": "Settings",
+        "users_list": "User Management",
         "users_user": "User",
         "users_detail": "Detail",
         "users_storage_usage": "Storage Usage",
         "users_password": "Password",
-        "users_delete": "Delete User"
+        "users_delete": "Delete User",
+        "user_create": "Create User"
     },
     "profile": {
         "store_pass": "保存您的密码",
         "change_pass": "修改您的密码",
-        "profile_info": "用户信息",
+        "profile_info": "用户信息"
-        "photo_description": "修改您的头像",
-        "photo_supported": "支持的格式 .png, .jpg, .jpeg."
     },
     "page_registration": {
         "title": "创建一个新用户",
@@ -307,13 +307,23 @@
             "role": "Role",
             "storage_used": "Storage Used",
             "storage_capacity": "Storage Capacity",
+            "created_at": "Registered",
             "action": "Action"
+        },
+        "create_user": {
+            "group_details": "Account Details",
+            "group_settings": "Account Settings",
+            "submit": "Create User",
+            "label_email": "Type E-mail",
+            "label_name": "Type full name",
+            "label_conf_pass": "Confirm password"
         }
     },
     "toaster": {
         "changed_user": "You successfully changed user's role!",
         "sended_password": "You successfully send user email for reset password!",
-        "changed_capacity": "You successfully changed user's storage size!"
+        "changed_capacity": "You successfully changed user's storage size!",
+        "created_user": "User was created successfully!"
     },
     "roles": {
         "admin": "Admin",
@@ -321,5 +331,9 @@
     },
     "datatable": {
         "paginate_info": "Showing 1 - {visible} from {total} records"
+    },
+    "input_image": {
+        "title": "Upload Image",
+        "supported": "Supported formats are .png, .jpg, .jpeg."
     }
 }

resources/js/i18n/lang/en.json

@@ -3,22 +3,22 @@
         "create_new_password": "create-new-password"
     },
     "routes_title": {
-        "profile": "User Profile",
+        "profile": "My Profile",
         "settings_password": "Change Password",
         "settings_storage": "Storage",
         "settings_mobile": "Settings",
+        "users_list": "User Management",
         "users_user": "User",
         "users_detail": "Detail",
         "users_storage_usage": "Storage Usage",
         "users_password": "Password",
-        "users_delete": "Delete User"
+        "users_delete": "Delete User",
+        "user_create": "Create User"
     },
     "profile": {
         "store_pass": "Store New Password",
         "change_pass": "Change Password",
-        "profile_info": "Profile Information",
+        "profile_info": "Profile Information"
-        "photo_description": "Change your avatar",
-        "photo_supported": "Supported formats are .png, .jpg, .jpeg."
     },
     "page_registration": {
         "title": "Create New Account",
@@ -307,13 +307,23 @@
             "role": "Role",
             "storage_used": "Storage Used",
             "storage_capacity": "Storage Capacity",
+            "created_at": "Registered",
             "action": "Action"
+        },
+        "create_user": {
+            "group_details": "Account Details",
+            "group_settings": "Account Settings",
+            "submit": "Create User",
+            "label_email": "Type E-mail",
+            "label_name": "Type full name",
+            "label_conf_pass": "Confirm password"
         }
     },
     "toaster": {
         "changed_user": "You successfully changed user's role!",
         "sended_password": "You successfully send user email for reset password!",
-        "changed_capacity": "You successfully changed user's storage size!"
+        "changed_capacity": "You successfully changed user's storage size!",
+        "created_user": "User was created successfully!"
     },
     "roles": {
         "admin": "Admin",
@@ -321,5 +331,9 @@
     },
     "datatable": {
         "paginate_info": "Showing 1 - {visible} from {total} records"
+    },
+    "input_image": {
+        "title": "Upload Image",
+        "supported": "Supported formats are .png, .jpg, .jpeg."
     }
 }

resources/js/i18n/lang/sk.json

@@ -3,22 +3,22 @@
         "create_new_password": "vytvorit-nove-heslo"
     },
     "routes_title": {
-        "profile": "Uživateľský profil",
+        "profile": "Môj profil",
         "settings_password": "Zmeniť heslo",
         "settings_storage": "Úložisko",
         "settings_mobile": "Nastavenia",
+        "users_list": "Správca uživateľov",
         "users_user": "Uživateľ",
         "users_detail": "Detail",
         "users_storage_usage": "Využitie úložiska",
         "users_password": "Heslo",
-        "users_delete": "Vymazať uživateľa"
+        "users_delete": "Vymazať uživateľa",
+        "user_create": "Vytvoriť uživateľa"
     },
     "profile": {
         "store_pass": "Uložiť nové heslo",
         "change_pass": "Zmeniť heslo",
-        "profile_info": "Profil",
+        "profile_info": "Profil"
-        "photo_description": "Zmeň svoj avatar",
-        "photo_supported": "Podporované formáty sú .png, .jpg, .jpeg."
     },
     "page_registration": {
         "title": "Vytvorenie nového účtu",
@@ -307,13 +307,23 @@
             "role": "Rola",
             "storage_used": "Využitie úložiska",
             "storage_capacity": "Kapacita úložiska",
+            "created_at": "Registrovaný",
             "action": "Akcia"
+        },
+        "create_user": {
+            "group_details": "Detail účtu",
+            "group_settings": "Nastavenia účtu",
+            "submit": "Vytvoriť uživateľa",
+            "label_email": "Napíšte E-mail",
+            "label_name": "Napíšte celé meno",
+            "label_conf_pass": "Potvrďte heslo"
         }
     },
     "toaster": {
         "changed_user": "Úspešne ste zmenili rolu užívateľa",
         "sended_password": "Úspešne ste odoslali email uživateľovi pre reset hesla!",
-        "changed_capacity": "Úspešne ste zmenili kapacitu úložiska uživateľa!"
+        "changed_capacity": "Úspešne ste zmenili kapacitu úložiska uživateľa!",
+        "created_user": "Úspešne ste vytvorili uživateľa1"
     },
     "roles": {
         "admin": "Admin",
@@ -321,5 +331,9 @@
     },
     "datatable": {
         "paginate_info": "Zobrazuje sa 1 - {visible} z {total} položiek"
+    },
+    "input_image": {
+        "title": "Vložte obrázok",
+        "supported": "Podporované formáty sú .png, .jpg, .jpeg."
     }
 }

resources/js/router.js

@@ -23,6 +23,7 @@ import Admin from './views/Admin'
 import Users from './views/Admin/Users'
 
 import User from './views/Admin/Users/User'
+import UserCreate from './views/Admin/Users/UserCreate'
 import UserDetail from './views/Admin/Users/UserTabs/UserDetail'
 import UserDelete from './views/Admin/Users/UserTabs/UserDelete'
 import UserStorage from './views/Admin/Users/UserTabs/UserStorage'
@@ -120,7 +121,16 @@ const router = new Router({
                     component: Users,
                     meta: {
                         requiresAuth: true,
-                        title: 'Users'
+                        title: i18n.t('routes_title.users_list')
+                    },
+                },
+                {
+                    name: 'UserCreate',
+                    path: '/admin/user/create',
+                    component: UserCreate,
+                    meta: {
+                        requiresAuth: true,
+                        title: i18n.t('routes_title.user_create')
                     },
                 },
                 {

resources/js/store/modules/app.js

@@ -1,10 +1,21 @@
+import i18n from '@/i18n/index'
+
 const defaultState = {
 	fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
 	FilePreviewType: localStorage.getItem('preview_type') || 'list',
-	appSize: undefined,
 	config: undefined,
 	authorized: undefined,
 	homeDirectory: undefined,
+	roles: [
+		{
+			label: i18n.t('roles.admin'),
+			value: 'admin',
+		},
+		{
+			label: i18n.t('roles.user'),
+			value: 'user',
+		},
+	],
 }
 const actions = {
 	changePreviewType: ({commit, dispatch, state, getters}) => {
@@ -40,9 +51,6 @@ const mutations = {
 
 		localStorage.setItem('file_info_visibility', isVisible)
 	},
-	SET_APP_WIDTH(state, scale) {
-		state.appSize = scale
-	},
 	SET_AUTHORIZED(state, data) {
 		state.authorized = data
 	},
@@ -53,7 +61,7 @@ const mutations = {
 const getters = {
 	fileInfoVisible: state => state.fileInfoPanelVisible,
 	FilePreviewType: state => state.FilePreviewType,
-	appSize: state => state.appSize,
+	roles: state => state.roles,
 	api: state => state.config.api,
 	config: state => state.config,
 	homeDirectory: state => state.homeDirectory,

resources/js/views/Admin.vue

@@ -1,11 +1,11 @@
 <template>
     <section id="viewport">
 
-        <ContentSidebar>
+        <ContentSidebar v-if="false">
 
             <!--Locations-->
             <ContentGroup :title="$t('admin_menu.admin_label')" class="navigator">
-                <div class="menu-list-wrapper">
+                <div class="menu-list-wrapper vertical">
                     <router-link :to="{name: 'Users'}" class="menu-list-item link">
                         <div class="icon">
                             <users-icon size="17"></users-icon>
@@ -18,7 +18,9 @@
             </ContentGroup>
         </ContentSidebar>
 
+        <keep-alive :include="['Users']">
             <router-view/>
+        </keep-alive>
     </section>
 </template>
 

resources/js/views/Admin/Users.vue

@@ -1,14 +1,26 @@
 <template>
     <div id="single-page">
-        <div id="page-content" class="full-width" v-if="! isLoading">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
+                <div class="table-tools">
+                    <div class="buttons">
+                        <router-link :to="{name: 'UserCreate'}">
+                            <MobileActionButton icon="user-plus">
+                                {{ $t('admin_page_user.create_user.submit') }}
+                            </MobileActionButton>
+                        </router-link>
+                    </div>
+                    <div class="searching">
+
+                    </div>
+                </div>
                 <DatatableWrapper :paginator="true" :columns="columns" :data="users" class="table table-users">
                     <template scope="{ row }">
                         <tr>
-                            <td style="width: 320px">
+                            <td style="width: 300px">
                                 <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}" tag="div" class="user-thumbnail">
                                     <div class="avatar">
                                         <img :src="row.data.attributes.avatar" :alt="row.data.attributes.name">
@@ -34,6 +46,11 @@
                                     {{ row.data.attributes.storage.capacity_formatted }}
                                 </span>
                             </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.data.attributes.created_at_formatted }}
+                                </span>
+                            </td>
                             <td>
                                 <div class="action-icons">
                                     <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
@@ -57,8 +74,10 @@
 
 <script>
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
     import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import PageHeader from '@/components/Others/PageHeader'
     import ColorLabel from '@/components/Others/ColorLabel'
@@ -68,11 +87,13 @@
     export default {
         name: 'Profile',
         components: {
+            MobileActionButton,
             DatatableWrapper,
             SectionTitle,
             MobileHeader,
             Trash2Icon,
             PageHeader,
+            ButtonBase,
             ColorLabel,
             Edit2Icon,
             Spinner,
@@ -84,27 +105,32 @@
                 columns: [
                     {
                         label: this.$t('admin_page_user.table.name'),
-                        field: 'attributes.name',
+                        field: 'data.attributes.name',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_page_user.table.role'),
-                        field: 'attributes.role',
+                        field: 'data.attributes.role',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_page_user.table.storage_used'),
-                        field: 'attributes.storage.used',
+                        field: 'data.attributes.storage.used',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_page_user.table.storage_capacity'),
-                        field: 'attributes.storage.capacity',
+                        field: 'data.attributes.storage.capacity',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.created_at'),
+                        field: 'data.attributes.created_at_formatted',
                         sortable: true
                     },
                     {
                         label: this.$t('admin_page_user.table.action'),
-                        field: 'action',
+                        field: 'data.action',
                         sortable: false
                     },
                 ],
@@ -136,7 +162,18 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .table-tools {
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 0 10px;
+        position: sticky;
+        top: 40px;
+        z-index: 9;
+    }
+
     .action-icons {
+        white-space: nowrap;
 
         a {
             display: inline-block;
@@ -166,6 +203,7 @@
 
         .cell-item {
             @include font-size(15);
+            white-space: nowrap;
         }
     }
 
@@ -188,8 +226,15 @@
 
         .info {
 
-            .name {
+            .name, .email {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 display: block;
+            }
+
+            .name {
                 @include font-size(15);
                 line-height: 1;
             }
@@ -201,8 +246,18 @@
         }
     }
 
+    @media only screen and (max-width: 690px) {
+        .table-tools {
+            padding: 0 0 5px;
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
 
+        .table-tools {
+            background: $dark_mode_background;
+        }
+
         .action-icons {
 
             .icon {

resources/js/views/Admin/Users/User.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="single-page" v-if="app">
-        <div id="page-content" v-if="! isLoading">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
 
             <div class="content-page">
 
@@ -168,7 +168,6 @@
                 }
             }
         }
-
     }
 
 </style>

resources/js/views/Admin/Users/UserCreate.vue

@@ -0,0 +1,234 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" class="small-width">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                    <div class="form-group">
+                        <b class="form-group-label">
+                            {{ $t('admin_page_user.create_user.group_details') }}
+                        </b>
+
+                        <!--Avatar-->
+                        <div class="block-wrapper">
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
+                                <ImageInput v-model="user.avatar" :error="errors[0]" />
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Email-->
+                        <div class="block-wrapper">
+                            <label>{{ $t('page_registration.label_email') }}</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
+                                <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Name-->
+                        <div class="block-wrapper">
+                            <label>{{ $t('page_registration.label_name') }}</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
+                                <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Password-->
+                        <div class="wrapper-inline">
+                            <div class="block-wrapper">
+                                <label>{{ $t('page_registration.label_pass') }}</label>
+                                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
+                                    <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" :class="{'is-error': errors[0]}"/>
+                                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                                </ValidationProvider>
+                            </div>
+
+                            <div class="block-wrapper">
+                                <label>{{ $t('page_registration.label_confirm_pass') }}</label>
+                                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
+                                    <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" :class="{'is-error': errors[0]}"/>
+                                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                                </ValidationProvider>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <b class="form-group-label">
+                            {{ $t('admin_page_user.create_user.group_settings') }}
+                        </b>
+
+
+                        <!--User Role-->
+                        <div class="block-wrapper">
+                            <label>{{ $t('admin_page_user.select_role') }}:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
+                                <SelectInput v-model="user.role" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <!--Storage Capacity-->
+                        <div class="block-wrapper">
+                            <label>{{ $t('admin_page_user.label_change_capacity') }}</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
+                                <input v-model="user.storage_capacity" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" :class="{'is-error': errors[0]}"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+                            {{ $t('admin_page_user.create_user.submit') }}
+                        </ButtonBase>
+                    </div>
+                </ValidationObserver>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageHeader from '@/components/Others/PageHeader'
+    import {required} from 'vee-validate/dist/rules'
+    import { mapGetters } from 'vuex'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            SectionTitle,
+            MobileHeader,
+            SelectInput,
+            ButtonBase,
+            ImageInput,
+            PageHeader,
+            required,
+        },
+        computed: {
+            ...mapGetters(['roles']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                user: {
+                    role: '',
+                    avatar: undefined,
+                    name: '',
+                    email: '',
+                    password: '',
+                    password_confirmation: '',
+                    storage_capacity: 5,
+                },
+            }
+        },
+        methods: {
+            async createUser() {
+
+                // Validate fields
+                const isValid = await this.$refs.createUser.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Create form
+                let formData = new FormData()
+
+                // Add image to form
+                formData.append('name', this.user.name)
+                formData.append('role', this.user.role)
+                formData.append('email', this.user.email)
+                formData.append('password', this.user.password)
+                formData.append('storage_capacity', this.user.storage_capacity)
+                formData.append('password_confirmation', this.user.password_confirmation)
+
+                // Append avatar if exist
+                if (this.user.avatar)
+                    formData.append('avatar', this.user.avatar)
+
+                // Send request to get user token
+                axios
+                    .post('/api/users/create', formData, {
+                        headers: {
+                            'Content-Type': 'multipart/form-data',
+                        }
+                    })
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Show toaster
+                        events.$emit('toaster', {
+                            type: 'success',
+                            message: this.$t('toaster.created_user'),
+                        })
+
+                        // Go to User page
+                        this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
+                    })
+                    .catch(error => {
+
+                        // Validation errors
+                        if (error.response.status == 422) {
+
+                            // Email validation error
+                            if (error.response.data.errors['email']) {
+
+                                this.$refs.createUser.setErrors({
+                                    'email': error.response.data.errors['email']
+                                });
+                            }
+
+                            // Password validation error
+                            if (error.response.data.errors['password']) {
+
+                                this.$refs.createUser.setErrors({
+                                    'password': error.response.data.errors['password']
+                                });
+                            }
+
+                            // Password validation error
+                            if (error.response.data.errors['storage_capacity']) {
+
+                                this.$refs.createUser.setErrors({
+                                    'storage capacity': 'The storage capacity must be lower than 10 digit number.'
+                                });
+                            }
+                        } else {
+
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+</style>

resources/js/views/Admin/Users/UserTabs/UserDelete.vue

@@ -89,6 +89,15 @@
 
                         this.$router.push({name: 'Users'})
                     })
+                    .catch(() => {
+
+                        this.isSendingRequest = false
+
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
             }
         }
     }

resources/js/views/Admin/Users/UserTabs/UserDetail.vue

@@ -64,6 +64,7 @@
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import SetupBox from '@/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
+    import { mapGetters } from 'vuex'
     import {events} from "@/bus"
     import axios from 'axios'
 
@@ -81,20 +82,13 @@
             SetupBox,
             required,
         },
+        computed: {
+            ...mapGetters(['roles']),
+        },
         data() {
             return {
                 isLoading: false,
                 isSendingRequest: false,
-                roles: [
-                    {
-                        label: this.$t('roles.admin'),
-                        value: 'admin',
-                    },
-                    {
-                        label: this.$t('roles.user'),
-                        value: 'user',
-                    },
-                ],
                 userRole: undefined,
             }
         },
@@ -129,8 +123,14 @@
                             message: this.$t('toaster.changed_user'),
                         })
                     })
-                    .catch(error => {
+                    .catch(() => {
+
                         this.isSendingRequest = false
+
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
                     })
             }
         }

resources/js/views/Admin/Users/UserTabs/UserPassword.vue

@@ -57,6 +57,15 @@
                             message: this.$t('toaster.sended_password'),
                         })
                     })
+                    .catch(() => {
+
+                        this.isSendingRequest = false
+
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
             }
         }
     }

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -22,6 +22,8 @@
                             <input v-model="capacity"
                                    :placeholder="$t('admin_page_user.label_change_capacity')"
                                    type="number"
+                                   min="1"
+                                   max="999999999"
                                    :class="{'is-error': errors[0]}"
                             />
                             <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
@@ -106,6 +108,23 @@
                     .catch(error => {
 
                         this.isSendingRequest = false
+
+                        if (error.response.status == 422) {
+
+                            // Password validation error
+                            if (error.response.data.errors['attributes.storage_capacity']) {
+
+                                this.$refs.changeStorageCapacity.setErrors({
+                                    'Capacity': 'The storage capacity must be lower than 10 digit number.'
+                                });
+                            }
+                        } else {
+
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
+                        }
                     })
             },
             getStorageDetails() {

resources/js/views/Auth/SignIn.vue

@@ -86,8 +86,8 @@
             return {
                 isLoading: false,
                 checkedAccount: undefined,
-                loginPassword: 'vuefilemanager',
+                loginPassword: '',
-                loginEmail: 'howdy@hi5ve.digital',
+                loginEmail: '',
             }
         },
         methods: {

resources/js/views/FilePages/Files.vue

@@ -5,7 +5,7 @@
 
             <!--Locations-->
             <ContentGroup :title="$t('sidebar.locations_title')">
-                <div class="menu-list-wrapper">
+                <div class="menu-list-wrapper vertical">
                     <a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
                         <div class="icon">
                             <home-icon size="17"></home-icon>
@@ -38,7 +38,7 @@
             <!--Favourites-->
             <ContentGroup :title="$t('sidebar.favourites')">
 
-                <div class="menu-list-wrapper favourites"
+                <div class="menu-list-wrapper vertical favourites"
                      :class="{ 'is-dragenter': area }"
                      @dragover.prevent="dragEnter"
                      @dragleave="dragLeave"

resources/js/views/FilePages/SharedFiles.vue

@@ -5,7 +5,7 @@
 
             <!--Navigator-->
             <ContentGroup :title="$t('sidebar.locations_title')">
-                <div class="menu-list-wrapper">
+                <div class="menu-list-wrapper vertical">
                     <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
                         <div class="icon">
                             <link-icon size="17"></link-icon>

resources/js/views/FilePages/Trash.vue

@@ -4,7 +4,7 @@
 
             <!--Tools-->
             <ContentGroup :title="$t('sidebar.tools_title')" class="navigator">
-                <div class="menu-list-wrapper">
+                <div class="menu-list-wrapper vertical">
                     <div class="menu-list-item link" @click="emptyTrash()">
                         <div class="icon">
                             <trash-icon size="17"></trash-icon>

resources/js/views/Settings.vue

@@ -1,15 +1,28 @@
 <template>
-    <section id="viewport">
+    <div id="single-page" v-if="app">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
 
-        <ContentSidebar>
+            <div class="content-page">
 
-            <!--User Headline-->
+                <!--User thumbnail-->
-            <UserHeadline class="user-headline"/>
+                <div class="user-thumbnail">
+                    <div class="avatar">
+                        <UserImageInput
+                                v-model="avatar"
+                                :avatar="app.user.avatar"
+                        />
+                    </div>
+                    <div class="info">
+                        <b class="name">{{ app.user.name }}</b>
+                        <span class="email">{{ app.user.email }}</span>
+                    </div>
+                </div>
 
-            <!--Locations-->
+                <!--Page Tab links-->
-            <ContentGroup title="Menu" class="navigator">
+                <div class="menu-list-wrapper horizontal">
-                <div class="menu-list-wrapper">
+                    <router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
-                    <router-link :to="{name: 'Profile'}" class="menu-list-item link">
                         <div class="icon">
                             <user-icon size="17"></user-icon>
                         </div>
@@ -17,15 +30,8 @@
                             {{ $t('menu.profile') }}
                         </div>
                     </router-link>
-                    <router-link :to="{name: 'Password'}" class="menu-list-item link">
+
-                        <div class="icon">
+                    <router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
-                            <lock-icon size="17"></lock-icon>
-                        </div>
-                        <div class="label">
-                            {{ $t('menu.password') }}
-                        </div>
-                    </router-link>
-                    <router-link v-if="config.storageLimit" :to="{name: 'Storage'}" class="menu-list-item link">
                         <div class="icon">
                             <hard-drive-icon size="17"></hard-drive-icon>
                         </div>
@@ -33,18 +39,42 @@
                             {{ $t('menu.storage') }}
                         </div>
                     </router-link>
-                </div>
-            </ContentGroup>
-        </ContentSidebar>
 
-        <router-view/>
+                    <router-link replace :to="{name: 'Password'}" class="menu-list-item link">
-    </section>
+                        <div class="icon">
+                            <lock-icon size="17"></lock-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('menu.password') }}
+                        </div>
+                    </router-link>
+
+                    <!--<router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name" class="menu-list-item link">
+                        <div class="icon">
+                            <trash2-icon size="17"></trash2-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_page_user.tabs.delete') }}
+                        </div>
+                    </router-link>-->
+                </div>
+
+                <!--Router Content-->
+                <router-view :user="app.user" />
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
 </template>
 
 <script>
-    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import UserImageInput from '@/components/Others/UserImageInput'
-    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
-    import UserHeadline from '@/components/Sidebar/UserHeadline'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+
     import { mapGetters } from 'vuex'
     import {
         HardDriveIcon,
@@ -54,23 +84,73 @@
 
     export default {
         name: 'Settings',
-        computed: {
-            ...mapGetters(['config']),
-        },
         components: {
-            ContentSidebar,
+            UserImageInput,
+            MobileHeader,
+            PageHeader,
+            Spinner,
             HardDriveIcon,
-            UserHeadline,
-            ContentGroup,
             UserIcon,
             LockIcon,
         },
+        computed: {
+            ...mapGetters([
+                'config', 'app'
+            ]),
+        },
+        data() {
+            return {
+                avatar: undefined,
+                isLoading: false,
+            }
+        },
     }
 </script>
 
 <style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
 
-    .user-headline {
+    .user-thumbnail {
-        margin-bottom: 38px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+
+            img {
+                line-height: 0;
+                width: 62px;
+                height: 62px;
+                border-radius: 12px;
+            }
+        }
+
+        .info {
+
+            .name {
+                display: block;
+                @include font-size(17);
+                line-height: 1;
+            }
+
+            .email {
+                color: $text-muted;
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
     }
 </style>

resources/js/views/Shared/SharedPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="shared" :class="appSize">
+    <div id="shared">
 
         <!--Loading Spinenr-->
         <Spinner v-if="isPageLoading"/>
@@ -78,7 +78,6 @@
     import Vignette from '@/components/Others/Vignette'
     import Alert from '@/components/FilesView/Alert'
     import {required} from 'vee-validate/dist/rules'
-    import {ResizeSensor} from 'css-element-queries'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
     import axios from 'axios'
@@ -103,7 +102,7 @@
             Alert,
         },
         computed: {
-            ...mapGetters(['config', 'sharedDetail', 'sharedFile', 'appSize']),
+            ...mapGetters(['config', 'sharedDetail', 'sharedFile']),
         },
         data() {
             return {

resources/js/views/User/Password.vue

@@ -1,16 +1,11 @@
 <template>
-    <div id="single-page">
+    <div class="page-tab">
-        <div id="page-content" class="full-width" v-if="! isLoading">
+        <div class="page-tab-group">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
-
-            <div class="content-page">
-
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
 
                 <div class="block-wrapper">
-                        <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                    <b class="form-group-label">{{ $t('page_create_password.label_new_pass') }}:</b>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
@@ -39,10 +34,6 @@
             </ValidationObserver>
         </div>
     </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
 </template>
 
 <script>

resources/js/views/User/Profile.vue

@@ -1,30 +1,14 @@
 <template>
-    <div id="single-page">
+    <div class="page-tab">
-        <div id="page-content" class="full-width" v-if="! isLoading">
+        <div class="page-tab-group">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
-
-            <div class="content-page">
-                <div class="avatar-upload">
-                    <UserImageInput
-                            v-model="avatar"
-                            :avatar="app.user.avatar"
-                    />
-                    <div class="info">
-                        <span class="description">{{ $t('profile.photo_description') }}</span>
-                        <span class="supported">{{ $t('profile.photo_supported') }}</span>
-                    </div>
-                </div>
-
             <ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
-
                 <div class="block-wrapper">
                     <label>{{ $t('page_registration.label_email') }}</label>
                     <div class="input-wrapper">
-                            <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
+                        <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')"
+                               type="email" disabled/>
                     </div>
                 </div>
-
                 <div class="block-wrapper">
                     <label>{{ $t('page_registration.label_name') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
@@ -38,15 +22,10 @@
             </ValidationObserver>
         </div>
     </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
 </template>
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import UserImageInput from '@/components/Others/UserImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageHeader from '@/components/Others/PageHeader'
@@ -54,15 +33,12 @@
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
     import {debounce} from 'lodash'
-    import {events} from '@/bus'
-    import axios from 'axios'
 
     export default {
         name: 'Profile',
         components: {
             ValidationProvider,
             ValidationObserver,
-            UserImageInput,
             MobileHeader,
             PageHeader,
             ButtonBase,
@@ -81,7 +57,6 @@
         },
         data() {
             return {
-                avatar: undefined,
                 name: '',
                 isLoading: false,
             }
@@ -100,29 +75,6 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    .avatar-upload {
-        display: flex;
-        align-items: center;
-        margin-bottom: 30px;
-
-        .info {
-            margin-left: 25px;
-
-            .description {
-                @include font-size(15);
-                font-weight: 700;
-                color: $text;
-            }
-
-            .supported {
-                display: block;
-                @include font-size(12);
-                font-weight: 500;
-                color: $light_text;
-            }
-        }
-    }
-
     @media only screen and (max-width: 960px) {
 
         .form {
@@ -136,16 +88,6 @@
 
     @media (prefers-color-scheme: dark) {
 
-        .avatar-upload .info {
-
-            .description {
-                color: $dark_mode_text_primary;
-            }
-
-            .supported {
-                color: $dark_mode_text_secondary;
-            }
-        }
     }
 
 </style>

resources/js/views/User/Storage.vue

@@ -1,14 +1,11 @@
 <template>
-    <div id="single-page">
+    <div class="page-tab" v-if="storage">
-        <div id="page-content" class="full-width" v-if="! isLoading">
+        <div class="page-tab-group">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <b class="form-group-label">{{ $t('storage.sec_capacity') }}</b>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
-
-            <div class="content-page">
-                <SectionTitle>{{ $t('storage.sec_capacity') }}</SectionTitle>
             <StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
-
+        </div>
-                <SectionTitle>{{ $t('storage.sec_details') }}</SectionTitle>
+        <div class="page-tab-group">
+            <b class="form-group-label">{{ $t('storage.sec_details') }}</b>
             <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
             <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
             <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
@@ -16,10 +13,6 @@
             <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
         </div>
     </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
 </template>
 
 <script>

resources/sass/app.scss

@@ -26,16 +26,32 @@
   padding-left: 25px;
   padding-right: 25px;
 
-  .page-content {
+  #page-content {
-    height: 100%;
-    max-width: 1024px;
-    width: 100%;
     margin: 0 auto;
 
-    .full-width {
+    &.full-width {
       max-width: 100%;
     }
+
+    &.medium-width {
+      max-width: 1024px;
     }
+
+    &.small-width {
+      max-width: 690px;
+    }
+  }
+}
+
+.form-group {
+  margin-bottom: 25px;
+}
+
+.form-group-label {
+  @include font-size(17);
+  font-weight: 500;
+  margin-bottom: 25px;
+  display: block;
 }
 
 .menu-list-wrapper {
@@ -55,10 +71,15 @@
     margin-bottom: 30px;
     overflow-x: auto;
 
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
     .menu-list-item {
       display: inline-block;
-      padding: 20px 10px;
+      padding: 15px 10px;
-      margin: 0 10px;
+      margin: 15px 10px 0;
+      border-bottom: 2px solid transparent;
 
       &:first-child {
         margin-left: 0;
@@ -195,6 +216,19 @@
 
 @media only screen and (max-width: 1024px) {
 
+  #single-page {
+
+    #page-content {
+
+      &.full-width,
+      &.medium-width,
+      &.small-width {
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+
   .menu-list-wrapper {
 
     .menu-list-item {
@@ -212,6 +246,14 @@
 
 @media only screen and (max-width: 960px) {
 
+  #single-page {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+
+@media only screen and (max-width: 690px) {
+
   #single-page {
     padding-left: 15px;
     padding-right: 15px;

resources/sass/vue-file-manager/_forms.scss

@@ -71,7 +71,7 @@ input[type="password"],
 input[type="text"],
 input[type="number"],
 input[type="email"] {
-  border: 1px solid transparent;
+  border: 1px solid #ebebeb;
   @include transition(150ms);
   @include font-size(15);
   border-radius: 8px;
@@ -119,11 +119,10 @@ input[type="email"] {
   }
 }
 
-.form-group-label {
+@media only screen and (max-width: 1024px) {
-  @include font-size(17);
+  .form {
-  font-weight: 500;
+    max-width: 100%;
-  margin-bottom: 25px;
+  }
-  display: block;
 }
 
 @media only screen and (max-width: 960px) {
@@ -212,6 +211,7 @@ input[type="email"] {
   input[type="text"],
   input[type="number"],
   input[type="email"] {
+    border-color: $dark_mode_foreground;
     background: $dark_mode_foreground;
     color: $dark_mode_text_primary;
 

resources/views/index.blade.php

@@ -8,7 +8,7 @@
 
     <title>{{ config('vuefilemanager.app_name') }} | {{ __('vuefilemanager.app_description') }}</title>
 
-    <link rel="icon" href="{{ asset('favicon.ico') }}?v={{ get_version() }}">
+    <link rel="icon" href="{{ asset('favicon.png') }}?v={{ get_version() }}">
     <link href="{{ asset('css/app.css') }}?v={{ get_version() }}" rel="stylesheet">
 
     {{-- Apple Mobile Web App--}}

routes/api.php

@@ -88,6 +88,8 @@ Route::group(['middleware' => ['auth:api', 'auth.master', 'auth.admin', 'scope:m
     Route::get('/users/{id}/detail', 'Admin\UserController@details');
     Route::get('/users', 'Admin\UserController@users');
 
+    // Edit users
+    Route::post('/users/create', 'Admin\UserController@create_user');
     Route::patch('/users/{id}/role', 'Admin\UserController@change_role');
     Route::delete('/users/{id}/delete', 'Admin\UserController@delete_user');
     Route::patch('/users/{id}/capacity', 'Admin\UserController@change_storage_capacity');