Added i18n support

app/FileManagerFile.php

@@ -31,7 +31,7 @@ class FileManagerFile extends Model
      */
     public function getCreatedAtAttribute()
     {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');;
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
     }
 
     /**
@@ -43,7 +43,7 @@ class FileManagerFile extends Model
     {
         if (! $this->attributes['deleted_at']) return null;
 
-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y at H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
     }
 
     /**

app/FileManagerFolder.php

@@ -79,7 +79,7 @@ class FileManagerFolder extends Model
      */
     public function getCreatedAtAttribute()
     {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
     }
 
     /**
@@ -91,7 +91,7 @@ class FileManagerFolder extends Model
     {
         if (! $this->attributes['deleted_at']) return null;
 
-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
     }
 
     /**

app/Http/Controllers/Auth/AuthController.php

@@ -43,7 +43,7 @@ class AuthController extends Controller
         ];
 
         // Abort with 404, user not found
-        return abort('404', 'We can\'t find a user with that e-mail address.');
+        return abort('404', __('vuefilemanager.user_not_fount'));
     }
     /**
      * Login user

app/Http/Controllers/FileManagerController.php

@@ -408,8 +408,10 @@ class FileManagerController extends Controller
     public function upload_item(Request $request)
     {
         // Check if user can upload
-        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100)
+        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100) {
+
             abort(423, 'You exceed your storage limit!');
+        }
 
         // Validate request
         $validator = Validator::make($request->all(), [

app/Http/Controllers/UserAccountController.php

@@ -33,7 +33,6 @@ class UserAccountController extends Controller
             'user'           => $user->only(['name', 'email', 'avatar']),
             'favourites'     => $user->favourites->makeHidden(['pivot']),
             'latest_uploads' => $user->latest_uploads->makeHidden(['user_id', 'basename']),
-
             'storage' => [
                 'used'       => Metric::bytes($user->used_capacity)->format(),
                 'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
@@ -57,7 +56,7 @@ class UserAccountController extends Controller
         return [
             [
                 'unique_id' => 0,
-                'name'      => 'Home',
+                'name'      => __('vuefilemanager.home'),
                 'location'  => 'base',
                 'folders'  => $folders,
             ]

app/Http/helpers.php

@@ -1,6 +1,7 @@
 <?php
 
 use ByteUnits\Metric;
+use Carbon\Carbon;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Intervention\Image\ImageManagerStatic as Image;
@@ -54,7 +55,6 @@ function check_directory($directory)
  */
 function make_single_input($request)
 {
-
     // Create container
     $data = [];
 
@@ -157,4 +157,18 @@ function filter_folders_ids($folders)
     $folder_unique_ids = recursiveFind($folders->toArray(), 'unique_id');
 
     return appeared_once($folder_unique_ids);
+}
+
+/**
+ * Format localized date
+ *
+ * @param $date
+ * @param string $format
+ * @return string
+ */
+function format_date($date, $format = '%d. %B. %Y, %H:%M')
+{
+    $start = Carbon::parse($date);
+
+    return $start->formatLocalized($format);
 }

app/Providers/AppServiceProvider.php

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

config/app.php

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

database/vue-file-manager-127.0.0.114-03-2020

@@ -100,7 +100,7 @@ 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,
+  `migration` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
   `batch` int(11) NOT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
@@ -137,7 +137,7 @@ 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,
+  `name` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `scopes` text COLLATE utf8mb4_unicode_ci,
   `revoked` tinyint(1) NOT NULL,
   `created_at` timestamp NULL DEFAULT NULL,
@@ -175,7 +175,7 @@ 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,
+  `name` varchar(191) 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,
@@ -234,8 +234,8 @@ CREATE TABLE `oauth_refresh_tokens` (
 DROP TABLE IF EXISTS `password_resets`;
 
 CREATE TABLE `password_resets` (
-  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `email` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `token` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `token` varchar(191) 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;
@@ -249,11 +249,11 @@ DROP TABLE IF EXISTS `users`;
 
 CREATE TABLE `users` (
   `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `name` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `email` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
   `email_verified_at` timestamp NULL DEFAULT NULL,
-  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `password` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `avatar` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
   `created_at` timestamp NULL DEFAULT NULL,
   `updated_at` timestamp NULL DEFAULT NULL,

package-lock.json

@@ -10216,6 +10216,11 @@
             "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
             "dev": true
         },
+        "vue-i18n": {
+            "version": "8.16.0",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.16.0.tgz",
+            "integrity": "sha512-cp9JOsx4ETzlCsnD22FE8ZhAmD8kcyNLRKV0DPsS7bBNTCdIlOKuyTGonWKYcGCUtNMtwemDWRBevRm8eevBVg=="
+        },
         "vue-loader": {
             "version": "15.9.0",
             "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.0.tgz",

package.json

@@ -26,6 +26,7 @@
         "node-sass": "^4.13.1",
         "vee-validate": "^3.2.5",
         "vue": "^2.6.10",
+        "vue-i18n": "^8.16.0",
         "vuex": "^3.0.1"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,40 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/main.b199e742764976d477eb.hot-update.js": "/js/main.b199e742764976d477eb.hot-update.js",
+    "/js/main.74bd4021acf8f5e6f2c0.hot-update.js": "/js/main.74bd4021acf8f5e6f2c0.hot-update.js",
+    "/js/main.7751cc56f809bdcca52f.hot-update.js": "/js/main.7751cc56f809bdcca52f.hot-update.js",
+    "/js/main.6550285a609d98fd0a2c.hot-update.js": "/js/main.6550285a609d98fd0a2c.hot-update.js",
+    "/js/main.593b8d94aebec435eaa6.hot-update.js": "/js/main.593b8d94aebec435eaa6.hot-update.js",
+    "/js/main.9646136421cb914b9bc8.hot-update.js": "/js/main.9646136421cb914b9bc8.hot-update.js",
+    "/js/main.34d97ba06940b269e518.hot-update.js": "/js/main.34d97ba06940b269e518.hot-update.js",
+    "/js/main.93f2bdf89f84cfacf4f3.hot-update.js": "/js/main.93f2bdf89f84cfacf4f3.hot-update.js",
+    "/js/main.817de8c8f5fd813c607b.hot-update.js": "/js/main.817de8c8f5fd813c607b.hot-update.js",
+    "/js/main.963bfdadae1fb90e0238.hot-update.js": "/js/main.963bfdadae1fb90e0238.hot-update.js",
+    "/js/main.1512db5a6a7632fb9e8e.hot-update.js": "/js/main.1512db5a6a7632fb9e8e.hot-update.js",
+    "/js/main.3a19340ddc14dcc839a1.hot-update.js": "/js/main.3a19340ddc14dcc839a1.hot-update.js",
+    "/js/main.397553844e2b0ca23cc7.hot-update.js": "/js/main.397553844e2b0ca23cc7.hot-update.js",
+    "/js/main.c87eeede975b87bf2b16.hot-update.js": "/js/main.c87eeede975b87bf2b16.hot-update.js",
+    "/js/main.f580b09761154926899f.hot-update.js": "/js/main.f580b09761154926899f.hot-update.js",
+    "/js/main.91d490a5132517514bfb.hot-update.js": "/js/main.91d490a5132517514bfb.hot-update.js",
+    "/js/main.bdad4fbdd1e409eb4b21.hot-update.js": "/js/main.bdad4fbdd1e409eb4b21.hot-update.js",
+    "/js/main.48d106f956e2b5fecbb0.hot-update.js": "/js/main.48d106f956e2b5fecbb0.hot-update.js",
+    "/js/main.3f7d1e2b874ad885f9ba.hot-update.js": "/js/main.3f7d1e2b874ad885f9ba.hot-update.js",
+    "/js/main.be94f32edd036852aa82.hot-update.js": "/js/main.be94f32edd036852aa82.hot-update.js",
+    "/js/main.0b838845dace73e0df6d.hot-update.js": "/js/main.0b838845dace73e0df6d.hot-update.js",
+    "/js/main.aac07313ac3ce9a2e597.hot-update.js": "/js/main.aac07313ac3ce9a2e597.hot-update.js",
+    "/js/main.37168073afe720eff29e.hot-update.js": "/js/main.37168073afe720eff29e.hot-update.js",
+    "/js/main.1eafca2af4cbb4242c1f.hot-update.js": "/js/main.1eafca2af4cbb4242c1f.hot-update.js",
+    "/js/main.8f3db6ec42d42fa7152e.hot-update.js": "/js/main.8f3db6ec42d42fa7152e.hot-update.js",
+    "/js/main.3d0c0e744120bafa0076.hot-update.js": "/js/main.3d0c0e744120bafa0076.hot-update.js",
+    "/js/main.5bf20eacf51dd037796e.hot-update.js": "/js/main.5bf20eacf51dd037796e.hot-update.js",
+    "/js/main.bf91b39fc6ebda933d92.hot-update.js": "/js/main.bf91b39fc6ebda933d92.hot-update.js",
+    "/js/main.87b79f2adeaf95ca1eae.hot-update.js": "/js/main.87b79f2adeaf95ca1eae.hot-update.js",
+    "/js/main.caeb9ea0fe68c0e20cbc.hot-update.js": "/js/main.caeb9ea0fe68c0e20cbc.hot-update.js",
+    "/js/main.61e2b39b769cf182b833.hot-update.js": "/js/main.61e2b39b769cf182b833.hot-update.js",
+    "/js/main.ac3b225c09da944dd637.hot-update.js": "/js/main.ac3b225c09da944dd637.hot-update.js",
+    "/js/main.e90426301ffd1febd2e8.hot-update.js": "/js/main.e90426301ffd1febd2e8.hot-update.js",
+    "/js/main.ee9680aa2ebf66f438e2.hot-update.js": "/js/main.ee9680aa2ebf66f438e2.hot-update.js",
+    "/js/main.0af6eb46c23ed68de4db.hot-update.js": "/js/main.0af6eb46c23ed68de4db.hot-update.js",
+    "/js/main.7d6e0c7874e39ca5797d.hot-update.js": "/js/main.7d6e0c7874e39ca5797d.hot-update.js"
 }

resources/js/components/VueFileManagerComponents/Auth.vue

@@ -4,23 +4,23 @@
         <!--Log In by Email-->
         <AuthContent name="log-in" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Welcome Back!</h1>
+            <h1>{{ $t('page_login.title') }}</h1>
-            <h2>Please type your email to log in:</h2>
+            <h2>{{ $t('page_login.subtitle') }}</h2>
 
             <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
                                 class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                     v-slot="{ errors }">
-                    <input v-model="loginEmail" placeholder="Type your E-mail" type="email"
+                    <input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                            :class="{'is-error': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton icon="chevron-right" text="Next Step" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span v-if="config.userRegistration" class="additional-link">Don’t have an account? <b
+            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
-                    @click="goToAuthPage('sign-up')">Register account.</b></span>
+                    @click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
         </AuthContent>
 
         <!--Log in By Password-->
@@ -28,166 +28,166 @@
 
             <div class="user" v-if="checkedAccount">
                 <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
-                <h1>Are You {{ checkedAccount.name }}?</h1>
+                <h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
-                <h2>Confirm you by your password:</h2>
+                <h2>{{ $t('page_sign_in.subtitle') }}</h2>
             </div>
 
             <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
                                 class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
                                     v-slot="{ errors }">
-                    <input v-model="loginPassword" placeholder="Type your password" type="password"
+                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
                            :class="{'is-error': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton icon="chevron-right" text="Log In" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span class="additional-link">Forgotten your password? <b @click="goToAuthPage('forgotten-password')">Reset Password.</b></span>
+            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
         </AuthContent>
 
         <!--Forgotten your password?-->
         <AuthContent name="forgotten-password" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Forgotten Password?</h1>
+            <h1>{{ $t('page_forgotten_password.title') }}</h1>
-            <h2>Get reset link with your email:</h2>
+            <h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
 
             <ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
                                 tag="form" class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                     v-slot="{ errors }">
-                    <input v-model="recoverEmail" placeholder="Type your E-mail" type="email"
+                    <input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                            :class="{'is-error': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton icon="chevron-right" text="Get Link" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
         </AuthContent>
 
         <!--Create new password-->
         <AuthContent name="create-new-password" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Only One Step to Log In</h1>
+            <h1>{{ $t('page_create_password.title') }}</h1>
-            <h2>Create your new password here:</h2>
+            <h2>{{ $t('page_create_password.subtitle') }}</h2>
 
             <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
                                 tag="form" class="form block-form create-new-password">
 
                 <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_create_password.label_email') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                         v-slot="{ errors }">
-                        <input v-model="recoverPassword.email" placeholder="Type your E-mail" type="email"
+                        <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
                                :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div class="block-wrapper">
-                    <label>Your new password:</label>
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="recoverPassword.newPassword" placeholder="Your new password" type="password"
+                        <input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_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>Confirm new password:</label>
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm new password"
+                        <input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
                                type="password" :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div>
-                    <AuthButton icon="chevron-right" text="Update Password" :loading="isLoading" :disabled="isLoading"/>
+                    <AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
                 </div>
             </ValidationObserver>
 
-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
         </AuthContent>
 
         <!--Registration-->
         <AuthContent name="sign-up" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Create New Account</h1>
+            <h1>{{ $t('page_registration.title') }}</h1>
-            <h2>Please fill registration to create account:</h2>
+            <h2>{{ $t('page_registration.subtitle') }}</h2>
 
             <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
 
                 <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_registration.label_email') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                         v-slot="{ errors }">
-                        <input v-model="register.email" placeholder="Type your E-mail" type="email"
+                        <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
                                :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div class="block-wrapper">
-                    <label>Full Name:</label>
+                    <label>{{ $t('page_registration.label_name') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
                                         v-slot="{ errors }">
-                        <input v-model="register.name" placeholder="Type your full name" type="text"
+                        <input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
                                :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div class="block-wrapper">
-                    <label>Create password:</label>
+                    <label>{{ $t('page_registration.label_pass') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="register.password" placeholder="Your new password" type="password"
+                        <input v-model="register.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>Confirm password:</label>
+                    <label>{{ $t('page_registration.label_confirm_pass') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="register.password_confirmation" placeholder="Confirm your new password"
+                        <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
                                type="password" :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div>
-                    <AuthButton icon="chevron-right" text="Create Account" :loading="isLoading" :disabled="isLoading"/>
+                    <AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
                 </div>
             </ValidationObserver>
 
-            <span class="additional-link">Do you have an account? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
         </AuthContent>
 
         <!--Password reset link sended-->
         <AuthContent name="password-reset-link-sended" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Thank you!</h1>
+            <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
-            <h2>We have e-mailed your password reset link!</h2>
+            <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
 
-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
         </AuthContent>
 
         <!--Password reset successfully-->
         <AuthContent name="password-reset-successfully" :visible="false">
             <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Awesome!</h1>
+            <h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
-            <h2>Your password was reset successfully.</h2>
+            <h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
 
-            <AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" text="Sign In"/>
+            <AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
         </AuthContent>
     </AuthContentWrapper>
 </template>
@@ -320,7 +320,7 @@
                         if (error.response.status == 400) {
 
                             this.$refs.sign_in.setErrors({
-                                'User Password': ['Sorry, you passed incorrect password :(']
+                                'User Password': [this.$t('validation_errors.incorrect_password')]
                             });
                         }
 
@@ -460,7 +460,7 @@
             let pathname = location.pathname.split('/')[1]
             let token = location.search.split('token=')[1]
 
-            if (pathname === 'create-new-password') {
+            if (pathname === this.$t('routes.create_new_password')) {
                 this.recoverPassword.token = token
                 this.goToAuthPage('create-new-password')
             } else {

resources/js/components/VueFileManagerComponents/Auth/AuthContentWrapper.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-
     export default {
         name: 'AuthContentWrapper',
     }
@@ -18,8 +17,5 @@
         height: 100%;
         width: 100%;
         display: table;
-        //display: flex;
-        //align-items: center;
-        //justify-content: center;
     }
 </style>

resources/js/components/VueFileManagerComponents/FilesView/Alert.vue

@@ -54,7 +54,7 @@
                 this.title = args.title
                 this.message = args.message
 
-                this.button = 'That’s horrible!'
+                this.button = this.$t('alerts.error_confirm')
                 this.emoji = '😢😢😢'
                 this.buttonStyle = 'danger'
 
@@ -70,7 +70,7 @@
                 this.title = args.title
                 this.message = args.message
 
-                this.button = 'Awesome!'
+                this.button = this.$t('alerts.success_confirm')
                 this.emoji = '🥳🥳🥳'
                 this.buttonStyle = 'theme'
 

resources/js/components/VueFileManagerComponents/FilesView/ButtonUpload.vue

@@ -35,7 +35,7 @@
 
     .button-base {
         @include font-size(16);
-        font-weight: 600;
+        font-weight: 700;
         cursor: pointer;
         transition: 0.15s all ease;
         border-radius: 8px;

resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue

@@ -8,20 +8,20 @@
         <ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">
 
             <!--View-->
-            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}</li>
+            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}</li>
-            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
+            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">{{ $t('context_menu.create_folder') }}</li>
 
             <!--Edits-->
-            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">Delete</li>
+            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.delete') }}</li>
-            <li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">Move</li>
+            <li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.move') }}</li>
 
             <!--Trash-->
-            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
+            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">{{ $t('context_menu.restore') }}</li>
-            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
+            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">{{ $t('context_menu.empty_trash') }}</li>
 
             <!--Others-->
-            <li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
+            <li class="menu-option" @click="ItemDetail" v-if="item">{{ $t('context_menu.detail') }}</li>
-            <li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</li>
+            <li class="menu-option" @click="downloadItem" v-if="isFile || isImage">{{ $t('context_menu.download') }}</li>
         </ul>
     </div>
 </template>
@@ -84,7 +84,7 @@
             },
             createFolder() {
                 // Create folder
-                this.$createFolder('New Folder')
+                this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
             },
             closeAndResetContextMenu() {
                 // Close context menu
@@ -141,8 +141,7 @@
     @import "@assets/app.scss";
 
     .contextmenu {
-        max-width: 190px;
+        min-width: 190px;
-        width: 190px;
         position: absolute;
         z-index: 99;
         box-shadow: $shadow;
@@ -161,6 +160,7 @@
             padding: 0;
 
             .menu-option {
+                white-space: nowrap;
                 font-weight: 700;
                 @include font-size(15);
                 padding: 15px 30px;

resources/js/components/VueFileManagerComponents/FilesView/EmptyPage.vue

@@ -2,16 +2,16 @@
     <div class="empty-page" v-if="isLoading || isEmpty">
         <div class="empty-state">
             <div class="text-content" v-if="isEmpty && !isLoading">
-                <h1 class="title">There is Nothing</h1>
+                <h1 class="title">{{ $t('empty_page.title') }}</h1>
                 <p v-if="! isTrash" class="description">
-                    Upload some files here easily via upload button
+                    {{ $t('empty_page.description') }}
                 </p>
                 <ButtonUpload
                         v-if="! isTrash"
                         @input.native="$uploadFiles(files)"
                         v-model="files"
                         button-style="theme"
-                >Upload File
+                >{{ $t('empty_page.call_to_action') }}
                 </ButtonUpload
                 >
             </div>
@@ -78,7 +78,7 @@
         .title {
             @include font-size(24);
             color: $text;
-            font-weight: 600;
+            font-weight: 700;
             margin: 0;
         }
 

resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue

@@ -41,22 +41,23 @@
         <ul class="list-info">
             <!--Filesize-->
             <li v-if="fileInfoDetail.filesize" class="list-info-item">
-                <b>Size</b>
+                <b>{{ $t('file_detail.size') }}</b>
                 <span>{{ fileInfoDetail.filesize }}</span>
             </li>
 
             <!--Latest change-->
             <li v-if="fileInfoDetail.created_at" class="list-info-item">
-                <b>Created at</b>
+                <b>{{ $t('file_detail.created_at') }}</b>
                 <span>{{ fileInfoDetail.created_at }}</span>
             </li>
 
             <!--Parent-->
             <li class="list-info-item">
-                <b>Where</b>
+                <b>{{ $t('file_detail.where') }}</b>
-                <span>{{
+                <div class="action-button" @click="moveItem">
-					fileInfoDetail.parent ? fileInfoDetail.parent.name : 'Home'
+                    <FontAwesomeIcon class="icon" icon="pencil-alt" />
-				}}</span>
+                    <span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
+                </div>
             </li>
         </ul>
     </div>
@@ -65,6 +66,7 @@
 <script>
     import {mapGetters} from 'vuex'
     import {debounce} from 'lodash'
+    import {events} from "@/bus"
 
     export default {
         name: 'FilesInfoPanel',
@@ -72,6 +74,10 @@
             ...mapGetters(['fileInfoDetail'])
         },
         methods: {
+            moveItem() {
+                // Move item fire popup
+                events.$emit('popup:move-item', this.fileInfoDetail);
+            },
             getItemAction() {
                 // Open image on new tab
                 if (this.fileInfoDetail.type == 'image') {
@@ -91,7 +97,6 @@
                 // Open folder
                 if (this.fileInfoDetail.type == 'folder') {
                     // Todo: open folder
-                    console.log('Open folder')
                 }
             },
             changeItemName: debounce(function (e) {
@@ -197,6 +202,16 @@
                 padding-top: 0;
             }
 
+            .action-button {
+                cursor: pointer;
+
+                .icon {
+                    @include font-size(11);
+                    display: inline-block;
+                    margin-right: 2px;
+                }
+            }
+
             b {
                 display: block;
                 @include font-size(13);
@@ -204,7 +219,7 @@
             }
 
             span {
-                display: block;
+                display: inline-block;
                 @include font-size(14);
                 font-weight: bold;
                 color: $text;

resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue

@@ -7,7 +7,7 @@
     >
         <!--Grid preview-->
         <div
-                draggable="true"
+                :draggable="! isDeleted"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -57,7 +57,7 @@
 				}}</span>
 
                 <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
+					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}
 				</span>
             </div>
 
@@ -88,7 +88,7 @@
                 return this.data.type === 'image'
             },
             timeStamp() {
-                return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
             },
             folderItems() {
                 return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,11 +97,6 @@
                 return this.data.deleted_at ? true : false
             }
         },
-        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            }
-        },
         data() {
             return {
                 isClicked: false,

resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue

@@ -6,7 +6,7 @@
     >
         <!--List preview-->
         <div
-                draggable="true"
+                :draggable="! isDeleted"
                 @dragstart="$emit('dragstart')"
                 @drop="
 				$emit('drop')
@@ -53,7 +53,7 @@
                 <span v-if="isFile || isImage" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
 
                 <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' Item') | pluralize(folderItems) }}, {{ timeStamp }}
+					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
 				</span>
             </div>
 
@@ -87,7 +87,7 @@
                 return this.data.type === 'image'
             },
             timeStamp() {
-                return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
             },
             folderItems() {
                 return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,9 +97,6 @@
             }
         },
         filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            },
             limitCharacters(str) {
 
                 if (str.length > 3) {

resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue

@@ -63,7 +63,7 @@
             <!--Show empty page if no search results-->
             <EmptyMessage
                     v-if="isSearching && isEmpty"
-                    message="Nothing was found."
+                    :message="$t('messages.nothing_was_found')"
                     icon="eye-slash"
             />
         </div>
@@ -79,7 +79,7 @@
             <!--If file info panel empty show message-->
             <EmptyMessage
                     v-if="!fileInfoDetail"
-                    message="There is nothing to preview."
+                    :message="$t('messages.nothing_to_preview')"
                     icon="eye-slash"
             />
         </div>

resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue

@@ -1,10 +1,10 @@
 <template>
     <div id="mobile-actions-wrapper">
         <div class="mobile-actions">
-            <MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" text="Add Folder"></MobileActionButton>
+            <MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" :text="$t('context_menu.add_folder')"></MobileActionButton>
-            <MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" text="Upload"></MobileActionButtonUpload>
+            <MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" :text="$t('context_menu.upload')"></MobileActionButtonUpload>
             <MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
-            <MobileActionButton  v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" text="Empty Trash"></MobileActionButton>
+            <MobileActionButton  v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" :text="$t('context_menu.empty_trash')"></MobileActionButton>
         </div>
         <UploadProgress />
     </div>
@@ -31,7 +31,7 @@
                 return this.preview_type === 'list' ? 'th' : 'th-list'
             },
             previewText() {
-                return this.preview_type === 'list' ? 'Grid' : 'List'
+                return this.preview_type === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
             }
         },
         methods: {
@@ -40,13 +40,14 @@
             },
             createFolder() {
                 if (this.$isMobile()) {
-                    let folderName = prompt('Please enter your new folder name')
+                    // Get folder name
+                    let folderName = prompt(this.$t('popup_create_folder.title'))
 
                     // Create folder
                     if (folderName) this.$createFolder(folderName)
                 } else {
                     // Create folder
-                    this.$createFolder('New Folder')
+                    this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
                 }
             },
         }

resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue

@@ -13,42 +13,42 @@
                             @click="addToFavourites"
                             v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
                         >
-                            {{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
+                            {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
                         </li>
 
                         <li class="menu-option"
                             @click="$store.dispatch('restoreItem', fileInfoDetail)"
                             v-if="fileInfoDetail && $isTrashLocation()"
                         >
-                            Restore
+                            {{ $t('context_menu.restore') }}
                         </li>
                         <li
                                 class="menu-option"
                                 @click="renameItem"
                                 v-if="fileInfoDetail"
                         >
-                            Rename
+                            {{ $t('context_menu.rename') }}
                         </li>
                         <li
                                 class="menu-option"
                                 @click="moveItem"
                                 v-if="fileInfoDetail"
                         >
-                            Move
+                            {{ $t('context_menu.move') }}
                         </li>
                         <li
                                 class="menu-option"
                                 @click="downloadItem"
                                 v-if="isFile || isImage"
                         >
-                            Download
+                            {{ $t('context_menu.download') }}
                         </li>
                         <li
                                 class="menu-option delete"
                                 @click="removeItem"
                                 v-if="fileInfoDetail"
                         >
-                            Delete
+                            {{ $t('context_menu.delete') }}
                         </li>
                     </ul>
                 </div>
@@ -121,7 +121,7 @@
             },
             renameItem() {
                 let itemName = prompt(
-                    'Change your item name',
+                    this.$t('popup_rename.title'),
                     this.fileInfoDetail.name
                 )
 

resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue

@@ -5,7 +5,7 @@
                 class="query"
                 type="text"
                 name="query"
-                placeholder="Search files…"
+                :placeholder="$t('inputs.placeholder_search_files')"
         />
         <div class="icon" v-if="!isQuery">
             <FontAwesomeIcon icon="search"></FontAwesomeIcon>

resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue

@@ -2,11 +2,7 @@
     <transition name="info-panel">
         <div v-if="uploadingFilesCount" class="upload-progress">
             <div class="progress-title">
-				<span
+				<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total}) }}</span>
-                >Uploading files {{ uploadingFilesCount.current }}/{{
-						uploadingFilesCount.total
-					}}</span
-                >
             </div>
             <ProgressBar :progress="uploadingFileProgress"/>
         </div>

resources/js/components/VueFileManagerComponents/Others/PopupMoveItem.vue

@@ -5,7 +5,7 @@
 
                 <!--Title-->
                 <div class="popup-header">
-                    <h1 class="title">Move Item</h1>
+                    <h1 class="title">{{ $t('popup_move_item.title') }}</h1>
                     <!--<p v-if="message" class="message">{{ message }}</p>-->
                 </div>
 
@@ -24,13 +24,13 @@
                             class="popup-button"
                             @click.native="closePopup"
                             button-style="secondary"
-                    >Cancel
+                    >{{ $t('popup_move_item.cancel') }}
                     </ButtonBase>
                     <ButtonBase
                             class="popup-button"
                             @click.native="moveItem"
                             :button-style="selectedFolder ? 'theme' : 'secondary'"
-                    >Move
+                    >{{ $t('popup_move_item.submit') }}
                     </ButtonBase>
                 </div>
             </div>

resources/js/components/VueFileManagerComponents/Others/TextLabel.vue

@@ -15,7 +15,7 @@
 
     .text-label {
         @include font-size(10);
-        color: $light_text;
+        color: $theme;
         text-transform: uppercase;
         font-weight: 900;
         display: block;

resources/js/components/VueFileManagerComponents/Others/ThumbnailItem.vue

@@ -24,7 +24,7 @@
             <span class="name">{{ file.name }}</span>
 
             <!--Other attributes-->
-            <span class="subtitle">Original Location: {{ currentFolder.name }}</span>
+            <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span>
         </div>
     </div>
 </template>
@@ -47,11 +47,6 @@
                 return this.file.type === 'image'
             }
         },
-        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            }
-        },
     }
 </script>
 

resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue

@@ -48,7 +48,7 @@
                     // Update user avatar
                     this.$updateImage('/user/profile', 'avatar', event.target.files[0])
                 } else {
-                    alert('You may have uploaded the wrong file, try again!')
+                    alert( this.$t('validation_errors.wrong_image') )
                 }
             }
         },

resources/js/components/VueFileManagerComponents/Sidebar.vue

@@ -9,11 +9,11 @@
 
                 <!--Locations-->
                 <div class="menu-list-wrapper">
-                    <TextLabel>Locations</TextLabel>
+                    <TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
                     <ul class="menu-list">
                         <li class="menu-list-item" @click="goHome">
                             <FontAwesomeIcon class="icon" icon="hdd"/>
-                            <span class="label">Home</span>
+                            <span class="label">{{ $t('locations.home') }}</span>
                         </li>
                         <!--<li class="menu-list-item">
                             <FontAwesomeIcon class="icon" icon="share"/>
@@ -21,7 +21,7 @@
                         </li>-->
                         <li class="menu-list-item" @click="getTrash">
                             <FontAwesomeIcon class="icon" icon="trash-alt"/>
-                            <span class="label">Trash</span>
+                            <span class="label">{{ $t('locations.trash') }}</span>
                         </li>
                     </ul>
                 </div>
@@ -33,10 +33,10 @@
                      @drop="dragFinish($event)"
                      :class="{ 'is-dragenter': area }"
                 >
-                    <TextLabel>Favourites</TextLabel>
+                    <TextLabel>{{ $t('sidebar.favourites') }}</TextLabel>
                     <transition-group tag="ul" class="menu-list" name="folder-item">
-                        <li class="empty-list" v-if="app.favourites.length == 0" :key="0">Drag here your favourite
+                        <li class="empty-list" v-if="app.favourites.length == 0" :key="0">
-                            folder.
+                            {{ $t('sidebar.favourites_empty') }}
                         </li>
 
                         <li @click.stop="openFolder(folder)" class="menu-list-item" v-for="folder in app.favourites"
@@ -52,9 +52,9 @@
 
                 <!--Last Uploads-->
                 <div class="menu-list-wrapper">
-                    <TextLabel>Last Uploads</TextLabel>
+                    <TextLabel>{{ $t('sidebar.latest') }}</TextLabel>
 
-                    <p class="empty-list" v-if="app.latest_uploads.length == 0">You don't have any latest uploads.</p>
+                    <p class="empty-list" v-if="app.latest_uploads.length == 0">{{ $t('sidebar.latest_empty') }}</p>
 
                     <FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)" :file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
                 </div>
@@ -64,7 +64,7 @@
             <StorageSize v-if="config.storageLimit"/>
 
             <div v-if="isSmallAppSize" class="log-out-button">
-                <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">Log Out</ButtonBase>
+                <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
             </div>
         </div>
     </transition>
@@ -176,8 +176,8 @@
 
     #sidebar {
         position: relative;
-        flex: 0 0 295px;
+        flex: 0 0 265px;
-        border-right: 1px solid $light_mode_border;
+        background: $light_background;
     }
 
     .content-scroller {
@@ -287,7 +287,7 @@
                         width: 20px;
 
                         path {
-                            fill: $text;
+                            fill: $theme;
                         }
                     }
 
@@ -377,8 +377,9 @@
     }
 
     @media (prefers-color-scheme: dark) {
+
         #sidebar {
-            border-color: $dark_mode_border_color;
+            background: $dark_mode_foreground;
         }
 
         .menu-list-wrapper {
@@ -400,26 +401,11 @@
                     background: rgba($theme, .1);
                 }
             }
-
-            &.favourites {
-                .menu-list .menu-list-item {
-
-                    .icon {
-
-                        path {
-                            fill: lighten($dark_mode_foreground, 10%);
-                        }
-                    }
-                }
-            }
-
-
         }
     }
 
     @media (prefers-color-scheme: dark) and (max-width: 690px) {
         #sidebar {
-            border-color: $dark_mode_background;
             background: $dark_mode_background;
         }
     }

resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue

@@ -26,7 +26,7 @@
             <!--Other attributes-->
             <span v-if="isFile || isImage" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>
 
-            <span v-if="isFolder" class="item-length">{{ file.items == 0 ? 'Empty' : (file.items + ' item') | pluralize(file.items) }}, {{ file.created_at }}</span >
+            <span v-if="isFolder" class="item-length">{{ file.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ file.created_at }}</span>
         </div>
     </div>
 </template>
@@ -47,11 +47,6 @@ export default {
             return this.file.type === 'image'
         }
     },
-    filters: {
-        pluralize(word, amount) {
-            return amount > 1 ? word + 's' : word
-        }
-    },
 }
 </script>
 

resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="storage-size" v-if="app">
         <div class="storage-info">
-            <span class="title">Storage</span>
+            <span class="title">{{ $t('storage.title') }}</span>
-            <span class="size">{{ app.storage.used }} of {{ app.storage.capacity }} Used</span>
+            <span class="size">{{ $t('storage.used', {used: app.storage.used, capacity: app.storage.capacity}) }}</span>
         </div>
         <ProgressBar :progress="app.storage.percentage" :class="{'is-exceeded': app.storage.percentage > 100}"/>
     </div>

resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue

@@ -12,8 +12,8 @@
         <transition name="user-menu">
             <div class="user-menu" v-if="isOpenedMenu">
                 <ul class="menu-options" id="menu-options-list" @click="closeMenu">
-                    <li class="menu-option" @click="$goToView('user-settings')">Profile Settings</li>
+                    <li class="menu-option" @click="$goToView('user-settings')">{{ $t('context_menu.profile_settings') }}</li>
-                    <li class="menu-option" @click="$store.dispatch('logOut')">Log Out</li>
+                    <li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
                 </ul>
             </div>
         </transition>
@@ -70,12 +70,14 @@
         left: 0;
         right: 0;
         margin: 15px;
+        padding: 5px;
         user-select: none;
         border-radius: 8px;
         display: flex;
         align-items: center;
         cursor: pointer;
         @include transition(150ms);
+        background: darken($light_background, 3%);
 
         &:active {
             transform: scale(0.95);
@@ -138,7 +140,7 @@
         border-radius: 8px;
 
         .menu-option {
-            font-weight: 600;
+            font-weight: 700;
             @include font-size(15);
             padding: 15px 30px;
             cursor: pointer;
@@ -157,17 +159,15 @@
         .user-headline {
             position: relative;
             margin-bottom: 40px;
+            background: transparent;
+            padding: 0;
         }
     }
 
     @media (prefers-color-scheme: dark) {
 
-        #sidebar {
-            background: $dark_mode_background;
-        }
-
         .user-headline {
-            background: transparent;
+            background: $dark_mode_background;
 
             &:hover {
                 background: transparent;

resources/js/components/VueFileManagerComponents/UserSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="user-settings">
 
-        <PageHeader title="User Profile" />
+        <PageHeader :title="$t('profile.page_title')" />
 
         <div class="content-page">
             <div class="avatar-upload">
@@ -10,27 +10,27 @@
                         :avatar="app.user.avatar"
                 />
                 <div class="info">
-                    <span class="description">Change Your Profile Picture</span>
+                    <span class="description">{{ $t('profile.photo_description') }}</span>
-                    <span class="supported">Supported formats are .png, .jpg, .jpeg.</span>
+                    <span class="supported">{{ $t('profile.photo_supported') }}</span>
                 </div>
             </div>
 
             <ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
 
-                <ThemeLabel>Profile Information</ThemeLabel>
+                <ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
                 <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_registration.label_email') }}</label>
                     <div class="input-wrapper">
-                        <input :value="app.user.email" placeholder="Type your E-mail" type="email" disabled/>
+                        <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
                     </div>
                 </div>
 
                 <div class="block-wrapper">
-                    <label>Full Name:</label>
+                    <label>{{ $t('page_registration.label_name') }}</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
                                         v-slot="{ errors }">
                         <input @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
-                               placeholder="Type your full name" type="text"
+                               :placeholder="$t('page_registration.placeholder_name')" type="text"
                                :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
@@ -40,23 +40,23 @@
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
 
-                <ThemeLabel>Change Password</ThemeLabel>
+                <ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>
 
                 <div class="block-wrapper">
-                    <label>Your Password:</label>
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="newPassword" placeholder="New Password" type="password"
+                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_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>Repeat Your Password:</label>
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="newPasswordConfirmation" placeholder="Confirm your new password" type="password"
+                        <input v-model="newPasswordConfirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
                                :class="{'is-error': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
@@ -64,7 +64,7 @@
 
                 <div class="block-wrapper">
                     <ButtonBase type="submit" button-style="theme" class="confirm-form">
-                        Store New Password
+                        {{ $t('profile.store_pass') }}
                     </ButtonBase>
                 </div>
             </ValidationObserver>
@@ -138,8 +138,8 @@
 
                         // Show error message
                         events.$emit('success:open', {
-                            title: 'Your password was changed!',
+                            title: this.$t('popup_pass_changed.title'),
-                            message: 'So now, you have awesome new password.',
+                            message: this.$t('popup_pass_changed.message'),
                         })
                     })
                     .catch(error => {

resources/js/helpers.js

@@ -19,9 +19,8 @@ const Helpers = {
 			axios.put(this.$store.getters.api + route, {name, value})
 				.catch(error => {
 					events.$emit('alert:open', {
-						title: 'Whooops, something went wrong :(',
+						title: this.$t('popup_error.title'),
-						message:
+						message: this.$t('popup_error.message'),
-							"Something went wrong and we can't continue. Please contact us."
 					})
 				})
 		}, 300)
@@ -42,9 +41,8 @@ const Helpers = {
 			})
 				.catch(error => {
 					events.$emit('alert:open', {
-						title: 'Whooops, something went wrong :(',
+						title: this.$t('popup_error.title'),
-						message:
+						message: this.$t('popup_error.message'),
-							"Something went wrong and we can't continue. Please contact us."
 					})
 				})
 		}
@@ -66,9 +64,8 @@ const Helpers = {
 			if (this.$store.getters.app.storage.percentage >= 100) {
 				events.$emit('alert:open', {
 					emoji: '😬😬😬',
-					title: 'Whooops, you exceed your storage limit :(',
+					title: this.$t('popup_exceed_limit.title'),
-					message:
+					message: this.$t('popup_exceed_limit.message')
-						"Please contact your administrator to change your limit."
 				})
 
 				return
@@ -117,18 +114,16 @@ const Helpers = {
 
 						events.$emit('alert:open', {
 							emoji: '😬😬😬',
-							title: 'Whooops, you exceed your storage limit :(',
+							title: this.$t('popup_exceed_limit.title'),
-							message:
+							message: this.$t('popup_exceed_limit.message')
-								"Please contact your administrator to change your limit."
 						})
 
 					} else {
 
 						// Show error message
 						events.$emit('alert:open', {
-							title: 'Whooops, something went wrong :(',
+							title: this.$t('popup_error.title'),
-							message:
+							message: this.$t('popup_error.message'),
-								"Something went wrong and we can't continue. Please contact us."
 						})
 					}
 				})
@@ -189,9 +184,8 @@ const Helpers = {
 		Vue.prototype.$isSomethingWrong = function() {
 
 			events.$emit('alert:open', {
-				title: 'Whooops, something went wrong :(',
+				title: this.$t('popup_error.title'),
-				message:
+				message: this.$t('popup_error.message'),
-					"Something went wrong and we can't continue. Please contact us."
 			})
 		}
 	}

resources/js/i18n/index.js

@@ -0,0 +1,7 @@
+// index.js
+import en from './lang/en.json'
+import sk from './lang/sk.json'
+
+export const languages = {
+    en, sk
+}

resources/js/i18n/lang/en.json

@@ -0,0 +1,165 @@
+{
+    "routes": {
+        "create_new_password": "create-new-password"
+    },
+    "profile": {
+        "page_title": "User Profile",
+        "store_pass": "Store New Password",
+        "change_pass": "Change Password",
+        "profile_info": "Profile Information",
+        "photo_description": "Change Your Profile Picture",
+        "photo_supported": "Supported formats are .png, .jpg, .jpeg."
+    },
+    "page_registration": {
+        "title": "Create New Account",
+        "subtitle": "Please fill registration to create account:",
+        "label_email": "Email:",
+        "placeholder_email": "Type your E-mail",
+        "label_name": "Full Name:",
+        "placeholder_name": "Type your full name",
+        "label_pass": "Create password:",
+        "placeholder_pass": "Your new password",
+        "label_confirm_pass": "Confirm password:",
+        "placeholder_confirm_pass": "Confirm your new password",
+        "button_create_account": "Create Account",
+        "have_an_account": "Do you have an account?"
+    },
+    "page_create_password": {
+        "title": "Only One Step to Log In",
+        "subtitle": "Create your new password here:",
+        "button_update": "Update Password",
+        "label_email": "Email:",
+        "label_new_pass": "Your new password",
+        "label_confirm_pass": "Confirm new password"
+    },
+    "page_forgotten_password": {
+        "title": "Forgotten Password?",
+        "subtitle": "Get reset link with your email:",
+        "button_get_link": "Get Link",
+        "password_remember_text": "Remember your password?",
+        "password_remember_button": "Log In.",
+        "pass_sennded_title": "Thank you!",
+        "pass_sennded_subtitle": "We have e-mailed your password reset link!",
+        "pass_reseted_title": "Awesome!",
+        "pass_reseted_subtitle": "Your password was reset successfully.",
+        "pass_reseted_signin": "Sign In"
+    },
+    "page_sign_in": {
+        "title": "Are You {name}?",
+        "subtitle": "Confirm you by your password:",
+        "placeholder_password": "Type your password",
+        "button_log_in": "Log In",
+        "password_reset_text": "Forgotten your password?",
+        "password_reset_button": "Reset Password."
+    },
+    "page_login": {
+        "title": "Welcome Back!",
+        "subtitle": "Please type your email to log in:",
+        "placeholder_email": "Type your E-mail",
+        "button_next": "Next Step",
+        "registration_text": "Don’t have an account?",
+        "registration_button": "Register account."
+    },
+    "uploading": {
+        "progress": "Uploading files {current}/{total}"
+    },
+    "inputs": {
+        "placeholder_search_files": "Search files…"
+    },
+    "messages": {
+        "nothing_to_preview": "There is nothing to preview.",
+        "nothing_was_found": "Nothing was found"
+    },
+    "locations": {
+        "home": "Home",
+        "trash": "Trash"
+    },
+    "file_detail": {
+        "created_at": "Created at",
+        "where": "Where",
+        "size": "Size"
+    },
+    "empty_page": {
+        "description": "Upload some files here easily via upload button",
+        "call_to_action": "Upload File",
+        "title": "There is Nothing"
+    },
+    "alerts": {
+        "error_confirm": "That’s horrible!",
+        "success_confirm": "Awesome!"
+    },
+    "validation_errors": {
+        "wrong_image": "You may have uploaded the wrong file, try again!",
+        "incorrect_password": "Sorry, you passed incorrect password :("
+    },
+    "pronouns": {
+        "of": "of"
+    },
+    "storage": {
+        "used": "{used} of {capacity} Used",
+        "title": "Storage"
+    },
+    "folder": {
+        "item_counts": "{count} Item | {count} Items",
+        "empty": "Empty"
+    },
+    "item_thumbnail": {
+        "original_location": "Original Location",
+        "deleted_at": "Deleted {time}"
+    },
+    "preview_type": {
+        "list": "List",
+        "grid": "Grid"
+    },
+    "context_menu": {
+        "remove_from_favourites": "Remove Favourite",
+        "add_to_favourites": "Add to Favourites",
+        "profile_settings": "Profile Settings",
+        "create_folder": "Create Folder",
+        "empty_trash": "Empty Trash",
+        "add_folder": "Add Folder",
+        "download": "Download",
+        "log_out": "Log Out",
+        "restore": "Restore",
+        "upload": "Upload",
+        "detail": "Detail",
+        "rename": "Rename",
+        "delete": "Delete",
+        "move": "Move"
+    },
+    "sidebar": {
+        "locations": "Locations",
+        "favourites": "Favourites",
+        "favourites_empty": "Drag here your favourite folder.",
+        "latest": "Last Uploads",
+        "latest_empty": "You don't have any latest uploads."
+    },
+    "popup_rename": {
+        "title": "Change your item name"
+    },
+    "popup_create_folder": {
+        "title": "Please enter your new folder name",
+        "folder_default_name": "New Folder"
+    },
+    "popup_move_item": {
+        "submit": "Move Item",
+        "title": "Move Item",
+        "cancel": "Cancel"
+    },
+    "popup_pass_changed": {
+        "title": "Your password was changed!",
+        "message": "So now, you have awesome new password."
+    },
+    "popup_trashed": {
+        "title": "Your trash was erased!",
+        "message": "So now, you have clear and empty trash."
+    },
+    "popup_error": {
+        "title": "Whooops, something went wrong!",
+        "message": "Something went wrong and we can't continue. Please contact us."
+    },
+    "popup_exceed_limit": {
+        "title": "Whooops, you exceed your storage limit :(",
+        "message": "Please contact your administrator to change your limit."
+    }
+}

resources/js/i18n/lang/sk.json

@@ -0,0 +1,165 @@
+{
+    "routes": {
+        "create_new_password": "vytvorit-nove-heslo"
+    },
+    "profile": {
+        "page_title": "Uživateľský profil",
+        "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."
+    },
+    "page_registration": {
+        "title": "Vytvorenie nového účtu",
+        "subtitle": "Prosím, vyplňte formulár pre vytvorenie nového účtu:",
+        "label_email": "Email:",
+        "placeholder_email": "Napíš svoj E-mail",
+        "label_name": "Celé meno:",
+        "placeholder_name": "Napíš svoje celé meno",
+        "label_pass": "Vytvorte heslo:",
+        "placeholder_pass": "Vaše nové heslo",
+        "label_confirm_pass": "Potvrďte heslo:",
+        "placeholder_confirm_pass": "Potvrďte nové heslo",
+        "button_create_account": "Vytvoriť účet",
+        "have_an_account": "Máš už účet?"
+    },
+    "page_create_password": {
+        "title": "Iba jeden krok pre prihlásenie",
+        "subtitle": "Vytvorte si nové heslo tu:",
+        "button_update": "Aktualizovať heslo",
+        "label_email": "Email:",
+        "label_new_pass": "Vaše nové heslo",
+        "label_confirm_pass": "Potvrďte nové heslo"
+    },
+    "page_forgotten_password": {
+        "title": "Zabudnuté heslo?",
+        "subtitle": "Získajte resetovací link pre Váš účet:",
+        "button_get_link": "Získať link",
+        "password_remember_text": "Pamätáte si heslo?",
+        "password_remember_button": "Prihlásiť sa.",
+        "pass_sennded_title": "Ďakujeme!",
+        "pass_sennded_subtitle": "Práve sme Vám odoslali link na Váš email!",
+        "pass_reseted_title": "Skvelé!",
+        "pass_reseted_subtitle": "Tvoje heslo bolo obnovené úspešne.",
+        "pass_reseted_signin": "Prihlásiť sa"
+    },
+    "page_sign_in": {
+        "title": "Voláte sa {name}?",
+        "subtitle": "Potvrďte zadaním hesla:",
+        "placeholder_password": "Napíšte svoje heslo",
+        "button_log_in": "Prihlásiť sa",
+        "password_reset_text": "Zabudli ste heslo?",
+        "password_reset_button": "Resetovať heslo."
+    },
+    "page_login": {
+        "title": "Vitaj späť!",
+        "subtitle": "Prosím, vložte svoj email pre prihlásenie:",
+        "placeholder_email": "Napíšte svoj E-mail",
+        "button_next": "Ďalší krok",
+        "registration_text": "Ešte nemáte účet?",
+        "registration_button": "Vytvoriť účet."
+    },
+    "uploading": {
+        "progress": "Nahrávam súbory {current}/{total}"
+    },
+    "inputs": {
+        "placeholder_search_files": "Hľadajte súbory…"
+    },
+    "messages": {
+        "nothing_to_preview": "Tu nie je nič pre zobrazenie.",
+        "nothing_was_found": "Nič sa nenašlo"
+    },
+    "locations": {
+        "home": "Domov",
+        "trash": "Kôš"
+    },
+    "file_detail": {
+        "created_at": "Vytvorené",
+        "where": "Umiestnenie",
+        "size": "Veľkosť"
+    },
+    "empty_page": {
+        "description": "Nahrajte súbory jednoducho cez tlačidlo nahrať",
+        "call_to_action": "Nahrať súbory",
+        "title": "Tu nie je nič"
+    },
+    "alerts": {
+        "error_confirm": "To je hrozné!",
+        "success_confirm": "Skvelé!"
+    },
+    "validation_errors": {
+        "wrong_image": "Zrejme ste vložili zlý obrázok, skúste to znova!",
+        "incorrect_password": "Prepáč, vložili ste nesprávne heslo :("
+    },
+    "pronouns": {
+        "of": "z"
+    },
+    "storage": {
+        "used": "{used} z {capacity} Použité",
+        "title": "Úložisko"
+    },
+    "folder": {
+        "item_counts": "{count} Položka | {count} Položky",
+        "empty": "Prázdne"
+    },
+    "item_thumbnail": {
+        "original_location": "Pôvodné umiestnenie",
+        "deleted_at": "Vymazané {time}"
+    },
+    "preview_type": {
+        "list": "List",
+        "grid": "Mriežka"
+    },
+    "context_menu": {
+        "remove_from_favourites": "Vymazať obľúbené",
+        "add_to_favourites": "Pridať do obľúbených",
+        "profile_settings": "Nastavenia profilu",
+        "create_folder": "Vytvoriť priečinok",
+        "empty_trash": "Vyprázdniť kôš",
+        "add_folder": "Nový priečinok",
+        "download": "Stiahnúť",
+        "log_out": "Odhlásiť sa",
+        "restore": "Obnoviť",
+        "upload": "Nahrať",
+        "detail": "Detail",
+        "rename": "Premenovať",
+        "delete": "Vymazať",
+        "move": "Presunúť"
+    },
+    "sidebar": {
+        "locations": "Umiestnenie",
+        "favourites": "Obľúbené",
+        "favourites_empty": "Presuňte sem svoj obľúbený priečinok.",
+        "latest": "Posledne nahrané",
+        "latest_empty": "Nemáte žiadne nahrané súbory"
+    },
+    "popup_rename": {
+        "title": "Zmeňte názov položky"
+    },
+    "popup_create_folder": {
+        "title": "Prosím, vložte názov nového priečinka",
+        "folder_default_name": "Nový priečinok"
+    },
+    "popup_move_item": {
+        "submit": "Presunúť položku",
+        "title": "Presuňte položku",
+        "cancel": "Zrušiť"
+    },
+    "popup_pass_changed": {
+        "title": "Tvoje heslo bolo zmenené!",
+        "message": "Od teraz máte nové heslo."
+    },
+    "popup_trashed": {
+        "title": "Váš kôš bol vymazaný!",
+        "message": "Od teraz máte prázdny a čistý kôš"
+    },
+    "popup_error": {
+        "title": "Ups, niekde nastala chyba!",
+        "message": "Niečo sa stalo a nemôžme pokračovať. Prosím kontaktuj nás."
+    },
+    "popup_exceed_limit": {
+        "title": "Ups, presiahli ste limit úložiska",
+        "message": "Prosím, kontaktujte administrátora pre navyšenie limitu."
+    }
+}

resources/js/main.js

@@ -1,11 +1,12 @@
 require('./bootstrap');
 import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import { languages } from './i18n/index.js'
 import App from './App.vue'
 import store from './store/index'
 import Helpers from './helpers'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import axios from 'axios'
 import {
 	faSyncAlt,
 	faShare,
@@ -29,6 +30,7 @@ import {
 	faTrashAlt,
 	faHdd,
 	faEllipsisH,
+	faPencilAlt,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -54,14 +56,24 @@ library.add(
 	faTimes,
 	faSort,
 	faEllipsisH,
+	faPencilAlt,
 )
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 
 Vue.use(Helpers)
+Vue.use(VueI18n)
 
 Vue.config.productionTip = false
 
+const messages = Object.assign(languages)
+
+const i18n = new VueI18n({
+	locale: config.locale,
+	messages
+})
+
 var vueFileManager = new Vue({
+	i18n,
 	store,
 	data: {
 		config,

resources/js/store/modules/app.js

@@ -1,6 +1,3 @@
-import axios from 'axios'
-import { events } from '@/bus'
-
 const defaultState = {
 	currentView: 'files',
 	appSize: undefined,

resources/js/store/modules/filesView.js

@@ -62,9 +62,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -100,9 +99,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -112,7 +110,7 @@ const actions = {
 
         axios
             .delete(context.getters.api + '/empty-trash')
-            .then(response => {
+            .then(() => {
                 context.commit('LOADING_STATE', false)
                 events.$emit('scrollTop')
 
@@ -121,16 +119,15 @@ const actions = {
 
                 // Show error message
                 events.$emit('success:open', {
-                    title: 'Your trash was erased!',
+                    title: this.$t('popup_trashed.title'),
-                    message: 'So now, you have clear and empty trash.',
+                    message: this.$t('popup_trashed.message'),
                 })
             })
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -150,9 +147,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -169,9 +165,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -197,9 +192,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -225,9 +219,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -281,9 +274,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -303,9 +295,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -346,9 +337,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -370,9 +360,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     }

resources/js/store/modules/userAuth.js

@@ -41,9 +41,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -57,9 +56,8 @@ const actions = {
             .catch(() => {
                 // Show error message
                 events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
+                    title: this.$t('popup_error.title'),
-                    message:
+                    message: this.$t('popup_error.message'),
-                        "Something went wrong and we can't continue. Please contact us."
                 })
             })
     },
@@ -77,9 +75,8 @@ const actions = {
 
                     // Show error message
                     events.$emit('alert:open', {
-                        title: 'Whooops, something went wrong :(',
+                        title: this.$t('popup_error.title'),
-                        message:
+                        message: this.$t('popup_error.message'),
-                            "Something went wrong and we can't continue. Please contact us."
                     })
                 })
         })

resources/lang/en/vuefilemanager.php

@@ -0,0 +1,7 @@
+<?php
+
+    return [
+        'user_not_fount' => 'We can\'t find a user with that e-mail address.',
+        'home'           => 'Home',
+        'time'           => '%d. %B. %Y at %H:%M',
+    ];

resources/lang/sk/auth.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed'   => 'Prihlasovacie údaje nie sú správne.',
+    'throttle' => 'Prekročený limit pokusov. Skúste znovu o :seconds sekúnd.',
+
+];

resources/lang/sk/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Predchádzajúca',
+    'next'     => 'Nasledujúca &raquo;',
+
+];

resources/lang/sk/passwords.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reminder Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset'     => 'Heslo bolo zmenené!',
+    'sent'      => 'Pripomienka k zmene hesla bola odoslaná!',
+    'throttled' => 'Pred ďalším pokusom chvíľu počkajte.',
+    'token'     => 'Klúč pre obnovu hesla je neplatný.',
+    'user'      => 'Nepodarilo sa nájsť používateľa s touto e-mailovou adresou.',
+];

resources/lang/sk/validation.php

@@ -0,0 +1,150 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages.
+    |
+    */
+
+    'accepted'        => ':Attribute musí byť akceptovaný.',
+    'active_url'      => ':Attribute má neplatnú URL adresu.',
+    'after'           => ':Attribute musí byť dátum po :date.',
+    'after_or_equal'  => ':Attribute musí byť dátum po alebo presne :date.',
+    'alpha'           => ':Attribute môže obsahovať len písmená.',
+    'alpha_dash'      => ':Attribute môže obsahovať len písmená, čísla a pomlčky.',
+    'alpha_num'       => ':Attribute môže obsahovať len písmená, čísla.',
+    'array'           => ':Attribute musí byť pole.',
+    'before'          => ':Attribute musí byť dátum pred :date.',
+    'before_or_equal' => ':Attribute musí byť dátum pred alebo presne :date.',
+    'between'         => [
+        'numeric' => ':Attribute musí mať rozsah :min - :max.',
+        'file'    => ':Attribute musí mať rozsah :min - :max kilobajtov.',
+        'string'  => ':Attribute musí mať rozsah :min - :max znakov.',
+        'array'   => ':Attribute musí mať rozsah :min - :max prvkov.',
+    ],
+    'boolean'        => ':Attribute musí byť pravda alebo nepravda.',
+    'confirmed'      => ':Attribute konfirmácia sa nezhoduje.',
+    'date'           => ':Attribute má neplatný dátum.',
+    'date_equals'    => ':Attribute musí byť dátum rovnajúci sa :date.',
+    'date_format'    => ':Attribute sa nezhoduje s formátom :format.',
+    'different'      => ':Attribute a :other musia byť odlišné.',
+    'digits'         => ':Attribute musí mať :digits číslic.',
+    'digits_between' => ':Attribute musí mať rozsah :min až :max číslic.',
+    'dimensions'     => ':Attribute má neplatné rozmery obrázku.',
+    'distinct'       => ':Attribute je duplicitný.',
+    'email'          => ':Attribute má neplatný formát.',
+    'ends_with'      => ':attribute musí obsahovať jednú z týchto hodnôt: :values.',
+    'exists'         => 'označený :attribute je neplatný.',
+    'file'           => ':Attribute musí byť súbor.',
+    'filled'         => ':Attribute je požadované.',
+    'gt'             => [
+        'numeric' => 'Hodnota :attribute musí byť väčšia ako :value.',
+        'file'    => ':Attribute musí mať viac kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať viac znakov ako :value.',
+        'array'   => ':Attribute musí mať viac prvkov ako :value.',
+    ],
+    'gte' => [
+        'numeric' => 'Hodnota :attribute musí byť väčšia alebo rovná ako :value.',
+        'file'    => ':Attribute musí mať rovnaký alebo väčší počet kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať rovnaký alebo väčší počet znakov ako :value.',
+        'array'   => ':Attribute musí mať rovnaký alebo väčší počet prvkov ako :value.',
+    ],
+    'image'    => ':Attribute musí byť obrázok.',
+    'in'       => 'označený :attribute je neplatný.',
+    'in_array' => ':Attribute sa nenachádza v :other.',
+    'integer'  => ':Attribute musí byť celé číslo.',
+    'ip'       => ':Attribute musí byť platná IP adresa.',
+    'ipv4'     => ':Attribute musí byť platná IPv4 adresa.',
+    'ipv6'     => ':Attribute musí byť platná IPv6 adresa.',
+    'json'     => ':Attribute musí byť platný JSON reťazec.',
+    'lt'       => [
+        'numeric' => 'Hodnota :attribute musí byť menšia ako :value.',
+        'file'    => ':Attribute musí mať menej kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať menej znakov ako :value.',
+        'array'   => ':Attribute musí mať menej prvkov ako :value.',
+    ],
+    'lte' => [
+        'numeric' => 'Hodnota :attribute musí byť menšia alebo rovná ako :value.',
+        'file'    => ':Attribute musí mať rovnaký alebo menší počet kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať rovnaký alebo menší počet znakov ako :value.',
+        'array'   => ':Attribute musí mať rovnaký alebo menší počet prvkov ako :value.',
+    ],
+    'max' => [
+        'numeric' => ':Attribute nemôže byť väčší ako :max.',
+        'file'    => ':Attribute nemôže byť väčší ako :max kilobajtov.',
+        'string'  => ':Attribute nemôže byť väčší ako :max znakov.',
+        'array'   => ':Attribute nemôže mať viac ako :max prvkov.',
+    ],
+    'mimes'     => ':Attribute musí byť súbor s koncovkou: :values.',
+    'mimetypes' => ':Attribute musí byť súbor s koncovkou: :values.',
+    'min'       => [
+        'numeric' => ':Attribute musí mať aspoň :min.',
+        'file'    => ':Attribute musí mať aspoň :min kilobajtov.',
+        'string'  => ':Attribute musí mať aspoň :min znakov.',
+        'array'   => ':Attribute musí mať aspoň :min prvkov.',
+    ],
+    'not_in'               => 'označený :attribute je neplatný.',
+    'not_regex'            => ':Attribute má neplatný formát.',
+    'numeric'              => ':Attribute musí byť číslo.',
+    'password'             => 'Heslo nie je správne',
+    'present'              => ':Attribute musí byť odoslaný.',
+    'regex'                => ':Attribute má neplatný formát.',
+    'required'             => ':Attribute je požadované.',
+    'required_if'          => ':Attribute je požadované keď :other je :value.',
+    'required_unless'      => ':Attribute je požadované, okrem prípadu keď :other je v :values.',
+    'required_with'        => ':Attribute je požadované keď :values je prítomné.',
+    'required_with_all'    => ':Attribute je požadované ak :values je nastavené.',
+    'required_without'     => ':Attribute je požadované keď :values nie je prítomné.',
+    'required_without_all' => ':Attribute je požadované ak žiadne z :values nie je nastavené.',
+    'same'                 => ':Attribute a :other sa musia zhodovať.',
+    'size'                 => [
+        'numeric' => ':Attribute musí byť :size.',
+        'file'    => ':Attribute musí mať :size kilobajtov.',
+        'string'  => ':Attribute musí mať :size znakov.',
+        'array'   => ':Attribute musí obsahovať :size prvkov.',
+    ],
+    'starts_with' => ':Attribute musí začínať niektorou z hodnôt: :values',
+    'string'      => ':Attribute musí byť reťazec znakov.',
+    'timezone'    => ':Attribute musí byť platné časové pásmo.',
+    'unique'      => ':Attribute už existuje.',
+    'uploaded'    => 'Nepodarilo sa nahrať :attribute.',
+    'url'         => ':Attribute musí mať formát URL.',
+    'uuid'        => ':Attribute musí byť platné UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap attribute place-holders
+    | with something more reader friendly such as E-Mail Address instead
+    | of "email". This simply helps us make messages a little cleaner.
+    |
+    */
+
+    'attributes' => [
+    ],
+];

resources/lang/sk/vuefilemanager.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+    'user_not_fount' => 'Uživateľ s touto emailovou adresou sa nenašiel.',
+    'home'           => 'Domov',
+    'time'           => '%d. %B. %Y o %H:%M',
+];

resources/sass/app.scss

@@ -1,5 +1,5 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
 
 // Variables
 @import 'vue-file-manager/_variables';

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

@@ -15,7 +15,7 @@ $light_mode_vignette: rgba(255, 255, 255, 0.80);
 // Dark Mode
 $dark_mode_vignette: rgba(0, 0, 0, 0.3);
 $dark_mode_background: #1a1f25;
-$dark_mode_foreground: #202733;
+$dark_mode_foreground: #1c222d;
 $dark_mode_text_primary: #B8C4D0;
 $dark_mode_text_secondary: #667b90;
 $dark_mode_vignette: rgba(22, 23, 27, 0.70);

resources/views/index.blade.php

@@ -23,6 +23,7 @@
 
     <script>
         let config = {
+            locale: '{{ \Illuminate\Support\Facades\App::getLocale() }}',
             app_name: '{{ config('vuefilemanager.app_name') }}',
             app_logo: '{{ asset(config('vuefilemanager.app_logo')) }}',
             api: '{{ url('/api') }}',