Skip to content

Commit b335bee

Browse files
msynkmsynk
authored
feat(templates): improve sign-in panel and modal in Boilerplate #10969 (#10973)
1 parent 64efe4d commit b335bee

File tree

8 files changed

+1014
-965
lines changed

8 files changed

+1014
-965
lines changed

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
@inherits AppComponentBase
22

33
<section>
4-
<BitStack FitHeight>
5-
<BitButton Class="close-btn"
6-
OnClick="CloseModal"
7-
Color="BitColor.Tertiary"
8-
Variant="BitVariant.Text"
9-
IconName="@BitIconName.ChromeClose" />
10-
<SignInPanel OnSuccess="OnSuccess"
11-
ReturnUrlQueryString="@ReturnUrl"
12-
SignInPanelType="SignInPanelType.OtpOnly" />
4+
<BitStack Gap="0">
5+
<BitStack Horizontal FitHeight Class="header-stack">
6+
<BitSpacer />
7+
<BitButton OnClick="CloseModal"
8+
Color="BitColor.Tertiary"
9+
Variant="BitVariant.Text"
10+
IconName="@BitIconName.ChromeClose" />
11+
</BitStack>
12+
<BitStack Class="stack" FitHeight>
13+
<SignInPanel OnSuccess="OnSuccess"
14+
ReturnUrlQueryString="@ReturnUrl"
15+
SignInPanelType="SignInPanelType.Otp" />
16+
</BitStack>
1317
</BitStack>
1418
</section>

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33

44
section {
55
height: 100%;
6-
padding: 3rem;
76
overflow: auto;
8-
position: relative;
97
max-height: $bit-env-height-available;
108

119
@include lt-sm {
@@ -23,9 +21,13 @@ section {
2321
}
2422
}
2523

26-
.close-btn {
27-
top: 1rem;
28-
position: absolute;
29-
inset-inline-end: 1rem;
24+
.header-stack {
25+
padding-top: 1rem;
26+
padding-inline-end: 1rem;
27+
}
28+
29+
.stack {
30+
padding: 3rem;
31+
padding-top: 0;
3032
}
3133
}

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
Placeholder="@Localizer[nameof(AppStrings.PhoneNumberPlaceholder)]" />
5959
<ValidationMessage For="@(() => model.PhoneNumber)" />
6060
}
61-
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.PasswordOnly)
61+
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.Password)
6262
{
6363
<br />
6464
<BitTextField @bind-Value="model.Password"
@@ -97,32 +97,41 @@
9797
}
9898
</BitStack>
9999

100-
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.PasswordOnly)
100+
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.Password)
101101
{
102-
<BitButton IsLoading="isWaiting" IsEnabled="isWaiting is false" ButtonType="BitButtonType.Submit">
103-
@Localizer[nameof(AppStrings.Continue)]
104-
</BitButton>
102+
<BitStack Alignment="BitAlignment.Center" FitHeight FillContent>
103+
<BitText Typography="BitTypography.Body2" Align="BitTextAlign.Center">
104+
<b>@Localizer[nameof(AppStrings.SignInPasswordMessage1)]</b>
105+
<br />
106+
@Localizer[nameof(AppStrings.SignInPasswordMessage2)]
107+
</BitText>
108+
<BitButton IsLoading="isWaiting"
109+
IsEnabled="isWaiting is false"
110+
ButtonType="BitButtonType.Submit">
111+
@Localizer[nameof(AppStrings.Continue)]
112+
</BitButton>
113+
</BitStack>
105114
}
106115

107-
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.OtpOnly)
116+
@if (internalSignInPanelType is SignInPanelType.Full or SignInPanelType.Otp)
108117
{
109118
<BitButton IsLoading="isWaiting"
110119
ButtonType="BitButtonType.Button"
111120
OnClick="WrapHandled(() => SendOtp(resend: true))"
112-
Variant="@(internalSignInPanelType is SignInPanelType.OtpOnly ? BitVariant.Fill : BitVariant.Outline)"
121+
Variant="@(internalSignInPanelType is SignInPanelType.Otp ? BitVariant.Fill : BitVariant.Outline)"
113122
IsEnabled="@(isWaiting is false && (model.Email is not null || model.PhoneNumber is not null))">
114123
@(currentTab == SignInPanelTab.Email ? Localizer[nameof(AppStrings.SendMagicLinkButtonText)] : Localizer[nameof(AppStrings.SendOtpButtonText)])
115124
</BitButton>
116125
}
117126

118-
@if (internalSignInPanelType is SignInPanelType.OtpOnly)
127+
@if (internalSignInPanelType is SignInPanelType.Otp)
119128
{
120-
<BitLink OnClick="() => ChangeSignInPanelType(SignInPanelType.PasswordOnly)">@Localizer[nameof(AppStrings.SignInByPassword)]</BitLink>
129+
<BitLink OnClick="() => ChangeSignInPanelType(SignInPanelType.Password)">@Localizer[nameof(AppStrings.SignInByPassword)]</BitLink>
121130
}
122131

123-
@if (internalSignInPanelType is SignInPanelType.PasswordOnly)
132+
@if (internalSignInPanelType is SignInPanelType.Password)
124133
{
125-
<BitLink OnClick="() => ChangeSignInPanelType(SignInPanelType.OtpOnly)">@Localizer[nameof(AppStrings.SignInByOtp)]</BitLink>
134+
<BitLink OnClick="() => ChangeSignInPanelType(SignInPanelType.Otp)">@Localizer[nameof(AppStrings.SignInByOtp)]</BitLink>
126135
}
127136

128137
@if (internalSignInPanelType is SignInPanelType.Full)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -374,12 +374,12 @@ await identityController
374374

375375
private void CleanModel()
376376
{
377-
if (internalSignInPanelType is SignInPanelType.OtpOnly)
377+
if (internalSignInPanelType is SignInPanelType.Otp)
378378
{
379379
model.Password = null;
380380
validatorRef?.EditContext.NotifyFieldChanged(validatorRef.EditContext.Field(nameof(SignInRequestDto.Password)));
381381
}
382-
else if (internalSignInPanelType is SignInPanelType.PasswordOnly && isOtpSent is false)
382+
else if (internalSignInPanelType is SignInPanelType.Password && isOtpSent is false)
383383
{
384384
model.Otp = null;
385385
validatorRef?.EditContext.NotifyFieldChanged(validatorRef.EditContext.Field(nameof(SignInRequestDto.Otp)));

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
namespace Boilerplate.Client.Core.Components.Pages.Identity.SignIn;
22

3-
public enum SignInPanelType // Check out SignInModalService for more details
3+
/// <summary>
4+
/// The layout type of the SignIn panel UI. Check out <see cref="SignInModalService"/> for more details
5+
/// </summary>
6+
public enum SignInPanelType
47
{
5-
Full, // Shows email,phone and password fields alongside with sign-in, send otp and sign-up buttons.
6-
PasswordOnly, // Shows email,phone and password fields alongside with sign-in button only.
7-
OtpOnly // Shows email,phone and send otp button only.
8+
/// <summary>
9+
/// Shows email, phone and password fields alongside with sign-in, send otp and sign-up buttons.
10+
/// </summary>
11+
Full,
12+
13+
/// <summary>
14+
/// Shows email, phone and password fields alongside with sign-in button.
15+
/// </summary>
16+
Password,
17+
18+
/// <summary>
19+
/// Shows email, phone and send otp button.
20+
/// </summary>
21+
Otp
822
}

‎src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/SignInModalService.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ public async Task<bool> SignIn(string? returnUrl = null)
3737
};
3838
var modalParameters = new BitModalParameters()
3939
{
40+
Draggable = true,
41+
DragElementSelector = ".header-stack",
4042
OnOverlayClick = EventCallback.Factory.Create<MouseEventArgs>(this, () => signInModalTcs.SetResult(false))
4143
};
4244

0 commit comments

Comments
 (0)