Add translations to vue files

Author: DaneEveritt

BUILDING.md

@@ -0,0 +1,10 @@
+# Building Assets
+
+```
+yarn install
+
+php artisan vue-i18n:generate
+php artisan ziggy:generate resources/assets/pterodactyl/scripts/helpers/ziggy.js
+
+npm run build
+```

composer.json

@@ -48,6 +48,7 @@
         "filp/whoops": "^2.1",
         "friendsofphp/php-cs-fixer": "^2.8.0",
         "fzaninotto/faker": "^1.6",
+        "martinlindhe/laravel-vue-i18n-generator": "^0.1.28",
         "mockery/mockery": "^1.0",
         "php-mock/php-mock-phpunit": "^2.0",
         "phpunit/phpunit": "~6.4.0",

composer.lock

@@ -0,0 +1,50 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Laravel translations path
+    |--------------------------------------------------------------------------
+    |
+    | The default path where the translations are stored by Laravel.
+    | Note: the path will be prepended to point to the App directory.
+    |
+    */
+
+    'langPath' => '/resources/lang',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Laravel translation files
+    |--------------------------------------------------------------------------
+    |
+    | You can choose which translation files to be generated.
+    | Note: leave this empty for all the translation files to be generated.
+    |
+    */
+
+    'langFiles' => [],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Output file
+    |--------------------------------------------------------------------------
+    |
+    | The javascript path where I will place the generated file.
+    | Note: the path will be prepended to point to the App directory.
+    |
+    */
+    'jsPath' => '/resources/i18n/lang',
+    'jsFile' => '/resources/i18n/locales.js',
+
+    /*
+    |--------------------------------------------------------------------------
+    | i18n library
+    |--------------------------------------------------------------------------
+    |
+    | Specify the library you use for localization.
+    | Options are vue-i18n or vuex-i18n.
+    |
+    */
+    'i18nLib' => 'vuex-i18n',
+];

config/vue-i18n-generator.php

@@ -64,7 +64,7 @@ function scripts() {
  * Provides watchers.
  */
 function watch() {
-    gulp.watch(paths.styles.src, gulp.series(function cleanStyles() {
+    gulp.watch(['./resources/assets/pterodactyl/styles/**/*.css'], gulp.series(function cleanStyles() {
         return del(['./public/assets/css/**/*.css']);
     }, styles));
 

gulpfile.js

@@ -37,6 +37,8 @@
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.16",
         "vueify-insert-css": "^1.0.0",
+        "vuex": "^3.0.1",
+        "vuex-i18n": "^1.10.5",
         "webpack": "^4.4.1",
         "webpack-stream": "^4.0.3",
         "yargs": "^11.0.0"

package.json

@@ -1,26 +1,21 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
+import vuexI18n from 'vuex-i18n';
 import VueRouter from 'vue-router';
+
+// Helpers
 import { Ziggy } from './helpers/ziggy';
+import Locales from './../../../../resources/i18n/locales';
 
 // Base Vuejs Templates
 import Login from './components/auth/Login';
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
+// Used for the route() helper.
 window.Ziggy = Ziggy;
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
+Vue.use(Vuex);
 
+const store = new Vuex.Store();
 const route = require('./../../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.config.productionTip = false;
@@ -31,6 +26,10 @@ Vue.mixin({
 });
 
 Vue.use(VueRouter);
+Vue.use(vuexI18n.plugin, store);
+
+Vue.i18n.add('en', Locales.en);
+Vue.i18n.set('en');
 
 const router = new VueRouter({
     routes: [
@@ -41,6 +40,9 @@ const router = new VueRouter({
     ]
 });
 
+require('./bootstrap');
+
 const app = new Vue({
+    store,
     router,
 }).$mount('#pterodactyl');

resources/assets/pterodactyl/scripts/app.js

@@ -3,23 +3,22 @@
         <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post">
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
-                    <input class="input" id="grid-email" type="text" aria-labelledby="grid-email" required
+                    <input class="input" id="grid-email" type="email" aria-labelledby="grid-email" required
                            v-bind:value="email"
                            v-on:input="updateEmail($event)"
                     />
-                    <label for="grid-email">Email</label>
-                    <p class="text-grey-darker text-xs">Enter your account email address to recive instructions on resetting your password.</p>
+                    <label for="grid-email">{{ $t('strings.email') }}</label>
+                    <p class="text-grey-darker text-xs">{{ $t('auth.reset_help_text') }}</p>
                 </div>
             </div>
             <div>
-                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm"
-                        type="submit">
-                    Recover Account
+                <button class="btn btn-blue btn-jumbo" type="submit">
+                    {{ $t('auth.recover_account') }}
                 </button>
             </div>
             <div class="pt-6 text-center">
                 <router-link to="/" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
-                    Go to Login
+                    {{ $t('auth.go_to_login') }}
                 </router-link>
             </div>
         </form>

resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue

@@ -7,23 +7,23 @@
                            v-bind:value="email"
                            v-on:input="updateEmail($event)"
                     />
-                    <label for="grid-username">Username or Email</label>
+                    <label for="grid-username">{{ $t('strings.user_identifier') }}</label>
                 </div>
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="input-open">
                     <input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password" required>
-                    <label for="grid-password">Password</label>
+                    <label for="grid-password">{{ $t('strings.password') }}</label>
                 </div>
             </div>
             <div>
-                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm" type="submit">
-                    Sign In
+                <button class="btn btn-blue btn-jumbo" type="submit">
+                    {{ $t('auth.sign_in') }}
                 </button>
             </div>
             <div class="pt-6 text-center">
                 <router-link to="/forgot-password" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
-                    Forgot Password?
+                    {{ $t('auth.forgot_password') }}
                 </router-link>
             </div>
         </form>

resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue

@@ -0,0 +1,21 @@
+.btn {
+  @apply .rounded;
+
+  /**
+   * Button Colors
+   */
+  &.btn-blue {
+    @apply .bg-blue .border-blue-dark .border .text-white;
+
+    &:hover {
+      @apply .bg-blue-dark .border-blue-darker;
+    }
+  }
+
+  /**
+   * Button Sizes
+   */
+  &.btn-jumbo {
+    @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
+  }
+}