Apply new design of Signin page in Boilerplate (#8515)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss

@@ -123,6 +123,7 @@ main {
 
     .form-submit-button {
         width: 100%;
+        max-width: rem2(300px);
         margin-bottom: rem2(10px);
     }
 

src/Templates/Boilerplate/Bit.Boilerplate/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();
         }
     }
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor.scss

@@ -16,8 +16,6 @@
     margin-bottom: rem2(20px);
 }
 
-.tfa-token-container {
+.tfa-otp-container {
     gap: 4px;
-    display: flex;
-    flex-flow: column;
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor

@@ -26,9 +26,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(GoogleSignUp)"
                        Title="@Localizer[AppStrings.GoogleSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M33.2337 15.4497C33.1503 14.5997 32.4337 13.9663 31.5837 13.9663H19.0003C18.0837 13.9663 17.3337 14.7163 17.3337 15.633V18.483C17.3337 19.3997 18.0837 20.1497 19.0003 20.1497H26.517C26.3337 21.683 25.3337 23.9997 23.117 25.5497C21.7003 26.533 19.817 27.2164 17.3337 27.2164C17.217 27.2164 17.117 27.2163 17.0003 27.1997C12.7503 27.0663 9.15033 24.2164 7.85033 20.2997C7.50033 19.2497 7.30033 18.1497 7.30033 16.9997C7.30033 15.8497 7.50033 14.733 7.83366 13.6997C7.93366 13.3997 8.05033 13.0997 8.18366 12.7997C9.717 9.34969 13.067 6.91635 17.0003 6.79968C17.1003 6.78302 17.217 6.783 17.3337 6.783C19.717 6.783 21.5003 7.56632 22.7503 8.43298C23.4003 8.88298 24.267 8.78299 24.8337 8.23299L27.1503 5.96635C27.8837 5.24968 27.817 4.03298 26.9837 3.43298C24.3337 1.48298 21.1003 0.333008 17.3337 0.333008C17.217 0.333008 17.117 0.333024 17.0003 0.349691C10.617 0.466357 5.13366 4.16636 2.45033 9.51636C1.31699 11.783 0.666992 14.3163 0.666992 16.9997C0.666992 19.683 1.31699 22.2163 2.45033 24.483H2.467C5.15033 29.833 10.6337 33.533 17.0003 33.6497C17.117 33.6663 17.217 33.6663 17.3337 33.6663C21.8337 33.6663 25.617 32.183 28.367 29.633C31.517 26.7163 33.3337 22.4497 33.3337 17.3663C33.3337 16.6497 33.3003 16.033 33.2337 15.4497Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/google-icon.svg" />
             </BitButton>
 
             <BitButton IsLoading="isWaiting"
@@ -37,9 +35,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(GitHubSignUp)"
                        Title="@Localizer[AppStrings.GitHubSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9404 0C8.91388 0 0 8.97959 0 20.0886C0 28.9686 5.71143 36.4853 13.6347 39.1457C14.6253 39.3457 14.9882 38.7135 14.9882 38.1816C14.9882 37.7159 14.9555 36.1196 14.9555 34.4563C9.40857 35.6539 8.25347 32.0616 8.25347 32.0616C7.36204 29.7335 6.04122 29.1351 6.04122 29.1351C4.22571 27.9045 6.17347 27.9045 6.17347 27.9045C8.18735 28.0375 9.24408 29.9665 9.24408 29.9665C11.0265 33.0261 13.8988 32.1616 15.0543 31.6294C15.2192 30.3322 15.7478 29.4343 16.309 28.9355C11.8849 28.4698 7.2302 26.7404 7.2302 19.0241C7.2302 16.829 8.02204 15.0331 9.27673 13.6363C9.07878 13.1376 8.38531 11.0751 9.4751 8.31469C9.4751 8.31469 11.1588 7.78245 14.9551 10.3767C16.5804 9.93701 18.2566 9.71331 19.9404 9.71143C21.6241 9.71143 23.3404 9.94449 24.9253 10.3767C28.722 7.78245 30.4057 8.31469 30.4057 8.31469C31.4955 11.0751 30.8016 13.1376 30.6037 13.6363C31.8914 15.0331 32.6506 16.829 32.6506 19.0241C32.6506 26.7404 27.9959 28.4363 23.5388 28.9355C24.2653 29.5673 24.8922 30.7645 24.8922 32.6604C24.8922 35.3543 24.8596 37.5163 24.8596 38.1812C24.8596 38.7135 25.2229 39.3457 26.2131 39.1461C34.1363 36.4849 39.8478 28.9686 39.8478 20.0886C39.8804 8.97959 30.9339 0 19.9404 0Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/github-icon.svg" />
             </BitButton>
 
             <BitButton IsLoading="isWaiting"
@@ -48,9 +44,7 @@
                        ButtonType="BitButtonType.Button"
                        OnClick="WrapHandled(TwitterSignUp)"
                        Title="@Localizer[AppStrings.TwitterSignUpButtonText]">
-                <svg width="32" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1.53555 0.799805L12.909 17.3811L0.982422 31.1998H3.52461L14.0355 19.0217L22.3887 31.1998H30.3996L18.498 13.8498L29.7621 0.799805H27.2215L17.373 12.2092L9.54648 0.799805H1.53555Z" fill="#E6E6E6" />
-                </svg>
+                <BitImage Src="_content/Boilerplate.Client.Core/images/icons/x-icon.svg" />
             </BitButton>
         </BitStack>
         <br />
@@ -59,7 +53,7 @@
         <EditForm Model="signUpModel" OnValidSubmit="WrapHandled(DoSignUp)">
             <AppDataAnnotationsValidator />
 
-            <BitPivot >
+            <BitPivot>
                 <BitPivotItem HeaderText="@Localizer[nameof(AppStrings.Email)]">
                     <br />
                     <div class="form-input-container">
@@ -91,12 +85,12 @@
                 <ValidationMessage For="@(() => signUpModel.Password)" />
             </div>
             @* <div class="form-input-container">
-                <BitCheckbox Class="form-checkbox" @bind-Value="signUpModel.TermsAccepted">
-                    <LabelTemplate>
-                        <span>@Localizer[nameof(AppStrings.TermsMessage)]&nbsp<BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink></span>
-                    </LabelTemplate>
-                </BitCheckbox>
-                <ValidationMessage For="@(() => signUpModel.TermsAccepted)" />
+            <BitCheckbox Class="form-checkbox" @bind-Value="signUpModel.TermsAccepted">
+            <LabelTemplate>
+            <span>@Localizer[nameof(AppStrings.TermsMessage)]&nbsp<BitLink Href="@Urls.TermsPage">@Localizer[nameof(AppStrings.TermsTitle)]</BitLink></span>
+            </LabelTemplate>
+            </BitCheckbox>
+            <ValidationMessage For="@(() => signUpModel.TermsAccepted)" />
             </div> *@
 
             @*#if (captcha == "reCaptcha")*@
@@ -111,7 +105,7 @@
                 @Localizer[nameof(AppStrings.SignUp)]
             </BitButton>
             <br /><br />
-            <BitText Typography="BitTypography.Body2">
+            <BitText Typography="BitTypography.Body2" Gutter>
                 @Localizer[nameof(AppStrings.SignInMessageInSignUp)]
                 <BitLink Href="@Urls.SignInPage">@Localizer[nameof(AppStrings.SignIn)]</BitLink>
                 @Localizer[nameof(AppStrings.Or)]

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx

@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>ارسال رمز یکبار مصرف و لینک جادویی</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>ایمیل یا شماره تلفن خود را وارد کنید:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>رمز عبور اصلی یا یک‌بار مصرف را وارد کنید</value>

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx

@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>Envoyer un lien OTP et Magic</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>Entrez votre email ou votre numéro de téléphone:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>Soit fournir un mot de passe, soit Otp</value>

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx

@@ -814,6 +814,9 @@
   </data>
     <data name="SendOtpButtonText" xml:space="preserve">
     <value>Send OTP and Magic link</value>
+  </data>
+    <data name="OtpEmailOrPhoneNumberSubtitle" xml:space="preserve">
+    <value>Enter your email or phone number:</value>
   </data>
     <data name="EitherProvidePasswordOrOtp" xml:space="preserve">
     <value>Either provide password or OTP</value>