diff --git a/BUILDING.md b/BUILDING.md new file mode 100644 index 000000000..b83bd16ca --- /dev/null +++ b/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 +``` diff --git a/composer.json b/composer.json index 013346222..ee0513b0b 100644 --- a/composer.json +++ b/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", diff --git a/composer.lock b/composer.lock index 0630fd445..cc3d11236 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", "This file is @generated automatically" ], - "content-hash": "f5bd8bd7e808968eccc908bd35fca728", + "content-hash": "35a92a12e8f28e51a83ce9fd5430795a", "packages": [ { "name": "appstract/laravel-blade-directives", @@ -4874,6 +4874,59 @@ ], "time": "2016-02-11T16:21:17+00:00" }, + { + "name": "martinlindhe/laravel-vue-i18n-generator", + "version": "0.1.28", + "source": { + "type": "git", + "url": "https://github.com/martinlindhe/laravel-vue-i18n-generator.git", + "reference": "0dcfb5a080137ea0eb8349b8f8f495c2779fa761" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/martinlindhe/laravel-vue-i18n-generator/zipball/0dcfb5a080137ea0eb8349b8f8f495c2779fa761", + "reference": "0dcfb5a080137ea0eb8349b8f8f495c2779fa761", + "shasum": "" + }, + "require": { + "illuminate/console": "~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0", + "illuminate/support": "~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0", + "php": ">=5.5.0" + }, + "require-dev": { + "phpunit/phpunit": "~4.7" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "MartinLindhe\\VueInternationalizationGenerator\\GeneratorProvider" + ] + } + }, + "autoload": { + "psr-4": { + "MartinLindhe\\VueInternationalizationGenerator\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Martin Lindhe", + "email": "martin@ubique.se" + } + ], + "description": "Generates a vue-i18n compatible include file from your Laravel translations.", + "homepage": "http://github.com/martinlindhe/laravel-vue-i18n-generator", + "keywords": [ + "laravel", + "vue-i18n" + ], + "time": "2018-03-06T08:38:31+00:00" + }, { "name": "maximebf/debugbar", "version": "v1.15.0", diff --git a/config/vue-i18n-generator.php b/config/vue-i18n-generator.php new file mode 100644 index 000000000..e4b912ab9 --- /dev/null +++ b/config/vue-i18n-generator.php @@ -0,0 +1,50 @@ + '/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', +]; diff --git a/gulpfile.js b/gulpfile.js index 4b455300f..c92ee3c6e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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)); diff --git a/package.json b/package.json index a192cefcb..a790e437f 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/resources/assets/pterodactyl/scripts/app.js b/resources/assets/pterodactyl/scripts/app.js index 76ebc205e..2645b4728 100644 --- a/resources/assets/pterodactyl/scripts/app.js +++ b/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'); diff --git a/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue index b395d4106..21d727d3b 100644 --- a/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue +++ b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue @@ -3,23 +3,22 @@
- - -

Enter your account email address to recive instructions on resetting your password.

+ +

{{ $t('auth.reset_help_text') }}

-
- Go to Login + {{ $t('auth.go_to_login') }}
diff --git a/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue index 6e97670d4..87013f2fd 100644 --- a/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue +++ b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue @@ -7,23 +7,23 @@ v-bind:value="email" v-on:input="updateEmail($event)" /> - +
- +
-
- Forgot Password? + {{ $t('auth.forgot_password') }}
diff --git a/resources/assets/pterodactyl/styles/components/buttons.css b/resources/assets/pterodactyl/styles/components/buttons.css new file mode 100644 index 000000000..f9cf3f7c1 --- /dev/null +++ b/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; + } +} diff --git a/resources/assets/pterodactyl/styles/main.css b/resources/assets/pterodactyl/styles/main.css index 70c60947f..0a7a5a792 100644 --- a/resources/assets/pterodactyl/styles/main.css +++ b/resources/assets/pterodactyl/styles/main.css @@ -9,6 +9,7 @@ */ @import "components/animations.css"; @import "components/authentication.css"; +@import "components/buttons.css"; /** * Tailwind Utilities diff --git a/resources/i18n/.gitkeep b/resources/i18n/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php index 176de8f64..58665d022 100644 --- a/resources/lang/en/auth.php +++ b/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.', diff --git a/yarn.lock b/yarn.lock index de1eda49a..5041d118f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6004,6 +6004,14 @@ vueify-insert-css@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/vueify-insert-css/-/vueify-insert-css-1.0.0.tgz#57e5d791907e8c9d87ae6de099a2174bd0a7f990" +vuex-i18n@^1.10.5: + version "1.10.5" + resolved "https://registry.yarnpkg.com/vuex-i18n/-/vuex-i18n-1.10.5.tgz#635ea2204e0aa3f8fd512f0fab7f6b994d3f666c" + +vuex@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2" + watchpack@^1.4.0, watchpack@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"