add otp

bitfoundation · Sep 7, 2024 · fd0030b · fd0030b
1 parent e904862
commit fd0030b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/...Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor b/...Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
@@ -21,7 +21,9 @@
 
         @if (requiresTwoFactor is false)
         {
-            <br /><br />
+            <br />
+
+            <br />
             <BitStack Horizontal Gap="1.5rem">
                 <BitButton IsLoading="isWaiting"
                            Size="BitSize.Small"
@@ -113,20 +115,23 @@
                 <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Otp)]">
                     <br />
                     <div class="form-input-container">
-                        <BitTextField @bind-Value="model.Otp"
-                                      CanRevealPassword="true"
-                                      Type="BitTextFieldType.Password"
-                                      Label="@Localizer[nameof(AppStrings.Otp)]"
-                                      AutoComplete="@BitAutoCompleteValue.OneTimeCode"
-                                      Placeholder="@Localizer[nameof(AppStrings.OtpPlaceholder)]" />
+                        @* <BitTextField @bind-Value="model.Otp"
+                    CanRevealPassword="true"
+                    Type="BitTextFieldType.Password"
+                    Label="@Localizer[nameof(AppStrings.Otp)]"
+                    AutoComplete="@BitAutoCompleteValue.OneTimeCode"
+                    Placeholder="@Localizer[nameof(AppStrings.OtpPlaceholder)]" /> *@
+                        <BitText>@Localizer[nameof(AppStrings.Otp)]</BitText>
+                        <BitOtpInput @ref="otpInputRef"
+                                     @bind-Value="model.Otp" Length="6"
+                                     InputType="BitOtpInputType.Password" />
                         <ValidationMessage For="@(() => model.Otp)" />
                     </div>
                     <div class="form-input-container">
                         <BitButton IsLoading="isSendingOtp"
+                                   Variant="BitVariant.Outline"
                                    OnClick="WrapHandled(SendOtp)"
-                                   Style="margin-top:4px"
-                                   ButtonType="BitButtonType.Button"
-                                   Variant="BitVariant.Outline">
+                                   ButtonType="BitButtonType.Button">
                             @Localizer[nameof(AppStrings.SendOtpButtonText)]
                         </BitButton>
                     </div>

diff --git a/...lerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs b/...lerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.cs
@@ -14,6 +14,7 @@ public partial class SignInPage
 
     private string? message;
     private BitColor messageColor;
+    private BitOtpInput otpInputRef = default!;
     private ElementReference messageRef = default!;
 
 
@@ -128,6 +129,7 @@ private async Task SendOtp()
         finally
         {
             isSendingOtp = false;
+            await otpInputRef.FocusAsync();
         }
     }