[5.0] Localization and password confirmation view (#14)

* Update dependencies * Add confirm view * Allow all text to be localized * Add StyleCI configuration to repo
zaknesler · Nov 14, 2019 · a353097 · a353097
1 parent 6b070a6
commit a353097
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 54 deletions.
diff --git a/readme.md b/readme.md
@@ -59,6 +59,12 @@ yarn dev // npm run dev
 
 Ensure that your database is properly configured and migrated, and you're done!
 
+### Localization
+
+All of the text in the views that this preset provides are configured to be easily translatable. When you install the `tailwind-auth` preset, the file `en.json` will be copied into your application's `resources/lang` directory.
+
+This file includes all of the text found in this package. To update the default English text, simply update the values of any of the key-value pairs. To translate into a different language, duplicate `en.json` and rename it to `{locale}.json`; you can then translate the values into the destination language. For more about localization, please refer to the [Laravel documentation](https://laravel.com/docs/6.x/localization).
+
 ### EditorConfig
 
 To ensure proper guide highlighting in your text editor, it is recommended that you add the following to the end of the `.editorconfig` file:

diff --git a/src/Tailwind.php b/src/Tailwind.php
@@ -57,6 +57,7 @@ public static function installWithAuth()
         ]);
 
         static::installViews('auth', [
+            'auth/passwords/confirm.stub',
             'auth/passwords/email.stub',
             'auth/passwords/reset.stub',
             'auth/login.stub',
@@ -73,6 +74,7 @@ public static function installWithAuth()
         ]);
 
         file_put_contents(app_path('Http/Controllers/HomeController.php'), static::compileControllerStub());
+        File::copy(__DIR__.'/stubs/en.stub', resource_path('lang/en.json'));
     }
 
     /**
@@ -85,11 +87,11 @@ protected static function updatePackageArray(array $packages)
     {
         return [
             '@tailwindcss/custom-forms' => '^0.2',
-            'autoprefixer' => '^9.6',
+            'autoprefixer' => '^9.7',
             'axios' => '^0.19',
-            'cross-env' => '^5.2',
-            'laravel-mix' => '^4.1',
-            'laravel-mix-purgecss' => '^4.1',
+            'cross-env' => '^6.0',
+            'laravel-mix' => '^5.0',
+            'laravel-mix-purgecss' => '^4.2',
             'tailwindcss' => '^1.1',
             'vue' => '^2.6',
             'vue-template-compiler' => '^2.6',

diff --git a/src/stubs/en.stub b/src/stubs/en.stub
@@ -0,0 +1,40 @@
+{
+    "404 Page Not Found": "404 Page Not Found",
+    "419 Page Expired": "419 Page Expired",
+    "500 Internal Server Error": "500 Internal Server Error",
+    "503 Service Unavailable": "503 Service Unavailable",
+    "Confirm New Password": "Confirm New Password",
+    "Confirm Password": "Confirm Password",
+    "Confirm your password": "Confirm your password",
+    "Confirm": "Confirm",
+    "Create a new account": "Create a new account",
+    "Create account": "Create account",
+    "Didn't get the email?": "Didn't get the email?",
+    "Email": "Email",
+    "Enter your email address and we'll send you a link to reset your password": "Enter your email address and we'll send you a link to reset your password",
+    "Forgot password?": "Forgot password?",
+    "Have an account?": "Have an account?",
+    "Home": "Home",
+    "Logout": "Logout",
+    "Name": "Name",
+    "New Password": "New Password",
+    "Page expired (Try refreshing)": "Page expired (Try refreshing)",
+    "Page not found": "Page not found",
+    "Password": "Password",
+    "Please confirm your password before continuing": "Please confirm your password before continuing",
+    "Remember it?": "Remember it?",
+    "Remember me": "Remember me",
+    "Resend it": "Resend it",
+    "Reset password": "Reset password",
+    "Reset your password": "Reset your password",
+    "Send Link": "Send Link",
+    "Sign in to your account": "Sign in to your account",
+    "Sign in": "Sign in",
+    "Sign up": "Sign up",
+    "Something went wrong": "Something went wrong",
+    "Verify your email": "Verify your email",
+    "We have sent you a fresh verification link, please check your email.": "We have sent you a fresh verification link, please check your email.",
+    "We're performing some maintenance, check back soon": "We're performing some maintenance, check back soon",
+    "Welcome": "Welcome",
+    "You must verify your email address before proceeding. Please check your email for a verification link.": "You must verify your email address before proceeding. Please check your email for a verification link."
+}
diff --git a/src/stubs/views/auth/auth/login.stub b/src/stubs/views/auth/auth/login.stub
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 
-@section('title', 'Sign in')
+@section('title', __('Sign in'))
 @section('show-header', false)
 
 @section('content-full')
@@ -11,15 +11,15 @@
             </div>
 
             <div class="mt-6 mx-auto max-w-xs text-center text-gray-600">
-                Sign in to your account
+                {{ __('Sign in to your account') }}
             </div>
 
             <form action="{{ route('login') }}" method="POST" class="mt-6">
                 @csrf
 
                 <div>
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">Email</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">{{ __('Email') }}</span>
                         <input
                             autofocus
                             required
@@ -39,7 +39,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">Password</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">{{ __('Password') }}</span>
                         <input
                             required
                             tabindex="2"
@@ -64,23 +64,27 @@
                             name="remember"
                             class="form-checkbox focus:shadow-transition text-brand-500 cursor-pointer"
                         />
-                        <span class="ml-2 text-gray-600 text-sm select-none">Remember me</span>
+                        <span class="ml-2 text-gray-600 text-sm select-none">{{ __('Remember me') }}</span>
                     </label>
 
-                    <button tabindex="4" class="btn px-5 py-2 text-sm">Sign in</button>
+                    <button tabindex="4" class="btn px-5 py-2 text-sm">{{ __('Sign in') }}</button>
                 </div>
 
                 <div class="mt-6 text-sm text-center">
                     @if (Route::has('register'))
-                        <a href="{{ route('register') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">Create account</a>
+                        <a href="{{ route('register') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">
+                            {{ __('Create account') }}
+                        </a>
                     @endif
 
                     @if (Route::has('register') && Route::has('password.request'))
                         <span class="mx-1 text-gray-500">&middot;</span>
                     @endif
 
                     @if (Route::has('password.request'))
-                        <a href="{{ route('password.request') }}" class="text-gray-700 hover:text-gray-800 hover:underline">Forgot password?</a>
+                        <a href="{{ route('password.request') }}" class="text-gray-700 hover:text-gray-800 hover:underline">
+                            {{ __('Forgot password?') }}
+                        </a>
                     @endif
                 </div>
             </form>

diff --git a/src/stubs/views/auth/auth/passwords/confirm.stub b/src/stubs/views/auth/auth/passwords/confirm.stub
@@ -0,0 +1,56 @@
+@extends('layouts.base')
+
+@section('title', __('Confirm your password'))
+@section('show-header', false)
+
+@section('content-full')
+    <div class="h-full flex">
+        <div class="p-6 m-auto max-w-xs w-full">
+            <div class="flex items-center justify-center">
+                <a href="/" class="font-semibold text-gray-700 hover:text-gray-900 no-underline">{{ config('app.name') }}</a>
+            </div>
+
+            <div class="mt-6 text-center text-gray-600">
+                {{ __('Please confirm your password before continuing') }}
+            </div>
+
+            @if (session('status'))
+                <div class="mt-6 px-4 py-3 bg-gray-100 text-gray-700 rounded-lg text-sm">
+                    {{ session('status') }}
+                </div>
+            @endif
+
+            <form action="{{ route('password.confirm') }}" method="POST" class="mt-6">
+                @csrf
+
+                <div>
+                    <label>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">{{ __('Password') }}</span>
+                        <input
+                            autofocus
+                            required
+                            tabindex="1"
+                            type="password"
+                            name="password"
+                            value="{{ old('password') }}"
+                            class="mt-1 form-input block w-full {{ $errors->first('password', 'border-red-500') }}"
+                            placeholder="••••••••"
+                        />
+
+                        @if ($errors->has('password'))
+                            <div class="px-3 py-2 mt-2 text-xs font-semibold bg-red-100 text-red-700 rounded-lg">{{ $errors->first('password') }}</div>
+                        @endif
+                    </label>
+                </div>
+
+                <div class="mt-6 text-sm flex items-center justify-between">
+                    @if (Route::has('password.request'))
+                        <a tabindex="3" href="{{ route('password.request') }}" class="text-gray-700 font-semibold hover:text-gray-800 hover:underline">{{ __('Forgot password?') }}</a>
+                    @endif
+
+                    <button tabindex="2" class="btn px-5 py-2">{{ __('Confirm') }}</button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endsection
diff --git a/src/stubs/views/auth/auth/passwords/email.stub b/src/stubs/views/auth/auth/passwords/email.stub
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 
-@section('title', 'Reset your password')
+@section('title', __('Reset your password'))
 @section('show-header', false)
 
 @section('content-full')
@@ -11,7 +11,7 @@
             </div>
 
             <div class="mt-6 text-center text-gray-600">
-                Enter your email address and we'll send you a link to reset your password
+                {{ __('Enter your email address and we\'ll send you a link to reset your password') }}
             </div>
 
             @if (session('status'))
@@ -25,7 +25,7 @@
 
                 <div>
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">Email</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">{{ __('Email') }}</span>
                         <input
                             autofocus
                             required
@@ -45,10 +45,11 @@
 
                 <div class="mt-6 text-sm flex items-center justify-between">
                     <div>
-                        Remember it? <a tabindex="3" href="{{ route('login') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">Sign in</a>
+                        {{ __('Remember it?') }}
+                        <a tabindex="3" href="{{ route('login') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">{{ __('Sign in') }}</a>
                     </div>
 
-                    <button tabindex="2" class="btn px-5 py-2">Send Link</button>
+                    <button tabindex="2" class="btn px-5 py-2">{{ __('Send Link') }}</button>
                 </div>
             </form>
         </div>

diff --git a/src/stubs/views/auth/auth/passwords/reset.stub b/src/stubs/views/auth/auth/passwords/reset.stub
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 
-@section('title', 'Reset your password')
+@section('title', __('Reset your password'))
 @section('show-header', false)
 
 @section('content-full')
@@ -11,7 +11,7 @@
             </div>
 
             <div class="mt-6 mx-auto max-w-xs text-center text-gray-600">
-                Reset your password
+                {{ __('Reset your password') }}
             </div>
 
             <form action="{{ route('password.request') }}" method="POST" class="mt-6">
@@ -21,7 +21,7 @@
 
                 <div>
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">Email</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">{{ __('Email') }}</span>
                         <input
                             autofocus
                             required
@@ -41,7 +41,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">New Password</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">{{ __('New Password') }}</span>
                         <input
                             required
                             tabindex="2"
@@ -59,7 +59,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password_confirmation', 'text-red-700') }}">Confirm New Password</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password_confirmation', 'text-red-700') }}">{{ __('Confirm New Password') }}</span>
                         <input
                             required
                             tabindex="3"
@@ -76,7 +76,7 @@
                 </div>
 
                 <div class="mt-6 text-sm text-right">
-                    <button tabindex="4" class="btn px-5 py-2">Reset password</button>
+                    <button tabindex="4" class="btn px-5 py-2">{{ __('Reset password') }}</button>
                 </div>
             </form>
         </div>

diff --git a/src/stubs/views/auth/auth/register.stub b/src/stubs/views/auth/auth/register.stub
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 
-@section('title', 'Sign up')
+@section('title', __('Sign up'))
 @section('show-header', false)
 
 @section('content-full')
@@ -11,15 +11,15 @@
             </div>
 
             <div class="mt-6 mx-auto max-w-xs text-center text-gray-600">
-                Create a new account
+                {{ __('Create a new account') }}
             </div>
 
             <form action="{{ route('register') }}" method="POST" class="mt-6">
                 @csrf
 
                 <div>
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('name', 'text-red-700') }}">Name</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('name', 'text-red-700') }}">{{ __('Name') }}</span>
                         <input
                             autofocus
                             required
@@ -39,7 +39,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">Email</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('email', 'text-red-700') }}">{{ __('Email') }}</span>
                         <input
                             required
                             tabindex="2"
@@ -58,7 +58,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">Password</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password', 'text-red-700') }}">{{ __('Password') }}</span>
                         <input
                             required
                             tabindex="3"
@@ -76,7 +76,7 @@
 
                 <div class="mt-3">
                     <label>
-                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password_confirmation', 'text-red-700') }}">Confirm Password</span>
+                        <span class="text-xs font-medium text-gray-600 {{ $errors->first('password_confirmation', 'text-red-700') }}">{{ __('Confirm Password') }}</span>
                         <input
                             required
                             tabindex="4"
@@ -94,10 +94,11 @@
 
                 <div class="mt-6 text-sm flex items-center justify-between">
                     <div>
-                        Have an account? <a tabindex="6" href="{{ route('login') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">Sign in</a>
+                        {{ __('Have an account?') }}
+                        <a tabindex="6" href="{{ route('login') }}" class="font-semibold text-gray-700 hover:text-gray-800 hover:underline">{{ __('Sign in') }}</a>
                     </div>
 
-                    <button tabindex="5" class="btn px-5 py-2">Sign up</button>
+                    <button tabindex="5" class="btn px-5 py-2">{{ __('Sign up') }}</button>
                 </div>
             </form>
         </div>

diff --git a/src/stubs/views/auth/auth/verify.stub b/src/stubs/views/auth/auth/verify.stub
@@ -1,6 +1,6 @@
 @extends('layouts.base')
 
-@section('title', 'Verify your email')
+@section('title', __('Verify your email'))
 @section('show-header', false)
 
 @section('content-full')
@@ -13,15 +13,18 @@
             <div class="mt-6 mx-auto max-w-xs text-center">
                 <div class="text-gray-600">
                     @if (session('resent'))
-                        We have sent you a fresh verification link, please check your email.
+                        {{ __('We have sent you a fresh verification link, please check your email.') }}
                     @else
-                        You must verify your email address before proceeding. Please check your email for a verification link.
+                        {{ __('You must verify your email address before proceeding. Please check your email for a verification link.') }}
                     @endif
                 </div>
 
                 <div class="my-6 mx-auto w-16 h-px block bg-gray-400"></div>
 
-                <div>Didn't get the email? <a href="{{ route('verification.resend') }}" class="font-semibold text-brand-600 hover:text-brand-800">Resend it</a></div>
+                <div>
+                    {{ __('Didn\'t get the email?') }}
+                    <a href="{{ route('verification.resend') }}" class="font-semibold text-brand-600 hover:text-brand-800">{{ __('Resend it') }}</a>
+                </div>
             </div>
         </div>
     </div>