Fluent otp Textfield

[madcoda9000]

As 2fa Authentication is used in most Webapplications it would be grate to have a FluentUi OTP Input box.

I am thinking of something like that:

Currently i build this using css, javascript and seperate input elements.

[vnbaaij]

Love how this looks! But I think it is something that is very dependent on style and preference how this should look. Think your approach on building it yourself is the right way.

[madcoda9000]

Thank you for the flowers :-)

I understand your position. I would suggest to provide only support for the DesignSystemProvide. I make use of that too.

The Box should only have the following properties:

1. support only digits
2. should have a property for the amount of fields
3. jump automatically to the nex field and back by Keypooard navigation
4. should support the appearance property
5. shlould have a value property that is a combination of all fields

I did it like that:

MfAEnforce.razor:

@page "/MFAEnforce"
@page "/MFAEnforce/{action}"
@layout AuthLayout
@attribute [Microsoft.AspNetCore.Authorization.Authorize];

<style>
    .input {
    width: 30px;
    border: none;
    border-bottom: 3px solid var(--neutral-base-color);
    margin: 0 10px;
    text-align: center;
    font-size: 26px;
    cursor: not-allowed;
    pointer-events: none;
}
  
.input:focus {
    border-bottom: 3px solid var(--accent-base-color);
    outline: none;
}
  
.input:nth-child(1) {
    cursor: pointer;
    pointer-events: all;
}
</style>

<AuthorizeView>
    <NotAuthorized>
        @{
            _navmgr.NavigateTo("/Login");
        }
    </NotAuthorized>
    <Authorized>
<EditForm Model="@faModel" OnValidSubmit="VerifyOtp" Context="frmContext">
                            <span style="margin-bottom: 0%; font-size:1.5rem;font-weight:600;line-height: 1.75rem;">@headline</span><br>
                            <sub>please setup 2fa authentication now...</sub>
                            <div style="display: flex !important;margin-top:20px;">
                                <div style="min-width:350px;max-width:350px;">
                                    <div style="padding-bottom: 5px;margin-top:20px;"><b>Die Einrichtung erfolgt in vier
                                            Schritten.</b></div>
                                    <ol style="padding: 12px !important;">
                                        <li>Installiere eine mobile OTP Anwendung wie Google authenticator <a rel="noreferrer"
                                                href="https://apps.apple.com/de/app/google-authenticator/id388497605"
                                                target="_blank" class="link-secondary"><FluentIcon Value="@(Icon.FromImageUrl("images/apple.png"))" Width="16px"/></a>&nbsp;<a
                                                rel="noreferrer"
                                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=de&amp;gl=US&amp;pli=1"
                                                target="_blank" class="link-secondary"><FluentIcon Value="@(Icon.FromImageUrl("images/android.png"))" Width="16px"/></a>
                                            oder Microsoft authenticator <a rel="noreferrer"
                                                href="https://apps.apple.com/de/app/microsoft-authenticator/id983156458"
                                                target="_blank" class="link-secondary"><FluentIcon Value="@(Icon.FromImageUrl("images/apple.png"))" Width="16px"/></a>&nbsp;<a
                                                rel="noreferrer"
                                                href="https://play.google.com/store/search?q=microsoft+authentifikator-app&amp;c=apps&amp;hl=de&amp;gl=US"
                                                target="_blank" class="link-secondary"><FluentIcon Value="@(Icon.FromImageUrl("images/android.png"))" Width="16px"/></a> auf deinem Mobiltelefon.
                                        </li>
                                        <li>Scanne den Barcode mit der installierten App (oder gibt den Code manuell ein).</li>
                                        <li>Gib den Verifizierungs Code ein, der Dir von Deiner App angezeigt wird und klicke
                                            auf "2fa Einrichtung abschließen".</li>
                                            <li>
                                                Klicke auf den Button "OTP Code verifizieren."
                                            </li>
                                    </ol>
                                </div>
<div style="text-align: center !important;">
                                    <img alt="" src="@QRByte" width="250" class="mb-5" />
                                    <span>@faModel.key</span>
                                    <div style="display: flex;justify-content: center;margin-top:15px;">
                                        <div id="otpinputs" class="inputs">
                                            <input id="startOtpInput" class="input" type="text" 
                                                inputmode="numeric" maxlength="1" @bind-value="@otp1" />
                                            <input class="input" type="text" @bind-value="@otp2"
                                                inputmode="numeric" maxlength="1" />
                                            <input class="input" type="text" @bind-value="@otp3"
                                                inputmode="numeric" maxlength="1" />
                                            <input class="input" type="text" @bind-value="@otp4"
                                                inputmode="numeric" maxlength="1" />
                                            <input class="input" type="text" @bind-value="@otp5"
                                                inputmode="numeric" maxlength="1" />
                                            <input class="input" type="text" @bind-value="@otp6"
                                                inputmode="numeric" maxlength="1" />
                                        </div>
                                    </div>
                                    @{
                                        if(hasError) {
                                             <FluentLabel style="margin-top:10px;" Typo="Typography.Body" Color="Color.Error">@errMsg</FluentLabel>
                                        }
                                    }
                                </div>
<div class="form-signin-buttonContainer">
                                @if(!isEnforced) {
                                    <FluentButton Appearance="Appearance.Filled" style="margin-top:10px;margin-right: 15px;" OnClick="@GoCancel">Cancel</FluentButton>
                                }
                                <FluentButton @onsubmit="@VerifyOtp" Disabled=@(btnIsDisabled) Appearance="Appearance.Accent" Type="@ButtonType.Submit" id="btnfa" style="margin-right: 25px;margin-top:10px;">
                                    @if (ShowActivityVisible==true && btnIsDisabled==true)
                                    {
                                    <FluentProgressRing class="btnLoginProgress" style="width: 16px; height: 16px;stroke:#fff;"  Slot="start" ></FluentProgressRing>@btnText
                                    } else {
                                        @btnText
                                    }    
                                    </FluentButton>
                            </div>
                        </EditForm>
</Authorized>

MFAEnforce.razor.cs:

using Blazored.LocalStorage;
using GroupVaultClient.Helper;
using GroupVaultClient.Shared;
using GroupVaultClient.Models.FormModels;
using GroupVaultClient.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using GroupVaultClient.Models.Applications;
using QRCoder;
using System.Runtime.CompilerServices;
using System.Drawing;
using System.Drawing.Imaging;
using Newtonsoft.Json;
using Blazored.SessionStorage;

namespace GroupVaultClient.Pages
{
    public partial class MFAEnforce
    {
        [Parameter]
        public string action { get; set; }

        [CascadingParameter]
        public ErrorWrapper? Error { get; set; }

        /// <summary>
        /// inject authenticationprovider
        /// </summary>
        [Inject]
        public required AppAuthenticationStateProvider _authProvider { get; init; }
        /// <summary>
        /// inject navigationmanager
        /// </summary>
        [Inject]
        public required NavigationManager _navmgr { get; init; }
        /// <summary>
        /// inject js runtime
        /// </summary>
        [Inject]
        public required IJSRuntime _jsRuntime { get; init; }
        /// <summary>
        /// inject local storage service
        /// </summary>
        [Inject]
        public required ILocalStorageService LocalSorage { get; init; }
        /// <summary>
        /// inject users service
        /// </summary>
        [Inject]
        public required IUsersService _usersService { get; init; }
        /// <summary>
        /// inject session storage service
        /// </summary>
        [Inject]
        public required ISessionStorageService SessionStorage { get; init; }

        /// <summary>
        /// dark mode property
        /// </summary>
        private bool darkMode { get; set; } = false;
        /// <summary>
        /// property for form model
        /// </summary>
        private MfaSetupModel? faModel { get; set; }
        /// <summary>
        /// property fro qr code image
        /// </summary>
        public string QRByte = "";
        private bool hasError = false;
        private string errMsg = "";

        public string otp1 { get; set; } = string.Empty;
        public string otp2 { get; set; } = string.Empty;
        public string otp3 { get; set; } = string.Empty;
        public string otp4 { get; set; } = string.Empty;
        public string otp5 { get; set; } = string.Empty;
        public string otp6 { get; set; } = string.Empty;

        private string btnText = "Verify my OTP code!";
        private bool btnIsDisabled = false;
        private bool ShowActivityVisible = false;
        private string headline {get; set;} = string.Empty;
        private bool isEnforced {get;set;} = false;


        /// <summary>
        /// Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.
        /// </summary>
        /// <returns></returns>
        protected override async Task OnParametersSetAsync()
        {
            // check if darkmode is enabled
            string dm = await LocalSorage.GetItemAsync<string>("darkMode");
            if (dm != null)
            {
                if (dm == "true")
                {
                    darkMode = true;
                }
                else
                {
                    darkMode = false;
                }
            }      

            if(!String.IsNullOrEmpty(action)) {
                if(action.ToLower()=="setup") {
                    headline = "Configure 2fa Authentication";
                    isEnforced = false;
                }
            } else {
                isEnforced = true;
                headline = "2fa Authentication enforced!";
            }
            await _authProvider.GetAuthenticationStateAsync();
        }

        protected override async Task OnAfterRenderAsync(bool firstrender)
        {

            if (firstrender)
            {
                if (faModel == null)
                {
                    try
                    {
                        var res = await _usersService.GetMfaSetup(_authProvider.suser!.Id!);
                        if (res.Success && res.Data != null)
                        {
                            faModel = res.Data;
                            GenerateQrCode(faModel.url);
                        }
                        else
                        {
                            throw new Exception(res.Message);
                        }
                        await _jsRuntime.InvokeVoidAsync("prepareOtpInputs");
                    }
                    catch (Exception ex)
                    {
                        ExceptionInfo ei = new ExceptionInfo
                        {
                            source = "MFAEnforce.razor | OnAfterRenderAsync",
                            type = ex.GetType().ToString(),
                            message = ex.Message,
                        };
                        if (ex.StackTrace != null) { ei.stackTrace = ex.StackTrace; }
                        Error!.ProcessError(ei);
                    }
                }
            }
        }

        /// <summary>
        /// method to generate a base64 barcode image from an string
        /// </summary>
        /// <param name="QrSourceString"></param>
        private void GenerateQrCode(string QrSourceString)
        {
            try
            {
                if (!string.IsNullOrEmpty(QrSourceString))
                {
                    using MemoryStream ms = new();
                    QRCodeGenerator qrCodeGenerate = new();
                    QRCodeData qrCodeData = qrCodeGenerate.CreateQrCode(QrSourceString, QRCodeGenerator.ECCLevel.L);
                    PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
                    byte[] qrCodeAsPngByteArr = qrCode.GetGraphic(20);
                    string base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
                    this.QRByte = string.Format("data:image/png;base64,{0}", base64);
                    StateHasChanged();
                }
                else
                {
                    throw new MissingFieldException("No QRCode input Data! Field QrSourceString should not be empty or null.");
                }
            }
            catch (Exception ex)
            {
                ExceptionInfo ei = new ExceptionInfo
                {
                    source = "MFAEnforce.razor | GenerateQrCode",
                    type = ex.GetType().ToString(),
                    message = ex.Message,
                };
                if (ex.StackTrace != null) { ei.stackTrace = ex.ToString(); }
                Error!.ProcessError(ei);
            }
        }

        private async Task VerifyOtp()
        {
            try
            {
                btnText = "verifying...";
                ShowActivityVisible = true;
                btnIsDisabled = true;
                string otp = otp1 + otp2 + otp3 + otp4 + otp5 + otp6;
                if (otp.Length < 6 || !IsDigitsOnly(otp))
                {
                    hasError = true;
                    errMsg = "Please provide a valid otp code.";
                    btnText = "Verify my OTP code!";
                    ShowActivityVisible = false;
                    btnIsDisabled = false;
                }
                else
                {
                    if (faModel != null)
                    {
                        faModel.otp = otp;
                        var res = await _usersService.SetMfaSetup(faModel);
                        if (res.Success)
                        {
                            await SessionStorage.SetItemAsync("fprint", res.Data);
                            await _authProvider.RefreshToken();
                            await _authProvider.GetAuthenticationStateAsync();
                            _navmgr.NavigateTo("/");
                        }
                        else
                        {
                            hasError = true;
                            errMsg = res.Message!;
                            btnText = "Verify my OTP code!";
                            ShowActivityVisible = false;
                            btnIsDisabled = false;
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                ExceptionInfo ei = new ExceptionInfo
                {
                    source = "MFAEnforce.razor | VerifyOtp",
                    type = ex.GetType().ToString(),
                    message = ex.Message,
                };
                if (ex.StackTrace != null) { ei.stackTrace = ex.ToString(); }
                Error!.ProcessError(ei);
            }
        }

        /// <summary>
        /// method to navigate bavck to home or login. Depending on user is logged in or not
        /// </summary>
        private void GoCancel()
        {
            _navmgr.NavigateTo("/");
        }

        private bool IsDigitsOnly(string str)
        {
            foreach (char c in str)
            {
                if (c < '0' || c > '9')
                    return false;
            }

            return true;
        }
    }

}

app.js:

function prepareOtpInputs() {
    const inputs = document.getElementById("otpinputs");
    const startOtpInput = document.getElementById("startOtpInput");

    inputs.addEventListener("input", function (e) {
        const target = e.target;
        const val = target.value;      

        if (isNaN(val)) {
            target.value = "";
            return;
        }

        if (val != "") {
            const next = target.nextElementSibling;
            if (next) {
                next.focus();
            } else {
                var btn = document.getElementById("btnfa");
                btn.focus();
            }
        }
    });

    inputs.addEventListener("keyup", function (e) {
        const target = e.target;
        const key = e.key.toLowerCase();
        //console.log(key); 
        if (key == "backspace" || key == "delete") {
            target.value = "";
            const prev = target.previousElementSibling;
            if (prev) {
                prev.focus();
            }
            return;
        } 
    });
    if(startOtpInput) {
       startOtpInput.focus(); 
    }
    
}

so the fields are respecting the fluid design:

thats it...