diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs index 5f28ad92fa0..3e77f0a14c1 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs @@ -80,6 +80,12 @@ protected override async Task OnInitializedAsync() Template = CreateDownloadButtonComponent("template4", _template4), Text = "Template 4", Url = "tutorials/template4" + }, + new() + { + Template = CreateDownloadButtonComponent("template5", _template5), + Text = "Template 5", + Url = "/tutorials/template5" } ] }, @@ -215,6 +221,14 @@ .. _layoutFileList .. _layoutFileList ]; + private readonly string[] _template5 = +[ + "Tutorials/LoginAndRegister/Template5.razor", + "Tutorials/LoginAndRegister/Template5.razor.css", + "../Layout/TutorialsLayout.razor", + "../Layout/TutorialsLayout.razor.css" + ]; + private readonly string[] _waterfallFileList = [ "Tutorials/Waterfall.razor", 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..5c411c93283 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor @@ -0,0 +1,92 @@ +@page "/tutorials/template5" +@layout TutorialsLayout + + + + + +
+
+ +
+
+ +@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/Template5.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css new file mode 100644 index 00000000000..4cbc39ef213 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css @@ -0,0 +1,162 @@ +.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: 100%; + height: 100%; +} + +.login-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.login-box { + background: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + width: auto; + font-family: "Segoe UI", sans-serif; + text-align: left; + position: relative; + box-sizing: content-box !important; +} + +::deep .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; +} + +.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; +} + +.logo { + height: 28px; +} + +::deep .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); + } +} 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()