@model BTCPayServer.U2F.Models.AddU2FDeviceViewModel
@{
    ViewData.SetActivePageAndTitle(ManageNavPages.U2F, "Add U2F device");
}

<form asp-action="AddU2FDevice" method="post" id="registerForm" class="hidden">

    <input type="hidden" asp-for="AppId"/>
    <input type="hidden" asp-for="Version"/>
    <input type="hidden" asp-for="Challenge"/>
    <input type="hidden" asp-for="Name"/>
    <input type="hidden" asp-for="DeviceResponse"/>
</form>


<div class="card">
    <div class="card-header">
        <h4 style="margin-bottom:0;">
            <span class="fa fa-spinner fa-spin" style="margin-right:.25rem;"></span>
            Registering U2F Device
        </h4>
    </div>

    <div class="card-body">
        <p>Insert your U2F device or a hardware wallet into your computer's USB port. If it has a button, tap on it.</p>

        <a id="error-response" class="text-danger" href="javascript:window.location.reload()"> </a>
    </div>

    <div class="card-footer">
        <a class="btn btn-secondary" asp-action="U2FAuthentication" id="btn-back">Abort</a>
    </div>
</div>

@section Scripts {

    <script src="~/vendor/u2f/u2f-api-1.1.js" asp-append-version="true"></script>
    <script type="text/javascript">
        var errorMap = {
            1: 'Unknown error, try again',
            2: "Bad request error, try again",
            3: "This key isn't supported, please try another one",
            4: 'The device is already registered, please login',
            5: 'Authentication timed out. Please reload to try again.'
        };

        setTimeout(function() {
                var request = { "challenge": @Safe.Json(Model.Challenge), "version": @Safe.Json(Model.Version), "appId": @Safe.Json(Model.AppId) };
                var registerRequests = [{version: request.version, challenge: request.challenge}];
                u2f.register(request.appId, registerRequests, [],
                    function(data) {
                        if (data.errorCode) {
                            $("#error-response").text(errorMap[data.errorCode]);
                            return;
                        }
                        $('#DeviceResponse').val(JSON.stringify(data));
                        $('#registerForm').submit();

                        return false;
                    });
            },
            1000);
    </script>
}