v1.7 alpha.2

2026-04-05 18:23:48 +00:00 · 2020-07-15 08:34:52 +02:00
parent b1860eac21
commit 38da639e26
32 changed files with 352 additions and 145 deletions
--- a/.env.example
+++ b/.env.example
@@ -37,7 +37,7 @@ MAIL_FROM_NAME="${APP_NAME}"

 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
-AWS_DEFAULT_REGION=us-east-1
+AWS_DEFAULT_REGION=
 AWS_BUCKET=

 DO_SPACES_KEY=
--- a/app/Http/Controllers/Admin/PagesController.php
+++ b/app/Http/Controllers/Admin/PagesController.php
@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Admin;
 use App\Http\Controllers\Controller;
 use App\Http\Resources\PageCollection;
 use App\Http\Resources\PageResource;
+use App\Http\Tools\Demo;
 use App\Page;
 use Illuminate\Http\Request;

@@ -42,9 +43,17 @@ class PagesController extends Controller
     * @param $slug
     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
     */
-    public function update(Request $request, $slug) {
+    public function update(Request $request, $slug)
+    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
+        }
+
+        // Get page
        $page = Page::where('slug', $slug)->first();

+        // Update page
        $page->update(make_single_input($request));

        return response('Done', 204);
--- a/app/Http/Controllers/Admin/PlanController.php
+++ b/app/Http/Controllers/Admin/PlanController.php
@@ -7,6 +7,7 @@ use App\Http\Resources\PlanCollection;
 use App\Http\Resources\PlanResource;
 use App\Http\Resources\UserResource;
 use App\Http\Resources\UsersCollection;
+use App\Http\Tools\Demo;
 use App\Plan;
 use App\Services\StripeService;
 use App\User;
@@ -34,10 +35,8 @@ class PlanController extends Controller
    {
        // Store or Get plans to cache
        if (Cache::has('plans')) {
-
            $plans = Cache::get('plans');
        } else {
-
            $plans = Cache::rememberForever('plans', function () {
                return $this->stripe->getPlans();
            });
@@ -56,10 +55,8 @@ class PlanController extends Controller
    {
        // Store or Get plan to cache
        if (Cache::has('plan-' . $id)) {
-
            $plan = Cache::get('plan-' . $id);
        } else {
-
            $plan = Cache::rememberForever('plan-' . $id, function () use ($id) {
                return $this->stripe->getPlan($id);
            });
@@ -76,6 +73,20 @@ class PlanController extends Controller
     */
    public function store(Request $request)
    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+
+            if (Cache::has('plan-starter-pack')) {
+                $plan = Cache::get('plan-starter-pack');
+            } else {
+                $plan = Cache::rememberForever('plan-starter-pack', function () {
+                    return $this->stripe->getPlan('starter-pack');
+                });
+            }
+
+            return new PlanResource($plan);
+        }
+
        $plan = new PlanResource(
            $this->stripe->createPlan($request)
        );
@@ -95,6 +106,12 @@ class PlanController extends Controller
     */
    public function update(Request $request, $id)
    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
+        }
+
+        // Update plan
        $this->stripe->updatePlan($request, $id);

        // Clear cached plans
@@ -111,6 +128,12 @@ class PlanController extends Controller
     */
    public function delete($id)
    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
+        }
+
+        // Delete plan
        $this->stripe->deletePlan($id);

        // Clear cached plans
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -226,6 +226,7 @@ class UserController extends Controller
        if ($user->name !== $request->name) abort(403);

        $shares = Share::where('user_id', $user->id)->get();
+
        $files = FileManagerFile::withTrashed()
            ->where('user_id', $user->id)
            ->get();
--- a/app/Http/Controllers/SettingController.php
+++ b/app/Http/Controllers/SettingController.php
@@ -2,6 +2,7 @@

 namespace App\Http\Controllers;

+use App\Http\Tools\Demo;
 use App\Setting;
 use Artisan;
 use Illuminate\Http\Request;
@@ -14,8 +15,8 @@ class SettingController extends Controller
     * @param Request $request
     * @return mixed
     */
-    public function show(Request $request) {
-
+    public function show(Request $request)
+    {
        $column = $request->get('column');

        if (strpos($column, '|') !== false) {
@@ -36,6 +37,11 @@ class SettingController extends Controller
     */
    public function update(Request $request)
    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
+        }
+
        // Store image if exist
        if ($request->hasFile($request->name)) {

@@ -64,7 +70,12 @@ class SettingController extends Controller
     * @param Request $request
     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Illuminate\Http\Response
     */
-    public function set_email(Request $request) {
+    public function set_email(Request $request)
+    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
+        }

        // Get options
        $mail = collect([
--- a/app/Http/Controllers/User/PaymentMethodsController.php
+++ b/app/Http/Controllers/User/PaymentMethodsController.php
@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
 use App\Http\Resources\PaymentCardCollection;
 use App\Http\Resources\PaymentCardResource;
 use App\Http\Resources\PaymentDefaultCardResource;
+use App\Http\Tools\Demo;
 use Auth;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
@@ -85,6 +86,11 @@ class PaymentMethodsController extends Controller
    {
        $user = Auth::user();

+        // Check if is demo
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
        // Update DefaultPayment Method
        $user->updateDefaultPaymentMethod($id);

@@ -96,6 +102,8 @@ class PaymentMethodsController extends Controller
            'payment-methods-user-' . $user->id,
            'default-payment-methods-user-' . $user->id
        ]);
+
+        return response('Done', 204);
    }

    /**
@@ -106,6 +114,11 @@ class PaymentMethodsController extends Controller
    {
        $user = Auth::user();

+        // Check if is demo
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
        // Get payment method
        $paymentMethod = $user->findPaymentMethod($id);

--- a/app/Http/Controllers/User/SubscriptionController.php
+++ b/app/Http/Controllers/User/SubscriptionController.php
@@ -5,6 +5,7 @@ namespace App\Http\Controllers\User;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Subscription\StoreUpgradeAccountRequest;
 use App\Http\Resources\UserSubscription;
+use App\Http\Tools\Demo;
 use App\Invoice;
 use App\Services\StripeService;
 use Auth;
@@ -77,6 +78,11 @@ class SubscriptionController extends Controller
        // Get user
        $user = Auth::user();

+        // Check if is demo
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
        // Forget user subscription
        Cache::forget('subscription-user-' . $user->id);

@@ -109,6 +115,11 @@ class SubscriptionController extends Controller
    {
        $user = Auth::user();

+        // Check if is demo
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
        // Cancel subscription
        $user->subscription('main')->cancel();

@@ -127,6 +138,11 @@ class SubscriptionController extends Controller
    {
        $user = Auth::user();

+        // Check if is demo
+        if (is_demo($user->id)) {
+            return Demo::response_204();
+        }
+
        // Resume subscription
        $user->subscription('main')->resume();

--- a/app/Http/Helpers/helpers.php
+++ b/app/Http/Helpers/helpers.php
@@ -11,6 +11,21 @@ use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Intervention\Image\ImageManagerStatic as Image;

+/**
+ * Obfuscate email
+ *
+ * @param $email
+ * @return string
+ */
+function obfuscate_email($email)
+{
+    $em   = explode("@",$email);
+    $name = implode('@', array_slice($em, 0, count($em)-1));
+    $len  = floor(strlen($name)/2);
+
+    return substr($name,0, $len) . str_repeat('*', $len) . "@" . end($em);
+}
+
 /**
 * Get single value from settings table
 *
--- a/app/Http/Resources/UserResource.php
+++ b/app/Http/Resources/UserResource.php
@@ -18,9 +18,6 @@ class UserResource extends JsonResource
     */
    public function toArray($request)
    {
-        // Faker only for demo purpose
-        $faker = Factory::create();
-
        return [
            'data'          => [
                'id'         => (string)$this->id,
@@ -29,8 +26,8 @@ class UserResource extends JsonResource
                    'storage_capacity'     => $this->settings->storage_capacity,
                    'subscription'         => $this->subscribed('main'),
                    'stripe_customer'      => is_null($this->stripe_id) ? false : true,
-                    'name'                 => env('APP_DEMO') ? $faker->name : $this->name,
-                    'email'                => env('APP_DEMO') ? $faker->email : $this->email,
+                    'name'                 => $this->name,
+                    'email'                => env('APP_DEMO') ? obfuscate_email($this->email) : $this->email,
                    'avatar'               => $this->avatar,
                    'role'                 => $this->role,
                    'created_at_formatted' => format_date($this->created_at, '%d. %B. %Y'),
--- a/public/assets/images/default-avatar.png
+++ b/public/assets/images/default-avatar.png
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -133,5 +133,73 @@
    "/js/main.b0f60374e12655123fa3.hot-update.js": "/js/main.b0f60374e12655123fa3.hot-update.js",
    "/js/main.3bace6a430879b52f95a.hot-update.js": "/js/main.3bace6a430879b52f95a.hot-update.js",
    "/js/main.f3a7a774479629f1cfd4.hot-update.js": "/js/main.f3a7a774479629f1cfd4.hot-update.js",
-    "/js/main.66e645a33bbdcbf71b3d.hot-update.js": "/js/main.66e645a33bbdcbf71b3d.hot-update.js"
+    "/js/main.66e645a33bbdcbf71b3d.hot-update.js": "/js/main.66e645a33bbdcbf71b3d.hot-update.js",
+    "/js/main.cbc478b70ad17b57ea84.hot-update.js": "/js/main.cbc478b70ad17b57ea84.hot-update.js",
+    "/js/main.b14dd7f33cb4d3fec749.hot-update.js": "/js/main.b14dd7f33cb4d3fec749.hot-update.js",
+    "/js/main.1ced76abdfd7e436906d.hot-update.js": "/js/main.1ced76abdfd7e436906d.hot-update.js",
+    "/js/main.d40199119678765f1518.hot-update.js": "/js/main.d40199119678765f1518.hot-update.js",
+    "/js/main.3f3cf506232846e42e0e.hot-update.js": "/js/main.3f3cf506232846e42e0e.hot-update.js",
+    "/js/main.a558754e964b2d94d197.hot-update.js": "/js/main.a558754e964b2d94d197.hot-update.js",
+    "/js/main.a88baf8cfef00e367575.hot-update.js": "/js/main.a88baf8cfef00e367575.hot-update.js",
+    "/js/main.6d4cb04832281a3cdbbd.hot-update.js": "/js/main.6d4cb04832281a3cdbbd.hot-update.js",
+    "/js/main.374d954fad21a0c0b9b7.hot-update.js": "/js/main.374d954fad21a0c0b9b7.hot-update.js",
+    "/js/main.250d27d77db257de9965.hot-update.js": "/js/main.250d27d77db257de9965.hot-update.js",
+    "/js/main.a03c527e7a404a1c9d10.hot-update.js": "/js/main.a03c527e7a404a1c9d10.hot-update.js",
+    "/js/main.a6f69fff024422e53e4e.hot-update.js": "/js/main.a6f69fff024422e53e4e.hot-update.js",
+    "/js/main.8e878ba74b9f2cba0f6b.hot-update.js": "/js/main.8e878ba74b9f2cba0f6b.hot-update.js",
+    "/js/main.44c53d5c7375fd9aa9ee.hot-update.js": "/js/main.44c53d5c7375fd9aa9ee.hot-update.js",
+    "/js/main.3403e2c5cf9729259e91.hot-update.js": "/js/main.3403e2c5cf9729259e91.hot-update.js",
+    "/js/main.5abc9a1e72a96d87fb9a.hot-update.js": "/js/main.5abc9a1e72a96d87fb9a.hot-update.js",
+    "/js/main.f9e8c57473b01c05ad9f.hot-update.js": "/js/main.f9e8c57473b01c05ad9f.hot-update.js",
+    "/js/main.e7ef8fa4a2f8e8b7ef92.hot-update.js": "/js/main.e7ef8fa4a2f8e8b7ef92.hot-update.js",
+    "/js/main.b3556273847c2b9afa45.hot-update.js": "/js/main.b3556273847c2b9afa45.hot-update.js",
+    "/js/main.9a9952cc5b432927b822.hot-update.js": "/js/main.9a9952cc5b432927b822.hot-update.js",
+    "/js/main.ced7430a74a075709dc2.hot-update.js": "/js/main.ced7430a74a075709dc2.hot-update.js",
+    "/js/main.00e63f90972ceb446e05.hot-update.js": "/js/main.00e63f90972ceb446e05.hot-update.js",
+    "/js/main.c4ea4784c0f2cef67b7a.hot-update.js": "/js/main.c4ea4784c0f2cef67b7a.hot-update.js",
+    "/js/main.0990f73cb0537f87777c.hot-update.js": "/js/main.0990f73cb0537f87777c.hot-update.js",
+    "/js/main.2e8738a7960f3209146e.hot-update.js": "/js/main.2e8738a7960f3209146e.hot-update.js",
+    "/js/main.70a4ad175baff9c6e101.hot-update.js": "/js/main.70a4ad175baff9c6e101.hot-update.js",
+    "/js/main.6ce7439d4cb2d0594afe.hot-update.js": "/js/main.6ce7439d4cb2d0594afe.hot-update.js",
+    "/js/main.9fd91e6a256b68cb2af1.hot-update.js": "/js/main.9fd91e6a256b68cb2af1.hot-update.js",
+    "/js/main.852a6a6f1000933a039b.hot-update.js": "/js/main.852a6a6f1000933a039b.hot-update.js",
+    "/js/main.ba64c75ad3a35de56468.hot-update.js": "/js/main.ba64c75ad3a35de56468.hot-update.js",
+    "/js/main.31792f1a688f8e0a7c01.hot-update.js": "/js/main.31792f1a688f8e0a7c01.hot-update.js",
+    "/js/main.24add21348d90abb7e88.hot-update.js": "/js/main.24add21348d90abb7e88.hot-update.js",
+    "/js/main.bfef2cd63943ad6715d9.hot-update.js": "/js/main.bfef2cd63943ad6715d9.hot-update.js",
+    "/js/main.3be0d28d66eaa77045b5.hot-update.js": "/js/main.3be0d28d66eaa77045b5.hot-update.js",
+    "/js/main.5678ef278aa9c23791bc.hot-update.js": "/js/main.5678ef278aa9c23791bc.hot-update.js",
+    "/js/main.5fcb728ffc9a64075eca.hot-update.js": "/js/main.5fcb728ffc9a64075eca.hot-update.js",
+    "/js/main.6a683785276a61017eb3.hot-update.js": "/js/main.6a683785276a61017eb3.hot-update.js",
+    "/js/main.741589e770eca397805c.hot-update.js": "/js/main.741589e770eca397805c.hot-update.js",
+    "/js/main.7b20aef6ad310bd47403.hot-update.js": "/js/main.7b20aef6ad310bd47403.hot-update.js",
+    "/js/main.7bea26daf5715d3aafb5.hot-update.js": "/js/main.7bea26daf5715d3aafb5.hot-update.js",
+    "/js/main.379ee32fc33b55926005.hot-update.js": "/js/main.379ee32fc33b55926005.hot-update.js",
+    "/js/main.50567163e8ffe34a11ea.hot-update.js": "/js/main.50567163e8ffe34a11ea.hot-update.js",
+    "/js/main.26c7b5e8a4d0f6bf6008.hot-update.js": "/js/main.26c7b5e8a4d0f6bf6008.hot-update.js",
+    "/js/main.5dc8c52d39ba6d3a62dd.hot-update.js": "/js/main.5dc8c52d39ba6d3a62dd.hot-update.js",
+    "/js/main.30af0b64f6ef483cdf4e.hot-update.js": "/js/main.30af0b64f6ef483cdf4e.hot-update.js",
+    "/js/main.f5bf71f37744840b2591.hot-update.js": "/js/main.f5bf71f37744840b2591.hot-update.js",
+    "/js/main.5ee5965d17083c89ffcd.hot-update.js": "/js/main.5ee5965d17083c89ffcd.hot-update.js",
+    "/js/main.0ae52df272b8ccdc2610.hot-update.js": "/js/main.0ae52df272b8ccdc2610.hot-update.js",
+    "/js/main.aa562a401dc7003e8fc3.hot-update.js": "/js/main.aa562a401dc7003e8fc3.hot-update.js",
+    "/js/main.5f7c0e64e66b2b3c00f3.hot-update.js": "/js/main.5f7c0e64e66b2b3c00f3.hot-update.js",
+    "/js/main.db7857720867617c3a08.hot-update.js": "/js/main.db7857720867617c3a08.hot-update.js",
+    "/js/main.fbb262c6f328cb7c68f3.hot-update.js": "/js/main.fbb262c6f328cb7c68f3.hot-update.js",
+    "/js/main.da1f49f0f9b0bed9febc.hot-update.js": "/js/main.da1f49f0f9b0bed9febc.hot-update.js",
+    "/js/main.5b72fb5b69066c470f90.hot-update.js": "/js/main.5b72fb5b69066c470f90.hot-update.js",
+    "/js/main.a23cb3be820b7ebc4174.hot-update.js": "/js/main.a23cb3be820b7ebc4174.hot-update.js",
+    "/js/main.586efe8ca5d1f2772415.hot-update.js": "/js/main.586efe8ca5d1f2772415.hot-update.js",
+    "/js/main.ad316ed02ff697b46df0.hot-update.js": "/js/main.ad316ed02ff697b46df0.hot-update.js",
+    "/js/main.bb8f19405068d176be63.hot-update.js": "/js/main.bb8f19405068d176be63.hot-update.js",
+    "/js/main.14b3e5053dfa9fa09600.hot-update.js": "/js/main.14b3e5053dfa9fa09600.hot-update.js",
+    "/js/main.6f4ff338c7ed38584b68.hot-update.js": "/js/main.6f4ff338c7ed38584b68.hot-update.js",
+    "/js/main.29880fe0bc76b4aeca61.hot-update.js": "/js/main.29880fe0bc76b4aeca61.hot-update.js",
+    "/js/main.b12e72b71f7059ab0293.hot-update.js": "/js/main.b12e72b71f7059ab0293.hot-update.js",
+    "/js/main.13d19aa5bd5f38ab5ddd.hot-update.js": "/js/main.13d19aa5bd5f38ab5ddd.hot-update.js",
+    "/js/main.2b8b9f29bb579f484b71.hot-update.js": "/js/main.2b8b9f29bb579f484b71.hot-update.js",
+    "/js/main.c837a292b8c23fd03cc3.hot-update.js": "/js/main.c837a292b8c23fd03cc3.hot-update.js",
+    "/js/main.45e9fbc1d3d28cee2262.hot-update.js": "/js/main.45e9fbc1d3d28cee2262.hot-update.js",
+    "/js/main.0c32aa8273f3999763aa.hot-update.js": "/js/main.0c32aa8273f3999763aa.hot-update.js",
+    "/js/main.ec55af6e363caa97c10d.hot-update.js": "/js/main.ec55af6e363caa97c10d.hot-update.js"
 }
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -36,16 +36,13 @@
        white-space: nowrap;
        display: flex;
        align-items: center;
+        justify-content: center;

        .icon {
            line-height: 1;
            margin-right: 10px;
        }

-        .content {
-            width: 100%;
-        }
-
        &:active {
            transform: scale(0.95);
        }
--- a/resources/js/components/Index/IndexPageHeader.vue
+++ b/resources/js/components/Index/IndexPageHeader.vue
@@ -16,7 +16,7 @@
            </div>
            <div class="feature">
                <hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
-                <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpace}) }}</b>
+                <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpaceFormatted}) }}</b>
            </div>
        </div>
    </header>
--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/Others/Forms/InfoBox.vue
@@ -82,16 +82,16 @@
    @media (prefers-color-scheme: dark) {

        .info-box {
-            background: rgba($yellow, 0.1);
+            background: $dark_mode_foreground;

            p {
-                color: $yellow;
+                color: $dark_mode_text_primary;
            }

            ul {

                li {
-                    color: $yellow;
+                    color: $dark_mode_text_primary;
                }
            }
        }
--- a/resources/js/components/Others/PlanPricingTables.vue
+++ b/resources/js/components/Others/PlanPricingTables.vue
@@ -144,8 +144,12 @@
        justify-content: center;
    }

-    @media only screen and (max-width: 1024px) {
+    @media only screen and (max-width: 960px) {

+        .plans-wrapper {
+            display: block;
+            margin: 0;
+        }
    }

    @media (prefers-color-scheme: dark) {
--- a/resources/js/components/Others/Popup/Confirm.vue
+++ b/resources/js/components/Others/Popup/Confirm.vue
@@ -118,6 +118,12 @@
        }
    }

+    @media only screen and (max-width: 690px){
+        .content {
+            top: 110px;
+        }
+    }
+
    @media (prefers-color-scheme: dark) {

        .content {
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -3,7 +3,7 @@
        <table v-if="hasData" class="table">
            <thead class="table-header">
            <tr>
-                <td
+                <th
                        v-for="(column, index) in columns"
                        @click="sort(column.field, column.sortable, index)"
                        :key="index"
@@ -13,7 +13,7 @@
                    <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>
+                </th>
            </tr>
            </thead>

@@ -174,12 +174,12 @@
    .table {
        width: 100%;
        border-collapse: collapse;
-        table-layout: fixed;
+        overflow-x: auto;

        tr {
            width: 100%;

-            td {
+            td, th {
                &:first-child {
                    padding-left: 15px;
                }
@@ -195,8 +195,9 @@
            margin-bottom: 10px;

            tr {
-                td {
+                td, th {
                    padding: 12px;
+                    text-align: left;

                    span {
                        color: $theme;
@@ -245,7 +246,7 @@
                    background: $light_background;
                }

-                td {
+                td, th {
                    padding: 12px;

                    &:last-child {
@@ -354,7 +355,7 @@
            .table-header {

                tr {
-                    td {
+                    td, th {

                        span {
                            color: $theme;
@@ -364,7 +365,7 @@
            }

            .table-body {
-                tr {
+                tr, th {
                    &:hover {
                        background: $dark_mode_foreground;
                    }
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -9,7 +9,7 @@ const Helpers = {

        Vue.prototype.$updateText = debounce(function (route, name, value) {

-            if (value === '') return
+            if (! value || value === '') return

            axios.patch(this.$store.getters.api + route, {name, value})
                .catch(error => {
@@ -18,7 +18,7 @@ const Helpers = {
                        message: this.$t('popup_error.message'),
                    })
                })
-        }, 300)
+        }, 150)

        Vue.prototype.$updateImage = function (route, name, image) {

--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -143,6 +143,12 @@
                            message: this.$t('toaster.email_set'),
                        })
                    })
+                    .catch(() => {
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
                    .finally(() => {

                        // End loading
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -1,6 +1,8 @@
 <template>
    <div id="single-page">
        <div id="page-content" v-if="! isLoading && data">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+
            <div class="dashboard-headline">
                <div class="logo">
                    <a href="https://vuefilemanager.com" target="_blank">
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -6,7 +6,7 @@
            </FormLabel>

            <!--Info about active subscription-->
-            <div v-if="! subscription.canceled" class="state active">
+            <div v-if="! subscription.attributes.canceled" class="state active">
                <ListInfo class="list-info">
                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')"
                                  :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
@@ -20,7 +20,7 @@
            <!--Info about canceled subscription-->
            <div v-if="subscription.attributes.canceled" class="state canceled">
                <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/>
                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
                    <ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
                    <ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
--- a/resources/js/views/Mobile/AdminMobileMenu.vue
+++ b/resources/js/views/Mobile/AdminMobileMenu.vue
@@ -51,7 +51,7 @@
                    {
                        icon: 'settings',
                        title: this.$t('admin_menu.settings'),
-                        routeName: 'User',
+                        routeName: 'AppOthers',
                        isVisible: true,
                    },
                ],
@@ -69,7 +69,7 @@
                        isVisible: true,
                    },
                    {
-                        icon: 'monitor-icon',
+                        icon: 'monitor',
                        title: this.$t('admin_menu.pages'),
                        routeName: 'Pages',
                        isVisible: true,
--- a/resources/js/views/Upgrade/UpgradeBilling.vue
+++ b/resources/js/views/Upgrade/UpgradeBilling.vue
@@ -3,15 +3,12 @@
        <div id="page-content" class="large-width center-page" v-show="! isLoading">
            <MobileHeader :title="$router.currentRoute.meta.title"/>
            <div class="content-page">
-
                <div class="plan-title">
                    <credit-card-icon size="42" class="title-icon"></credit-card-icon>
                    <h1>{{ $t('page_upgrade_account.title') }}</h1>
                    <h2>{{ $t('page_upgrade_account.desription') }}</h2>
                </div>
-
                <div class="order">
-
                    <div class="steps">

                        <div class="payment-card">
@@ -19,10 +16,10 @@

                            <!-- Pay by new credit card -->
                            <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
-                                <p class="payment-demo-disclaimer">
-                                    For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555555555554444</b> as a card number, <b>11/22</b>
-                                    as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.
-                                </p>
+                                <InfoBox>
+                                    <p>For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555 5555 5555 4444</b> as a card number, <b>11/22</b>
+                                        as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.</p>
+                                </InfoBox>

                                <div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }"></div>

@@ -237,6 +234,7 @@
    import FormLabel from '@/components/Others/Forms/FormLabel'
    import MobileHeader from '@/components/Mobile/MobileHeader'
    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
    import ColorLabel from '@/components/Others/ColorLabel'
    import PageHeader from '@/components/Others/PageHeader'
    import Spinner from '@/components/FilesView/Spinner'
@@ -262,6 +260,7 @@
            FormLabel,
            required,
            Spinner,
+            InfoBox,
        },
        computed: {
            ...mapGetters(['requestedPlan', 'config']),
@@ -509,18 +508,6 @@
        }
    }

-    .payment-demo-disclaimer {
-        padding: 15px;
-        background: $light_background;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        line-height: 1.6;
-
-        b {
-            color: $danger;
-        }
-    }
-
    .stripe-card {
        box-sizing: border-box;
        padding: 13px 20px;
@@ -550,6 +537,10 @@
        &.StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
        }
+
+        iframe .InputContainer .InputElement {
+            color: white;
+        }
    }

    .summary-list {
@@ -614,6 +605,7 @@

    .order {
        display: flex;
+        margin-bottom: 30px;

        .steps {
            flex: 0 0 65%;
@@ -650,10 +642,6 @@
        }
    }

-    @media only screen and (max-width: 960px) {
-
-    }
-
    @media (prefers-color-scheme: dark) {

        .plan-title {
@@ -714,6 +702,32 @@
                }
            }
        }
+
+        .stripe-card {
+            border: 1px solid transparent;
+            //background-color: $dark_mode_foreground;
+            box-shadow: none;
+
+            &.StripeElement--webkit-autofill {
+                background-color: $dark_mode_foreground !important;
+            }
+
+            &.StripeElement--focus {
+                box-shadow: none;
+                border-color: $theme;
+                box-shadow: 0 1px 5px rgba($theme, 0.3);
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+        .order {
+            display: block;
+
+            .steps {
+                margin-bottom: 70px;
+            }
+        }
    }

 </style>
--- a/resources/js/views/User/PaymentMethods.vue
+++ b/resources/js/views/User/PaymentMethods.vue
@@ -136,8 +136,8 @@
            },
            deleteCard(card) {
                events.$emit('confirm:open', {
-                    title: this.$t('popup_set_card.title'),
-                    message: this.$t('popup_set_card.message'),
+                    title: this.$t('popup_delete_card.title'),
+                    message: this.$t('popup_delete_card.message'),
                    action: {
                        id: card.card_id,
                        operation: 'delete-credit-card'
@@ -188,8 +188,11 @@
                                message: this.$t('toaster.card_deleted'),
                            })
                        })
-                        .catch(error => {
-                            console.error(error);
+                        .catch(() => {
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
                        })
                }

@@ -209,8 +212,11 @@
                                message: this.$t('toaster.card_set'),
                            })
                        })
-                        .catch(error => {
-                            console.error(error);
+                        .catch(() => {
+                            events.$emit('alert:open', {
+                                title: this.$t('popup_error.title'),
+                                message: this.$t('popup_error.message'),
+                            })
                        })
                }
            })
--- a/resources/js/views/User/Subscription.vue
+++ b/resources/js/views/User/Subscription.vue
@@ -29,7 +29,7 @@
            <!--Info about canceled subscription-->
            <div v-if="subscription.data.attributes.canceled" class="state canceled">
                <ListInfo class="list-info">
-                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name"/>
+                    <ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/>
                    <ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
                    <ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/>
                    <ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/>
@@ -115,80 +115,89 @@

                // Set confirm button
                if (!this.isConfirmedCancel) {
-
                    this.isConfirmedCancel = true
-                } else {
-
-                    // Start deleting spinner button
-                    this.isDeleting = true
-                    this.isLoading = true
-
-                    // Send delete request
-                    axios
-                        .post('/api/subscription/cancel')
-                        .then(() => {
-
-                            // Update user data
-                            this.$store.dispatch('getAppData').then(() => {
-                                this.fetchSubscriptionDetail()
-                            })
-
-                            events.$emit('alert:open', {
-                                emoji: '👍',
-                                title: this.$t('popup_subscription_cancel.title'),
-                                message: this.$t('popup_subscription_cancel.message'),
-                                buttonStyle: 'theme',
-                                button: this.$t('popup_subscription_cancel.button')
-                            })
-                        })
-                        .finally(() => {
-
-                            // End deleting spinner button
-                            this.isDeleting = false
-                            this.isLoading = false
-                        })
+                    return
                }
+
+                // Start deleting spinner button
+                this.isDeleting = true
+                this.isLoading = true
+
+                // Send delete request
+                axios
+                    .post('/api/subscription/cancel')
+                    .then(() => {
+
+                        // Update user data
+                        this.$store.dispatch('getAppData').then(() => {
+                            this.fetchSubscriptionDetail()
+                        })
+
+                        events.$emit('alert:open', {
+                            emoji: '👍',
+                            title: this.$t('popup_subscription_cancel.title'),
+                            message: this.$t('popup_subscription_cancel.message'),
+                            buttonStyle: 'theme',
+                            button: this.$t('popup_subscription_cancel.button')
+                        })
+                    })
+                    .catch(() => {
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
+                    .finally(() => {
+
+                        // End deleting spinner button
+                        this.isDeleting = false
+                        this.isLoading = false
+                        this.isConfirmedCancel = false
+                    })
            },
            resumeSubscription() {

                // Set confirm button
-                if (!this.isConfirmedResume) {
-
+                if (! this.isConfirmedResume) {
                    this.isConfirmedResume = true
-                } else {
-
-                    // Start deleting spinner button
-                    this.isResuming = true
-                    this.isLoading = true
-
-                    // Send delete request
-                    axios
-                        .post('/api/subscription/resume')
-                        .then(() => {
-
-                            // Update user data
-                            this.$store.dispatch('getAppData').then(() => {
-                                this.fetchSubscriptionDetail()
-                            })
-
-                            // End deleting spinner button
-                            this.isResuming = false
-
-                            events.$emit('alert:open', {
-                                emoji: '👍',
-                                title: this.$t('popup_subscription_resumed.title'),
-                                message: this.$t('popup_subscription_resumed.message'),
-                                buttonStyle: 'theme',
-                                button: this.$t('popup_subscription_resumed.button')
-                            })
-                        })
-                        .catch(() => {
-
-                            // End deleting spinner button
-                            this.isResuming = false
-                            this.isLoading = false
-                        })
+                    return
                }
+
+                // Start deleting spinner button
+                this.isResuming = true
+                this.isLoading = true
+
+                // Send delete request
+                axios
+                    .post('/api/subscription/resume')
+                    .then(() => {
+
+                        // Update user data
+                        this.$store.dispatch('getAppData').then(() => {
+                            this.fetchSubscriptionDetail()
+                        })
+
+                        events.$emit('alert:open', {
+                            emoji: '👍',
+                            title: this.$t('popup_subscription_resumed.title'),
+                            message: this.$t('popup_subscription_resumed.message'),
+                            buttonStyle: 'theme',
+                            button: this.$t('popup_subscription_resumed.button')
+                        })
+                    })
+                    .catch(() => {
+                        events.$emit('alert:open', {
+                            title: this.$t('popup_error.title'),
+                            message: this.$t('popup_error.message'),
+                        })
+                    })
+                    .finally(() => {
+
+                        // End deleting spinner button
+                        this.isResuming = false
+                        this.isLoading = false
+                        this.isConfirmedResume = false
+                    })
            },
            fetchSubscriptionDetail() {
                axios.get('/api/user/subscription')
@@ -229,13 +238,4 @@
            flex: 0 0 50%;
        }
    }
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
-
 </style>
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -5,6 +5,7 @@
 #viewport {
  display: flex;
  height: 100%;
+  width: 100%;
  @include transition(200ms);
  flex: 1;
 }
@@ -325,6 +326,10 @@

    #page-content {
      padding-top: 0;
+
+      &.center-page {
+        padding-top: 0;
+      }
    }
  }

@@ -333,6 +338,10 @@
      top: 30px;
    }
  }
+
+  .form-fixed-width {
+    width: 100%;
+  }
 }

@media only screen and (max-width: 690px) {
--- a/resources/sass/vue-file-manager/_forms.scss
+++ b/resources/sass/vue-file-manager/_forms.scss
@@ -216,6 +216,15 @@ input[type="email"] {
    }
  }

+  .single-line-form {
+    display: block;
+
+    .submit-button {
+      margin-left: 0;
+      margin-top: 20px;
+      width: 100%;
+    }
+  }

  textarea,
  input[type="password"],
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -48,6 +48,7 @@
            userRegistration: {{ isset($settings->registration) ? $settings->registration : 1 }},
            storageLimit: {{ isset($settings->storage_limitation) ? $settings->storage_limitation : 1 }},
            storageDefaultSpace: {{ isset($settings->storage_default) ? $settings->storage_default : 5 }},
+            storageDefaultSpaceFormatted: '{{ isset($settings->storage_default) ? format_gigabytes($settings->storage_default) : format_gigabytes(5) }}',

            hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
            isSaaS: {{ isset($settings->license) && $settings->license === 'Extended' ? 1 : 0 }},
--- a/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
+++ b/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
@@ -1 +1 @@
-9999999999a:1:{i:0;a:2:{s:4:"plan";a:20:{s:2:"id";s:12:"starter-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:999;s:14:"amount_decimal";s:3:"999";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1594711443;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_He0V0jj0KOOjpi";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_He0V0jj0KOOjpi";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1594711442;s:11:"description";s:30:"The best for starting business";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:3:"100";}s:4:"name";s:12:"Starter Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1594711443;}}}
+9999999999a:2:{i:0;a:2:{s:4:"plan";a:20:{s:2:"id";s:9:"uber-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:9990;s:14:"amount_decimal";s:4:"9990";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1594748654;s:8:"currency";s:3:"gbp";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HeAVpE4yEJ9izT";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HeAVpE4yEJ9izT";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1594748653;s:11:"description";s:41:"Est suspendisse eget lectus cum massa sed";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:4:"1000";}s:4:"name";s:9:"Uber Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1594748654;}}i:1;a:2:{s:4:"plan";a:20:{s:2:"id";s:12:"starter-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:999;s:14:"amount_decimal";s:3:"999";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1594748302;s:8:"currency";s:3:"gbp";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HeAQsoNwRMsif2";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HeAQsoNwRMsif2";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1594748302;s:11:"description";s:63:"Ullamcorper pulvinar nascetur litora aliquam ultricies accumsan";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:3:"200";}s:4:"name";s:12:"Starter Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1594748302;}}}
--- a/storage/framework/cache/data/94/23/94239ca49856ec24cf53caa1d9a5bb8c48da953f
+++ b/storage/framework/cache/data/94/23/94239ca49856ec24cf53caa1d9a5bb8c48da953f
--- a/storage/framework/cache/data/b1/72/b172d2349fbf57eb748881b118e0a736bf7498ec
+++ b/storage/framework/cache/data/b1/72/b172d2349fbf57eb748881b118e0a736bf7498ec
--- a/storage/framework/cache/data/d8/5b/d85bb00307d094959d235062c0de9784a8d8dfee
+++ b/storage/framework/cache/data/d8/5b/d85bb00307d094959d235062c0de9784a8d8dfee
@@ -1 +0,0 @@
-9999999999a:0:{}