@{
    ViewBag.Title = "Sign In";
    Layout = "~/Views/Shared/_SignInLayout.cshtml";
}
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/DigitalPersona/es6-shim.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/DigitalPersona/websdk.client.bundle.min.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/DigitalPersona/fingerprint.sdk.min.js"></script>
<script type="text/javascript" src="@Model.AfxCdnPath/js/plugin/DigitalPersona/DigitalPersonaHelpers.js"></script>
<style>
    .login-box {
        top: 20% !important;
    }
</style>

<script type="text/javascript">
    function ViewModel() { }
</script>

<div id="signIn">
    <section class="portlet grid_4" style="border-radius: 25px;background-color:white;min-width:600px !important; max-width:600px !important; height:525px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);padding-left: 20px;">
        <header>
            <img src="@Model.AfxCdnPath/img/crest_deptransport.png" style=" display: block; margin-left: auto; margin-right: auto;" />
        </header>
        <br />
        <div id="introContainer">   
                <div>
                    <br />
                    If you would like to scan your fingerprint now, <a style="color: #1269DB;cursor:pointer;" data-bind="click: ShowBiometricControl">click here</a>.
                </div>
        </div>

        <div data-bind="visible:CaptureStatus()=='initialising'">
            Initialising the fingerprint reader.
        </div>

        <div data-bind="visible:CaptureStatus()=='noreaderfound'">
            No fingerprint reader could be found. Make sure the reader is installed and connected, then try again.
            <br />
            <div id="fingersScannedContainer" style="margin-top:20px;">
                <img src="@Model.AfxCdnPath/img/icons/finger_red.png" width="96" height="96" style="padding-right:10px;" />
                <img src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
                <img src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
                <img src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
            </div>
        </div>

        <div data-bind="visible:CaptureStatus()=='selectreader'">
            <select id="fingerprintReaderDropdown" data-bind="options: AvailableFingerprintReaders, optionsCaption: 'Please select the fingerprint reader to use', value: SelectedFingerprintReader"></select>
        </div>

        <div data-bind="visible:CaptureStatus()=='readfingerprint'">
            Using a fingerprint scanner, scan <b>the same</b> finger 4 times.
            <br />
            <div id="fingerPrintResultContainer"></div>
            <div id="fingersScannedContainer" style="margin-top:20px;">
                <img id="fingerIcon1" src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
                <img id="fingerIcon2" src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
                <img id="fingerIcon3" src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
                <img id="fingerIcon4" src="@Model.AfxCdnPath/img/icons/finger_gray.png" width="96" height="96" style="padding-right:10px;" />
            </div>
            <div id="readerStatus"></div>
        </div>
        <br/>
        <button class="btn btn-primary" data-bind="click: $root.SaveFingerTemplate, visible: CanSave">Save Finger Print Template</button><br />
        <span style="font-size:0.75em;">Please click <a style="color: #1269DB;cursor:pointer;" href="@Model.AfxCdnPath/downloads/FingerPrintReader.zip" download>here</a> to download fingerprint reader setup install if you have not installed it already.</span>
    </section>
</div>

<script type="text/javascript">
    /*viewmodel values*/
    $.extend(ViewModel.prototype, {
        FingerPrintValues: ko.observableArray(),
        CanSave: ko.observable(false),
        AvailableFingerprintReaders: ko.observableArray(),
        FingerprintReaderStatus: ko.observable(),
        SelectedFingerprintReader: ko.observable(),
        CaptureStatus: ko.observable(''),
        ScanCount: ko.observable(0),
        Finger1Scanned: ko.observable(false),
        Finger2Scanned: ko.observable(false),
        Finger3Scanned: ko.observable(false),
        Finger4Scanned: ko.observable(false),
        ShowBiometricControl: ko.observable(true),
    });
</script>


<script>
    @Html.Raw("$.extend(ViewModel" + ".prototype,")
    {
        ShowBiometricControl: function ()
        {
            $("#introContainer").hide();
            $("#fingerPrintCapture").show();

            viewModel.CaptureStatus('initialising');
            viewModel.FingerprintReaderStatus('Reading device information');

            var allReaders = dpDeviceHelper.getInfo();
            allReaders.then(function (readers) {
                viewModel.AvailableFingerprintReaders([]);
                var readerCount = 0;
                $.each(readers, function (i, reader) {
                    viewModel.AvailableFingerprintReaders.push(reader);
                    readerCount++;
                });

                if (readerCount == 0) {
                    viewModel.CaptureStatus('noreaderfound')
                }
                else if (readerCount == 1)
                {
                    viewModel.SelectedFingerprintReader(viewModel.AvailableFingerprintReaders()[0]);
                    viewModel.CaptureStatus('readfingerprint');
                    dpDeviceHelper.startCapture(
                        viewModel.SelectedFingerprintReader(),
                        function () {
                            console.log('busy..');
                        },
                        function (error) {
                            console.log(error);
                        }
                        );
                }
                else if (readerCount > 1) {
                    viewModel.CaptureStatus('selectreader')
                }

            }, function (error) {
                alert(error.message);
            });


        },

        SaveFingerTemplate: function ()
        {
            var data = { fingerPrints: viewModel.FingerPrintValues(), token: '@Model.Token'};

            app.dataManager.post("Auth",
                'SaveFingerPrintTemplate', data,
                function (result) {
                    if (result != null) {
                        if (result.success) {
                            alert('Fingerprint saved successfully');
                            app.redirect(result.returnUrl);
                        }
                        else {
                            alert(result.ErrorMessage);
                        }
                    }
                }, null);
        },

        HandleFingerprint: function(fingerprint) {
            viewModel.FingerPrintValue(fingerprint);
            viewModel.CanSave(true);
        }
    });

    function showMessageCallback(message) {
        if (viewModel.CaptureStatus() != 'readfingerprint') {
            $("#readerStatus")[0].innerHTML = message;
        }
        else {
            switch (message)
            {
                case "onDeviceConnected":
                    $('#fingerIcon' + (viewModel.ScanCount() + 1)).attr('src', '@Model.AfxCdnPath/img/icons/finger_gray.png');
                    $("#readerStatus")[0].innerHTML = "Complete the first scan.";
                    break;
                case "onDeviceDisconnected":
                    $('#fingerIcon' + (viewModel.ScanCount() + 1)).attr('src', '@Model.AfxCdnPath/img/icons/finger_red.png');
                    $("#readerStatus")[0].innerHTML = "No fingerprint reader found.";
                    break;
                case "onSamplesAcquired":
                    $('#fingerIcon' + (viewModel.ScanCount() + 1)).attr('src', '@Model.AfxCdnPath/img/icons/finger_green.png');
                    break;
            }
        }
    }

    function sampleAcquiredCallback(format, s) {
        if (format != Fingerprint.SampleFormat.Intermediate) {
            alert("Invalid format received. The enrollment format must be Intermediate. Please contact your system administrator.");
            return;
        }

        viewModel.ScanCount(viewModel.ScanCount()+1);

        var samples = JSON.parse(s.samples);
        viewModel.FingerPrintValues.push(Fingerprint.b64UrlTo64(samples[0].Data));

        if (viewModel.ScanCount() == 1) {
            $("#readerStatus")[0].innerHTML = "Complete the second scan.";
        }
        else if (viewModel.ScanCount() == 2) {
            $("#readerStatus")[0].innerHTML = "Complete the third scan.";
        }
        else if (viewModel.ScanCount() == 3) {
            $("#readerStatus")[0].innerHTML = "Complete the fourth scan.";
        }
        else if (viewModel.ScanCount() == 4) {
            $("#readerStatus")[0].innerHTML = "Done. Click on the 'Save Finger Print Template' button below.";
            viewModel.CanSave(true);
        }

        if (viewModel.ScanCount() == 4) {
            viewModel.CanSave(true);
        }

    }
</script>

<script type="text/javascript">

    var viewModel = new ViewModel();

    $().ready(function () {
        @if (ViewBag.FingerprintAuthenticationEnabled != null && ViewBag.FingerprintAuthenticationEnabled)
        {
            <text>
        dpDeviceHelper = new FingerprintSdkHelper(Fingerprint.SampleFormat.Intermediate, showMessageCallback, sampleAcquiredCallback);
            </text>
        }

        $('#signInError').hide();
        $('#fingerprintSignInError').hide();

            var mainDiv = $("#signIn");

            ko.cleanNode(mainDiv[0]);
            ko.applyBindings(viewModel, mainDiv[0]);

            var target = ".login-box";
        $("input:checkbox,select,input:file", target).uniform();

        $("#introContainer").hide();
        $("#fingerPrintCapture").show();

        viewModel.CaptureStatus('initialising');
        viewModel.FingerprintReaderStatus('Reading device information');

        var allReaders = dpDeviceHelper.getInfo();
        allReaders.then(function (readers) {
            viewModel.AvailableFingerprintReaders([]);
            var readerCount = 0;
            $.each(readers, function (i, reader) {
                viewModel.AvailableFingerprintReaders.push(reader);
                readerCount++;
            });

            if (readerCount == 0) {
                viewModel.CaptureStatus('noreaderfound')
            }
            else if (readerCount == 1) {
                viewModel.SelectedFingerprintReader(viewModel.AvailableFingerprintReaders()[0]);
                viewModel.CaptureStatus('readfingerprint');
                dpDeviceHelper.startCapture(
                    viewModel.SelectedFingerprintReader(),
                    function () {
                        console.log('busy..');
                    },
                    function (error) {
                        console.log(error);
                    }
                );
            }
            else if (readerCount > 1) {
                viewModel.CaptureStatus('selectreader')
            }

        }, function (error) {
            alert(error.message);
        });
        });
</script>