feat(templates): apply WebOTP pattern to short messages in Boilerplate …

…#9612 (#9613)
bitfoundation · Jan 4, 2025 · 4a4f795 · 4a4f795
1 parent 7bf448e
commit 4a4f795
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 49 deletions.
diff --git a/...ent/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangeEmailSection.razor b/...ent/Boilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangeEmailSection.razor
@@ -10,7 +10,7 @@
                 <BitStack FillContent>
                     @if (Email is not null)
                     {
-                        <BitTextField ReadOnly Value="@Email" />
+                        <BitTextField Value="@Email" ReadOnly NoValidate />
                     }
 
                     <BitTextField @bind-Value="sendModel.Email"
@@ -54,10 +54,13 @@
                                   Placeholder="@Localizer[nameof(AppStrings.EmailPlaceholder)]" />
                     <ValidationMessage For="@(() => changeModel.Email)" />
 
-                    <BitTextField @bind-Value="changeModel.Token"
-                                  Type="BitInputType.Number"
-                                  Label="@Localizer[nameof(AppStrings.EmailToken)]"
-                                  Placeholder="@Localizer[nameof(AppStrings.EmailTokenPlaceholder)]" />
+                    <BitOtpInput @bind-Value="changeModel.Token"
+                                 AutoFocus
+                                 Length="6"
+                                 Size="BitSize.Large"
+                                 Type="BitInputType.Number"
+                                 OnFill="WrapHandled(ChangeEmail)"
+                                 Label="@Localizer[nameof(AppStrings.EmailToken)]" />
                     <ValidationMessage For="@(() => changeModel.Token)" />
 
                     <BitButton IsLoading="isWaiting" ButtonType="BitButtonType.Submit">

diff --git a/...ilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangePhoneNumberSection.razor b/...ilerplate.Client.Core/Components/Pages/Authorized/Settings/ChangePhoneNumberSection.razor
@@ -10,7 +10,7 @@
                 <BitStack FillContent>
                     @if (PhoneNumber is not null)
                     {
-                        <BitTextField ReadOnly Value="@PhoneNumber" />
+                        <BitTextField Value="@PhoneNumber" ReadOnly NoValidate />
                     }
 
                     <BitTextField @bind-Value="sendModel.PhoneNumber"
@@ -54,10 +54,13 @@
                                   Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
                     <ValidationMessage For="@(() => changeModel.PhoneNumber)" />
 
-                    <BitTextField @bind-Value="changeModel.Token"
-                                  Type="BitInputType.Number"
-                                  Label="@Localizer[nameof(AppStrings.PhoneToken)]"
-                                  Placeholder="@Localizer[nameof(AppStrings.PhoneTokenPlaceholder)]" />
+                    <BitOtpInput @bind-Value="changeModel.Token"
+                                 AutoFocus
+                                 Length="6"
+                                 Size="BitSize.Large"
+                                 Type="BitInputType.Number"
+                                 OnFill="WrapHandled(ChangePhoneNumber)"
+                                 Label="@Localizer[nameof(AppStrings.PhoneToken)]" />
                     <ValidationMessage For="@(() => changeModel.Token)" />
 
                     <BitButton IsLoading="isWaiting" ButtonType="BitButtonType.Submit">

diff --git a/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/.well-known/assetlinks.json b/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/.well-known/assetlinks.json
@@ -1,7 +1,8 @@
-[
+[
     {
         "relation": [
-            "delegate_permission/common.handle_all_urls"
+            "delegate_permission/common.handle_all_urls",
+            "delegate_permission/common.get_login_creds"
         ],
         "target": {
             "namespace": "android_app",

diff --git a/...erver/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs b/...erver/Boilerplate.Server.Api/Controllers/Identity/IdentityController.PhoneConfirmation.cs
@@ -78,6 +78,8 @@ private async Task SendConfirmPhoneToken(User user, CancellationToken cancellati
         var phoneNumber = user.PhoneNumber!;
         var token = await userManager.GenerateUserTokenAsync(user, TokenOptions.DefaultPhoneProvider, FormattableString.Invariant($"VerifyPhoneNumber:{phoneNumber},{user.PhoneNumberTokenRequestedOn?.ToUniversalTime()}"));
 
-        await phoneService.SendSms(Localizer[nameof(AppStrings.ConfirmPhoneTokenSmsText), token], phoneNumber, cancellationToken);
+        var message = Localizer[nameof(AppStrings.ConfirmPhoneTokenShortText), token];
+        var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
+        await phoneService.SendSms(smsMessage, phoneNumber, cancellationToken);
     }
 }
diff --git a/...rc/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.ResetPassword.cs b/...rc/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.ResetPassword.cs
@@ -49,7 +49,8 @@ public async Task SendResetPasswordToken(SendResetPasswordTokenRequestDto reques
 
         if (await userManager.IsPhoneNumberConfirmedAsync(user))
         {
-            sendMessagesTasks.Add(phoneService.SendSms(message, user.PhoneNumber!, cancellationToken));
+            var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
+            sendMessagesTasks.Add(phoneService.SendSms(smsMessage, user.PhoneNumber!, cancellationToken));
         }
 
         //#if (signalR == true)

diff --git a/....Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs b/....Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.cs
@@ -308,7 +308,9 @@ public async Task SendOtp(IdentityRequestDto request, string? returnUrl = null,
 
         if (await userManager.IsPhoneNumberConfirmedAsync(user))
         {
-            var smsMessage = Localizer[nameof(AppStrings.OtpShortText), await userManager.GenerateUserTokenAsync(user, TokenOptions.DefaultPhoneProvider, FormattableString.Invariant($"Otp_Sms,{user.OtpRequestedOn?.ToUniversalTime()}"))].ToString();
+            var token = await userManager.GenerateUserTokenAsync(user, TokenOptions.DefaultPhoneProvider, FormattableString.Invariant($"Otp_Sms,{user.OtpRequestedOn?.ToUniversalTime()}"));
+            var message = Localizer[nameof(AppStrings.OtpShortText), token].ToString();
+            var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
             sendMessagesTasks.Add(phoneService.SendSms(smsMessage, user.PhoneNumber!, cancellationToken));
         }
 
@@ -368,7 +370,8 @@ public async Task SendTwoFactorToken(SignInRequestDto request, CancellationToken
 
         if (firstStepAuthenticationMethod != "Sms" && await userManager.IsPhoneNumberConfirmedAsync(user))
         {
-            sendMessagesTasks.Add(phoneService.SendSms(message, user.PhoneNumber!, cancellationToken));
+            var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
+            sendMessagesTasks.Add(phoneService.SendSms(smsMessage, user.PhoneNumber!, cancellationToken));
         }
 
         if (firstStepAuthenticationMethod != "Push")

diff --git a/.../Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/UserController.cs b/.../Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/UserController.cs
@@ -228,7 +228,10 @@ public async Task SendChangePhoneNumberToken(SendPhoneTokenRequestDto request, C
 
         var token = await userManager.GenerateChangePhoneNumberTokenAsync(user!, request.PhoneNumber!);
 
-        await phoneService.SendSms(Localizer[nameof(AppStrings.ChangePhoneNumberTokenSmsText), token], request.PhoneNumber!, cancellationToken);
+        var message = Localizer[nameof(AppStrings.ChangePhoneNumberTokenShortText), token];
+        var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
+
+        await phoneService.SendSms(smsMessage, request.PhoneNumber!, cancellationToken);
     }
 
     [HttpPost]
@@ -388,7 +391,7 @@ public async Task SendElevatedAccessToken(CancellationToken cancellationToken)
 
         List<Task> sendMessagesTasks = [];
 
-        var messageText = Localizer[nameof(AppStrings.ElevatedAccessToken), token].ToString();
+        var message = Localizer[nameof(AppStrings.ElevatedAccessTokenShortText), token].ToString();
 
         if (await userManager.IsEmailConfirmedAsync(user))
         {
@@ -397,7 +400,8 @@ public async Task SendElevatedAccessToken(CancellationToken cancellationToken)
 
         if (await userManager.IsPhoneNumberConfirmedAsync(user))
         {
-            sendMessagesTasks.Add(phoneService.SendSms(messageText, user.PhoneNumber!, cancellationToken));
+            var smsMessage = $"{message}{Environment.NewLine}@{HttpContext.Request.GetWebAppUrl().Host} #{token}" /* Web OTP */;
+            sendMessagesTasks.Add(phoneService.SendSms(smsMessage, user.PhoneNumber!, cancellationToken));
         }
 
         //#if (signalR == true)
@@ -406,11 +410,11 @@ public async Task SendElevatedAccessToken(CancellationToken cancellationToken)
             .Where(us => us.UserId == user.Id && us.Id != currentUserSessionId && us.SignalRConnectionId != null)
             .Select(us => us.SignalRConnectionId!)
             .ToArrayAsync(cancellationToken);
-        sendMessagesTasks.Add(appHubContext.Clients.Clients(userSessionIdsExceptCurrentUserSessionId).SendAsync(SignalREvents.SHOW_MESSAGE, messageText, cancellationToken));
+        sendMessagesTasks.Add(appHubContext.Clients.Clients(userSessionIdsExceptCurrentUserSessionId).SendAsync(SignalREvents.SHOW_MESSAGE, message, cancellationToken));
         //#endif
 
         //#if (notification == true)
-        sendMessagesTasks.Add(pushNotificationService.RequestPush(message: messageText, userRelatedPush: true, customSubscriptionFilter: us => us.UserSession!.UserId == user.Id && us.UserSessionId != currentUserSessionId, cancellationToken: cancellationToken));
+        sendMessagesTasks.Add(pushNotificationService.RequestPush(message: message, userRelatedPush: true, customSubscriptionFilter: us => us.UserSession!.UserId == user.Id && us.UserSessionId != currentUserSessionId, cancellationToken: cancellationToken));
         //#endif
 
         await Task.WhenAll(sendMessagesTasks);

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
@@ -933,8 +933,8 @@
     <data name="EnterElevatedAccessToken" xml:space="preserve">
     <value>لطفا کد ۶ رقمی که ارسال کردیم یا کد Authenticator app خود را وارد کنید</value>
   </data>
-    <data name="ElevatedAccessToken" xml:space="preserve">
-    <value>توکن {0}</value>
+    <data name="ElevatedAccessTokenShortText" xml:space="preserve">
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
     <data name="WaitForEmailTokenRequestResendDelay" xml:space="preserve">
     <value>شما قبلا ایمیل تایید را درخواست کرده اید. دوباره امتحان کنید در {0}</value>
@@ -987,20 +987,20 @@
     <data name="WaitForTwoFactorTokenRequestResendDelay" xml:space="preserve">
     <value>شما قبلا درخواست ایمیل توکن 2FA را دارید. دوباره امتحان کنید در {0}</value>
   </data>
-    <data name="ChangePhoneNumberTokenSmsText" xml:space="preserve">
-    <value>{0} توکن تغییر شماره تلفن شما است در Boilerplate.</value>
+    <data name="ChangePhoneNumberTokenShortText" xml:space="preserve">
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
-    <data name="ConfirmPhoneTokenSmsText" xml:space="preserve">
-    <value>{0} توکن تایید شماره تلفن شما است در Boilerplate.</value>
+    <data name="ConfirmPhoneTokenShortText" xml:space="preserve">
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
     <data name="TwoFactorTokenShortText" xml:space="preserve">
-    <value>{0} توکن احراز هویت مرحله دو شما است در Boilerplate.</value>
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
     <data name="OtpShortText" xml:space="preserve">
-    <value>{0} پسورد یک‌بار مصرف شما است در Boilerplate.</value>
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
     <data name="ResetPasswordTokenShortText" xml:space="preserve">
-    <value>{0} توکن تغییر رمز عبور شما است در Boilerplate.</value>
+    <value>{0} کد شماست در Boilerplate</value>
   </data>
     <data name="Online" xml:space="preserve">
     <value>آنلاین</value>

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.nl.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.nl.resx
@@ -933,8 +933,8 @@
     <data name="EnterElevatedAccessToken" xml:space="preserve">
     <value>Voer de verhoogde toegangstoken in die we u zojuist hebben gestuurd of de code van uw authenticator-app om door te gaan.</value>
   </data>
-    <data name="ElevatedAccessToken" xml:space="preserve">
-    <value>Token {0}</value>
+    <data name="ElevatedAccessTokenShortText" xml:space="preserve">
+    <value>{0} is je code in Boilerplate.</value>
   </data>
     <data name="WaitForEmailTokenRequestResendDelay" xml:space="preserve">
     <value>Je hebt de bevestigingsmail al aangevraagd. Probeer het opnieuw in {0}</value>
@@ -987,20 +987,20 @@
     <data name="WaitForTwoFactorTokenRequestResendDelay" xml:space="preserve">
     <value>Je hebt de e-mail met de 2FA-token al aangevraagd. Probeer het opnieuw in {0}.</value>
   </data>
-    <data name="ChangePhoneNumberTokenSmsText" xml:space="preserve">
-    <value>{0} is het token voor het wijzigen van uw telefoonnummer in Boilerplate.</value>
+    <data name="ChangePhoneNumberTokenShortText" xml:space="preserve">
+    <value>{0} is je code in Boilerplate.</value>
   </data>
-    <data name="ConfirmPhoneTokenSmsText" xml:space="preserve">
-    <value>{0} is uw bevestigingstelefoonnummer token in Boilerplate.</value>
+    <data name="ConfirmPhoneTokenShortText" xml:space="preserve">
+    <value>{0} is je code in Boilerplate.</value>
   </data>
     <data name="TwoFactorTokenShortText" xml:space="preserve">
-    <value>{0} is je tweefactortoken in Boilerplate.</value>
+    <value>{0} is je code in Boilerplate.</value>
   </data>
     <data name="OtpShortText" xml:space="preserve">
-    <value>{0} is uw OTP in Boilerplate.</value>
+    <value>{0} is je code in Boilerplate.</value>
   </data>
     <data name="ResetPasswordTokenShortText" xml:space="preserve">
-    <value>{0} is het token voor het opnieuw instellen van uw wachtwoord in Boilerplate.</value>
+    <value>{0} is je code in Boilerplate.</value>
   </data>
     <data name="Online" xml:space="preserve">
     <value>Online</value>

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
@@ -933,8 +933,8 @@
     <data name="EnterElevatedAccessToken" xml:space="preserve">
     <value>Please enter the elevated access token we just sent you or your authenticator app code to continue.</value>
   </data>
-    <data name="ElevatedAccessToken" xml:space="preserve">
-    <value>Token {0}</value>
+    <data name="ElevatedAccessTokenShortText" xml:space="preserve">
+    <value>{0} is your code in Boilerplate.</value>
   </data>
     <data name="WaitForEmailTokenRequestResendDelay" xml:space="preserve">
     <value>You have already requested the confirmation email. Try again in {0}</value>
@@ -987,20 +987,20 @@
     <data name="WaitForTwoFactorTokenRequestResendDelay" xml:space="preserve">
     <value>You have already requested the 2FA token email. Try again in {0}.</value>
   </data>
-    <data name="ChangePhoneNumberTokenSmsText" xml:space="preserve">
-    <value>{0} is your change phone number token in Boilerplate.</value>
+    <data name="ChangePhoneNumberTokenShortText" xml:space="preserve">
+    <value>{0} is your code in Boilerplate.</value>
   </data>
-    <data name="ConfirmPhoneTokenSmsText" xml:space="preserve">
-    <value>{0} is your confirm phone number token in Boilerplate.</value>
+    <data name="ConfirmPhoneTokenShortText" xml:space="preserve">
+    <value>{0} is your code in Boilerplate.</value>
   </data>
     <data name="TwoFactorTokenShortText" xml:space="preserve">
-    <value>{0} is your two factor token in Boilerplate.</value>
+    <value>{0} is your code in Boilerplate.</value>
   </data>
     <data name="OtpShortText" xml:space="preserve">
-    <value>{0} is your OTP in Boilerplate.</value>
+    <value>{0} is your code in Boilerplate.</value>
   </data>
     <data name="ResetPasswordTokenShortText" xml:space="preserve">
-    <value>{0} is your reset password token in Boilerplate.</value>
+    <value>{0} is your code in Boilerplate.</value>
   </data>
     <data name="Online" xml:space="preserve">
     <value>Online</value>

diff --git a/...ate/Bit.Boilerplate/src/Tests/PageTests/PageModels/Identity/SettingsPage.Account.Phone.cs b/...ate/Bit.Boilerplate/src/Tests/PageTests/PageModels/Identity/SettingsPage.Account.Phone.cs
@@ -59,7 +59,7 @@ public async Task AssertTooManyRequestsForChangePhone()
 
     public string GetPhoneToken()
     {
-        var pattern = AppStrings.ChangePhoneNumberTokenSmsText.Replace("{0}", @"\b\d{6}\b");
+        var pattern = AppStrings.ChangePhoneNumberTokenShortText.Replace("{0}", @"\b\d{6}\b");
         return FakePhoneService.GetLastOtpFor(newPhone, pattern);
     }