@page "{userId:int?}"
@model WorkFlowCheck.Web.Pages.Account.ChangePasswordModel
@using WorkFlowCheck.Common.Helper
@using WorkFlowCheck.Common.DTO
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
@{
    Layout = null;
    ViewData["Title"] = "Jelszó módosítása";
}

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@ViewData["Title"]</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light d-flex justify-content-center align-items-center vh-100">
    <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
        <h2 class="mb-4 text-center">Jelszó módosítása</h2>

        <div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div>

        <form method="post">
            <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
            <input type="hidden" asp-for="UserChangePassword2FADTO.UserId" />
            <input type="hidden" asp-for="UserChangePassword2FADTO.Token2FA" />
            <div class="mb-3">
                <label asp-for="UserChangePassword2FADTO.UserName" class="form-label"></label>
                <input asp-for="UserChangePassword2FADTO.UserName" class="form-control" disabled />
                <span asp-validation-for="UserChangePassword2FADTO.UserName" class="text-danger small"></span>
            </div>

            <div class="mb-3">
                <label asp-for="UserChangePassword2FADTO.OldPassword" class="form-label"></label>
                <input asp-for="UserChangePassword2FADTO.OldPassword" type="password" class="form-control" />
                <span asp-validation-for="UserChangePassword2FADTO.OldPassword" class="text-danger small"></span>
            </div>
            <div class="mb-3">
                <label asp-for="UserChangePassword2FADTO.NewPassword1" class="form-label"></label>
                <input asp-for="UserChangePassword2FADTO.NewPassword1" type="password" class="form-control" />
                <span asp-validation-for="UserChangePassword2FADTO.NewPassword1" class="text-danger small"></span>
            </div>
            <div class="mb-3">
                <label asp-for="UserChangePassword2FADTO.NewPassword2" class="form-label"></label>
                <input asp-for="UserChangePassword2FADTO.NewPassword2" type="password" class="form-control" />
                <span asp-validation-for="UserChangePassword2FADTO.NewPassword2" class="text-danger small"></span>
            </div>
            <div id="VerificationCode" class="mb-3">
                <label asp-for="UserChangePassword2FADTO.Code" class="form-label"></label>
                <input asp-for="UserChangePassword2FADTO.Code" class="form-control" />
                <span asp-validation-for="UserChangePassword2FADTO.Code" class="text-danger small"></span>
            </div>
            <hr class="mt-4 mb-3 border-secondary">
            <div id="login2F1" class="d-grid">
                <button id="Login2F1Btn" type="button" class="btn btn-primary">Bejelentkezés</button>
            </div>
            <div id="login2F2" class="d-grid">
                <button id="Login2F2Btn" type="button" class="btn btn-primary">Megerősítés</button>
            </div>
        </form>
    </div>
    
    <!-- Message Modal -->
    <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalLabel">Üzenet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button>
                </div>
                <div class="modal-body" id="messageModalBody">
                    Ez egy információs üzenet.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="messageModalOkBtn" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#VerificationCode').hide();
            $('#login2F2').hide();
            $('#Login2F2Btn').hide();
            
            $('#UserChangePassword2FADTO_UserName').attr('readonly', true);

            $('#Login2F1Btn').on('click', function () {
                // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
                $('#errorMessageContainer').hide().text('');
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const userName = $('#UserChangePassword2FADTO_UserName').val();
                const password = $('#UserChangePassword2FADTO_OldPassword').val();
               
                $.ajax({
                   url: '/Account/ChangePassword?handler=Login2F1',
                   type: 'POST',
                   headers: {
                           'X-CSRF-TOKEN': csrfToken,
                           'Content-Type': 'application/json'
                   },
                   contentType: 'application/json',
                   data: JSON.stringify({
                       UserName: userName,
                       Password: password
                   }),
                   success: function (result) {
                       if (result.success) {
                           $('#login2F1').hide();
                           $('#Login2F1Btn').hide();
                           $('#VerificationCode').show();
                           $('#login2F2').show();
                           $('#Login2F2Btn').show();
                           $('#UserChangePassword2FADTO_Token2FA').val(result.data)
                       } else {
                           $('#errorMessageContainer').text('Hibás felhasználónév vagy jelszó!').show();
                               // $('#Login2F1Btn, #Login2F2Btn')
                               //  .prop('disabled', false)
                               //  .removeAttr('disabled')
                               //  .removeClass('disabled');
                       }
                   },
                   error: function () {
                       $('#errorMessageContainer').text('Hiba történt a kérés során.').show();
                           // $('#Login2F1Btn, #Login2F2Btn')
                           //  .prop('disabled', false)
                           //  .removeAttr('disabled')
                           //  .removeClass('disabled');
                   }
               });

            });

            $('#Login2F2Btn').on('click', function () {
                // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
                $('#errorMessageContainer').hide().text('');
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                const userName = $('#UserChangePassword2FADTO_UserName').val();
                const password = $('#UserChangePassword2FADTO_OldPassword').val();
                const newpassword1 = $('#UserChangePassword2FADTO_NewPassword1').val();
                const newpassword2 = $('#UserChangePassword2FADTO_NewPassword2').val();
                const code = $('#UserChangePassword2FADTO_Code').val();
                const token2FA = $('#UserChangePassword2FADTO_Token2FA').val();

               $.ajax({
                   url: '/Account/ChangePassword?handler=Login2F2',
                   type: 'POST',
                   headers: {
                           'X-CSRF-TOKEN': csrfToken,
                           'Content-Type': 'application/json'
                   },
                   contentType: 'application/json',
                   data: JSON.stringify({
                       UserId: 0,
                       UserName: userName,
                       OldPassword: password,
                       NewPassword1: newpassword1,
                       NewPassword2: newpassword2,
                       Code: code,
                       Token2FA: token2FA
                   }),
                   success: function (result) {
                       if (result.success) {
                           showMessageModal({
                                title: 'Információ',
                                message: 'A jelszó módosítása sikerült!',
                                okText: 'Értettem',
                                redirectUrl: '/Index'
                            });
                       } else {
                           $('#errorMessageContainer').text('Hibás felhasználónév vagy jelszó!').show();
                               // $('#Login2F1Btn, #Login2F2Btn')
                               //  .prop('disabled', false)
                               //  .removeAttr('disabled')
                               //  .removeClass('disabled');
                       }
                   },
                   error: function (xhr) {
                        console.log(xhr.status);
                        console.log(xhr.responseText);
                        $('#errorMessageContainer').text('Hiba történt a kérés során.').show();
                            // $('#Login2F1Btn, #Login2F2Btn')
                            // .prop('disabled', false)
                            // .removeAttr('disabled')
                            // .removeClass('disabled');
                   }
               });
            });

            $('input').on('input', function () {
                $('#errorMessageContainer').hide().text('');
            });
        });
    </script>

    <partial name="_ValidationScriptsPartial" />
</body>
</html>



