Fix UI style issues of SignInPanel in Boilerplate (#11910)

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

@@ -1,64 +1,65 @@
 @inherits AppComponentBase
 
 <section>
-    <BitStack Horizontal>
-        @if (isLoadingProviders)
-        {
-            @for (int i = 0; i < 4; i++)
-            {
-                <BitShimmer Height="60px" Width="60px" Shape="BitShimmerShape.Rectangle" Background="BitColor.SecondaryBackground" />
-            }
-        }
-        else
-        {
-            @if (supportedProviders.Contains("Keycloak"))
-            {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleKeycloak)" Title="@Localizer[AppStrings.KeycloakSignInButtonText]">
-                    <KeycloakIcon />
-                </ExternalSignInButton>
-            }
-            @if (supportedProviders.Contains("Google"))
-            {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleGoogle)" Title="@Localizer[AppStrings.GoogleSignInButtonText]">
-                    <GoogleIcon />
-                </ExternalSignInButton>
-            }
-            @if (supportedProviders.Contains("GitHub"))
+    <BitStack>
+        <BitStack Horizontal Alignment="BitAlignment.Center">
+            @if (isLoadingProviders)
             {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleGitHub)" Title="@Localizer[AppStrings.GitHubSignInButtonText]">
-                    <GitHubIcon />
-                </ExternalSignInButton>
+                @for (int i = 0; i < 4; i++)
+                {
+                    <BitShimmer Height="60px" Width="60px" Shape="BitShimmerShape.Rectangle" Background="BitColor.SecondaryBackground" />
+                }
             }
-            @if (supportedProviders.Contains("Twitter"))
+            else
             {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleTwitter)" Title="@Localizer[AppStrings.TwitterSignInButtonText]">
-                    <TwitterIcon />
-                </ExternalSignInButton>
-            }
-            @if (supportedProviders.Contains("Apple"))
-            {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleApple)" Title="@Localizer[AppStrings.AppleSignInButtonText]">
-                    <AppleIcon />
-                </ExternalSignInButton>
-            }
-            @if (supportedProviders.Contains("AzureAD"))
-            {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleAzureAD)" Title="@Localizer[AppStrings.AzureEntraSignInButtonText]">
-                    <AzureEntraIcon />
-                </ExternalSignInButton>
-            }
-            @if (supportedProviders.Contains("Facebook"))
-            {
-                <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleFacebook)" Title="@Localizer[AppStrings.FacebookSignInButtonText]">
-                    <FacebookIcon />
-                </ExternalSignInButton>
+                @if (supportedProviders.Contains("Keycloak"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleKeycloak)" Title="@Localizer[AppStrings.KeycloakSignInButtonText]">
+                        <KeycloakIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("Google"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleGoogle)" Title="@Localizer[AppStrings.GoogleSignInButtonText]">
+                        <GoogleIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("GitHub"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleGitHub)" Title="@Localizer[AppStrings.GitHubSignInButtonText]">
+                        <GitHubIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("Twitter"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleTwitter)" Title="@Localizer[AppStrings.TwitterSignInButtonText]">
+                        <TwitterIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("Apple"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleApple)" Title="@Localizer[AppStrings.AppleSignInButtonText]">
+                        <AppleIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("AzureAD"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleAzureAD)" Title="@Localizer[AppStrings.AzureEntraSignInButtonText]">
+                        <AzureEntraIcon />
+                    </ExternalSignInButton>
+                }
+                @if (supportedProviders.Contains("Facebook"))
+                {
+                    <ExternalSignInButton IsWaiting="IsWaiting" OnClick="WrapHandled(HandleFacebook)" Title="@Localizer[AppStrings.FacebookSignInButtonText]">
+                        <FacebookIcon />
+                    </ExternalSignInButton>
+                }
             }
+        </BitStack>
+
+        @if (supportedProviders.Any())
+        {
+            <OrSeparator IsInModal="IsInModal" />
         }
     </BitStack>
-
-    @if (supportedProviders.Any())
-    {
-        <BitSeparator Border="BitColorKind.Tertiary" Background="BitColorKind.Secondary" Class="lg-sep">@Localizer[AppStrings.Or]</BitSeparator>
-        <BitSeparator Border="BitColorKind.Secondary" Background="BitColorKind.Primary" Class="sm-sep">@Localizer[AppStrings.Or]</BitSeparator>
-    }
 </section>

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

@@ -8,6 +8,7 @@ public partial class ExternalIdentityProviders
     private string[] supportedProviders = [];
 
     [Parameter] public bool IsWaiting { get; set; }
+    [Parameter] public bool IsInModal { get; set; }
     [Parameter] public EventCallback<string> OnClick { get; set; }
 
 

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

@@ -1,4 +1,7 @@
+@import '../../../../Styles/abstracts/_media-queries.scss';
+
 section {
+    width: 100%;
     margin-top: 1rem;
 }
 
@@ -10,4 +13,16 @@ section {
         align-items: center;
         justify-content: center;
     }
+
+    .lg-sep {
+        @include lt-md {
+            display: none;
+        }
+    }
+
+    .sm-sep {
+        @include gt-sm {
+            display: none;
+        }
+    }
 }

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

@@ -0,0 +1,11 @@
+@inherits AppComponentBase
+
+@if (IsInModal)
+{
+    <BitSeparator Border="BitColorKind.Secondary" Background="BitColorKind.Primary">@Localizer[AppStrings.Or]</BitSeparator>
+}
+else
+{
+    <BitSeparator Border="BitColorKind.Tertiary" Background="BitColorKind.Secondary" Class="lg-sep">@Localizer[AppStrings.Or]</BitSeparator>
+    <BitSeparator Border="BitColorKind.Secondary" Background="BitColorKind.Primary" Class="sm-sep">@Localizer[AppStrings.Or]</BitSeparator>
+}

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

@@ -0,0 +1,6 @@
+namespace Boilerplate.Client.Core.Components.Pages.Identity.Components;
+
+public partial class OrSeparator
+{
+    [Parameter] public bool IsInModal { get; set; }
+}

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

@@ -25,7 +25,7 @@
                                 </BitText>
                             </BitStack>
 
-                            <ExternalIdentityProviders IsWaiting="isWaiting" OnClick="ExternalSignIn" />
+                            <ExternalIdentityProviders IsWaiting="isWaiting" OnClick="ExternalSignIn" IsInModal="SignInPanelType != SignInPanelType.Full" />
 
                             <BitStack FillContent Gap="2rem">
                                 <BitStack FillContent>

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

@@ -1,20 +1,4 @@
-@import '../../../../Styles/abstracts/_media-queries.scss';
-
 section {
     width: 100%;
     height: 100%;
-}
-
-::deep {
-    .lg-sep {
-        @include lt-md {
-            display: none;
-        }
-    }
-
-    .sm-sep {
-        @include gt-sm {
-            display: none;
-        }
-    }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanelType.cs

@@ -6,17 +6,20 @@
 public enum SignInPanelType
 {
     /// <summary>
-    /// Shows email, phone and password fields alongside with sign-in, send otp and sign-up buttons.
+    /// Shows email, phone and password fields alongside with sign-in, send otp and sign-up buttons,
+    /// suitable for standalone sign-in page.
     /// </summary>
     Full,
 
     /// <summary>
-    /// Shows email, phone and password fields alongside with sign-in button.
+    /// Shows email, phone and password fields alongside with sign-in button,
+    /// suitable for sign-in modal dialog.
     /// </summary>
     Password,
 
     /// <summary>
-    /// Shows email, phone and send otp button.
+    /// Shows email, phone and send otp button,
+    /// suitable for sign-in modal dialog.
     /// </summary>
     Otp
 }

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

@@ -19,9 +19,6 @@
 
             <ExternalIdentityProviders IsWaiting="isWaiting" OnClick="ExternalSignUp" />
 
-            <BitSeparator Border="BitColorKind.Tertiary" Background="BitColorKind.Secondary" Class="lg-sep">@Localizer[AppStrings.Or]</BitSeparator>
-            <BitSeparator Border="BitColorKind.Secondary" Background="BitColorKind.Primary" Class="sm-sep">@Localizer[AppStrings.Or]</BitSeparator>
-
             <EditForm Model="signUpModel" OnValidSubmit="WrapHandled(DoSignUp)" novalidate>
                 <AppDataAnnotationsValidator />
 

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

@@ -1,5 +1,3 @@
-@import '../../../../Styles/abstracts/_media-queries.scss';
-
 section {
     width: 100%;
     height: 100%;
@@ -9,16 +7,4 @@ section {
     form {
         width: 304px;
     }
-
-    .lg-sep {
-        @include lt-md {
-            display: none;
-        }
-    }
-
-    .sm-sep {
-        @include gt-sm {
-            display: none;
-        }
-    }
 }