v1.6.1

.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',
-            'password' => \Hash::make('secret'),
+            'role'     => 'admin',
+            'password' => \Hash::make('vuefilemanager'),
         ]);
 
-        $this->info('Test user created. Email: ' . $user->email . ' Password: secret');
+        // Create settings
+        $settings = UserSettings::create([
+            'user_id' => $user->id
+        ]);
+
+        $this->info('Test user created. Email: ' . $user->email . ' Password: vuefilemanager');
     }
 }

app/Console/Commands/UpgradeApp.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\User;
+use App\UserSettings;
+use Illuminate\Console\Command;
+
+class UpgradeApp extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'upgrade:app {version}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Upgrade application to new version';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    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! 🥳🥳🥳');
+    }
+
+    /**
+     * Upgrade script to version 1.6
+     */
+    public function version_1_6() {
+
+        // Migrate new tables and changes
+        $this->call('migrate');
+
+        // Create user settings records
+        $this->info('Updating users options...');
+
+        User::all()->each(function ($user) {
+            $this->info('Update user with id: ' . $user->id);
+            UserSettings::create(['user_id' => $user->id]);
+        });
+
+        $this->info('Updating user options is done!');
+
+        // Set up admin
+        $email = $this->ask('Which user would you like set up as admin? Please type user email');
+
+        $admin = User::where('email', $email)->first();
+
+        if (! $admin) {
+            $email = $this->ask('We can\'t find user with this email, please try it again');
+            $admin = User::where('email', $email)->first();
+        }
+
+        // Save new role for selected user
+        $admin->role = 'admin';
+        $admin->save();
+
+        $this->info('Admin was set up successfully');
+    }
+}

app/Console/Kernel.php

@@ -5,6 +5,7 @@ namespace App\Console;
 use App\Console\Commands\Deploy;
 use App\Console\Commands\SetupDevEnvironment;
 use App\Console\Commands\SetupProductionEnvironment;
+use App\Console\Commands\UpgradeApp;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
@@ -18,6 +19,7 @@ class Kernel extends ConsoleKernel
     protected $commands = [
         SetupProductionEnvironment::class,
         SetupDevEnvironment::class,
+        UpgradeApp::class,
         Deploy::class,
     ];
 

app/Http/Controllers/Admin/UserController.php

@@ -0,0 +1,222 @@
+<?php
+
+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;
+
+class UserController extends Controller
+{
+    /**
+     * Get user details
+     *
+     * @param $id
+     * @return UserResource
+     */
+    public function details($id)
+    {
+        return new UserResource(User::findOrFail($id));
+    }
+
+    /**
+     * Get user storage details
+     *
+     * @param $id
+     * @return UserStorageResource
+     */
+    public function storage($id)
+    {
+        return new UserStorageResource(User::findOrFail($id));
+    }
+
+    /**
+     * Get all users
+     *
+     * @return UsersCollection
+     */
+    public function users()
+    {
+        return new UsersCollection(User::all());
+    }
+
+    /**
+     * Change user role
+     *
+     * @param ChangeRoleRequest $request
+     * @param $id
+     * @return UserResource
+     */
+    public function change_role(ChangeRoleRequest $request, $id)
+    {
+        $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);
+    }
+
+    /**
+     * Change user storage capacity
+     *
+     * @param ChangeStorageCapacityRequest $request
+     * @param $id
+     * @return UserStorageResource
+     */
+    public function change_storage_capacity(ChangeStorageCapacityRequest $request, $id)
+    {
+        $user = User::findOrFail($id);
+
+        $user->settings()->update($request->input('attributes'));
+
+        return new UserStorageResource($user);
+    }
+
+    /**
+     * Send user password reset link
+     *
+     * @param $id
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function send_password_reset_email($id)
+    {
+        $user = User::findOrFail($id);
+
+        // 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 DeleteUserRequest $request
+     * @param $id
+     * @return ResponseFactory|\Illuminate\Http\Response
+     * @throws \Exception
+     */
+    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');
+        }
+
+        // Validate user name
+        if ($user->name !== $request->name) abort(403);
+
+        $shares = Share::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) {
+
+            // Delete file
+            Storage::delete('/file-manager/' . $file->basename);
+
+            // Delete thumbnail if exist
+            if (!is_null($file->thumbnail)) {
+                Storage::delete('/file-manager/' . $file->getOriginal('thumbnail'));
+            }
+
+            // Delete file permanently
+            $file->forceDelete();
+        });
+
+        // Remove avatar
+        if ($user->avatar) {
+            Storage::delete('/avatars/' . $user->avatar);
+        }
+
+        // Remove folders & shares
+        $folders->each->forceDelete();
+        $shares->each->forceDelete();
+
+        // Remove favourites
+        $user->settings->delete();
+        $user->favourites()->sync([]);
+
+        // Delete user
+        $user->delete();
+
+        return response('Done!', 204);
+    }
+}

app/Http/Controllers/Auth/AuthController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers\Auth;
 
 use App\Http\Requests\Auth\CheckAccountRequest;
 use App\User;
+use App\UserSettings;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\Auth;
@@ -73,12 +74,17 @@ class AuthController extends Controller
         ]);
 
         // Create user
-        User::create([
+        $user = User::create([
             'name'     => $request->name,
             'email'    => $request->email,
             'password' => Hash::make($request->password),
         ]);
 
+        // Create settings
+        $settings = UserSettings::create([
+            'user_id' => $user->id
+        ]);
+
         $response = Route::dispatch(self::make_request($request));
 
         if ($response->isSuccessful()) {

app/Http/Controllers/User/AccountController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers\User;
 use App\FileManagerFile;
 use App\FileManagerFolder;
 use App\Http\Resources\StorageDetailResource;
+use App\Http\Resources\UserStorageResource;
 use App\Http\Tools\Demo;
 use Illuminate\Contracts\Routing\ResponseFactory;
 use Illuminate\Support\Facades\Validator;
@@ -36,13 +37,13 @@ class AccountController extends Controller
             ->get();
 
         return [
-            'user'       => $user->only(['name', 'email', 'avatar']),
+            'user'       => $user->only(['name', 'email', 'avatar', 'role']),
             'favourites' => $user->favourites->makeHidden(['pivot']),
             'tree'       => $tree,
             'storage'    => [
                 'used'       => Metric::bytes($user->used_capacity)->format(),
-                'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
-                'percentage' => get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity')),
+                'capacity'   => format_gigabytes($user->settings->storage_capacity),
+                'percentage' => get_storage_fill_percentage($user->used_capacity, $user->settings->storage_capacity),
             ],
         ];
     }
@@ -50,84 +51,11 @@ class AccountController extends Controller
     /**
      * Get storage details
      *
-     * @return array
+     * @return UserStorageResource
      */
     public function storage()
     {
-        $document_mimetypes = [
-            'pdf', 'numbers', 'xlsx', 'xls', 'txt', 'md', 'rtf', 'pptx', 'ppt', 'odt', 'ods', 'odp', 'epub', 'docx', 'doc', 'csv', 'pages'
-        ];
-
-        $user = Auth::user();
-        $storage_capacity = config('vuefilemanager.user_storage_capacity');
-
-        $images = FileManagerFile::where('user_id', $user->id)
-            ->where('type', 'image')->get()->map(function ($item) {
-                return (int)$item->getOriginal('filesize');
-            })->sum();
-
-        $audios = FileManagerFile::where('user_id', $user->id)
-            ->where('type', 'audio')->get()->map(function ($item) {
-                return (int)$item->getOriginal('filesize');
-            })->sum();
-
-        $videos = FileManagerFile::where('user_id', $user->id)
-            ->where('type', 'video')->get()->map(function ($item) {
-                return (int)$item->getOriginal('filesize');
-            })->sum();
-
-        $documents = FileManagerFile::where('user_id', $user->id)
-            ->whereIn('mimetype', $document_mimetypes)->get()->map(function ($item) {
-                return (int)$item->getOriginal('filesize');
-            })->sum();
-
-        $others = FileManagerFile::where('user_id', $user->id)
-            ->whereNotIn('mimetype', $document_mimetypes)
-            ->whereNotIn('type', ['audio', 'video', 'image'])
-            ->get()->map(function ($item) {
-                return (int)$item->getOriginal('filesize');
-            })->sum();
-
-        $usage = collect([
-            'images'    => [
-                'used'       => $images,
-                'percentage' => get_storage_fill_percentage($images, $storage_capacity),
-            ],
-            'audios'    => [
-                'used'       => $audios,
-                'percentage' => get_storage_fill_percentage($audios, $storage_capacity),
-            ],
-            'videos'    => [
-                'used'       => $videos,
-                'percentage' => get_storage_fill_percentage($videos, $storage_capacity),
-            ],
-            'documents' => [
-                'used'       => $documents,
-                'percentage' => get_storage_fill_percentage($documents, $storage_capacity),
-            ],
-            'others'    => [
-                'used'       => $others,
-                'percentage' => get_storage_fill_percentage($others, $storage_capacity),
-            ],
-        ]);
-
-        return [
-            'data' => [
-                'id'            => '1',
-                'type'          => 'disk',
-                'attributes'    => [
-                    'used'       => Metric::bytes($user->used_capacity)->format(),
-                    'capacity'   => format_gigabytes($storage_capacity),
-                    'percentage' => get_storage_fill_percentage($user->used_capacity, $storage_capacity),
-                ],
-                'relationships' => $usage->map(function ($item) {
-                    return [
-                        'used'       => Metric::bytes($item['used'])->format(),
-                        'percentage' => $item['percentage']
-                    ];
-                })
-            ]
-        ];
+        return new UserStorageResource(Auth::user());
     }
 
     /**
@@ -151,10 +79,15 @@ class AccountController extends Controller
         // Get user
         $user = Auth::user();
 
+        // Check if is demo
         if (is_demo($user->id)) {
             return Demo::response_204();
         }
 
+        // Check role
+        if ($request->has('role')) abort(403);
+
+        // Update data
         if ($request->hasFile('avatar')) {
 
             // Update avatar

app/Http/Kernel.php

@@ -2,6 +2,7 @@
 
 namespace App\Http;
 
+use App\Http\Middleware\AdminCheck;
 use App\Http\Middleware\CookieAuth;
 use App\Http\Middleware\LastCheck;
 use App\Http\Middleware\SharedAuth;
@@ -58,6 +59,7 @@ class Kernel extends HttpKernel
     protected $routeMiddleware = [
         'auth.master'      => CookieAuth::class,
         'auth.shared'      => SharedAuth::class,
+        'auth.admin'       => AdminCheck::class,
         'auth'             => \App\Http\Middleware\Authenticate::class,
         'auth.basic'       => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
         'bindings'         => \Illuminate\Routing\Middleware\SubstituteBindings::class,

app/Http/Middleware/AdminCheck.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Support\Facades\Gate;
+
+class AdminCheck
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        // Check if user have access to administration settings
+        if ( ! Gate::allows('admin-settings')) {
+            abort(403, 'You don\'t have access for this operation!');
+        }
+
+        return $next($request);
+    }
+}

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

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Faker\Factory;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class UserResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        // Faker only for demo purpose
+        $faker = Factory::create();
+
+        return [
+            'data' => [
+                'id'         => (string)$this->id,
+                'type'       => 'user',
+                'attributes' => [
+                    'name'                 => env('APP_DEMO') ? $faker->name : $this->name,
+                    '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/Resources/UserStorageResource.php

@@ -0,0 +1,89 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\FileManagerFile;
+use ByteUnits\Metric;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class UserStorageResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $document_mimetypes = [
+            'pdf', 'numbers', 'xlsx', 'xls', 'txt', 'md', 'rtf', 'pptx', 'ppt', 'odt', 'ods', 'odp', 'epub', 'docx', 'doc', 'csv', 'pages'
+        ];
+
+        // Get all images
+        $images = FileManagerFile::where('user_id', $this->id)
+            ->where('type', 'image')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        // Get all audios
+        $audios = FileManagerFile::where('user_id', $this->id)
+            ->where('type', 'audio')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        // Get all videos
+        $videos = FileManagerFile::where('user_id', $this->id)
+            ->where('type', 'video')->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        // Get all documents
+        $documents = FileManagerFile::where('user_id', $this->id)
+            ->whereIn('mimetype', $document_mimetypes)->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        // Get all other files
+        $others = FileManagerFile::where('user_id', $this->id)
+            ->whereNotIn('mimetype', $document_mimetypes)
+            ->whereNotIn('type', ['audio', 'video', 'image'])
+            ->get()->map(function ($item) {
+                return (int)$item->getOriginal('filesize');
+            })->sum();
+
+        return [
+            'data' => [
+                'id'            => (string)$this->id,
+                'type'          => 'user-storage',
+                'attributes'    => [
+                    'used'       => Metric::bytes($this->used_capacity)->format(),
+                    'capacity'   => format_gigabytes($this->settings->storage_capacity),
+                    'percentage' => (float)get_storage_fill_percentage($this->used_capacity, $this->settings->storage_capacity),
+                ],
+                'meta' => [
+                    'images'    => [
+                        'used'       => Metric::bytes($images)->format(),
+                        'percentage' => (float)get_storage_fill_percentage($images, $this->settings->storage_capacity),
+                    ],
+                    'audios'    => [
+                        'used'       => Metric::bytes($audios)->format(),
+                        'percentage' => (float)get_storage_fill_percentage($audios, $this->settings->storage_capacity),
+                    ],
+                    'videos'    => [
+                        'used'       => Metric::bytes($videos)->format(),
+                        'percentage' => (float)get_storage_fill_percentage($videos, $this->settings->storage_capacity),
+                    ],
+                    'documents' => [
+                        'used'       => Metric::bytes($documents)->format(),
+                        'percentage' => (float)get_storage_fill_percentage($documents, $this->settings->storage_capacity),
+                    ],
+                    'others'    => [
+                        'used'       => Metric::bytes($others)->format(),
+                        'percentage' => (float)get_storage_fill_percentage($others, $this->settings->storage_capacity),
+                    ],
+                ]
+            ]
+        ];
+    }
+}

app/Http/Resources/UsersCollection.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class UsersCollection extends ResourceCollection
+{
+    public $collects = UserResource::class;
+
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'data' => $this->collection,
+        ];
+    }
+}

app/Http/helpers.php

@@ -188,9 +188,9 @@ function make_single_input($request)
  * @param $gigabytes
  * @return string
  */
-function format_gigabytes($megabytes)
+function format_gigabytes($gigabytes)
 {
-    return Metric::megabytes($megabytes)->format();
+    return Metric::gigabytes($gigabytes)->format();
 }
 
 /**
@@ -203,7 +203,7 @@ function format_gigabytes($megabytes)
 function get_storage_fill_percentage($used, $capacity)
 {
     // Format gigabytes to bytes
-    $total = intval(Metric::megabytes($capacity)->numberOfBytes());
+    $total = intval(Metric::gigabytes($capacity)->numberOfBytes());
 
     // Count progress
     $progress = ($used * 100) / $total;
@@ -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);
 }
 
 /**

app/Providers/AuthServiceProvider.php

@@ -26,6 +26,11 @@ class AuthServiceProvider extends ServiceProvider
     {
         $this->registerPolicies();
 
+        // Define admin settings gate
+        Gate::define('admin-settings', function ($user) {
+            return $user->role === 'admin';
+        });
+
         Passport::routes();
 
         Passport::tokensCan([

app/User.php

@@ -63,7 +63,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name', 'email', 'password', 'avatar',
+        'name', 'email', 'password', 'avatar', 'role',
     ];
 
     /**
@@ -86,9 +86,23 @@ class User extends Authenticatable
     ];
 
     protected $appends = [
-        'used_capacity'
+        'used_capacity', 'storage'
     ];
 
+    /**
+     * Get user used storage details
+     *
+     * @return mixed
+     */
+    public function getStorageAttribute() {
+
+        return [
+            'used' => (float) get_storage_fill_percentage($this->used_capacity, $this->settings->storage_capacity),
+            'capacity' => $this->settings->storage_capacity,
+            'capacity_formatted' => Metric::gigabytes($this->settings->storage_capacity)->format(),
+        ];
+    }
+
     /**
      * Get user used storage capacity in bytes
      *
@@ -167,4 +181,14 @@ class User extends Authenticatable
 
         return $this->hasMany(FileManagerFile::class)->withTrashed();
     }
+
+    /**
+     * Get user attributes
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasOne
+     */
+    public function settings() {
+
+        return $this->hasOne(UserSettings::class);
+    }
 }

app/UserSettings.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class UserSettings extends Model
+{
+    public $timestamps = false;
+
+    protected $guarded = ['id'];
+}

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_062714_add_role_to_users_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddRoleToUsersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->enum('role', ['admin', 'user'])->default('user')->after('id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2020_05_26_092649_create_user_settings_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUserSettingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('user_settings', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->integer('user_id');
+            $table->integer('storage_capacity')->default(5);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('user_attributes');
+    }
+}

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

@@ -1,273 +0,0 @@
-# ************************************************************
-# Sequel Pro SQL dump
-# Version 4541
-#
-# http://www.sequelpro.com/
-# https://github.com/sequelpro/sequelpro
-#
-# Host: 127.0.0.1 (MySQL 5.7.25)
-# Database: file-manager
-# Generation Time: 2020-04-03 07:57:39 +0000
-# ************************************************************
-
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8 */;
-/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
-/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
-/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
-
-
-# Dump of table failed_jobs
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `failed_jobs`;
-
-CREATE TABLE `failed_jobs` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `connection` text COLLATE utf8mb4_unicode_ci NOT NULL,
-  `queue` text COLLATE utf8mb4_unicode_ci NOT NULL,
-  `payload` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
-  `exception` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
-  `failed_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table favourite_folder
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `favourite_folder`;
-
-CREATE TABLE `favourite_folder` (
-  `user_id` bigint(20) NOT NULL,
-  `folder_unique_id` bigint(20) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table file_manager_files
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `file_manager_files`;
-
-CREATE TABLE `file_manager_files` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `user_id` bigint(20) DEFAULT NULL,
-  `unique_id` int(11) NOT NULL,
-  `folder_id` int(11) NOT NULL DEFAULT '0',
-  `thumbnail` text COLLATE utf8mb4_unicode_ci,
-  `name` text COLLATE utf8mb4_unicode_ci,
-  `basename` text COLLATE utf8mb4_unicode_ci,
-  `mimetype` text COLLATE utf8mb4_unicode_ci,
-  `filesize` text COLLATE utf8mb4_unicode_ci,
-  `type` text COLLATE utf8mb4_unicode_ci,
-  `deleted_at` timestamp NULL DEFAULT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table file_manager_folders
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `file_manager_folders`;
-
-CREATE TABLE `file_manager_folders` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `user_id` bigint(20) DEFAULT NULL,
-  `unique_id` int(11) NOT NULL,
-  `parent_id` int(11) NOT NULL DEFAULT '0',
-  `name` text COLLATE utf8mb4_unicode_ci,
-  `type` text COLLATE utf8mb4_unicode_ci,
-  `deleted_at` timestamp NULL DEFAULT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table migrations
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `migrations`;
-
-CREATE TABLE `migrations` (
-  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
-  `migration` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `batch` int(11) NOT NULL,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-LOCK TABLES `migrations` WRITE;
-/*!40000 ALTER TABLE `migrations` DISABLE KEYS */;
-
-INSERT INTO `migrations` (`id`, `migration`, `batch`)
-VALUES
-	(1,'2014_10_12_000000_create_users_table',1),
-	(2,'2014_10_12_100000_create_password_resets_table',1),
-	(3,'2016_06_01_000001_create_oauth_auth_codes_table',1),
-	(4,'2016_06_01_000002_create_oauth_access_tokens_table',1),
-	(5,'2016_06_01_000003_create_oauth_refresh_tokens_table',1),
-	(6,'2016_06_01_000004_create_oauth_clients_table',1),
-	(7,'2016_06_01_000005_create_oauth_personal_access_clients_table',1),
-	(8,'2019_08_15_171328_create_file_manager_folders',1),
-	(9,'2019_08_15_171345_create_file_manager_files',1),
-	(10,'2019_08_19_000000_create_failed_jobs_table',1),
-	(11,'2020_03_03_065147_add_user_id_to_file_manager_files_table',2),
-	(12,'2020_03_03_065155_add_user_id_to_file_manager_folders_table',2),
-	(13,'2020_03_03_070319_create_favourites_folders_table',3),
-	(14,'2020_04_02_055021_change_type_attribute_in_file_manager_files_table',4);
-
-/*!40000 ALTER TABLE `migrations` ENABLE KEYS */;
-UNLOCK TABLES;
-
-
-# Dump of table oauth_access_tokens
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `oauth_access_tokens`;
-
-CREATE TABLE `oauth_access_tokens` (
-  `id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `user_id` bigint(20) unsigned DEFAULT NULL,
-  `client_id` bigint(20) unsigned NOT NULL,
-  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
-  `scopes` text COLLATE utf8mb4_unicode_ci,
-  `revoked` tinyint(1) NOT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  `expires_at` datetime DEFAULT NULL,
-  PRIMARY KEY (`id`),
-  KEY `oauth_access_tokens_user_id_index` (`user_id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table oauth_auth_codes
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `oauth_auth_codes`;
-
-CREATE TABLE `oauth_auth_codes` (
-  `id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `user_id` bigint(20) unsigned NOT NULL,
-  `client_id` bigint(20) unsigned NOT NULL,
-  `scopes` text COLLATE utf8mb4_unicode_ci,
-  `revoked` tinyint(1) NOT NULL,
-  `expires_at` datetime DEFAULT NULL,
-  PRIMARY KEY (`id`),
-  KEY `oauth_auth_codes_user_id_index` (`user_id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table oauth_clients
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `oauth_clients`;
-
-CREATE TABLE `oauth_clients` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `user_id` bigint(20) unsigned DEFAULT NULL,
-  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `secret` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
-  `redirect` text COLLATE utf8mb4_unicode_ci NOT NULL,
-  `personal_access_client` tinyint(1) NOT NULL,
-  `password_client` tinyint(1) NOT NULL,
-  `revoked` tinyint(1) NOT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  PRIMARY KEY (`id`),
-  KEY `oauth_clients_user_id_index` (`user_id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-LOCK TABLES `oauth_clients` WRITE;
-/*!40000 ALTER TABLE `oauth_clients` DISABLE KEYS */;
-
-INSERT INTO `oauth_clients` (`id`, `user_id`, `name`, `secret`, `redirect`, `personal_access_client`, `password_client`, `revoked`, `created_at`, `updated_at`)
-VALUES
-	(1,1,'vue-filemanager-auth','oULKgESrN8egvBWW0DGNW3aE8yaHWISUODq3ZDRn','/',0,1,0,'2020-03-01 07:49:48','2020-03-01 07:49:48');
-
-/*!40000 ALTER TABLE `oauth_clients` ENABLE KEYS */;
-UNLOCK TABLES;
-
-
-# Dump of table oauth_personal_access_clients
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `oauth_personal_access_clients`;
-
-CREATE TABLE `oauth_personal_access_clients` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `client_id` bigint(20) unsigned NOT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table oauth_refresh_tokens
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `oauth_refresh_tokens`;
-
-CREATE TABLE `oauth_refresh_tokens` (
-  `id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `access_token_id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `revoked` tinyint(1) NOT NULL,
-  `expires_at` datetime DEFAULT NULL,
-  PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table password_resets
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `password_resets`;
-
-CREATE TABLE `password_resets` (
-  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `token` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  KEY `password_resets_email_index` (`email`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-# Dump of table users
-# ------------------------------------------------------------
-
-DROP TABLE IF EXISTS `users`;
-
-CREATE TABLE `users` (
-  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `name` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `email` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `email_verified_at` timestamp NULL DEFAULT NULL,
-  `password` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `avatar` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
-  `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
-  `created_at` timestamp NULL DEFAULT NULL,
-  `updated_at` timestamp NULL DEFAULT NULL,
-  PRIMARY KEY (`id`),
-  UNIQUE KEY `users_email_unique` (`email`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-
-
-
-
-/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
-/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
-/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

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",

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/>
@@ -21,8 +21,13 @@
             <!--Navigation Sidebar-->
             <MenuBar/>
 
+            <!--Toastr-->
+            <ToastrWrapper/>
+
             <!--File page-->
-            <router-view :class="{'is-scaled-down': isScaledDown}"/>
+            <keep-alive :include="['Admin', 'Users']">
+                <router-view :class="{'is-scaled-down': isScaledDown}"/>
+            </keep-alive>
         </div>
 
         <router-view v-if="layout === 'unauthorized'"/>
@@ -33,6 +38,7 @@
 </template>
 
 <script>
+    import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
     import MobileNavigation from '@/components/Others/MobileNavigation'
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import ShareCreate from '@/components/Others/ShareCreate'
@@ -41,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"
@@ -50,6 +55,7 @@
         name: 'app',
         components: {
             MobileNavigation,
+            ToastrWrapper,
             ShareCreate,
             MobileMenu,
             ShareEdit,
@@ -60,7 +66,7 @@
         },
         computed: {
             ...mapGetters([
-                'appSize', 'isLogged', 'isGuest'
+                'isLogged', 'isGuest'
             ]),
             layout() {
                 if (includes(['VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
@@ -75,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
@@ -102,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/ButtonBase.vue

@@ -27,6 +27,7 @@
         border: 0;
         padding: 10px 28px;
         display: inline-block;
+        white-space: nowrap;
 
         &:active {
             transform: scale(0.95);

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/MenuItemList.vue

@@ -9,6 +9,7 @@
                 <settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
                 <upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
                 <user-icon v-if="link.icon === 'user'" size="17"></user-icon>
+                <users-icon v-if="link.icon === 'users'" size="17"></users-icon>
                 <lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
             </div>
             <b class="menu-link">
@@ -28,6 +29,7 @@
         Trash2Icon,
         PowerIcon,
         ShareIcon,
+        UsersIcon,
         UserIcon,
         LockIcon,
     } from 'vue-feather-icons'
@@ -41,6 +43,7 @@
             SettingsIcon,
             Trash2Icon,
             PowerIcon,
+            UsersIcon,
             ShareIcon,
             LockIcon,
             UserIcon,

resources/js/components/Mobile/MobileHeader.vue

@@ -7,7 +7,7 @@
         </div>
 
         <!--Folder Title-->
-        <div class="location-name">{{ $router.currentRoute.meta.title }}</div>
+        <div class="location-name">{{ title }}</div>
 
         <!--More Actions-->
         <div @click="showMobileNavigation" class="mobile-menu">
@@ -26,6 +26,9 @@
 
     export default {
         name: 'MenuBar',
+        props: [
+            'title'
+        ],
         components: {
             ChevronLeftIcon,
             MenuIcon,
@@ -46,7 +49,7 @@
     @import '@assets/vue-file-manager/_mixins';
 
     .mobile-header {
-        padding: 10px 15px;
+        padding: 10px 0;
         text-align: center;
         background: white;
         position: sticky;
@@ -91,7 +94,7 @@
     @media only screen and (max-width: 690px) {
         .mobile-header {
             display: flex;
-            margin-bottom: 25px;
+            margin-bottom: 15px;
         }
     }
 

resources/js/components/Others/ColorLabel.vue

@@ -0,0 +1,44 @@
+<template>
+    <b class="color-label" :class="color">
+        <slot></slot>
+    </b>
+</template>
+
+<script>
+    export default {
+        name: 'ColorLabel',
+        props: ['color'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .color-label {
+        text-transform: capitalize;
+        @include font-size(12);
+        display: inline-block;
+        border-radius: 6px;
+        font-weight: 700;
+        padding: 4px 6px;
+
+        &.purple {
+            color: $purple;
+            background: rgba($purple, 0.1);
+        }
+
+        &.yellow {
+            color: $yellow;
+            background: rgba($yellow, 0.1);
+        }
+    }
+
+    @media only screen and (max-width: 1024px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+</style>

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

@@ -84,6 +84,7 @@
     .select {
         position: relative;
         user-select: none;
+        width: 100%;
     }
 
     .input-options {
@@ -114,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;
@@ -181,6 +182,7 @@
 
         .input-area {
             background: $dark_mode_foreground;
+            border-color: $dark_mode_foreground;
 
             .option-icon {
                 path {

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

@@ -0,0 +1,151 @@
+<template>
+    <div class="setup-box" :class="theme">
+        <b class="title">{{ title }}</b>
+        <p class="description">{{ description }}</p>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'SetupBox',
+        props: ['title', 'description', 'theme'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .setup-box {
+        padding: 20px;
+        border-radius: 8px;
+
+        .title {
+            @include font-size(19);
+            margin-bottom: 15px;
+            display: block;
+        }
+
+        .description {
+            @include font-size(15);
+            line-height: 1.5;
+            margin-bottom: 20px;
+        }
+
+        &.base {
+            background: $light_background;
+        }
+
+        &.danger {
+            background: $light_background;
+
+            .title {
+                color: $danger;
+            }
+        }
+
+        /deep/ input {
+
+            &[type='text'],
+            &[type='number'],
+            .input-area {
+                background: white;
+            }
+        }
+
+        /deep/ .input-area {
+            background: white;
+        }
+
+        /deep/ .form {
+            margin-top: 20px;
+
+            &.block-form {
+                max-width: 450px;
+
+                .single-line-form {
+                    display: flex;
+
+                    .submit-button {
+                        margin-left: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .setup-box {
+
+            /deep/ .form {
+
+                &.block-form {
+                    max-width: 100%;
+                }
+
+                input {
+                    min-width: initial;
+                }
+            }
+        }
+    }
+
+    @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 {
+
+                .single-line-form {
+                    display: block;
+
+                    .submit-button {
+                        margin-left: 0;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+
+        .setup-box {
+
+            &.base {
+                background: $dark_mode_foreground;
+            }
+
+            &.danger {
+                background: $dark_mode_foreground;
+            }
+
+            /deep/ input {
+
+                &[type='text'],
+                &[type='number'],
+                .input-area {
+                    background: $dark_mode_background;
+                }
+            }
+
+            /deep/ .input-area {
+                background: $dark_mode_background;
+            }
+        }
+    }
+</style>

resources/js/components/Others/MobileNavigation.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="mobile-main-navigation">
+    <div class="mobile-main-navigation" v-if="app">
         <transition name="context-menu">
             <nav v-if="isVisible" class="mobile-navigation">
 
                 <!--User Info-->
                 <div class="user-info">
-                    <UserAvatar size="large" />
+                    <UserAvatar size="large"/>
                     <UserHeadline/>
                 </div>
 
                 <!--Navigation-->
-                <MenuItemList :navigation="navigation" @menu="action" />
+                <MenuItemList :navigation="navigation" @menu="action"/>
             </nav>
         </transition>
         <transition name="fade">
@@ -35,11 +35,8 @@
         },
         computed: {
             ...mapGetters(['app', 'homeDirectory']),
-        },
-        data() {
-            return {
-                isVisible: false,
-                navigation: [
+            navigation() {
+                return [
                     {
                         icon: 'hard-drive',
                         title: this.$t('menu.files'),
@@ -67,9 +64,15 @@
                     {
                         icon: 'settings',
                         title: this.$t('menu.settings'),
-                        routeName: 'MobileSettings',
+                        routeName: 'Profile',
                         isVisible: true,
                     },
+                    {
+                        icon: 'users',
+                        title: this.$t('menu.admin'),
+                        routeName: 'Users',
+                        isVisible: this.app.user.role === 'admin',
+                    },
                     {
                         icon: 'power',
                         title: this.$t('menu.logout'),
@@ -77,6 +80,11 @@
                         isVisible: true,
                     },
                 ]
+            },
+        },
+        data() {
+            return {
+                isVisible: false,
             }
         },
         methods: {

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

@@ -0,0 +1,161 @@
+<template>
+    <transition appear name="fade">
+        <li class="toastr-item" :class="item.type" v-show="isActive">
+            <div class="toastr-content-wrapper">
+				<span class="toastr-icon">
+					<check-icon v-if="item.type == 'success'" size="22"></check-icon>
+					<x-icon v-if="item.type == 'danger'" size="22"></x-icon>
+				</span>
+                <div class="toastr-content">
+                    <p class="toastr-description">{{ item.message }}</p>
+                </div>
+            </div>
+            <div class="progressbar">
+                <span></span>
+            </div>
+        </li>
+    </transition>
+</template>
+
+<script>
+    import {XIcon, CheckIcon} from 'vue-feather-icons'
+
+    export default {
+        components: {
+            XIcon,
+            CheckIcon
+        },
+        props: ['item'],
+        data() {
+            return {
+                isActive: 0
+            }
+        },
+        created() {
+            this.isActive = 1
+
+            setTimeout(() => (this.isActive = 0), 5000)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: 0.3s ease;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+        @include transform(translateX(100%));
+    }
+
+    .toastr-content-wrapper {
+        display: flex;
+        align-items: center;
+        padding: 15px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+    }
+
+    .progressbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        opacity: 0.35;
+
+        span {
+            width: 0;
+            height: 3px;
+            display: block;
+            background: $theme;
+            animation: progressbar 5s linear;
+        }
+    }
+
+    @keyframes progressbar {
+        0% {
+            width: 0;
+        }
+        100% {
+            width: 100%;
+        }
+    }
+
+    .toastr-item {
+        max-width: 320px;
+        margin-bottom: 20px;
+        position: relative;
+        overflow: hidden;
+        display: block;
+        border-radius: 8px;
+
+        .toastr-description {
+            @include font-size(15);
+            font-weight: bold;
+        }
+
+        .toastr-icon {
+            height: 42px;
+            width: 42px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            font-size: 20px;
+            margin-right: 10px;
+        }
+
+        &.success {
+            background: $theme_light;
+
+            polyline {
+                stroke: $theme;
+            }
+
+            .toastr-description {
+                color: $theme;
+            }
+        }
+
+        &.danger {
+            background: rgba($danger, 0.1);
+
+            polyline {
+                stroke: $danger;
+            }
+
+            .toastr-description {
+                color: $danger;
+            }
+        }
+    }
+
+    @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

@@ -0,0 +1,62 @@
+<template>
+    <div id="toastr-wrapper">
+        <ToastrItem :item="item" v-for="(item, i) in notifications" :key="i"/>
+    </div>
+</template>
+
+<script>
+    import ToastrItem from '@/components/Others/Notifications/ToastrItem'
+    import {events} from "@/bus";
+
+    export default {
+        components: {
+            ToastrItem,
+        },
+        data() {
+            return {
+                notifications: []
+            }
+        },
+        created() {
+            events.$on('toaster', notification => this.notifications.push(notification))
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .toastr-list {
+        transition: all 5s ease;
+        display: inline-block;
+    }
+
+    .toastr-list-enter,
+    .toastr-list-leave-to {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    .toastr-list-leave-active {
+        position: absolute;
+    }
+
+    #toastr-wrapper {
+        position: absolute;
+        right: 30px;
+        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="icon" v-if="isSmallAppSize">
-            <FontAwesomeIcon icon="chevron-left" />
+    <div class="page-header">
+        <div class="go-back" v-if="canBack" @click="$router.back()">
+            <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 {events} from '@/bus'
+    import { ChevronLeftIcon } from 'vue-feather-icons'
 
     export default {
         name: 'PageHeader',
         props: [
-            'title', 'description'
+            'title', 'canBack'
         ],
-        computed: {
-            ...mapGetters(['appSize']),
-            isSmallAppSize() {
-                return this.appSize === 'small'
-            }
+        components: {
+            ChevronLeftIcon
         },
-        methods: {
-            goHome() {
-                if (this.isSmallAppSize) {
-                    events.$emit('show:sidebar')
-                    this.$router.push({name: 'Files'})
-                }
-            }
-        }
     }
 </script>
 
@@ -44,9 +32,10 @@
         align-items: center;
         background: white;
         z-index: 9;
-        max-width: 700px;
         width: 100%;
-        margin: 20px auto 30px;
+        position: sticky;
+        top: 0;
+        padding: 20px 0;
 
         .title {
             @include font-size(18);
@@ -54,18 +43,20 @@
             color: $text;
         }
 
-        .icon {
-            @include font-size(16);
-            margin-right: 15px;
+        .go-back {
+            margin-right: 10px;
             cursor: pointer;
+
+            svg {
+                vertical-align: middle;
+                margin-top: -4px;
+            }
         }
     }
 
     @media only screen and (max-width: 960px) {
 
         .page-header {
-            padding: 20px 15px;
-            margin: 0;
 
             .title {
                 @include font-size(18);

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

@@ -0,0 +1,58 @@
+ <template>
+    <tr class="table-row">
+        <td
+                class="table-cell"
+                v-for="(collumn, index) in normalizedColumns"
+                :key="index"
+        >
+            <span>{{ collumn }}</span>
+        </td>
+    </tr>
+</template>
+
+<script>
+    export default {
+        props: ['data'],
+        computed: {
+            normalizedColumns() {
+                // Remove ID from object
+                if (this.data['id']) delete this.data['id']
+
+                // Return object
+                return Object.values(this.data)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .table-row {
+        border-radius: 8px;
+
+        &:hover {
+            background: $light_background;
+        }
+
+        .table-cell {
+            padding-top: 15px;
+            padding-bottom: 15px;
+
+            &:first-child {
+                padding-left: 15px;
+            }
+
+            &:last-child {
+                padding-right: 15px;
+                text-align: right;
+            }
+
+            span {
+                @include font-size(16);
+                font-weight: bold;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,409 @@
+<template>
+    <div class="datatable">
+        <table v-if="hasData" class="table">
+            <thead class="table-header">
+            <tr>
+                <td
+                        v-for="(column, index) in columns"
+                        @click="sort(column.field, column.sortable, index)"
+                        :key="index"
+                        :class="{ sortable: column.sortable }"
+                >
+                    <span>{{ column.label }}</span>
+
+                    <chevron-up-icon v-if="false" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
+                </td>
+            </tr>
+            </thead>
+
+            <tbody class="table-body">
+            <slot v-for="row in visibleData" :row="row">
+                <DatatableCell :data="row" :key="row.id"/>
+            </slot>
+            </tbody>
+
+        </table>
+        <div v-if="hasData && paginator" class="paginator-wrapper">
+            <ul v-if="chunks.length > 1" class="pagination">
+                <li class="page-item">
+                    <a
+                            @click="goToPage(pageIndex - 1)"
+                            class="page-link"
+                            :class="{ disabled: pageIndex == 0 }"
+                    >
+                        <chevron-left-icon size="14" class="icon"></chevron-left-icon>
+                    </a>
+                </li>
+                <li
+                        v-for="(row, index) in chunks"
+                        :key="index"
+                        class="page-item"
+                        @click="goToPage(index)"
+                >
+                    <a
+                            class="page-link"
+                            :class="{ active: pageIndex == index }">
+                        {{ index + 1 }}
+                    </a>
+                </li>
+                <li class="page-item">
+                    <a
+                            @click="goToPage(pageIndex + 1)"
+                            class="page-link"
+                            :class="{ disabled: pageIndex + 1 == chunks.length }"
+                    >
+                        <chevron-right-icon size="14" class="icon"></chevron-right-icon>
+                    </a>
+                </li>
+            </ul>
+            <span class="paginator-info">{{ $t('datatable.paginate_info', {visible: visibleData.length, total: data.length}) }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
+    import DatatableCell from '@/components/Others/Tables/DatatableCell'
+    import {chunk, sortBy} from 'lodash'
+
+    export default {
+        props: ['columns', 'data', 'scope', 'paginator'],
+        components: {
+            ChevronRightIcon,
+            ChevronLeftIcon,
+            DatatableCell,
+            ChevronUpIcon,
+        },
+        data() {
+            return {
+                items_per_view: 20,
+                pageIndex: 0,
+                paginatorVisible: true,
+                chunks: [],
+                filter: {
+                    sort: 'DESC',
+                    field: undefined,
+                    index: undefined,
+                }
+            }
+        },
+        methods: {
+            goToPage(index) {
+                if (index == this.chunks.length || index == -1) return
+
+                // Update page index
+                this.pageIndex = index
+            },
+            sort(field, sortable, index) {
+
+                // Prevent sortable if is disabled
+                if (!sortable) return
+
+                // Set filter
+                this.filter.field = field
+                this.filter.index = index
+
+                // Set sorting direction
+                if (this.filter.sort === 'DESC') {
+                    this.filter.sort = 'ASC'
+                } else if (this.filter.sort === 'ASC') {
+                    this.filter.sort = 'DESC'
+                }
+            }
+        },
+        computed: {
+            hasData() {
+
+                return this.data.length > 0 ? true : false
+            },
+            visibleData() {
+
+                // Prefent errors when data is empty
+                if (!this.hasData) return
+
+                // Reconfigure data
+                if (this.filter.field) {
+
+                    // Set chunks with sorting
+                    if (this.filter.sort === 'DESC') {
+
+                        // DESC
+                        this.chunks = chunk(sortBy(this.data, this.filter.field), this.items_per_view)
+                    } else {
+
+                        // ASC
+                        this.chunks = chunk(sortBy(this.data, this.filter.field).reverse(), this.items_per_view)
+                    }
+
+                } else {
+
+                    // Get data to chunks
+                    this.chunks = chunk(this.data, this.items_per_view)
+                }
+
+                // Return chunks
+                return this.chunks[this.pageIndex]
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .datatable {
+        height: 100%;
+    }
+
+    .table-row {
+        @include transition;
+    }
+
+    .table-row-enter,
+    .table-row-leave-to {
+        opacity: 0;
+        @include transform(translateY(-100%));
+    }
+
+    .table-row-leave-active {
+        position: absolute;
+    }
+
+    .table {
+        width: 100%;
+        border-collapse: collapse;
+        overflow-x: auto;
+
+        tr {
+            width: 100%;
+
+            td {
+                &:first-child {
+                    padding-left: 15px;
+                }
+
+                &:last-child {
+                    padding-right: 15px;
+                    text-align: right;
+                }
+            }
+        }
+
+        .table-header {
+            margin-bottom: 10px;
+
+            tr {
+                td {
+                    padding: 12px;
+
+                    span {
+                        color: #AFAFAF;
+                        font-weight: 700;
+                        @include font-size(12);
+                        white-space: nowrap;
+                    }
+
+                    &.sortable {
+                        cursor: pointer;
+                    }
+
+                    &:last-child {
+                        text-align: right;
+                    }
+                }
+            }
+
+            .filter-arrow {
+                vertical-align: middle;
+                margin-left: 8px;
+                @include transition;
+
+                path {
+                    fill: $text-muted;
+                }
+
+                &.arrow-down {
+                    @include transform(rotate(180deg));
+                }
+            }
+
+            span {
+                font-size: 13px;
+                color: $text-muted;
+                font-weight: bold;
+            }
+        }
+
+        .table-body {
+            tr {
+                border-radius: 8px;
+
+                &:hover {
+                    background: $light_background;
+                }
+
+                td {
+                    padding: 12px;
+
+                    &:last-child {
+                        button {
+                            margin-right: 0;
+                        }
+                    }
+                }
+            }
+
+            span, a.page-link {
+                @include font-size(15);
+                font-weight: 700;
+                padding: 10px 0;
+                display: block;
+            }
+        }
+    }
+
+    .pagination {
+        .page-item {
+            padding: 3px;
+            display: inline-block;
+        }
+
+        .page-link {
+            width: 30px;
+            height: 30px;
+            display: block;
+            color: $text;
+            border-radius: 6px;
+            text-align: center;
+            line-height: 2.4;
+            font-weight: bold;
+            font-size: 13px;
+            cursor: pointer;
+            @include transition(0.15s);
+
+            .icon {
+                vertical-align: middle;
+                margin-top: -2px;
+            }
+
+            &:hover:not(.disabled) {
+                background: $light_background;
+                color: $text;
+            }
+
+            &.active {
+                color: $text;
+                background: $light_background;
+            }
+
+            &.disabled {
+                background: transparent;
+                cursor: default;
+
+                svg path {
+                    fill: $text-muted;
+                }
+            }
+        }
+    }
+
+    .paginator-wrapper {
+        margin-top: 30px;
+        margin-bottom: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .paginator-info {
+            font-size: 13px;
+            color: $text-muted;
+        }
+    }
+
+    .user-preview {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        img {
+            width: 45px;
+            margin-right: 22px;
+        }
+    }
+
+    @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 {
+
+            .table-header {
+
+                tr {
+                    td {
+
+                        span {
+                            color: $theme;
+                        }
+                    }
+                }
+            }
+
+            .table-body {
+                tr {
+                    &:hover {
+                        background: $dark_mode_foreground;
+                    }
+                }
+            }
+        }
+
+        .paginator-wrapper {
+
+            .paginator-info {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .pagination {
+
+            .page-link {
+                color: $dark_mode_text_secondary;
+
+                svg polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+
+                &:hover:not(.disabled) {
+                    color: $theme;
+                    background: rgba($theme, 0.1);
+                }
+
+                &.active {
+                    color: $theme;
+                    background: rgba($theme, 0.1);
+                }
+
+                &.disabled {
+                    background: transparent;
+                    cursor: default;
+
+                    svg polyline {
+                        stroke: $dark_mode_text_secondary;
+                    }
+                }
+            }
+        }
+    }
+</style>

resources/js/components/Others/UserImageInput.vue

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

resources/js/components/Sidebar/MenuBar.vue

@@ -31,6 +31,12 @@
                     <settings-icon size="19"></settings-icon>
                 </div>
             </router-link>
+
+            <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>
+            </router-link>
         </div>
 
         <!--User avatar & Logout-->
@@ -51,6 +57,7 @@
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
+        UsersIcon,
         PowerIcon,
         ShareIcon,
     } from 'vue-feather-icons'
@@ -64,6 +71,7 @@
             Trash2Icon,
             PowerIcon,
             ShareIcon,
+            UsersIcon,
         },
         computed: {
             ...mapGetters(['app']),
@@ -167,11 +175,22 @@
                     }
                 }
             }
+
+            &.users {
+                .button-icon {
+                    background: rgba($pink, 0.1);
+
+                    path, line, polyline, rect, circle {
+                        stroke: $pink;
+                    }
+                }
+            }
         }
     }
 
     @media only screen and (max-width: 1024px) {
         .menu-bar {
+            min-width: 60px;
             width: 60px;
         }
 

resources/js/i18n/lang/cn.json

@@ -3,17 +3,22 @@
         "create_new_password": "创建新密码"
     },
     "routes_title": {
-        "profile": "User Profile",
+        "profile": "My Profile",
         "settings_password": "Change Password",
         "settings_storage": "Storage",
-        "settings_mobile": "Settings"
+        "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",
+        "user_create": "Create User"
     },
     "profile": {
         "store_pass": "保存您的密码",
         "change_pass": "修改您的密码",
-        "profile_info": "用户信息",
-        "photo_description": "修改您的头像",
-        "photo_supported": "支持的格式 .png, .jpg, .jpeg."
+        "profile_info": "用户信息"
     },
     "page_registration": {
         "title": "创建一个新用户",
@@ -166,7 +171,8 @@
         "logout": "Log Out",
         "profile": "Profile Settings",
         "password": "Password",
-        "storage": "Storage"
+        "storage": "Storage",
+        "admin": "Admin"
     },
     "sidebar": {
         "favourites": "收藏",
@@ -255,5 +261,79 @@
     "popup_paylod_error": {
         "title": "File is too large",
         "message": "Sorry, your file is too large and can't be uploaded"
+    },
+    "popup_deleted_user": {
+        "title": "User was deleted",
+        "message": "Your user was deleted with all user data content."
+    },
+    "user_box_storage": {
+        "title": "Change User Storage Capacity",
+        "description": "Change user storage capacity by input bellow. You have to type only number e.g. value '5' means, user will have 5GB of storage capacity."
+    },
+    "user_box_password": {
+        "title": "Change User Password",
+        "description": "You can send password reset email via button bellow. User will be redirected to page where he can update password for his account."
+    },
+    "user_box_delete": {
+        "title": "Delete User",
+        "description": "You can delete your user, but, pay attention! This event is irreversible and all user data include user files will be deleted."
+    },
+    "user_box_role": {
+        "title": "Change User Role",
+        "description": "You can change role for current user. Admin role can edit or create new users, change storage capacity and any other application settings."
+    },
+    "admin_menu": {
+        "admin_label": "Admin",
+        "users": "Users"
+    },
+    "admin_page_user": {
+        "select_role": "Select user role",
+        "save_role": "Save Role",
+        "label_person_info": "Personal Information",
+        "label_delete_user": "Type with Case Sensitive user name ‘{user}‘",
+        "label_change_capacity": "Type storage capacity in GB",
+        "placeholder_delete_user": "Type here",
+        "delete_user": "Delete User",
+        "change_capacity": "Change Capacity",
+        "send_password_link": "Send Password Reset Link",
+        "tabs": {
+            "detail": "Detail",
+            "storage": "Storage Usage",
+            "password": "Password",
+            "delete": "Delete User"
+        },
+        "table": {
+            "name": "User",
+            "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!",
+        "created_user": "User was created successfully!"
+    },
+    "roles": {
+        "admin": "Admin",
+        "user": "User"
+    },
+    "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,17 +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"
+        "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",
+        "user_create": "Create User"
     },
     "profile": {
         "store_pass": "Store New Password",
         "change_pass": "Change Password",
-        "profile_info": "Profile Information",
-        "photo_description": "Change your avatar",
-        "photo_supported": "Supported formats are .png, .jpg, .jpeg."
+        "profile_info": "Profile Information"
     },
     "page_registration": {
         "title": "Create New Account",
@@ -166,7 +171,8 @@
         "logout": "Log Out",
         "profile": "Profile Settings",
         "password": "Password",
-        "storage": "Storage"
+        "storage": "Storage",
+        "admin": "Admin"
     },
     "sidebar": {
         "favourites": "Favourites",
@@ -255,5 +261,79 @@
     "popup_paylod_error": {
         "title": "File is too large",
         "message": "Sorry, your file is too large and can't be uploaded"
+    },
+    "popup_deleted_user": {
+        "title": "User was deleted",
+        "message": "Your user was deleted with all user data content."
+    },
+    "user_box_storage": {
+        "title": "Change User Storage Capacity",
+        "description": "Change user storage capacity by input bellow. You have to type only number e.g. value '5' means, user will have 5GB of storage capacity."
+    },
+    "user_box_password": {
+        "title": "Change User Password",
+        "description": "You can send password reset email via button bellow. User will be redirected to page where he can update password for his account."
+    },
+    "user_box_delete": {
+        "title": "Delete User",
+        "description": "You can delete your user, but, pay attention! This event is irreversible and all user data include user files will be deleted."
+    },
+    "user_box_role": {
+        "title": "Change User Role",
+        "description": "You can change role for current user. Admin role can edit or create new users, change storage capacity and any other application settings."
+    },
+    "admin_menu": {
+        "admin_label": "Admin",
+        "users": "Users"
+    },
+    "admin_page_user": {
+        "select_role": "Select user role",
+        "save_role": "Save Role",
+        "label_person_info": "Personal Information",
+        "label_delete_user": "Type with Case Sensitive user name ‘{user}‘",
+        "label_change_capacity": "Type storage capacity in GB",
+        "placeholder_delete_user": "Type here",
+        "delete_user": "Delete User",
+        "change_capacity": "Change Capacity",
+        "send_password_link": "Send Password Reset Link",
+        "tabs": {
+            "detail": "Detail",
+            "storage": "Storage Usage",
+            "password": "Password",
+            "delete": "Delete User"
+        },
+        "table": {
+            "name": "User",
+            "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!",
+        "created_user": "User was created successfully!"
+    },
+    "roles": {
+        "admin": "Admin",
+        "user": "User"
+    },
+    "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,17 +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"
+        "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",
+        "user_create": "Vytvoriť uživateľa"
     },
     "profile": {
         "store_pass": "Uložiť nové heslo",
         "change_pass": "Zmeniť heslo",
-        "profile_info": "Profil",
-        "photo_description": "Zmeň svoj avatar",
-        "photo_supported": "Podporované formáty sú .png, .jpg, .jpeg."
+        "profile_info": "Profil"
     },
     "page_registration": {
         "title": "Vytvorenie nového účtu",
@@ -166,7 +171,8 @@
         "logout": "Odhlásiť sa",
         "profile": "Nastavenia profilu",
         "password": "Heslo",
-        "storage": "Úložisko"
+        "storage": "Úložisko",
+        "admin": "Administrácia"
     },
     "sidebar": {
         "favourites": "Obľúbené",
@@ -255,5 +261,79 @@
     "popup_paylod_error": {
         "title": "Súbor je príliš veľký",
         "message": "Prepáčte, súbor je príliš veľký a nemôže byť nahraný."
+    },
+    "popup_deleted_user": {
+        "title": "Uživateľ bol vymazaný",
+        "message": "Uživateľ bol vymazaný so všetkými uživateľskými dátami."
+    },
+    "user_box_storage": {
+        "title": "Zmeňiť kapacitu úložiska",
+        "description": "Zmeňiť kapacitu úložiska formulárom nižšie. Môžeš písať iba čiselné hodnoty, napríklad hodnota '5' znamená, že uživateľ bude mať 5GB kapacitz úložiska."
+    },
+    "user_box_password": {
+        "title": "Zmeňiť uživateľské heslo",
+        "description": "Môžete zmeniť uživateľské heslo zaslaním resetovacieho emailu uživateľovi. Uživateľ bude presmerovaný na stránku, kde si môže zmeniť heslo na nové."
+    },
+    "user_box_delete": {
+        "title": "Vymazať uživateľa",
+        "description": "Môžete vymazať svojho uživateľa, lenže, dávaj pozor! Táto událosť je nezvratná a všetke uživateľské dáta vrátane uživateľových súborov budú vymazané!"
+    },
+    "user_box_role": {
+        "title": "Zmeniť uživateľskú rolu",
+        "description": "Môžete zmeniť uživateľskú rolu pre aktuálneho uživateľa. Administrátorska rola môže editovať alebo vytvárať nových uživateľov, zmeniť kapacitu úložiska a mnoho dalších nastavení aplikácie."
+    },
+    "admin_menu": {
+        "admin_label": "Administrácia",
+        "users": "Uživatelia"
+    },
+    "admin_page_user": {
+        "select_role": "Vyberte uživateľskú rolu",
+        "save_role": "Uložiť Rolu",
+        "label_person_info": "Osobné informácie",
+        "label_delete_user": "Napíšte uživateľovo meno ‘{user}‘. Rozlišujte medzi malými a veľkými písmenami",
+        "label_change_capacity": "Vpíšte kapacitu úložiska v GB",
+        "placeholder_delete_user": "Píšte sem",
+        "delete_user": "Vymazať uživateľa",
+        "change_capacity": "Zmeniť kapacitu",
+        "send_password_link": "Odoslať email s resetom hesla",
+        "tabs": {
+            "detail": "Detail",
+            "storage": "Využitie úložiska",
+            "password": "Heslo",
+            "delete": "Vymazať uživateľa"
+        },
+        "table": {
+            "name": "Užívateľ",
+            "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!",
+        "created_user": "Úspešne ste vytvorili uživateľa1"
+    },
+    "roles": {
+        "admin": "Admin",
+        "user": "Užívateľ"
+    },
+    "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

@@ -19,6 +19,16 @@ import SharedFiles from './views/FilePages/SharedFiles'
 
 import MobileSettings from './views/Mobile/MobileSettings'
 
+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'
+import UserPassword from './views/Admin/Users/UserTabs/UserPassword'
+
 Vue.use(Router)
 
 const router = new Router({
@@ -96,6 +106,82 @@ const router = new Router({
                 requiresAuth: true
             },
         },
+        {
+            name: 'Admin',
+            path: '/admin',
+            component: Admin,
+            meta: {
+                requiresAuth: true,
+                title: 'Admin'
+            },
+            children: [
+                {
+                    name: 'Users',
+                    path: '/admin/users',
+                    component: Users,
+                    meta: {
+                        requiresAuth: true,
+                        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')
+                    },
+                },
+                {
+                    name: 'User',
+                    path: '/admin/user/:id',
+                    component: User,
+                    meta: {
+                        requiresAuth: true,
+                        title: i18n.t('routes_title.users_user')
+                    },
+                    children: [
+                        {
+                            name: 'UserDetail',
+                            path: '/admin/user/:id/details',
+                            component: UserDetail,
+                            meta: {
+                                requiresAuth: true,
+                                title: i18n.t('routes_title.users_detail')
+                            },
+                        },
+                        {
+                            name: 'UserStorage',
+                            path: '/admin/user/:id/storage',
+                            component: UserStorage,
+                            meta: {
+                                requiresAuth: true,
+                                title: i18n.t('routes_title.users_storage_usage')
+                            },
+                        },
+                        {
+                            name: 'UserPassword',
+                            path: '/admin/user/:id/password',
+                            component: UserPassword,
+                            meta: {
+                                requiresAuth: true,
+                                title: i18n.t('routes_title.users_password')
+                            },
+                        },
+                        {
+                            name: 'UserDelete',
+                            path: '/admin/user/:id/delete',
+                            component: UserDelete,
+                            meta: {
+                                requiresAuth: true,
+                                title: i18n.t('routes_title.users_delete')
+                            },
+                        },
+                    ]
+                },
+            ]
+        },
         {
             name: 'Settings',
             path: '/settings',

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

@@ -0,0 +1,51 @@
+<template>
+    <section id="viewport">
+
+        <ContentSidebar v-if="false">
+
+            <!--Locations-->
+            <ContentGroup :title="$t('admin_menu.admin_label')" class="navigator">
+                <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>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_menu.users') }}
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+        <keep-alive :include="['Users']">
+            <router-view/>
+        </keep-alive>
+    </section>
+</template>
+
+<script>
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import { mapGetters } from 'vuex'
+    import { UsersIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'Settings',
+        computed: {
+            ...mapGetters(['config']),
+        },
+        components: {
+            ContentSidebar,
+            ContentGroup,
+            UsersIcon,
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .user-headline {
+        margin-bottom: 38px;
+    }
+</style>

resources/js/views/Admin/Users.vue

@@ -0,0 +1,283 @@
+<template>
+    <div id="single-page">
+        <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: 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">
+                                    </div>
+                                    <div class="info">
+                                        <b class="name">{{ row.data.attributes.name }}</b>
+                                        <span class="email">{{ row.data.attributes.email }}</span>
+                                    </div>
+                                </router-link>
+                            </td>
+                            <td>
+                                <ColorLabel :color="getRoleColor(row.data.attributes.role)">
+                                    {{ row.data.attributes.role }}
+                                </ColorLabel>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.data.attributes.storage.used }}%
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ 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}}">
+                                        <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
+                                    </router-link>
+                                    <router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
+                                        <trash2-icon size="15" class="icon icon-trash"></trash2-icon>
+                                    </router-link>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </DatatableWrapper>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<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'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            MobileActionButton,
+            DatatableWrapper,
+            SectionTitle,
+            MobileHeader,
+            Trash2Icon,
+            PageHeader,
+            ButtonBase,
+            ColorLabel,
+            Edit2Icon,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: true,
+                users: [],
+                columns: [
+                    {
+                        label: this.$t('admin_page_user.table.name'),
+                        field: 'data.attributes.name',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.role'),
+                        field: 'data.attributes.role',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.storage_used'),
+                        field: 'data.attributes.storage.used',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.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: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        methods: {
+            getRoleColor(role) {
+                switch(role) {
+                    case 'admin':
+                        return 'purple'
+                        break;
+                    case 'user':
+                        return 'yellow'
+                        break;
+                }
+            }
+        },
+        created() {
+            axios.get('/api/users')
+                .then(response => {
+                    this.users = response.data.data
+                    this.isLoading = false
+                })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @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;
+            margin-left: 10px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+
+        .icon {
+            cursor: pointer;
+
+            circle, path, line, polyline {
+                stroke: $text;
+            }
+
+            &.icon-trash {
+                circle, path, line, polyline {
+                    stroke: $red;
+                }
+            }
+        }
+    }
+
+    .table {
+
+        .cell-item {
+            @include font-size(15);
+            white-space: nowrap;
+        }
+    }
+
+    .user-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+        }
+
+        .info {
+
+            .name, .email {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+            }
+
+            .email {
+                color: $text-muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    @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 {
+                cursor: pointer;
+
+                circle, path, line, polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+    <div id="single-page" v-if="app">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+
+                <!--User thumbnail-->
+                <div class="user-thumbnail">
+                    <div class="avatar">
+                        <img :src="user.attributes.avatar" :alt="user.attributes.name">
+                    </div>
+                    <div class="info">
+                        <b class="name">
+                            {{ user.attributes.name }}
+                            <ColorLabel color="purple">
+                                {{ user.attributes.role }}
+                            </ColorLabel></b>
+                        <span class="email">{{ user.attributes.email }}</span>
+                    </div>
+                </div>
+
+                <!--Page Tab links-->
+                <div class="menu-list-wrapper horizontal">
+                    <router-link replace :to="{name: 'UserDetail'}" class="menu-list-item link">
+                        <div class="icon">
+                            <user-icon size="17"></user-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_page_user.tabs.detail') }}
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'UserStorage'}" class="menu-list-item link">
+                        <div class="icon">
+                            <hard-drive-icon size="17"></hard-drive-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_page_user.tabs.storage') }}
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link">
+                        <div class="icon">
+                            <lock-icon size="17"></lock-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_page_user.tabs.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="user" @reload-user="fetchUser" />
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { UserIcon, HardDriveIcon, LockIcon, Trash2Icon } from 'vue-feather-icons'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import PageHeader from '@/components/Others/PageHeader'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import Spinner from '@/components/FilesView/Spinner'
+    import { mapGetters } from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            Trash2Icon,
+            LockIcon,
+            HardDriveIcon,
+            StorageItemDetail,
+            SectionTitle,
+            MobileHeader,
+            PageHeader,
+            ColorLabel,
+            UserIcon,
+            Spinner,
+        },
+        computed: {
+            ...mapGetters(['app']),
+        },
+        data() {
+            return {
+                isLoading: true,
+                user: undefined,
+            }
+        },
+        methods: {
+            fetchUser() {
+                axios.get('/api/users/' + this.$route.params.id + '/detail')
+                    .then(response => {
+                        this.user = response.data.data
+                        this.isLoading = false
+                    })
+            }
+        },
+        created() {
+            this.fetchUser()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .user-thumbnail {
+        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 only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</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

@@ -0,0 +1,131 @@
+<template>
+    <div class="page-tab">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <SetupBox
+                    theme="danger"
+                    :title="$t('user_box_delete.title')"
+                    :description="$t('user_box_delete.description')"
+            >
+                <ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form"
+                                    class="form block-form">
+                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
+                                        name="User name" :rules="'required|is:' + user.attributes.name">
+                        <label>{{ $t('admin_page_user.label_delete_user', {user: user.attributes.name}) }}:</label>
+                        <div class="single-line-form">
+                            <input v-model="userName"
+                                   :placeholder="$t('admin_page_user.placeholder_delete_user')"
+                                   type="text"
+                                   :class="{'is-error': errors[0]}"
+                            />
+                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                        button-style="danger" class="submit-button">
+                                {{ $t('admin_page_user.delete_user') }}
+                            </ButtonBase>
+                        </div>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </ValidationObserver>
+            </SetupBox>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required, is} from 'vee-validate/dist/rules'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'UserDelete',
+        props: [
+            'user'
+        ],
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isSendingRequest: false,
+                isLoading: false,
+                userName: '',
+            }
+        },
+        methods: {
+            async deleteUser() {
+
+                // Validate fields
+                const isValid = await this.$refs.deleteUser.validate();
+
+                if (!isValid) return;
+
+                this.isSendingRequest = true
+
+                axios
+                    .delete(this.$store.getters.api + '/users/' + this.$route.params.id + '/delete',
+                        {
+                            data: {
+                                name: this.userName
+                            }
+                        }
+                    )
+                    .then(() => {
+                        this.isSendingRequest = false
+
+                        // Show error message
+                        events.$emit('success:open', {
+                            emoji: '👍',
+                            title: this.$t('popup_deleted_user.title'),
+                            message: this.$t('popup_deleted_user.message'),
+                        })
+
+                        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'),
+                        })
+                    })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

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

@@ -0,0 +1,165 @@
+<template>
+    <div class="page-tab">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <SetupBox
+                    theme="base"
+                    :title="$t('user_box_role.title')"
+                    :description="$t('user_box_role.description')"
+            >
+                <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form" class="form block-form">
+                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role" rules="required">
+                        <label>{{ $t('admin_page_user.select_role') }}:</label>
+                        <div class="single-line-form">
+                            <SelectInput v-model="userRole" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
+                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                                {{ $t('admin_page_user.save_role') }}
+                            </ButtonBase>
+                        </div>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </ValidationObserver>
+            </SetupBox>
+        </div>
+
+        <!--Personal Information-->
+        <div class="page-tab-group">
+            <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                <b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
+                <div class="wrapper-inline">
+
+                    <!--Email-->
+                    <div class="block-wrapper">
+                        <label>{{ $t('page_registration.label_email') }}</label>
+                        <div class="input-wrapper">
+                            <input :value="user.attributes.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled />
+                        </div>
+                    </div>
+
+                    <!--Name-->
+                    <div class="block-wrapper">
+                        <label>{{ $t('page_registration.label_name') }}</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
+                                            v-slot="{ errors }">
+                            <input :value="user.attributes.name"
+                                   :placeholder="$t('page_registration.placeholder_name')"
+                                   type="text"
+                                   disabled
+                            />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                </div>
+            </ValidationObserver>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    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'
+
+    export default {
+        name: 'UserDetail',
+        props: [
+            'user'
+        ],
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            StorageItemDetail,
+            SelectInput,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        computed: {
+            ...mapGetters(['roles']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                isSendingRequest: false,
+                userRole: undefined,
+            }
+        },
+        methods: {
+            async changeRole() {
+
+                // Validate fields
+                const isValid = await this.$refs.changeRole.validate();
+
+                if (!isValid) return;
+
+                this.isSendingRequest = true
+
+                // Send request to get user reset link
+                axios
+                    .patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/role', {
+                        attributes: {
+                            role: this.userRole,
+                        }
+                    })
+                    .then(() => {
+
+                        // Reset errors
+                        this.$refs.changeRole.reset()
+
+                        this.isSendingRequest = false
+
+                        this.$emit('reload-user')
+
+                        events.$emit('toaster', {
+                            type: 'success',
+                            message: this.$t('toaster.changed_user'),
+                        })
+                    })
+                    .catch(() => {
+
+                        this.isSendingRequest = false
+
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+    <div class="page-tab">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <SetupBox
+                    theme="base"
+                    :title="$t('user_box_password.title')"
+                    :description="$t('user_box_password.description')"
+            >
+                <ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
+                            :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                    {{ $t('admin_page_user.send_password_link') }}
+                </ButtonBase>
+            </SetupBox>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required} from 'vee-validate/dist/rules'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'UserPassword',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+                isSendingRequest: false,
+            }
+        },
+        methods: {
+            requestPasswordResetEmail() {
+
+                this.isSendingRequest = true
+
+                axios
+                    .post(this.$store.getters.api + '/users/' + this.$route.params.id + '/send-password-email',
+                        {}
+                    )
+                    .then(() => {
+                        this.isSendingRequest = false
+
+                        events.$emit('toaster', {
+                            type: 'success',
+                            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'),
+                        })
+                    })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

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

@@ -0,0 +1,169 @@
+<template>
+    <div class="page-tab" v-if="storage">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <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})"
+            />
+            <SetupBox
+                    theme="base"
+                    :title="$t('user_box_storage.title')"
+                    :description="$t('user_box_storage.description')"
+            >
+                <ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
+                        <label>{{ $t('admin_page_user.label_change_capacity') }}:</label>
+                        <div class="single-line-form">
+                            <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">
+                                {{ $t('admin_page_user.change_capacity') }}
+                            </ButtonBase>
+                        </div>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </ValidationObserver>
+            </SetupBox>
+        </div>
+
+        <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" />
+            <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
+            <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required} from 'vee-validate/dist/rules'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'UserStorage',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            StorageItemDetail,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isLoading: true,
+                isSendingRequest: false,
+                capacity: undefined,
+                storage: undefined,
+            }
+        },
+        methods: {
+            async changeStorageCapacity() {
+
+                // Validate fields
+                const isValid = await this.$refs.changeStorageCapacity.validate();
+
+                if (!isValid) return;
+
+                this.isSendingRequest = true
+
+                // Send request to get user reset link
+                axios
+                    .patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/capacity', {
+                        attributes: {
+                            storage_capacity: this.capacity
+                        }
+                    })
+                    .then(() => {
+
+                        // Reset errors
+                        this.$refs.changeStorageCapacity.reset()
+
+                        this.isSendingRequest = false
+
+                        this.getStorageDetails()
+
+                        events.$emit('toaster', {
+                            type: 'success',
+                            message: this.$t('toaster.changed_capacity'),
+                        })
+                    })
+                    .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() {
+                axios.get('/api/users/' + this.$route.params.id + '/storage')
+                    .then(response => {
+                        this.storage = response.data.data
+                        this.isLoading = false
+                    })
+            }
+        },
+        created() {
+            this.getStorageDetails()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>

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/Mobile/MobileSettings.vue

@@ -1,13 +1,18 @@
 <template>
-    <div class="page">
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <div class="content-page">
+                <nav class="mobile-navigation">
 
-        <MobileHeader />
-
-        <nav class="mobile-navigation">
-
-            <!--Navigation-->
-            <MenuItemList :navigation="navigation" />
-        </nav>
+                    <!--Navigation-->
+                    <MenuItemList :navigation="navigation" />
+                </nav>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
     </div>
 </template>
 
@@ -60,12 +65,7 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
-    .page {
-        width: 100%;
-    }
-
     .mobile-navigation {
-        padding: 0 20px;
         width: 100%;
         bottom: 0;
         left: 0;

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-->
-            <UserHeadline class="user-headline"/>
+                <!--User thumbnail-->
+                <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-->
-            <ContentGroup title="Menu" class="navigator">
-                <div class="menu-list-wrapper">
-                    <router-link :to="{name: 'Profile'}" class="menu-list-item link">
+                <!--Page Tab links-->
+                <div class="menu-list-wrapper horizontal">
+                    <router-link replace :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">
-                            <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">
+
+                    <router-link replace :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/>
-    </section>
+                    <router-link replace :to="{name: 'Password'}" class="menu-list-item link">
+                        <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 ContentGroup from '@/components/Sidebar/ContentGroup'
-    import UserHeadline from '@/components/Sidebar/UserHeadline'
+    import UserImageInput from '@/components/Others/UserImageInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    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 {
-        margin-bottom: 38px;
+    .user-thumbnail {
+        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="user-settings">
-
-        <MobileHeader />
-        <PageHeader :title="$router.currentRoute.meta.title"/>
-
-        <div class="content-page">
-
+    <div class="page-tab">
+        <div class="page-tab-group">
             <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')"
@@ -72,6 +67,7 @@
             return {
                 newPasswordConfirmation: '',
                 newPassword: '',
+                isLoading: false,
             }
         },
         methods: {
@@ -125,32 +121,8 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
-    #user-settings {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        .content-page {
-            overflow-y: auto;
-            height: 100%;
-            padding-bottom: 100px;
-            max-width: 700px;
-            width: 100%;
-            margin: 0 auto;
-        }
-    }
-
     @media only screen and (max-width: 960px) {
 
-        #user-settings {
-
-            .content-page {
-                padding-left: 15px;
-                padding-right: 15px;
-            }
-        }
-
         .form {
             .button-base {
                 width: 100%;

resources/js/views/User/Profile.vue

@@ -1,30 +1,14 @@
 <template>
-    <div id="user-settings" v-if="app">
-
-        <MobileHeader />
-        <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>
-
+    <div class="page-tab">
+        <div class="page-tab-group">
             <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"
@@ -42,7 +26,6 @@
 
 <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'
@@ -50,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,
@@ -77,8 +57,8 @@
         },
         data() {
             return {
-                avatar: undefined,
                 name: '',
+                isLoading: false,
             }
         },
         created() {
@@ -95,55 +75,8 @@
     @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;
-            }
-        }
-    }
-
-    #user-settings {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        .content-page {
-            overflow-y: auto;
-            height: 100%;
-            padding-bottom: 100px;
-            max-width: 700px;
-            width: 100%;
-            margin: 0 auto;
-        }
-    }
-
     @media only screen and (max-width: 960px) {
 
-        #user-settings {
-
-            .content-page {
-                padding-left: 15px;
-                padding-right: 15px;
-            }
-        }
-
         .form {
             .button-base {
                 width: 100%;
@@ -155,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,23 +1,16 @@
 <template>
-    <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
-            <MobileHeader/>
-            <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.used})" :percentage="storage.percentage" :used="$t('storage.total_capacity', {capacity: storage.capacity})"/>
-
-                <SectionTitle>{{ $t('storage.sec_details') }}</SectionTitle>
-                <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storageDetails.images.percentage" :used="storageDetails.images.used" />
-                <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storageDetails.videos.percentage" :used="storageDetails.videos.used" />
-                <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storageDetails.audios.percentage" :used="storageDetails.audios.used" />
-                <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storageDetails.documents.percentage" :used="storageDetails.documents.used" />
-                <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storageDetails.others.percentage" :used="storageDetails.others.used" />
-            </div>
+    <div class="page-tab" v-if="storage">
+        <div class="page-tab-group">
+            <b class="form-group-label">{{ $t('storage.sec_capacity') }}</b>
+            <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>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
+        <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" />
+            <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
+            <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
         </div>
     </div>
 </template>
@@ -43,14 +36,12 @@
             return {
                 isLoading: true,
                 storage: undefined,
-                storageDetails: undefined
             }
         },
         created() {
             axios.get('/api/user/storage')
                 .then(response => {
-                    this.storage = response.data.data.attributes
-                    this.storageDetails = response.data.data.relationships
+                    this.storage = response.data.data
                     this.isLoading = false
                 })
         }

resources/sass/app.scss

@@ -1,5 +1,4 @@
 // Fonts
-
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
@@ -19,14 +18,81 @@
   }
 }
 
+#single-page {
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-left: 25px;
+  padding-right: 25px;
+
+  #page-content {
+    margin: 0 auto;
+
+    &.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 {
-  margin-bottom: 20px;
+
+  &.vertical {
+    margin-bottom: 20px;
+
+    .menu-list-item {
+      display: block;
+      padding: 12px 15px 12px 25px;
+    }
+  }
+
+  &.horizontal {
+    display: flex;
+    border-bottom: 2px solid $light_mode_border;
+    margin-bottom: 30px;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .menu-list-item {
+      display: inline-block;
+      padding: 15px 10px;
+      margin: 15px 10px 0;
+      border-bottom: 2px solid transparent;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &.router-link-exact-active {
+        border-bottom: 2px solid $theme;
+      }
+    }
+  }
 
   .menu-list-item {
-    display: block;
-    padding: 12px 15px 12px 25px;
     text-decoration: none;
-    @include transition(150ms);
     cursor: pointer;
     position: relative;
     white-space: nowrap;
@@ -150,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 {
@@ -165,10 +244,34 @@
   }
 }
 
+@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;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
 
+  .empty-note {
+    color: $dark_mode_text_secondary;
+  }
+
   .menu-list-wrapper {
 
+    &.horizontal {
+      border-bottom: 2px solid $dark_mode_border_color;
+    }
+
     .menu-list-item {
 
       &.link {

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

@@ -22,6 +22,16 @@
 
   &.block-form {
 
+    .wrapper-inline {
+      display: flex;
+      margin: 0 -15px;
+
+      .block-wrapper {
+        width: 100%;
+        padding: 0 15px;
+      }
+    }
+
     .block-wrapper {
       margin-bottom: 20px;
 
@@ -32,6 +42,10 @@
         display: block;
         margin-bottom: 5px;
       }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
     .button {
@@ -40,15 +54,12 @@
   }
 }
 
-.input-wrapper {
-
-  .error-message {
-    @include font-size(14);
-    color: $danger;
-    padding-top: 5px;
-    display: block;
-    text-align: left;
-  }
+.error-message {
+  @include font-size(14);
+  color: $danger;
+  padding-top: 5px;
+  display: block;
+  text-align: left;
 }
 
 textarea {
@@ -58,8 +69,9 @@ textarea {
 textarea,
 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;
@@ -76,7 +88,6 @@ input[type="email"] {
   }
 
   &::placeholder {
-    //color: $light_text;
     color: rgba($text, 0.5);
     @include font-size(15);
   }
@@ -108,6 +119,12 @@ input[type="email"] {
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .form {
+    max-width: 100%;
+  }
+}
+
 @media only screen and (max-width: 960px) {
   .form {
 
@@ -163,12 +180,20 @@ input[type="email"] {
 
   textarea,
   input[type="password"],
+  input[type="number"],
   input[type="text"],
   input[type="email"] {
     padding: 14px 20px;
   }
 }
 
+@media only screen and (max-width: 690px) {
+
+  .form.block-form .wrapper-inline {
+    display: block;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
 
   .form {
@@ -184,7 +209,9 @@ input[type="email"] {
   textarea,
   input[type="password"],
   input[type="text"],
+  input[type="number"],
   input[type="email"] {
+    border-color: $dark_mode_foreground;
     background: $dark_mode_foreground;
     color: $dark_mode_text_primary;
 

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

@@ -3,6 +3,7 @@ $text: #1c1d1f;
 $text-muted: rgba($text, 0.7);
 
 $theme: #00BC7E;
+$theme_light: #ECF7F2;
 
 $yellow: #FFBD2D;
 $pink: #FE66A1;

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

@@ -80,6 +80,23 @@ Route::group(['middleware' => ['auth:api', 'auth.master', 'scope:master']], func
     Route::get('/logout', 'Auth\AuthController@logout');
 });
 
+// Admin
+Route::group(['middleware' => ['auth:api', 'auth.master', 'auth.admin', 'scope:master']], function () {
+
+    // Get users info
+    Route::get('/users/{id}/storage', 'Admin\UserController@storage');
+    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');
+    Route::post('/users/{id}/send-password-email', 'Admin\UserController@send_password_reset_email');
+});
+
+
 // Protected sharing routes for authenticated user
 Route::group(['middleware' => ['auth:api', 'auth.shared', 'scope:visitor,editor']], function () {