blog/resources/views/auth/register.blade.php

@extends('auth.layout')

@section('content')
<div id="registerForm" class="container">
    <header>
        <a href="/" type="text/html" rel="noreferrer" referrerpolicy="no-referrer">
            {{ strtoupper(config('app.name')) }}
        </a>
    </header>
    <main>

        <div class="row">
            <div class="col">
                <h5>{{ __('Register') }}</h5>
            </div>
            <div class="col text-end">
                <label id="registerTip" data-bs-toggle="tooltip" data-bs-title="정확한 정보를 입력해주셔야 원활한 이용이 가능합니다.">
                    <i class="fa-solid fa-circle-exclamation"></i>
                </label>
            </div>
        </div>

        @if(config('use_register_block'))
            <!-- 회원가입 차단 안내 -->
            <div class="alert alert-danger" role="alert">
                <small>현재 신규 가입이 중단되어 회원가입이 불가합니다.</small>
            </div>
        @endif

        <form name="f_register" id="fRegister" method="post" action="{{ route('register') }}" accept-charset="UTF-8" autocomplete="on">
            @csrf
            <input type="hidden" name="tx_id" id="txId" value=""/>
            <hr/>

            <section>
                <div class="row mb-2">
                    <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                        {{ config('company_name') }}에 오신 것을 환영합니다.<br/>
                        이메일 인증 후 회원가입이 완료됩니다.
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="row g-2">
                            <div class="col">
                                <!-- 이메일 -->
                                <label for="email" class="form-label">{{ __('Email Address') }}</label>
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required/>

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

                                @error('nickname')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-auto align-self-end" id="btnVerifyEmail">
                                <button type="button" id="btnSendVerifyLinkRequest" class="btn btn-outline-secondary">인증하기</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                        &nbsp;
                    </div>
                    <div class="col-12 col-sm-6">
                        <!-- 닉네임 -->
                        <label for="nickname" class="form-label">닉네임</label>
                        <input id="nickname" type="text" class="form-control @error('nickname') is-invalid @enderror" name="nickname" value="{{ old('nickname') }}" required/>
                    </div>
                </div>
            </section>

            <section>
                <div class="row">
                    <div class="col-12 col-sm-6 mb-2 mb-sm-0 align-self-end" id="txtVerifyEmail"></div>
                    <div class="col-12 col-sm-6">
                        <div class="row g-2">
                            <div class="col-12 col-sm mb-1 mb-sm-0">
                                <!-- 비밀번호 -->
                                <label for="password" class="form-label">{{ __('Password') }}</label>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required/>

                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-12 col-sm">
                                <!-- 비밀번호 확인 -->
                                <div class="row">
                                    <div class="col">
                                        <label for="password-confirm" class="form-label">{{ __('Confirm Password') }}</label>
                                    </div>
                                    <div class="col-auto">
                                        @if($passwordGuideTip)
                                            <label id="passwordGuideTip"
                                                   data-bs-toggle="tooltip"
                                                   data-bs-title="비밀번호는 다음과 같은 수준의 규칙을 가져야 합니다. ({{ $passwordGuideTip }})">
                                                <i class="fa-solid fa-circle-exclamation"></i>
                                            </label>
                                        @endif
                                    </div>
                                </div>

                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required/>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <hr/>

            <section>
                <div class="row">
                    <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                        약관 내용을 자세히 확인하신 후 동의해주세요.
                    </div>
                    <div class="col-12 col-sm-6">
                        <!-- 이용약관 동의 -->
                        <div class="form-check mb-2">
                            <input type="checkbox" name="agree_1" id="agree_1" class="form-check-input" value="1"/>
                            <label for="agree_1" class="form-check-label">
                                (필수) <a href="{{ route('document', 'policy') }}" data-bs-toggle="modal" data-bs-target="#policyModal">이용약관</a>에 동의합니다.
                            </label>
                        </div>

                        <!-- 개인정보처리 동의 -->
                        <div class="form-check mb-2">
                            <input type="checkbox" name="agree_2" id="agree_2" class="form-check-input" value="2"/>
                            <label for="agree_2" class="form-check-label">
                                (필수) <a href="{{ route('document', 'privacy') }}" data-bs-toggle="modal" data-bs-target="#privacyModal">개인정보처리방침</a>에 동의합니다.
                            </label>
                        </div>

                        <div class="row justify-content-center g-2">
                            <div class="col-12 col-sm-8">
                                <!-- 회원가입 버튼 -->
                                <button type="submit" class="btn btn-success w-100">
                                    {{ __('Register') }}
                                </button>
                            </div>
                            <div class="col col-sm-4">
                                <!-- 로그인 버튼 -->
                                @if (Route::has('login'))
                                    <a href="{{ route('login') }}" class="btn btn-default w-100">이전</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 이용약관 -->
            <div class="modal fade" id="policyModal" tabindex="-1" aria-labelledby="policyModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                    <div class="modal-content">
                        <div class="modal-header bg-dark">
                            <h1 class="modal-title fs-5 text-white" id="policyModalLabel">이용약관</h1>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {!! $policy_1 !!}
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">확인</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 개인정보처리방침 -->
            <div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                    <div class="modal-content">
                        <div class="modal-header bg-dark">
                            <h1 class="modal-title fs-5 text-white" id="privacyModalLabel">개인정보처리방침</h1>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {!! $policy_2 !!}
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">확인</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <hr/>

        <footer>
            &copy; 2022~{{ date('Y') }} {{ config('company_name') }}. All rights reserved.
        </footer>
    </main>
</div>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/auth/register.css') }}"/>
@endpush

@push('scripts')
    <script src="{{ asset('js/auth/register.js') }}" defer></script>
@endpush