YNICTE/FO/Views/Account/NewPassword.cshtml

@model NP.Model.VMUser
@{
    // 상태 (확장대비)
    int userStatus = Model.User.status;

    // 인증CI
    string ci = Model.User.ci ?? "";
}

@if (!string.IsNullOrEmpty(ci) && !string.IsNullOrEmpty(Model.User.userid))
{   // 인증 결과가 있는 사용자만
    <form method="post">
        @Html.AntiForgeryToken()
        <input type="hidden" id="userid" name="userid" value="@Model.User.userid" />
        <div class="lgnForm" style="max-width: 500px; margin: 0 auto; text-align: center;">
            <p class="idpwTxt">
                <span><b>@Model.User.username </b>님, 아이디는 @Model.User.userid 입니다.</span>
                <span>새롭게 사용할 비밀번호를 입력해주세요.</span>
            </p>
            <ul class="lgnInput" style="margin-top:5px;">
                <li><input type="password" id="up1" placeholder="비밀번호(8자 이상, 영문/숫자/특수기호 포함)" autocomplete="new-password" /></li>
                <li><input type="password" id="up2" placeholder="비밀번호 확인(동일한 비밀번호 입력)" autocomplete="new-password" /></li>
            </ul>
            <ul>
                <li class="idpwBtn" style="margin-top:5px;">
                    <p id="capslock-warning"></p>
                    <p id="password-match-warning"></p>
                    <br />
                </li>
            </ul>
            <ul class="idpwBtn">
                <li><a href="javascript:void(0);" onclick="fnPasswordChange()">비밀번호 재설정</a></li>
                <li><a href="/">취소</a></li>
            </ul>
        </div>

        @section scriptsHeader{
            @Html.Partial("./Partial/ScriptPost")
        }
    </form>
    <script>

            $(function () {
                initCapsLockWarning('', '#capslock-warning');
                initializePasswordToggle('#up1, #up2');

                $('#up1, #up2').on('keyup', function () {
                    const password = $('#up1').val();
                    const confirmPassword = $('#up2').val();
                    const messageElement = $('#password-match-warning');

                    if (password.length >= 8 && confirmPassword && password !== confirmPassword) {
                        messageElement.html('<strong style="color: red;">비밀번호가 일치하지 않습니다.</strong>');
                    } else {
                        messageElement.html('');
                    }
                });

            });
            
            @*/**
             * 비밀번호 변경 유효성 검사 및 서버 요청 함수
             * if/else if 구조를 사용하여 return 없이 각 유효성 검사를 순차적으로 진행
             * 1. 입력 값 공백 여부 확인
             * 2. 비밀번호 복잡도 규칙 확인
             * 3. 연속된 문자/숫자 반복 확인
             * 4. 비밀번호와 비밀번호 확인 값 일치 여부 확인
             */*@
            function fnPasswordChange() {
                try {
                    var up1 = $.trim($('#up1').val());
                    var up2 = $.trim($('#up2').val());                    
                    var passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
                    var repeatRegex = /(.)\1\1/;
            
                    if (up1 === "" || up2 === "") {
                        msg('비밀번호를 입력해주세요.');
                        $('#up1').focus();
                    } else if (!passwordRegex.test(up1)) {
                        msg('비밀번호는 8자 이상이며, 영문/숫자/특수기호를 모두 포함해야 합니다.');
                        $('#up1').focus();
                    } else if (repeatRegex.test(up1)) {
                        msg('연속으로 3번 이상 반복되는 문자/숫자를 사용할 수 없습니다.');
                        $('#up1').focus();
                    } else if (up1 !== up2) {
                        msg('비밀번호 확인이 일치하지 않습니다.');
                        $('#up2').focus();
                    } else {                        
                        // param
                        const formData = new URLSearchParams();
                        formData.append('userid', document.getElementById('userid').value);
                        formData.append('password', up2);
                        formData.append('__RequestVerificationToken', document.querySelector('input[name="__RequestVerificationToken"]').value);

                        fetch("/FOCommon/UserChangePassword", {
                            method: "POST",
                            body: formData
                        })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error(`HTTP error! status: ${response.status}`);
                                }
                                return response.json();
                            })
                            .then(data => {
                                console.log('서버로부터 받은 전체 응답:', data);
            
                                if (data.success) {
                                    confirmCustom(
                                        "비밀번호가 변경 되었습니다.",
                                        [
                                            {
                                                text: '확인',
                                                callback: function () {
                                                    window.location.href = "/";
                                                }
                                            }
                                        ],
                                        { top: '30%' }
                                    );
                                } else {
                                    msg(data.message);
                                    console.log('실패 코드 (from server): ' + data.data);
                                }
                            })
                            .catch(error => {
                                msg("서버와 통신 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
                                console.error("통신에러 : ", error);
                            });
            
                    }
            
                } catch (e) {
                    msg("오류가 발생했습니다");
                    console.error("AJAX Error: ", e.message);
                }
            }

        </script>

        }
else
{   // 인증결과가 없는 회원의 확인창을 띄울 빈 껍데기
    <style>
        .idpwBtn2 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
    <div class="lgnForm" style="max-width: 500px; margin: 0 auto; text-align: center;">
        <p class="idpwTxt">
            <span>새롭게 사용할 비밀번호를 입력해주세요.</span>
        </p>
        <ul class="lgnInput">
            <li><input type="password" placeholder="비밀번호(8자 이상, 영문/숫자/특수기호 포함)" readonly="readonly" /></li>
            <li><input type="password" placeholder="비밀번호 확인(동일한 비밀번호 입력)" readonly="readonly" /></li>
        </ul>
        <ul class="idpwBtn2">
            <li><a href="/">취소</a></li>
        </ul>
    </div>
    
    <script>
    
        $(function () {
            confirmCustom(
                "입력하신 정보에 맞는 회원이 없습니다.<br/>새로 회원가입을 진행해주세요.",
                [
                    {
                        text: '회원가입 바로가기',
                        callback: function () {
                            window.location.href = '/Account/JoinIdVeri';
                        }
                    },
                    {
                        text: '확인',
                        callback: function () {
                            window.location.href = '/Account/FindIDPW';
    
                        }
                    }
                ],
                { top: '30%' }
            );
    
        });
    
    </script>
}