Add translations to vue files

This commit is contained in:
Dane Everitt 2018-03-31 16:33:10 -05:00
parent 791cbaa5ce
commit 598bae7b70
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 178 additions and 29 deletions

10
BUILDING.md Normal file
View file

@ -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
```

View file

@ -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",

55
composer.lock generated
View file

@ -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",

View file

@ -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',
];

View file

@ -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));

View file

@ -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"

View file

@ -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');

View file

@ -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>

View file

@ -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>

View file

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

View file

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

0
resources/i18n/.gitkeep Normal file
View file

View file

@ -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.',

View file

@ -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"