modunawa/resources/views/auth/member-signup-verify.blade.php

@extends('views.layouts.master')
<link rel="stylesheet" href="{{ csset('/themes/pro/modunawa/resources/css/user-auth.css') }}">
@section('content')

<!--=====================================
	USER FORM PART START
=======================================-->
<section class="user-form-part">
	<div class="container">
		<form class="row justify-content-center form-prevent-multiple-submits" action="{{ route('member-signup-verify.store') }}" method="POST">
            @csrf
			<div class="col-12 col-sm-10 col-md-12 col-lg-12 col-xl-6">

				<!--
				<div class="user-form-logo">
					<a href="index.html"><img src="images/logo.png" alt="logo"></a>
				</div>
				-->
				<div class="user-form-card agree_form">
					<div class="user-form-title">
						<h2>본인인증</h2>
					</div>
					<div class="form-check all_agree mb-4">
						<input class="form-check-input" type="checkbox" id="phone-identity-verifiy-ck">
						<label class="form-check-label" for="phone-identity-verifiy-ck">휴대폰 본인 확인</label>
					</div>

                    <div class="form-group mb-2 d-flex">
                        <input type="text" class="form-control certi-txt rounded-right-0" id="mobile-no-txt" maxlength="11" placeholder="휴대폰번호">
                        <span class="btn_wrap js_btn_wrapper mt-0">
                            <button type="button" class="btn bg-black border-black btn-block text-white certi-btn" onclick="send_verify_code(this)">인증번호 발송</button>
                        </span>
                    </div>
                    <div class="form-group mb-0 d-flex">
                        <input type="text" class="form-control certi-txt rounded-right-0" name="cert_number" placeholder="인증번호" required>
                        <span class="btn_wrap js_btn_wrapper mt-0">
                            <button type="submit" class="btn bg-black border-black btn-block text-white certi-btn button-prevent-multiple-submits">
                                <i class="spinner fa fa-spinner fa-spin"></i>
                                확인
                            </button>
                        </span>
                    </div>
				</div>

			</div>
		</form>
	</div>
</section>
<!--=====================================
	USER FORM PART END
=======================================-->

@endsection

@push('js')
    <script>
        async function send_verify_code($this) {
            let all_check = true

            $('#required-div input').each(function () {
                if (! $(this).is(':checked')) {
                    all_check = false
                }
            })

            if (all_check && $('#phone-identity-verifiy-ck').is(':checked')) {
                const response = await call_local_api('{{ route("member-signup-verify.send") }}', {mobile_no: $('#mobile-no-txt').val()})
                const error_msg = response.data.original.body

                if (error_msg['message'] === 'success') {
                    $($this).prop('disabled', true)
                    iziToast.success({ title: 'Success', message: $('#action-completed').text() })
                } else {
                    iziToast.error({ title: 'Error', message: error_msg['message'] })
                }
                return
            }

            iziToast.info({ title: 'Info', message: '이용약관에 동의하셔야 합니다' });
        }

        $('#mobile-no-txt').on('keyup', function () {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });

        $('#all-ck').click(function(){
            const checked = $(this).is(':checked');

            if (checked) {
                $('#required-div input:checkbox').prop('checked', true);
            }
        });
    </script>
@endpush