doc(MFA): add enable 2FA sample code (#5994)

* chore: bump version 9.6.1-beta04

* test: bump version 9.6.1-beta05

* chore: test push auto

* style: 更新样式

* doc: 更新 MFA 示例

* chore: bump version 9.6.1-beta04

Co-Authored-By: ChenHan819 <[email protected]>

* chore: bump version 9.6.1-beta03

---------

Co-authored-by: ChenHan819 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Login.razor

@@ -9,7 +9,7 @@
     <div class="bb-sign-body">
         <div class="mb-2">Username or email address</div>
         <input type="text" class="form-control mb-3" value="[email protected]" />
-        <div class="d-flex mb-2">
+        <div class="d-flex justify-content-between mb-2">
             <div>Password</div>
             <div>Forgot password?</div>
         </div>

src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Register.razor

@@ -0,0 +1,58 @@
+@page "/tutorials/mfa/two-factor/register"
+@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
+@inject ITotpService TotpService
+
+<div class="bb-sign">
+    <div class="text-center">
+        <img src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
+        <h3>Two-factor methods</h3>
+    </div>
+    <div class="bb-sign-body">
+        <div class="mb-2"><b>Authenticator app</b></div>
+        <div class="mb-3">
+            Authenticator apps and browser extensions like <code>1Password</code>, <code>Authy</code>, <code>Microsoft Authenticator</code>, <code>Google Authenticator</code>, etc. generate one-time passwords that are used as a second factor to verify your identity when prompted during sign-in.
+        </div>
+        <div class="mb-2"><b>Scan the QR code</b></div>
+        <div class="mb-3">
+            Use an authenticator app or browser extension to scan. Learn more about enabling 2FA.
+        </div>
+        <div class="bb-sign-qr">
+            <QRCode Content="@_content" Width="190"></QRCode>
+        </div>
+        <div class="mb-3"><b>Verify the code from the app</b></div>
+        <input type="password" class="form-control" @bind="@_code" />
+        <button type="button" class="form-control bg-success text-white mt-3" @onclick="OnRegister">Save</button>
+    </div>
+</div>
+
+@code {
+    [Inject, NotNull]
+    private NavigationManager? NavigationManager { get; set; }
+
+    private string? _content;
+
+    private string? _code;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _content = TotpService.GenerateOtpUri(new OtpOptions()
+        {
+            AccountName = "BootstrapBlazor",
+            IssuerName = "BootstrapBlazor",
+            UserName = "Simulator",
+            SecretKey = "OMM2LVLFX6QJHMYI",
+            Algorithm = OtpHashMode.Sha1,
+            Type = OtpType.Totp
+        });
+    }
+
+    private void OnRegister()
+    {
+        if (_code == TotpService.Compute("OMM2LVLFX6QJHMYI"))
+        {
+            NavigationManager.NavigateTo("/tutorials/mfa/two-factor/app");
+        }
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Register.razor.css

@@ -0,0 +1,51 @@
+.bb-sign {
+    margin: 0 auto;
+    width: 640px;
+    padding: 0 1rem;
+}
+
+    .bb-sign img {
+        background-color: var(--bb-primary-color);
+        border-radius: 50%;
+        margin-block: 2rem;
+    }
+
+    .bb-sign h1 {
+        font-size: 24px;
+        font-weight: 300;
+        letter-spacing: -0.5px;
+        margin-block-end: 1rem;
+    }
+
+.bb-sign-body {
+    background-color: #f6f8fa;
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem;
+}
+
+    .bb-sign-body img {
+        width: 32px;
+        height: auto;
+        margin: 0;
+        margin-block-end: 1rem;
+    }
+
+    .bb-sign-body h3 {
+        font-size: 20px;
+        font-weight: 400;
+    }
+
+.bb-sign-qr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+::deep .qrcode {
+    padding: .5rem;
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    display: inline-flex;
+    align-items: center;
+    justify-items: center;
+}

src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactor.razor

@@ -17,5 +17,8 @@
         <div class="mt-1">
             <a href="./tutorials/mfa/two-factor/app">Use your authenticator app</a>
         </div>
+        <div class="mt-3">
+            <a href="./tutorials/mfa/two-factor/register">Enable Two-factor methods</a>
+        </div>
     </div>
 </div>