feat(ITotpService): add ITotpService interface

BootstrapBlazor.sln

@@ -78,6 +78,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tools", "tools", "{9BAF50BE
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "UnitTest.Benchmarks", "tools\Benchmarks\UnitTest.Benchmarks.csproj", "{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Authenticator", "..\BootstrapBlazor.Extensions\src\components\BootstrapBlazor.Authenticator\BootstrapBlazor.Authenticator.csproj", "{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -112,6 +114,10 @@ Global
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1}.Release|Any CPU.Build.0 = Release|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -128,6 +134,7 @@ Global
 		{D8AEAFE7-10AF-4A5B-BC67-FE740A2CA1DF} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 		{C075C6C8-B9CB-4AC0-9BDF-B2002B4AB99C} = {EA765165-0542-41C8-93F2-85787FEDEDFF}
 		{3E6D8D0E-5A36-4CFD-8612-7D64E3FFE7B1} = {9BAF50BE-141D-4429-93A9-942F373D1F68}
+		{51641ADB-69FA-6DDF-F83F-FEA0C5AFFD88} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -78,6 +78,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <ProjectReference Include="..\..\..\BootstrapBlazor.Extensions\src\components\BootstrapBlazor.Authenticator\BootstrapBlazor.Authenticator.csproj" />
     <ProjectReference Include="..\BootstrapBlazor\BootstrapBlazor.csproj" />
   </ItemGroup>
 

src/BootstrapBlazor.Server/Components/Components/Pre.razor.js

@@ -110,7 +110,9 @@ export function dispose(id) {
     EventHandler.off(el, 'click', '.btn-minus');
 
     const { Pre } = window.BootstrapBlazor;
-    Pre.dispose(id, () => {
-        EventHandler.off(document, 'changed.bb.theme', updateTheme);
-    });
+    if (Pre) {
+        Pre.dispose(id, () => {
+            EventHandler.off(document, 'changed.bb.theme', updateTheme);
+        });
+    }
 }

src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor

@@ -0,0 +1,39 @@
+@page "/authenticator"
+
+<HeadContent>
+    <style>
+        .qrcode {
+            display: flex;
+            justify-content: center;
+        }
+
+        .progress {
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .opt-progress-label {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 0.75rem;
+            color: var(--bs-body-color);
+        }
+    </style>
+</HeadContent>
+
+<h3>@Localizer["Title"]</h3>
+
+<h4>@Localizer["SubTitle"]</h4>
+
+<PackageTips Name="BootstrapBlazor.Authenticator"></PackageTips>
+
+<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
+    <QRCode Content="@_content" Width="190" class="mb-3"></QRCode>
+    <OtpInput Value="@_code" class="text-center mb-3"></OtpInput>
+    <div class="position-relative">
+        <BootstrapBlazor.Components.Progress Value="@_progress" IsShowValue="false"></BootstrapBlazor.Components.Progress>
+        <span class="opt-progress-label">@_remain</span>
+    </div>
+</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Authenticators.razor.cs

@@ -0,0 +1,56 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Authenticators sample
+/// </summary>
+public partial class Authenticators
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Anchors>? Localizer { get; set; }
+
+    [Inject]
+    [NotNull]
+    private ITotpService? TotpService { get; set; }
+
+    private string _content = "";
+
+    private string? _code;
+
+    private double _progress = 0;
+
+    private int _remain = 0;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _content = TotpService.GenerateOtpUri();
+        _code = TotpService.Compute("OMM2LVLFX6QJHMYI");
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        await Task.Delay(1000);
+        _code = TotpService.Compute("OMM2LVLFX6QJHMYI");
+        _remain = TotpService.Instance.GetRemainingSeconds();
+        _progress = (30d - _remain) * 100 / 30d;
+        StateHasChanged();
+    }
+}

src/BootstrapBlazor.Server/Extensions/ServiceCollectionSharedExtensions.cs

@@ -30,6 +30,9 @@ public static IServiceCollection AddBootstrapBlazorServices(this IServiceCollect
         services.AddSingleton<MenuService>();
         services.AddScoped<FanControllerDataService>();
 
+        // 增加 Authenticator 服务
+        services.AddBootstrapBlazorAuthenticator();
+
         // 增加示例网站配置
         services.AddOptionsMonitor<WebsiteOptions>();
 

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4918,7 +4918,8 @@
     "UniverIcon": "Univer Icons",
     "Typed": "Typed",
     "UniverSheet": "UniverSheet",
-    "ShieldBadge": "ShieldBadge"
+    "ShieldBadge": "ShieldBadge",
+    "Authenticator": "Authenticator"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7091,5 +7092,9 @@
   "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
     "ToastOnReadyTitle": "Collaboration Notification",
     "ToastOnReadyContent": "After 4 seconds the table is updated by other writers to change the content"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Authenticators": {
+    "Title": "Authenticator",
+    "SubTitle": "An implementation TOTP RFC 6238 and HOTP RFC 4226 Authenticator service."
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4918,7 +4918,8 @@
     "UniverIcon": "Univer Icons",
     "Typed": "打字机效果 Typed",
     "UniverSheet": "表格组件 UniverSheet",
-    "ShieldBadge": "徽章组件 ShieldBadge"
+    "ShieldBadge": "徽章组件 ShieldBadge",
+    "Authenticator": "密码验证服务 Authenticator"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7091,5 +7092,9 @@
   "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet": {
     "ToastOnReadyTitle": "在线表格协作通知",
     "ToastOnReadyContent": "4 秒后表格更新其他写作人员更改内容"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Authenticators": {
+    "Title": "Authenticator 密码验证服务",
+    "SubTitle": "实现 TOTP RFC 6238 和 HOTP RFC 4226 认证器服务"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -228,7 +228,8 @@
     "watermark": "Watermarks",
     "typed": "Typeds",
     "univer-sheet": "UniverSheets",
-    "shield-badge": "ShieldBadges"
+    "shield-badge": "ShieldBadges",
+    "authenticator": "Authenticators"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -0,0 +1,12 @@
+@namespace BootstrapBlazor.Components
+@inherits ValidateBase<string>
+
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
+    @for (var index = 0; index < Digits; index++)
+    {
+        if (index < _values.Length)
+        {
+            <span class="@SpanClassString">@_values[index]</span>
+        }
+    }
+</div>

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -0,0 +1,44 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// OTP input component
+/// </summary>
+public partial class OtpInput
+{
+    /// <summary>
+    /// Gets or sets the length of the OTP input. Default is 6.
+    /// </summary>
+    [Parameter]
+    public int Digits { get; set; } = 6;
+
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter]
+    public OtpInputType Type { get; set; }
+
+    private string? ClassString => CssBuilder.Default("bb-opt-input")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? SpanClassString => CssBuilder.Default("bb-opt-span")
+        .AddClass(ValidCss)
+        .Build();
+
+    private char[] _values = [];
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        _values = Value?.ToCharArray() ?? [];
+    }
+}

src/BootstrapBlazor/Components/Input/OtpInput.razor.scss

@@ -0,0 +1,11 @@
+.bb-opt-span {
+    display: inline-block;
+    border: 1px solid var(--bs-border-color);
+    font-size: 3em;
+    padding: 0 .5em;
+    border-radius: var(--bs-border-radius);
+
+    &:not(:last-child) {
+        margin-right: .5rem;
+    }
+}

src/BootstrapBlazor/Enums/OtpInputType.cs

@@ -0,0 +1,27 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// OTP input type
+/// </summary>
+public enum OtpInputType
+{
+    /// <summary>
+    /// Number OTP Input 
+    /// </summary>
+    Number,
+
+    /// <summary>
+    /// Text OTP Input 
+    /// </summary>
+    Text,
+
+    /// <summary>
+    /// Password OTP Input 
+    /// </summary>
+    Password
+}