@using PantheonRA.BackOffice.Enums

<div class="modal fade modal-clean" id="passwordChangeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:500px;">
            <div class="modal-content">
                <div class="row p-sm no-padding-bottom">
                    <div class="col-xs-10">
                        <h3 id="partialCancelTitle" class="p-l-10">@Loc.ChangePassword</h3>
                    </div>
                    <div class="col-xs-2 text-right">
                        <a class="btn-transparent m-r-xs" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.UserNewPassword)" title="@Loc.CheckInstructions"><i class="fas fa-question clickable-icon"></i></a>
                        <i class="fa fa-times clickable-icon" data-dismiss="modal" title="@Loc.Close"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="password-change-form">
                        <input type="hidden" id="ChangeDomainName" name="ChangeDomainName" />
                        <input type="hidden" id="ChangeUsername" name="ChangeUsername" />
                        <div class="modal-description">
                            @Html.Raw(string.Format(Loc.WelcomeToYourFirstLogin, "<span id='loginUser'></span>"))
                            <div class="m-t-xs">@Loc.SecurityReasonPasswordChange</div>
                        </div>
                        <div class="row">
                            <div class="form-horizontal form-md p-l-10">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.CurrentPassword</label>
                                    <div class="col-xs-9">
                                        <input type="password" class="form-control" id="CurrentPassword" name="CurrentPassword" placeholder="@Loc.CurrentPassword" />
                                        <span class="field-validation" data-valmsg-for="CurrentPassword" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.NewPassword</label>
                                    <div class="col-xs-9">
                                        <input type="password" class="form-control" id="NewPassword" name="NewPassword" placeholder="@Loc.NewPassword" />
                                        <span class="field-validation" data-valmsg-for="NewPassword" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-3">@Loc.RepeatNewPassword</label>
                                    <div class="col-xs-9">
                                        <input type="password" class="form-control" id="NewPasswordAgain" name="NewPasswordAgain" placeholder="@Loc.RepeatNewPassword" />
                                        <span class="field-validation" data-valmsg-for="NewPasswordAgain" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group" id="serialNumber-form-group">
                                    <label class="control-label col-xs-3">@Loc.SerialNumber</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control" id="SerialNumber" name="serialNumber" placeholder="@Loc.SerialNumber" autocomplete="off" />
                                        <span class="field-validation" data-valmsg-for="SerialNumber" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-offset-3 col-xs-9">
                                        <i class="fa fa-times text-danger m-r-xs" id="atLeast8CharsIcon"></i><span id="atLeast8CharsText">@Loc.AtLeast8Characters</span>
                                    </div>
                                    <div class="col-xs-offset-3 col-xs-9">
                                        <i class="fa fa-times text-danger m-r-xs" id="upperAndLowerCaseLettersIcon"></i><span id="upperAndLowerCaseLettersText">@Loc.UpperAndLowerCaseLetters</span>
                                    </div>
                                    <div class="col-xs-offset-3 col-xs-9">
                                        <i class="fa fa-times text-danger m-r-xs" id="atLeast1SpecialCharIcon"></i><span id="atLeast1SpecialCharText">@Loc.AtLeast1SpecialCharacter</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="form-skip" class="form-ghost-button">
                            <a href="#" id="skipPasswordChange">@Loc.KeepCurrentPasswordForNow</a>
                            <br />(@Loc.NotRecommended)
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
                    <button type="button" class="btn btn-primary" id="ChangePasswordBtn" onclick="changePassword()" disabled><i class="fa fa-save m-r-xs" id="changePasswordButtonIcon"></i>@Loc.Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function openChangePasswordModal(domainName, username, displayDescription, description, allowSkip, requireSerialNumber) {
        $("#password-change-form")[0].reset();
        $("#NewPassword").trigger("change");

        if (domainName) {
            $('#passwordChangeModal #ChangeDomainName').val(domainName);
        }

        if (username) {
            $('#passwordChangeModal #ChangeUsername').val(username);
        }

        if (displayDescription) {
            $('#passwordChangeModal #loginUser').html(description);
            $('#passwordChangeModal .modal-description').show();
        }
        else {
            $('#passwordChangeModal .modal-description').hide();
        }

        if (allowSkip) {
            $('#passwordChangeModal #form-skip').show();
        }
        else {
            $('#passwordChangeModal #form-skip').hide();
        }

        if (requireSerialNumber) {
            $('#passwordChangeModal #serialNumber-form-group').show();
        }
        else {
            $('#passwordChangeModal #serialNumber-form-group').hide();
            $('#passwordChangeModal #serialNumber-form-group input').val("");
        }

        $('#passwordChangeModal').modal('show');

        $("#NewPassword").keyup(function (e) {
            var newPass = $("#NewPassword").val();

            displayPasswordCheck(!newPass || newPass.length < 8 ? true : false, "atLeast8CharsIcon", "atLeast8CharsText");

            const isContainsUppercase = /^(?=.*[A-Z]).*$/;
            const isContainsLowercase = /^(?=.*[a-z]).*$/;
            displayPasswordCheck(!isContainsUppercase.test(newPass) || !isContainsLowercase.test(newPass) ? true : false, "upperAndLowerCaseLettersIcon", "upperAndLowerCaseLettersText");

            const isContainsSymbol = /^(?=.*[~`!@@#$%^&*()--+={}\[\]|\\:;"'<>,.?/_₹]).*$/;
            displayPasswordCheck(!isContainsSymbol.test(newPass) ? true : false, "atLeast1SpecialCharIcon", "atLeast1SpecialCharText");
        });
    }

    function displayPasswordCheck(isError, iconId, textId) {
        if (isError === true) {
            $("#" + iconId).removeClass("text-color-green fa-check").addClass("text-danger fa-times");
            $("#" + textId).removeClass("text-line-through");
            $("#ChangePasswordBtn").prop("disabled", true);
        } else {
            $("#" + iconId).addClass("text-color-green fa-check").removeClass("text-danger fa-times");
            $("#" + textId).addClass("text-line-through");
            $("#ChangePasswordBtn").prop("disabled", false);
        }
    }

    function closeChangePasswordModal(passwordChanged) {
        $('#passwordChangeModal').modal('hide');
        $('#password-change-form').trigger('passwordChangeDone', [passwordChanged]);
    };

    document.addEventListener('DOMContentLoaded', function () {
        $('#skipPasswordChange').on('click', function () {
            closeChangePasswordModal(false);
        });
    }, false);

    function changePassword() {
        var form = $("#password-change-form");
        $('#changePasswordButtonIcon').addClass('fa fa-spinner fa-spin fa-lg fa-fw');
        $.post('@Url.Action("ChangePassword", "Account")', form.serialize()).done(function (data) {
            $('#changePasswordButtonIcon').removeClass('fa fa-spinner fa-spin fa-lg fa-fw');
            form.find('.field-validation').html('').removeClass('text-danger');
            form.find('.field-validation').closest('.form-group').removeClass('has-error');

            if (data.Errors && data.Errors.length > 0) {
                $.each(data.Errors, function (index, value) {
                    $('<span>' + value.Value + ' </span>').appendTo(form.find('#' + value.Key + " + span.field-validation"));
                    form.find('#' + value.Key + " + span.field-validation").addClass('text-danger');
                    form.find('#' + value.Key + " + span.field-validation").closest('.form-group').addClass('has-error');
                });
            }
            else {
                form[0].reset();
                closeChangePasswordModal(true);
            }
        }).fail(function () {
            $('#changePasswordButtonIcon').removeClass('fa fa-spinner fa-spin fa-lg fa-fw');
        });
    }
</script>