doc(OtpService): add localization for sample code (#8083)

* doc: 精简代码

* doc: 增加注入服务文档

* doc(OtpService): add localization for sample code

Author: ArgoZhang

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

@@ -26,7 +26,7 @@
 
 <PackageTips Name="BootstrapBlazor.Html2Pdf" />
 
-<p class="code-label">@((MarkupString)Localizer["Html2PdfStep1"].Value)</p>
+<p class="code-label">@Localizer["Html2PdfStep1"]</p>
 <Pre>services.AddBootstrapBlazorHtml2PdfService();</Pre>
 
 <p class="code-label">@Localizer["CommonIssuesTitle"]</p>

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

@@ -29,6 +29,9 @@
 
 <PackageTips Name="BootstrapBlazor.Authenticator"></PackageTips>
 
+<p class="code-label">@Localizer["InjectServiceLabel"]</p>
+<Pre>services.AddBootstrapBlazorTotpService();</Pre>
+
 <DemoBlock Title="@Localizer["BaseUsageTitle"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal">
     <QRCode Content="@_content" Width="190" class="mb-3"></QRCode>
     <OtpInput Value="@_code" IsReadonly="true" class="text-center mb-3"></OtpInput>
@@ -38,21 +41,21 @@
     </div>
 </DemoBlock>
 
-<p class="code-label mt-3">1. 服务注入</p>
+<p class="code-label mt-3">@Localizer["Step1Title"]</p>
 
 <Pre>services.AddBootstrapBlazorTotpService();</Pre>
 
 <Pre>[Inject]
 [NotNull]
 private ITotpService? TotpService { get; set; }</Pre>
 
-<p class="code-label">2. 生成二维码</p>
-<p>调用 <code>TotpService</code> 实例方法 <code>GenerateOtpUri</code> 得到二维码内容，配合二维码组件 <code>QRCode</code> 显示二维码</p>
+<p class="code-label">@Localizer["Step2Title"]</p>
+<p>@((MarkupString)Localizer["Step2Description"].Value)</p>
 
-<p class="code-label">3. 使用 <code>Microsoft Authenticator</code> <code>Google Authenticator</code> 等支持 <b>TOTP</b> 协议的软件，扫描二维码</p>
+<p class="code-label">@((MarkupString)Localizer["Step3Title"].Value)</p>
 
-<p class="code-label">4. 验证逻辑</p>
+<p class="code-label">@Localizer["Step4Title"]</p>
 
-<p>网页内使用 <code>OtpInput</code> 让用户填写手机 <code>App</code> 终端的密码，后台通过调用 <code>TotpService</code> 实例方法 <code>Compute</code> 得到当前时间窗口内的密码，与客户录入的比对，如果一致则密码正确</p>
+<p>@((MarkupString)Localizer["Step4Description"].Value)</p>
 
-<div>通过使用本服务可以很方便的构建 <code>2FA</code> 应用</div>
+<div>@((MarkupString)Localizer["Summary"].Value)</div>

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

@@ -3571,7 +3571,15 @@
   "BootstrapBlazor.Server.Components.Samples.OtpServices": {
     "BaseUsageIntro": "By calling the <code>Compute</code> method of the <code>ITotpService</code> service instance, you can get the password in the current time window. By calling the <code>Instance.GetRemainingSeconds</code> method, you can display the remaining validity time of the current password. In this example, the progress bar is used for dynamic display.",
     "BaseUsageTitle": "Basic usage",
+    "InjectServiceLabel": "Register service",
+    "Step1Title": "1. Inject the service",
+    "Step2Description": "Call the <code>GenerateOtpUri</code> instance method on <code>TotpService</code> to get the QR code payload, then render it with the <code>QRCode</code> component",
+    "Step2Title": "2. Generate the QR code",
+    "Step3Title": "3. Use software that supports the <b>TOTP</b> protocol, such as <code>Microsoft Authenticator</code> or <code>Google Authenticator</code>, to scan the QR code",
+    "Step4Description": "Use <code>OtpInput</code> on the page so the user can enter the code from the mobile <code>App</code>. On the server side, call the <code>Compute</code> instance method on <code>TotpService</code> to get the code for the current time window and compare it with the client input. If they match, the code is valid",
+    "Step4Title": "4. Verification logic",
     "SubTitle": "An implementation TOTP RFC 6238 and HOTP RFC 4226 Authenticator service.",
+    "Summary": "This service makes it straightforward to build <code>2FA</code> applications",
     "Title": "ITotpService"
   },
   "BootstrapBlazor.Server.Components.Samples.Paginations": {

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

@@ -3571,7 +3571,15 @@
   "BootstrapBlazor.Server.Components.Samples.OtpServices": {
     "BaseUsageIntro": "通过调用 <code>ITotpService</code> 服务实例方法 <code>Compute</code> 得到当前时间窗口内密码, 通过调用 <code>Instance.GetRemainingSeconds</code> 方法可以显示当前密码剩余有效时间，本例中通过进度条进行动态显示",
     "BaseUsageTitle": "基本用法",
+    "InjectServiceLabel": "注入服务",
+    "Step1Title": "1. 服务注入",
+    "Step2Description": "调用 <code>TotpService</code> 实例方法 <code>GenerateOtpUri</code> 得到二维码内容，配合二维码组件 <code>QRCode</code> 显示二维码",
+    "Step2Title": "2. 生成二维码",
+    "Step3Title": "3. 使用 <code>Microsoft Authenticator</code>、<code>Google Authenticator</code> 等支持 <b>TOTP</b> 协议的软件扫描二维码",
+    "Step4Description": "网页内使用 <code>OtpInput</code> 让用户填写手机 <code>App</code> 端的密码，后台通过调用 <code>TotpService</code> 实例方法 <code>Compute</code> 得到当前时间窗口内的密码，与客户端录入的比对，如果一致则密码正确",
+    "Step4Title": "4. 验证逻辑",
     "SubTitle": "实现 TOTP RFC 6238 和 HOTP RFC 4226 认证器服务",
+    "Summary": "通过使用本服务可以很方便地构建 <code>2FA</code> 应用",
     "Title": "ITotpService 时间密码验证服务"
   },
   "BootstrapBlazor.Server.Components.Samples.Paginations": {