Add translations to vue files

resources/assets/pterodactyl/scripts/app.js

@@ -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/components/auth/ForgotPassword.vue

@@ -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/LoginForm.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/styles/components/buttons.css

@@ -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;
+  }
+}

resources/assets/pterodactyl/styles/main.css

@@ -9,6 +9,7 @@
  */
 @import "components/animations.css";
 @import "components/authentication.css";
+@import "components/buttons.css";
 
 /**
  * Tailwind Utilities

resources/lang/en/auth.php

@@ -6,8 +6,10 @@ return [
     'authentication_required' => 'Authentication is required to continue.',
     'remember_me' => 'Remember Me',
     'sign_in' => 'Sign In',
-    'forgot_password' => 'I\'ve forgotten my password!',
-    'request_reset_text' => 'Forgotten your account password? It is not the end of the world, just provide your email below.',
+    'forgot_password' => 'Forgot Password?',
+    'go_to_login' => 'Go to Login',
+    'reset_help_text' => 'Enter your account email address to recive instructions on resetting your password.',
+    'recover_account' => 'Recover Account',
     'reset_password_text' => 'Reset your account password.',
     'reset_password' => 'Reset Account Password',
     'email_sent' => 'An email has been sent to you with further instructions for resetting your password.',