Laravel8 Jetstreamのログイン機能を試す

Laravel Jetstreamでは、フロントエンドスカフォールドを`Livewire`か`Inertia.js`かを選択できますが、今回は`Livewire`を選択しました。

# 手順
## インストール

composerでLaravel Jetstreamをインストールします。

```
composer require laravel/jetstream
```

Livewireをインストールします。
※オプション`--teams` を付加で`チーム管理機能`を使用できるようです。

```
php artisan jetstream:install livewire --teams
```

ビルドを実行します。

```
npm install && npm run dev
```

マイグレーションファイルを実行します。

```
php artisan migrate
```

これでトップページに無事アクセスできるようになります。

## 日本語設定

Laravelを日本語に対応させます。
まずは下記の値を修正します。

```config/app.php
<?php

return [

    'timezone' => 'Asia/Tokyo',

    'locale' => 'ja',

    'fallback_locale' => 'ja',

    'faker_locale' => 'ja_JP',

];
```

ログインページページも日本語に修正してみます。

```resources/views/login.blade.php
<div>
                <x-jet-label for="email" value="{{ __('メールアドレス') }}" />
                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>

            <div class="mt-4">
                <x-jet-label for="password" value="{{ __('パスワード') }}" />
                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label for="remember_me" class="flex items-center">
                    <x-jet-checkbox id="remember_me" name="remember" />
                    <span class="ml-2 text-sm text-gray-600">{{ __('次回から自動でログインする') }}</span>
                </label>
            </div>

            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('パスワードをお忘れですか?') }}
                    </a>
                @endif

                <x-jet-button class="ml-4">
                    {{ __('ログイン') }}
                </x-jet-button>
            </div>
```
英語名だった箇所を書き換えるだけなので簡単です。

バリデーションメッセージも日本語に変更します。
`ressources/lang/ja`を作成し、jaディレクトリの配下は`ressources/lang/en`と同様です。

日本語化ファイルは公式ページより取得可です。
https://readouble.com/laravel/8.x/ja/auth-php.html
https://readouble.com/laravel/8.x/ja/pagination-php.html
https://readouble.com/laravel/8.x/ja/passwords-php.html
https://readouble.com/laravel/8.x/ja/validation-php.html

ただし、↑を作成しただけでは一部日本語化できていないところがあるようです。
例えば、、`Whoops! Something went wrong`
![スクリーンショット 2021-02-02 0.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1063491/090d9e06-9a29-3e81-c3a9-6c41666266eb.png)
どうやら、これは下記で表示しているようです。。。

```vendor/laravel/jetstream/resources/views/components/validation-errors.blade.php
@if ($errors->any())
    <div {{ $attributes }}>
        <div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</div>

        <ul class="mt-3 list-disc list-inside text-sm text-red-600">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
```

このような公式の日本語化ファイルで対応できなかったバリデーションメッセージは、resources/lang配下に`ja.json`を作成して対処します。

```resources/lang/ja.json
{
    "Whoops! Something went wrong.": "エラーが発生しました。"
}
```
![スクリーンショット 2021-02-02 0.46.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1063491/e879806c-407c-3424-798d-68d285ef8386.png)
日本語で表示されました。他所でも日本語化できない所を発見したら、随時`resources/lang/ja.json`に追記していけば大丈夫そうです。

## テストデータを作成

既にUserのFactoryは用意されているため、下記ファイルのコメントアウトを外して準備完了です。

```database/seeders/DatabaseSeeder.php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
         \App\Models\User::factory(10)->create(); // ここのコメントアウトを外す。
    }
}
```

Seederファイルを実行します。

```
php artisan db:seed
```

ちなみに、ユーザー登録ページよりデータを作成することも可能です。


##ログインテスト

作成したテストデータでログインを実行します。
ダッシュボードにリダイレクトされたらログイン成功です。
![スクリーンショット 2021-02-02 0.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1063491/9ecd37ba-4e7f-6171-7044-b342200bedfb.png)

ログイン後にはプロフィールページなんかもあるようです。
![スクリーンショット 2021-02-02 1.02.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1063491/09f2be1a-0a92-7291-1fc8-4f8e6163cc9d.png)

ひとまずログインは成功したのでここで終わります。