Merge pull request #15 from Moonlight-Panel/CleanupAndFixes

Added form proccessing screen (not finished). Some ui changes. User m…

Moonlight/App/Database/Entities/User.cs

@@ -19,12 +19,12 @@ public class User
     [MaxLength(64, ErrorMessage = "Max lenght reached")]
     public string LastName { get; set; } = "";
     
-    [Required]
-    [RegularExpression(@"^((((([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)[;]?)+$",
-        ErrorMessage = "Must be a valid email")]
-    [MaxLength(128, ErrorMessage = "Max lenght reached")]
+    [Required(ErrorMessage = "You need to enter an email address")]
+    [EmailAddress(ErrorMessage = "You need to enter a valid email address")]
     public string Email { get; set; } = "";
     
+    [Required(ErrorMessage = "You need to enter a password")]
+    [MinLength(8, ErrorMessage = "You need to enter a password with minimum 8 characters in lenght")]
     public string Password { get; set; } = "";
     
     [Required]

Moonlight/Shared/Components/Auth/Login.razor

@@ -9,6 +9,7 @@
 @using Moonlight.App.Services
 @using Moonlight.App.Exceptions
 @using Logging.Net
+@using Moonlight.App.Database.Entities
 @using Moonlight.App.Services.OAuth2
 @using Moonlight.App.Services.Sessions
 
@@ -24,10 +25,10 @@
     <div class="card rounded-3 w-md-550px">
         <div class="card-body">
             <div class="d-flex flex-center flex-column-fluid pb-15 pb-lg-20">
-                <div class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
+                <SmartForm Model="User" OnValidSubmit="DoLogin">
                     @if (!TotpRequired)
                     {
-                        <div class="text-center mb-11">
+                        <div class="text-center mt-3 mb-11">
                             <h1 class="text-dark fw-bolder mb-3">
                                 <TL>Sign In</TL>
                             </h1>
@@ -61,12 +62,12 @@
                             </span>
                         </div>
 
-                        <div class="fv-row mb-8 fv-plugins-icon-container">
-                            <input @bind="Email" type="text" placeholder="@(SmartTranslateService.Translate("Email"))" class="form-control bg-transparent">
+                        <div class="mt-3 mb-3">
+                            <InputText @bind-Value="User.Email" type="email" placeholder="@(SmartTranslateService.Translate("Email"))" class="form-control bg-transparent"/>
                         </div>
 
-                        <div class="fv-row mb-3 fv-plugins-icon-container">
-                            <input @bind="Password" type="password" placeholder="@(SmartTranslateService.Translate("Password"))" class="form-control bg-transparent">
+                        <div class="mb-3">
+                            <InputText @bind-Value="User.Password" type="password" placeholder="@(SmartTranslateService.Translate("Password"))" class="form-control bg-transparent"/>
                         </div>
 
                         <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
@@ -78,11 +79,9 @@
                         </div>
 
                         <div class="d-grid mb-10">
-                            <WButton Text="@(SmartTranslateService.Translate("Sign-in"))"
-                                     WorkingText="@(SmartTranslateService.Translate("Working"))"
-                                     CssClasses="btn-primary"
-                                     OnClick="DoLogin">
-                            </WButton>
+                            <button type="submit" class="btn btn-primary">
+                                <TL>Sign-in</TL>
+                            </button>
                         </div>
                     }
                     else
@@ -106,7 +105,7 @@
                             <TL>Sign up</TL>
                         </a>
                     </div>
-                </div>
+                </SmartForm>
             </div>
         </div>
     </div>
@@ -114,8 +113,7 @@
 
 @code
 {
-    private string Email = "";
-    private string Password = "";
+    private User User = new();
 
     private bool TotpRequired = false;
     private string TotpCode = "";
@@ -124,16 +122,16 @@
     {
         try
         {
-            Email = Email.ToLower().Trim();
+            User.Email = User.Email.ToLower().Trim();
 
-            TotpRequired = await UserService.CheckTotp(Email, Password);
+            TotpRequired = await UserService.CheckTotp(User.Email, User.Password);
 
             if (!TotpRequired)
             {
-                var token = await UserService.Login(Email, Password);
+                var token = await UserService.Login(User.Email, User.Password);
                 await CookieService.SetValue("token", token, 10);
 
-                if(NavigationManager.Uri.EndsWith("login"))
+                if (NavigationManager.Uri.EndsWith("login"))
                     NavigationManager.NavigateTo("/", true);
                 else
                     NavigationManager.NavigateTo(NavigationManager.Uri, true);

Moonlight/Shared/Components/Forms/SmartForm.razor

@@ -3,7 +3,16 @@
 <div class="form">
     <EditForm @ref="EditForm" Model="Model" OnValidSubmit="ValidSubmit" OnInvalidSubmit="InvalidSubmit">
         <DataAnnotationsValidator></DataAnnotationsValidator>
-        @if (ErrorMessages.Any())
+        @if (Working)
+        {
+            <div class="d-flex flex-center flex-column">
+                <span class="fs-1 spinner-border spinner-border-lg align-middle me-2"></span>
+                <span class="mt-3 fs-5"><TL>Proccessing</TL></span>
+            </div>
+        }
+        else
+        {
+            if (ErrorMessages.Any())
             {
                 <div class="alert alert-danger p-10 mb-3">
                     @foreach (var msg in ErrorMessages)
@@ -14,6 +23,7 @@
                 </div>
             }
             @(ChildContent)
+        }
     </EditForm>
 </div>
 
@@ -38,6 +48,8 @@
 
     private List<string> ErrorMessages = new();
 
+    private bool Working = false;
+
     protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
@@ -49,10 +61,18 @@
     private async Task ValidSubmit(EditContext context)
     {
         ErrorMessages.Clear();
+        Working = true;
+
         await InvokeAsync(StateHasChanged);
 
-        await OnValidSubmit.InvokeAsync(context);
-        await OnSubmit.InvokeAsync(context);
+        await Task.Run(async () =>
+        {
+            await InvokeAsync(() => OnValidSubmit.InvokeAsync(context));
+            await InvokeAsync(() => OnSubmit.InvokeAsync(context));
+
+            Working = false;
+            await InvokeAsync(StateHasChanged);
+        });
     }
 
     private async Task InvalidSubmit(EditContext context)

Moonlight/Shared/Components/Partials/Navbar.razor

@@ -20,15 +20,9 @@
     @if (User != null)
     {
         <div class="app-navbar-item ms-1 ms-lg-3">
-            <div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px position-relative" id="support_ticket_toggle">
-                <span class="svg-icon svg-icon-1">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path opacity="0.3" d="M20 3H4C2.89543 3 2 3.89543 2 5V16C2 17.1046 2.89543 18 4 18H4.5C5.05228 18 5.5 18.4477 5.5 19V21.5052C5.5 22.1441 6.21212 22.5253 6.74376 22.1708L11.4885 19.0077C12.4741 18.3506 13.6321 18 14.8167 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3Z" fill="currentColor"></path>
-                        <rect x="6" y="12" width="7" height="2" rx="1" fill="currentColor"></rect>
-                        <rect x="6" y="7" width="12" height="2" rx="1" fill="currentColor"></rect>
-                    </svg>
-                </span>
-            </div>
+            <a href="/support" class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px position-relative">
+                <i class="bx bx-support"></i>
+            </a>
         </div>
         
         <div class="app-navbar-item ms-1 ms-lg-3" id="kt_header_user_menu_toggle">

Moonlight/resources/lang/de_de.lang

@@ -394,6 +394,11 @@ Discord id;Discord id
 Discord username;Discord username
 Discord discriminator;Discord discriminator
 The Name field is required.;The Name field is required.
+An error occured while logging you in;An error occured while logging you in
+You need to enter an email address;You need to enter an email address
+You need to enter a password;You need to enter a password
+You need to enter a password with minimum 8 characters in lenght;You need to enter a password with minimum 8 characters in lenght
+Proccessing;Proccessing
 The FirstName field is required.;The FirstName field is required.
 The LastName field is required.;The LastName field is required.
 The Address field is required.;The Address field is required.