lottery/website/Views/Account/Login.cshtml

@{
    ViewData["Title"] = "Login";
    Layout = "~/Views/Shared/_NothingLayout.cshtml";
}

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;


@model AccountLogin_ViewModel
<style>
    input {
        font-size: 2em;
    }

        input:placeholder-shown {
            font-size: 1em !important;
        }
</style>

@{
    if(Model.message != null)
    {
        <script>
            toastr.error('@Model.message');
        </script>
    }
}

<div class="app-content content">
    @{
        //if (Model.step == Constants.LOGIN_ENTER_OTP)
        //{
        //    <div class="card-title text-center ">
        //        <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
        //            @await Component.InvokeAsync("SmallHeader", new { title = @Lang.confirm_otp})
        //        </div>
        //    </div>
        //}
    }

    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 align-items-center justify-content-center">
                    <div class="">


                        <div class="lottery-msisdn-box-container">

                            @{
                                if (Model.step == Constants.LOGIN_ENTER_MSISDN)
                                {
                                    <style>
                                        input {
                                            font-size: 16px;
                                        }

                                        input[type="text"]:focus,
                                        input[type="number"]:focus,
                                        input[type="email"]:focus,
                                        input[type="tel"]:focus,
                                        input[type="password"]:focus {
                                            font-size: 16px;
                                            }
                                    </style>
                                    <div class="card-header border-0 card-box">
                                        <div class="card-title text-center ">
                                            <div>
                                                <div style="    margin-top: 50px;">
                                                    <img class="logo-app logo-start" src="~/img/Group 83968 (1).png" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <fieldset class="form-group position-relative has-icon-left lottery-msisdn-container" style="    margin: 100px 30px 20px 30px;">
                                        <input type="number" class="data-input-box form-control lottery-msisdn-input" id="phonenumber" style="border-radius: 5px;    padding-left: calc(4.75rem + 2px)"
                                           placeholder="@Lang.enter_phone_number" name="phonenumber" required>

                                        <div class="form-control-position lottery-msisdn-box">
                                            <a href="#" class="">+509</a>
                                        </div>
                                    </fieldset>

                                }
                            }
                            @{
                                if (Model.step == Constants.LOGIN_ENTER_OTP)
                                {

                                    <div class="lottery-des-container">
                                        <h2>@Lang.verify_otp</h2>
                                        <h4>@Lang.enter_otp_to_login</h4>
                                    </div>
                                    <style>
                                        input[type="text"]:focus,
                                        input[type="number"]:focus,
                                        input[type="email"]:focus,
                                        input[type="tel"]:focus,
                                        input[type="password"]:focus {
                                            font-size: 25px;
                                        }

                                        [placeholder]:focus::-webkit-input-placeholder {
                                            transition: opacity 0.5s 0.0s ease;
                                            opacity: 0;
                                        }
                                    </style>
                                    <div class="lottery-otp-container" style="    margin: 30px;  margin-right: 30px;">
                                        <form action="/verify-otp" method="POST">
                                            <input class="lottery-otp-box otp-box-0" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
                                            <input class="lottery-otp-box otp-box-1" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
                                            <input class="lottery-otp-box otp-box-2" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
                                            <input class="lottery-otp-box otp-box-3" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
                                        </form>
                                    </div>
                                    //<input type="text"
                                    //   inputmode="numeric"
                                    //   autocomplete="one-time-code"
                                    //   pattern="\d{6}"
                                    //   required>
                                    <script>
                                        var container = document.getElementsByClassName("lottery-otp-container")[0];
                                        container.onkeyup = function(e) {
                                            var target = e.srcElement;
                                            var maxLength = parseInt(target.attributes["maxlength"].value, 10);
                                            var myLength = target.value.length;
                                            if (myLength >= maxLength) {
                                                var next = target;
                                                while (next = next.nextElementSibling) {
                                                    if (next == null)
                                                        break;
                                                    if (next.tagName.toLowerCase() == "input") {
                                                        next.focus();
                                                        break;
                                                    }
                                                }
                                            }
                                        }


                                          $(document).ready(function(){
                                            $('body').on('keyup', 'input.lottery-otp-box', function(e){
                                              var inputs = $('input.lottery-otp-box');

                                              if(e.keyCode == 8){
                                                var index = inputs.index(this);
                                                if (index != 0)
                                                    inputs.eq(index - 1).val('').focus();
                                              }
                                              else{
                                              if($(this).val().length === this.size){
                                                inputs.eq(inputs.index(this) + 1).focus();
                                              }
                                              }
                                            });

                                          });


                                        if ('OTPCredential' in window) {
                                            window.addEventListener('DOMContentLoaded', e => {
                                            //const input = document.querySelector('input[autocomplete="one-time-code"]');
                                            if (!input) return;
                                            // Cancel the Web OTP API if the form is submitted manually.
                                            const ac = new AbortController();
                                            const form = input.closest('form');
                                            if (form) {
                                                form.addEventListener('submit', e => {
                                                // Cancel the Web OTP API.
                                                ac.abort();
                                                });
                                            }
                                            // Invoke the Web OTP API
                                            navigator.credentials.get({
                                                otp: { transport:['sms'] },
                                                signal: ac.signal
                                            }).then(otp => {
                                                //input.value = otp.code;
                                                console.log("otp.code: " + otp.code);
                                                const myArray = text.split("");
                                                $(".otp-box-0").val(myArray[0]);
                                                $(".otp-box-1").val(myArray[1]);
                                                $(".otp-box-2").val(myArray[2]);
                                                $(".otp-box-3").val(myArray[3]);
                                                // Automatically submit the form when an OTP is obtained.
                                                if (form) form.submit();
                                            }).catch(err => {
                                                console.log(err);
                                            });
                                            });
                                        }
                                    </script>
                                }
                            }
                            <span class="text-danger"></span>

                            <div style="margin: 10px 30px;">
                                <button type="submit" class="btn btn-outline-primary btn-block login-button login-button-action"
                                        onclick="@(Model.step == Constants.LOGIN_ENTER_MSISDN ? "loginRedirect_Click()" : "loginButtonAction_Click()")">
                                    <i class="ft-unlock"></i>@(Model.step == null ? Lang.get_otp1.ToUpper() : Lang.confirm.ToUpper())
                                </button>
                            </div>

                            @{
                                if (Model.step == Constants.LOGIN_ENTER_OTP)
                                {
                                    <div style="text-align: center; margin-top: 30px;">
                                        <h4 style="color:black;">@Lang.not_get_otp <a style="font-weight:900;" onclick="resentOTP_Action()">@Lang.resend_otp</a></h4>
                                    </div>
                                }
                                else
                                {
                                    <div>
                                        @await Component.InvokeAsync("FooterOutside", new { })
                                    </div>
                                }
                            }


                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

@*<script type="text/javascript">
    function createAccountClick(message) {
    toastr.options.timeOut = 5000; // 1.5s
    toastr.error(message);
    }
    </script>*@