From 38c46e0bcaf833088a420772f7cf9541e2d51999 Mon Sep 17 00:00:00 2001 From: Old Li Date: Thu, 5 Jun 2025 20:13:18 +0800 Subject: [PATCH 1/8] Add transitional login page and update navigation menu This commit introduces a new `TransitionalLogin.razor` page featuring a structured login form with email and password fields, including validation for the email input and a back button for navigation. The corresponding CSS file, `TransitionalLogin.razor.css`, styles the login interface with background images, button styles, and animations. Additionally, the `TutorialsNavMenu.razor.cs` file is updated to include the new transitional login entry in the navigation menu. --- .../Layout/TutorialsNavMenu.razor.cs | 15 ++ .../LoginAndRegister/TransitionalLogin.razor | 82 ++++++++++ .../TransitionalLogin.razor.css | 153 ++++++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor create mode 100644 src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs index 5f28ad92fa0..8ef417d444d 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs @@ -4,7 +4,9 @@ // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone using BootstrapBlazor.Server.Components.Pages; + using Microsoft.AspNetCore.Components.Web; + using System.Text; namespace BootstrapBlazor.Server.Components.Layout; @@ -80,6 +82,12 @@ protected override async Task OnInitializedAsync() Template = CreateDownloadButtonComponent("template4", _template4), Text = "Template 4", Url = "tutorials/template4" + }, + new() + { + Template = CreateDownloadButtonComponent("TransitionalLogin", _template5), + Text = "TransitionalLogin", + Url = "/tutorials/transitionallogin" } ] }, @@ -215,6 +223,13 @@ .. _layoutFileList .. _layoutFileList ]; + private readonly string[] _template5 = +[ + "Tutorials/LoginAndRegister/TransitionalLogin.razor", + "Tutorials/LoginAndRegister/TransitionalLogin.razor.css", + .. _layoutFileList + ]; + private readonly string[] _waterfallFileList = [ "Tutorials/Waterfall.razor", diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor new file mode 100644 index 00000000000..29d485ce0e0 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor @@ -0,0 +1,82 @@ +@page "/tutorials/transitionallogin" +@layout TutorialsLoginLayout + +
+ +
+ +@code { + private bool isEmailEntered = false; + private string email = ""; + private bool showEmailError = false; + + private void OnEmailSubmit() + { + if (string.IsNullOrWhiteSpace(email)) + { + showEmailError = true; + } + else + { + showEmailError = false; + isEmailEntered = true; + } + } + + private void GoBack() + { + isEmailEntered = false; + } + +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css new file mode 100644 index 00000000000..787b069a89c --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css @@ -0,0 +1,153 @@ + +.background-image { + background-image: url('https://logincdn.msauth.net/shared/5/js/../images/fluent_web_light_57fee22710b04cebe1d5.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + width: 100vw; + height: 100vh; +} + +.login-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.login-box { + background: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + width: 350px; + font-family: "Segoe UI", sans-serif; + text-align: left; + position: relative; + box-sizing: content-box !important; +} + +.input { + width: 100%; + padding: 10px; + margin: 12px 0; + border: 1px solid #ccc; + border-radius: 4px; +} + +.header-row { + display: flex; + align-items: center; + justify-content: center; + position: relative; + height: 40px; + margin-bottom: 20px; +} + +.back-button { + position: absolute; + left: 0; + background: transparent; + border: none; + padding: 0; + cursor: pointer; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.logo-container { + margin: 0 auto; +} + +.logo { + height: 28px; +} + +.button { + width: 100%; + padding: 10px; + background-color: #0078d4; + color: white; + border: none; + border-radius: 4px; + font-weight: bold; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.3s ease; +} + + .button:hover { + background-color: #005a9e; + } + +.links { + margin-top: 10px; + font-size: 14px; +} + + .links a { + color: #0066cc; + text-decoration: none; + } + + .links a:hover { + text-decoration: underline; + } + +.small { + font-size: 12px; + color: #666; + margin-top: 10px; +} + +.email-display { + font-size: 14px; + color: #333; + margin-bottom: 10px; +} + +.error { + color: red; + font-size: 13px; +} + +.lang-switch { + position: absolute; + top: 10px; + right: 10px; +} + +.animate-fade-in { + animation: fadeIn 0.5s ease-in-out; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-out { + animation: fadeOut 0.5s ease-in-out forwards; +} + +@keyframes fadeOut { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-20px); + } +} From 735c26b5153bc6aab2516da41604a0d6afda8c1c Mon Sep 17 00:00:00 2001 From: Old Li Date: Thu, 5 Jun 2025 20:38:30 +0800 Subject: [PATCH 2/8] Refactor login UI for BootstrapBlazor integration Updated `TransitionalLogin.razor` to replace SVG icons with Font Awesome icons, modified button labels and subtitles to reflect BootstrapBlazor accounts, and switched to `BootstrapInput` components for email and password fields. Retained error message logic. Adjusted CSS in `TransitionalLogin.razor.css` to use `::deep` selectors for scoped styles while maintaining button hover effects. --- .../LoginAndRegister/TransitionalLogin.razor | 21 +++++++++---------- .../TransitionalLogin.razor.css | 10 ++++----- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor index 29d485ce0e0..71354db7864 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor @@ -7,11 +7,9 @@
@if (isEmailEntered) { - } @@ -28,26 +26,26 @@ @if (!isEmailEntered) {

登录

-

使用你的 Microsoft 帐户。

- +

使用你的 BootstrapBlazor 帐户。

+ - +
忘记用户名？
- 不熟悉 Microsoft？创建帐户 + 不熟悉 BootstrapBlazor？去看文档
} else {

输入你的密码

- +
忘记了密码？
- +
其他登录方法
@@ -59,6 +57,7 @@ @code { private bool isEmailEntered = false; private string email = ""; + private string password = ""; private bool showEmailError = false; private void OnEmailSubmit() diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css index 787b069a89c..b9cd230fb18 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css @@ -27,7 +27,7 @@ box-sizing: content-box !important; } -.input { +::deep .input { width: 100%; padding: 10px; margin: 12px 0; @@ -66,7 +66,7 @@ height: 28px; } -.button { +::deep .button { width: 100%; padding: 10px; background-color: #0078d4; @@ -79,9 +79,9 @@ transition: background-color 0.3s ease; } - .button:hover { - background-color: #005a9e; - } +.button:hover { + background-color: #005a9e; +} .links { margin-top: 10px; From b0d7510a2d2aa4afedc11c0e9729118496380187 Mon Sep 17 00:00:00 2001 From: Old Li Date: Thu, 5 Jun 2025 21:06:29 +0800 Subject: [PATCH 3/8] Update TransitionalLogin layout and styles Removed SVG logo, added "BootstrapBlazor" header, and updated documentation link. Adjusted background image properties for better scaling and introduced new `.blazor-text` class for styling. Centered logo in the layout. --- .../LoginAndRegister/TransitionalLogin.razor | 7 ++++--- .../LoginAndRegister/TransitionalLogin.razor.css | 14 ++++++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor index 71354db7864..6b649338b34 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor @@ -14,13 +14,14 @@ }
-

BootstrapBlazor

+@* + *@
@if (!isEmailEntered) @@ -34,7 +35,7 @@ 忘记用户名？
- 不熟悉 BootstrapBlazor？去看文档 + 不熟悉 BootstrapBlazor？去看文档
} else diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css index b9cd230fb18..3ff24d80ecd 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css @@ -4,8 +4,8 @@ background-repeat: no-repeat; background-size: cover; background-position: center; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; } .login-container { @@ -58,6 +58,16 @@ justify-content: center; } +.blazor-text { + font-family: Arial, sans-serif; + font-size: 2rem; + font-weight: bold; + text-align: center; + background: linear-gradient(to right, #8e44ad, #e84393); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + .logo-container { margin: 0 auto; } From bafb8d01e2c7cce625cf8d5807bf98defbdb44e9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 6 Jun 2025 08:29:28 +0800 Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=A8=A1?= =?UTF-8?q?=E6=9D=BF=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Layout/TutorialsNavMenu.razor.cs | 6 +- .../LoginAndRegister/Template5.razor | 74 +++++++++++++++++ ...nalLogin.razor.css => Template5.razor.css} | 3 +- .../LoginAndRegister/TransitionalLogin.razor | 82 ------------------- 4 files changed, 78 insertions(+), 87 deletions(-) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor rename src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/{TransitionalLogin.razor.css => Template5.razor.css} (99%) delete mode 100644 src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs index 8ef417d444d..dc84736a279 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs @@ -85,9 +85,9 @@ protected override async Task OnInitializedAsync() }, new() { - Template = CreateDownloadButtonComponent("TransitionalLogin", _template5), - Text = "TransitionalLogin", - Url = "/tutorials/transitionallogin" + Template = CreateDownloadButtonComponent("template5", _template5), + Text = "Template 5", + Url = "/tutorials/template5" } ] }, diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor new file mode 100644 index 00000000000..b28f63a4fe6 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor @@ -0,0 +1,74 @@ +@page "/tutorials/template5" +@layout TutorialsLoginLayout + +
+ +
+ +@code { + private bool isEmailEntered = false; + private string email = ""; + private string password = ""; + private bool showEmailError = false; + + private void OnEmailSubmit() + { + if (string.IsNullOrWhiteSpace(email)) + { + showEmailError = true; + } + else + { + showEmailError = false; + isEmailEntered = true; + } + } + + private void GoBack() + { + isEmailEntered = false; + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css similarity index 99% rename from src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css rename to src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css index 3ff24d80ecd..16e5e8ff58d 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css @@ -1,5 +1,4 @@ - -.background-image { +.background-image { background-image: url('https://logincdn.msauth.net/shared/5/js/../images/fluent_web_light_57fee22710b04cebe1d5.svg'); background-repeat: no-repeat; background-size: cover; diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor deleted file mode 100644 index 6b649338b34..00000000000 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/TransitionalLogin.razor +++ /dev/null @@ -1,82 +0,0 @@ -@page "/tutorials/transitionallogin" -@layout TutorialsLoginLayout - -
- -
- -@code { - private bool isEmailEntered = false; - private string email = ""; - private string password = ""; - private bool showEmailError = false; - - private void OnEmailSubmit() - { - if (string.IsNullOrWhiteSpace(email)) - { - showEmailError = true; - } - else - { - showEmailError = false; - isEmailEntered = true; - } - } - - private void GoBack() - { - isEmailEntered = false; - } - -} From 4e114143fd40ad5c4e865c9a9aa79b4548ff27f4 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 6 Jun 2025 08:29:34 +0800 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/UploadAvatars.razor.cs | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs index d3d4b8b0e37..98f286181e2 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/UploadAvatars.razor.cs @@ -10,10 +10,8 @@ namespace BootstrapBlazor.Server.Components.Samples; /// /// AvatarUpload sample code /// -public partial class UploadAvatars : IDisposable +public partial class UploadAvatars { - private static readonly long MaxFileLength = 5 * 1024 * 1024; - private CancellationTokenSource? _token; private readonly List _previewFileList = []; private readonly Person _foo = new(); private bool _isUploadButtonAtFirst; @@ -47,15 +45,6 @@ private Task OnAvatarInValidSubmit(EditContext context) return ToastService.Error(Localizer["UploadsValidateFormTitle"], Localizer["UploadsValidateFormInValidContent"]); } - /// - /// - /// - public void Dispose() - { - _token?.Cancel(); - GC.SuppressFinalize(this); - } - private List GetAttributes() => [ new() From bbee2aae0d1022ba787a9824079ffc4242de5fbc Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 6 Jun 2025 08:31:57 +0800 Subject: [PATCH 6/8] =?UTF-8?q?doc:=20=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Layout/TutorialsNavMenu.razor.cs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs index dc84736a279..fed19715ca7 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs @@ -4,9 +4,7 @@ // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone using BootstrapBlazor.Server.Components.Pages; - using Microsoft.AspNetCore.Components.Web; - using System.Text; namespace BootstrapBlazor.Server.Components.Layout; @@ -225,8 +223,8 @@ .. _layoutFileList private readonly string[] _template5 = [ - "Tutorials/LoginAndRegister/TransitionalLogin.razor", - "Tutorials/LoginAndRegister/TransitionalLogin.razor.css", + "Tutorials/LoginAndRegister/Template5.razor", + "Tutorials/LoginAndRegister/Template5.razor.css", .. _layoutFileList ]; From a2c6def1ba35de8eb973e0cccb8ae220a3582403 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 6 Jun 2025 08:47:12 +0800 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoginAndRegister/Template5.razor | 20 ++++++++++++++++++- .../LoginAndRegister/Template5.razor.css | 4 ++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor index b28f63a4fe6..5c411c93283 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor @@ -1,5 +1,23 @@ @page "/tutorials/template5" -@layout TutorialsLoginLayout +@layout TutorialsLayout + + + +