Skip to content

Commit c333024

Browse files
h2lsArgoZhang
h2ls
and
ArgoZhang
authored
doc(Login): add microsoft login template (#6162)
* Add transitional login page and update navigation menu * refactor: 重构模板名称 * refactor: 精简代码 * doc: 代码格式化 * refactor: 增加移动端适配 * doc: 更新打包内容 --------- Co-Authored-By: Ethan Lee <[email protected]> Co-authored-by: Argo Zhang <[email protected]>
1 parent 3011026 commit c333024

File tree

4 files changed

+269
-12
lines changed

4 files changed

+269
-12
lines changed

‎src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,12 @@ protected override async Task OnInitializedAsync()
8080
Template = CreateDownloadButtonComponent("template4", _template4),
8181
Text = "Template 4",
8282
Url = "tutorials/template4"
83+
},
84+
new()
85+
{
86+
Template = CreateDownloadButtonComponent("template5", _template5),
87+
Text = "Template 5",
88+
Url = "/tutorials/template5"
8389
}
8490
]
8591
},
@@ -215,6 +221,14 @@ .. _layoutFileList
215221
.. _layoutFileList
216222
];
217223

224+
private readonly string[] _template5 =
225+
[
226+
"Tutorials/LoginAndRegister/Template5.razor",
227+
"Tutorials/LoginAndRegister/Template5.razor.css",
228+
"../Layout/TutorialsLayout.razor",
229+
"../Layout/TutorialsLayout.razor.css"
230+
];
231+
218232
private readonly string[] _waterfallFileList =
219233
[
220234
"Tutorials/Waterfall.razor",

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@page "/tutorials/template5"
2+
@layout TutorialsLayout
3+
4+
<HeadContent>
5+
<style>
6+
.main:has(.background-image) {
7+
height: calc(100vh - 56px - 175px);
8+
}
9+
10+
@@media (min-width: 768px) {
11+
.main:has(.background-image) {
12+
height: calc(100vh - 50px);
13+
}
14+
15+
.login-box {
16+
width: 350px;
17+
}
18+
}
19+
</style>
20+
</HeadContent>
21+
22+
<div class="background-image">
23+
<div class="login-container">
24+
<div class="login-box animate-fade-in">
25+
<div class="header-row">
26+
@if (isEmailEntered)
27+
{
28+
<button @onclick="GoBack" aria-label="返回" class="back-button">
29+
<span>
30+
<i class="fa-solid fa-arrow-left"></i>
31+
</span>
32+
</button>
33+
}
34+
<div class="logo-container">
35+
<h1 class="blazor-text">BootstrapBlazor</h1>
36+
</div>
37+
</div>
38+
@if (!isEmailEntered)
39+
{
40+
<h2>登录</h2>
41+
<p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
42+
<BootstrapInput type="email" class="input" placeholder="电子邮件或电话号码" @bind-Value="email" />
43+
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
44+
<Button class="button" Color="Color.Primary" OnClick="OnEmailSubmit">下一步</Button>
45+
<div class="links">
46+
<a href="#">忘记用户名？</a>
47+
</div>
48+
<div class="small">
49+
不熟悉 BootstrapBlazor？<a href="/">去看文档</a>
50+
</div>
51+
}
52+
else
53+
{
54+
<h2>输入你的密码</h2>
55+
<p class="email-display">@email</p>
56+
<BootstrapInput type="password" class="input" placeholder="密码" @bind-Value="password" />
57+
<div class="links">
58+
<a href="#">忘记了密码？</a>
59+
</div>
60+
<Button class="button" Color="Color.Primary">下一步</Button>
61+
<div class="links">
62+
<a href="#">其他登录方法</a>
63+
</div>
64+
}
65+
</div>
66+
</div>
67+
</div>
68+
69+
@code {
70+
private bool isEmailEntered = false;
71+
private string email = "";
72+
private string password = "";
73+
private bool showEmailError = false;
74+
75+
private void OnEmailSubmit()
76+
{
77+
if (string.IsNullOrWhiteSpace(email))
78+
{
79+
showEmailError = true;
80+
}
81+
else
82+
{
83+
showEmailError = false;
84+
isEmailEntered = true;
85+
}
86+
}
87+
88+
private void GoBack()
89+
{
90+
isEmailEntered = false;
91+
}
92+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
.background-image {
2+
background-image: url('https://logincdn.msauth.net/shared/5/js/../images/fluent_web_light_57fee22710b04cebe1d5.svg');
3+
background-repeat: no-repeat;
4+
background-size: cover;
5+
background-position: center;
6+
width: 100%;
7+
height: 100%;
8+
}
9+
10+
.login-container {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100%;
15+
}
16+
17+
.login-box {
18+
background: white;
19+
padding: 40px;
20+
border-radius: 10px;
21+
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
22+
width: auto;
23+
font-family: "Segoe UI", sans-serif;
24+
text-align: left;
25+
position: relative;
26+
box-sizing: content-box !important;
27+
}
28+
29+
::deep .input {
30+
width: 100%;
31+
padding: 10px;
32+
margin: 12px 0;
33+
border: 1px solid #ccc;
34+
border-radius: 4px;
35+
}
36+
37+
.header-row {
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
position: relative;
42+
height: 40px;
43+
margin-bottom: 20px;
44+
}
45+
46+
.back-button {
47+
position: absolute;
48+
left: 0;
49+
background: transparent;
50+
border: none;
51+
padding: 0;
52+
cursor: pointer;
53+
width: 40px;
54+
height: 40px;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
}
59+
60+
.blazor-text {
61+
font-family: Arial, sans-serif;
62+
font-size: 2rem;
63+
font-weight: bold;
64+
text-align: center;
65+
background: linear-gradient(to right, #8e44ad, #e84393);
66+
-webkit-background-clip: text;
67+
-webkit-text-fill-color: transparent;
68+
}
69+
70+
.logo-container {
71+
margin: 0 auto;
72+
}
73+
74+
.logo {
75+
height: 28px;
76+
}
77+
78+
::deep .button {
79+
width: 100%;
80+
padding: 10px;
81+
background-color: #0078d4;
82+
color: white;
83+
border: none;
84+
border-radius: 4px;
85+
font-weight: bold;
86+
margin-top: 10px;
87+
cursor: pointer;
88+
transition: background-color 0.3s ease;
89+
}
90+
91+
.button:hover {
92+
background-color: #005a9e;
93+
}
94+
95+
.links {
96+
margin-top: 10px;
97+
font-size: 14px;
98+
}
99+
100+
.links a {
101+
color: #0066cc;
102+
text-decoration: none;
103+
}
104+
105+
.links a:hover {
106+
text-decoration: underline;
107+
}
108+
109+
.small {
110+
font-size: 12px;
111+
color: #666;
112+
margin-top: 10px;
113+
}
114+
115+
.email-display {
116+
font-size: 14px;
117+
color: #333;
118+
margin-bottom: 10px;
119+
}
120+
121+
.error {
122+
color: red;
123+
font-size: 13px;
124+
}
125+
126+
.lang-switch {
127+
position: absolute;
128+
top: 10px;
129+
right: 10px;
130+
}
131+
132+
.animate-fade-in {
133+
animation: fadeIn 0.5s ease-in-out;
134+
}
135+
136+
@keyframes fadeIn {
137+
0% {
138+
opacity: 0;
139+
transform: translateY(20px);
140+
}
141+
142+
100% {
143+
opacity: 1;
144+
transform: translateY(0);
145+
}
146+
}
147+
148+
.animate-fade-out {
149+
animation: fadeOut 0.5s ease-in-out forwards;
150+
}
151+
152+
@keyframes fadeOut {
153+
0% {
154+
opacity: 1;
155+
transform: translateY(0);
156+
}
157+
158+
100% {
159+
opacity: 0;
160+
transform: translateY(-20px);
161+
}
162+
}

‎src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ namespace BootstrapBlazor.Server.Components.Samples;
1010
/// <summary>
1111
/// AvatarUpload sample code
1212
/// </summary>
13-
public partial class UploadAvatars : IDisposable
13+
public partial class UploadAvatars
1414
{
15-
private static readonly long MaxFileLength = 5 * 1024 * 1024;
16-
private CancellationTokenSource? _token;
1715
private readonly List<UploadFile> _previewFileList = [];
1816
private readonly Person _foo = new();
1917
private bool _isUploadButtonAtFirst;
@@ -47,15 +45,6 @@ private Task OnAvatarInValidSubmit(EditContext context)
4745
return ToastService.Error(Localizer["UploadsValidateFormTitle"], Localizer["UploadsValidateFormInValidContent"]);
4846
}
4947

50-
/// <summary>
51-
/// <inheritdoc/>
52-
/// </summary>
53-
public void Dispose()
54-
{
55-
_token?.Cancel();
56-
GC.SuppressFinalize(this);
57-
}
58-
5948
private List<AttributeItem> GetAttributes() =>
6049
[
6150
new()

0 commit comments

Comments
 (0)