search

nakatievent / my_baby_diary_app

0 stars 0 forks source link

新規登録ページ（register.blade.php）のレイアウト・作成 #6

Open nakatievent opened 3 years ago

nakatievent commented 3 years ago

13B0238D-830F-4F14-85B5-D17681E467F1_1_201_a

nakatievent commented 3 years ago

とりあえず新規登録ページは↑のような感じにする。 内容に変更があればその都度追加したり修正したりする。

＊横向きにしないとアップロードできなかったので少し見づらい😓

nakatievent commented 3 years ago

Laravel8はBootstrapじゃなくてTailwindCSS。。。

なんと、Laravel8からはBootstrapじゃなくてTailwindCSSとのこと。

と言っても、正直TailwindCSSとか全然分からない。

しかも、自動でログイン機能を実装したらregister.blade.phpはおそらくTailwindCSSのやり方でコードが書かれている。

泣きそうすぎてヤバイ×100。。。。

もうこうなったら、無理やりBootstrapで書くしかない！

nakatievent commented 3 years ago

自動生成された新規登録ページ

下記のコードは自動生成されたコードである。 これを修正して自分で考えた新規登録フォームにしていく。

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a>
        </x-slot>

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <!-- Name -->
            <div>
                <x-label for="name" :value="__('Name')" />

                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
            </div>

            <!-- Email Address -->
            <div class="mt-4">
                <x-label for="email" :value="__('Email')" />

                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
            </div>

            <!-- Password -->
            <div class="mt-4">
                <x-label for="password" :value="__('Password')" />

                <x-input id="password" class="block mt-1 w-full"
                                type="password"
                                name="password"
                                required autocomplete="new-password" />
            </div>

            <!-- Confirm Password -->
            <div class="mt-4">
                <x-label for="password_confirmation" :value="__('Confirm Password')" />

                <x-input id="password_confirmation" class="block mt-1 w-full"
                                type="password"
                                name="password_confirmation" required />
            </div>

            <div class="flex items-center justify-end mt-4">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('Already registered?') }}
                </a>

                <x-button class="ml-4">
                    {{ __('Register') }}
                </x-button>
            </div>
        </form>
    </x-auth-card>
</x-guest-layout>
nakatievent commented 3 years ago

上記のコードを元にして作成した新規登録ページ

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <!-- <link rel="stylesheet" type="text/css" href="login.css"> -->

  <title>新規登録ページ</title>
</head>

<body>
  <div class="container">

    <div class="row">
      <div class="col-md-6 mx-auto border border-dark border-3 p-5 position-absolute top-50 start-50 translate-middle">

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        <div class="fw-bolder text-center">
                <h1 class="fw-bolder fs-2"><br>新規登録フォーム</h1>
                <p></p>
                <p>下記の項目を記入後、「新規登録」ボタンを押して頂くと、ログインが可能です。</p>
        </div>

        <form class="col-lg-8 mx-auto" method="POST" action="{{ route('register') }}">
            @csrf

            <!-- 名前 -->
            <div class="form-group">
                <label for="name" class="form-label">お名前</label>
                <input id="name" class="form-control" type="text" name="name" :value="old('name')" required autofocus>
            </div>

            <br>

            <!-- メールアドレス -->
            <div class="form-group">
                <label for="email" class="form-label">メールアドレス</label>
                <input id="email" class="form-control" type="email" name="email" :value="old('email')" required />
            </div>

            <br>

            <!-- パスワード -->
            <div class="form-group">
                <label for="password" class="form-label">パスワード</label>
                <input id="password" class="form-control" type="password" name="password" required autocomplete="new-password">
            </div>

            <!-- Confirm Password -->
            <div class="flex items-center justify-center mt-4">
                <label for="password_confirmation" class="form-label">パスワードの認証</label>
                <input id="password_confirmation" class="form-control" type="password" name="password_confirmation" required />
            </div>

            <div class="flex items-center justify-end mt-4">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('登録済みですか？') }}
                </a>

                　<button type="submit" class="btn btn-primary">新規登録</button>

            </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>

</body>

</html>
nakatievent commented 3 years ago

新規登録できるか確認する

上記のコードを実装し、見た目の部分はできたけど、実際に新規登録できるかを試してみたところ、下記のエラーが出た。

Illuminate\Database\Eloquent\MassAssignmentException
Add [name] to fillable property to allow mass assignment on [App\Models\User].

Argument 1 passed to Illuminate\Auth\SessionGuard::login() must be an instance of Illuminate\Contracts\Auth\Authenticatable, instance of App\Models\User given, called in /work/vendor/laravel/framework/src/Illuminate/Auth/AuthManager.php on line 307

nakatievent commented 3 years ago

上記エラーの解決

Argument 1 passed to Illuminate\Auth\SessionGuard::login() must be an instance of Illuminate\Contracts\Auth\Authenticatable, instance of App\Models\User given, called in /work/vendor/laravel/framework/src/Illuminate/Auth/AuthManager.php on line 307

上記のエラーについて、ググっても公式リファレンスを見ても解決しなかったため、Teratailで質問してみた。あと、Qiitaにも良さげな記事があったのでそれも参考にした。

参考になった物

  1. Laravelで新規登録、ログイン時にエラーが出る件について
  2. Laravel8+laravel/breezeでマルチログイン

編集したコード↓

<?php

namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class User extends Authenticatable
{
    use HasFactory;

    protected $guarded = ['id'];
}

継承について

つまり「class クラス名」に続けて「extends クラス名」を記述します。すると、ここで宣言するクラスはextendsの後に記述されたクラスを継承したことになります。「UserクラスはAuthenticatableクラスを継承した」ということになります。

どうやらUserクラスはAuthenticatableクラスを継承していて、それについての記載がなかったから（？）エラーが出たと思われるので、上記の記載をしたところエラーは解決した。ログインについてもエラーが出なくなった。

nakatievent commented 3 years ago

Laravel BreezeからLaravel/uiに変更

ComposerからLaravel Breezeを消して、Laravel/uiにしたことでフロントの実装がBootstrapになった。

nakatievent commented 3 years ago

register.blade.phpの再作成

Laravel/uiにしたことでregister.blade.phpが初期化されたので再度作り直すこととなった。

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 mx-auto border border-dark border-3 p-5 position-absolute top-50 start-50 translate-middle">

            <div class="fw-bolder text-center">
                <h1 class="fw-bolder fs-2">新規登録フォーム</h1>
                <p></p>
                <p>下記の項目を入力後、「新規登録」ボタンを押すとすぐに始めることができます。</p>
            </div>

            <form class="col-lg-8 mx-auto" method="POST" action="{{ route('register') }}">
                @csrf

                <div class="form-group">
                    <label for="name" class="form-label">{{ __('お名前') }}</label>
                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required  
                           autocomplete="name" autofocus>

                    @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <br>

                <div class="form-group">
                    <label for="email" class="form-label">{{ __('メールアドレス') }}</label>
                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}"    
                           required autocomplete="email">

                    @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <br>

                <div class="form-group">
                    <label for="password" class="form-label">{{ __('パスワード') }}</label>
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required 
                           autocomplete="new-password">

                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <br>

                <div class="form-group">
                    <label for="password-confirm" class="form-label">{{ __('＊パスワードを再度入力して下さい') }}</label>
                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                </div>

                <br>

                <div class="signup-btn">
                    <button type="submit" class="btn btn-primary">
                        {{ __('新規登録') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection