confirms/app/Views/layouts/widget/pwModal.php

<style>
    .swal2-cancel {
        background-color: #ff0000 !important;
        color: #fff !important;
    }
</style>

<!-- 비밀번호 변경 모달 -->
<div class="modal fade" id="pwChangeModal" tabindex="-1" aria-hidden="true" aria-labelledby="pwChangeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- header -->
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="pwChangeModalLabel">비밀번호변경</h5>
                <button type="button" class="btn-close layer_popup_close" data-bs-dismiss="modal"
                    aria-label="닫기"></button>
            </div>

            <!-- body -->
            <div class="modal-body">

                <!-- 규칙 박스 -->
                <div class="border rounded-3 p-3 mb-3 bg-light">
                    <fieldset class="mb-0">
                        <legend class="fs-6 fw-semibold mb-2">컨펌스 시스템 비밀번호 작성규칙</legend>
                        <ul class="mb-0 ps-3">
                            <li class="mb-2">
                                <div class="fw-semibold">- 최소길이</div>
                                <div class="text-muted small">
                                    최소 8자리 이상 : 영어 대문자, 소문자, 숫자, 특수문자 중 최소 2종류 조합
                                </div>
                            </li>

                            <li class="mb-2">
                                <div class="fw-semibold">- 추측하기 어려운 비밀번호</div>
                                <div class="text-muted small">
                                    일련번호, 전화번호 등 쉬운 문자열이 포함되지 않도록 함<br>
                                    잘 알려진 단어, 키보드 상에서 나란히 있는 문자열이 포함되지 않도록 함
                                </div>
                            </li>

                            <li class="mb-2">
                                <div class="fw-semibold">- 주기적 변경</div>
                                <div class="text-muted small">비밀번호에 유효기간 설정하고 최소 6개월마다 변경</div>
                            </li>

                            <li>
                                <div class="fw-semibold">- 동일 비밀번호 사용 제한</div>
                                <div class="text-muted small">2개의 비밀번호를 교대로 사용하지 않음</div>
                            </li>
                        </ul>
                    </fieldset>
                </div>

                <!-- 안내 문구 -->
                <div class="alert alert-warning py-2 mb-3">
                    <div class="small mb-0">* 비밀번호가 <b>180일</b>이 지나 변경 하셔야 합니다.</div>
                </div>

                <!-- 입력 폼 -->
                <form id="frm_pw_change" onsubmit="return false;">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label for="usr_pass" class="form-label">기존비밀번호</label>
                            <input type="password" id="usr_pass" name="usr_pass" class="form-control" required />
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="new_pass" class="form-label">비밀번호</label>
                            <input type="password" id="new_pass" name="new_pass" class="form-control" required />
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="new_pass2" class="form-label">비밀번호확인</label>
                            <input type="password" id="new_pass2" name="new_pass2" class="form-control" required />
                        </div>
                    </div>
                </form>

                <!-- 오늘하루 보지않기 -->
                <div class="mt-3 text-end">
                    <a href="javascript:void(0)" class="small text-decoration-none layer_popup_today_close">
                        오늘하루 보지않기
                    </a>
                </div>

            </div>

            <!-- footer -->
            <div class="modal-footer d-flex gap-1">
                <button type="button" class="btn btn-outline-secondary layer_popup_close" data-bs-dismiss="modal">
                    닫기
                </button>
                <button type="button" class="btn btn-primary layer_popup_ok" onclick="chageUserPass();">
                    확인
                </button>
            </div>

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



<script type="text/javascript">



    $(function () {

        if (shouldShowPwModal()) {
            const el = document.getElementById('pwChangeModal');
            if (el) {
                const modal = new bootstrap.Modal(el, {
                    backdrop: 'static',   // 바깥 클릭 닫기 막기(원하면 false로)
                    keyboard: false       // ESC 닫기 막기(원하면 true)
                });
                modal.show();
            }
        }

        // 하루동안 열지 않기
        $(".layer_popup_today_close").on('click', function () {
            const key = 'pwChangeModalHideDate';
            const today = new Date().toISOString().slice(0, 10);
            localStorage.setItem(key, today);

            const el = document.getElementById('pwChangeModal');
            bootstrap.Modal.getInstance(el)?.hide();
        });
    });

    // 하루동안 열지 않기 체크
    function shouldShowPwModal() {
        const key = 'pwChangeModalHideDate';
        const today = new Date().toISOString().slice(0, 10);
        return localStorage.getItem(key) !== today;
    }


    function chageUserPass() {
        const form = document.getElementById('frm_pw_change');

        let isValid = true;

        // Bootstrap5 기본 validation 적용
        if (!form.checkValidity()) {
            isValid = false;
        }

        if (!isValid) {
            form.classList.add('was-validated');
            return;
        }


        swal.fire({
            text: "저장 하시겠습니까?",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "예",
            cancelButtonText: "아니오",
            closeOnConfirm: false,
            closeOnCancel: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/common/common/changeUserPass',
                    contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                    method: 'POST',
                    data: $("#frm_pw_change").serialize(),
                    beforeSend: function () {
                        blockUI.blockPage({
                            message: tpl
                        })
                    },
                    complete: function () {
                        blockUI.unblockPage()
                    },
                    error: function (xhr, error, thrown) {
                        blockUI.unblockPage()
                        var msg = "";
                        if (xhr.responseText != null) {
                            msg = xhr.responseText
                        } else {
                            msg = "잠시후 다시 시도해 주세요."
                        }

                        Swal.fire({
                            title: msg,
                            icon: "error"
                        })
                    },
                    success: function (result) {

                        if (result.code == '0') {
                            Swal.fire({
                                title: '정상 처리되었습니다.',
                                icon: "success"

                            })
                        } else {
                            Swal.fire({
                                title: result.msg,
                                icon: "error"
                            })
                        }
                    }
                });
            }
        });
    }


</script>