Merge pull request #9 from leonhoppe/feature/adminLogin

Feature/admin login

README.md

@@ -12,7 +12,7 @@ A simple backend management api for ASP.NET Core Web APIs
 - [x] Code cleanup
 - [x] Relations in database
 - [x] Generated Admin pages
-- [ ] Pretty Login page for administration
+- [x] Pretty Login page for administration
 - [ ] Clean documentation
 
 # Usage

src/HopFrame.Web/Pages/Administration/AdminDashboard.razor

@@ -17,7 +17,7 @@
         @foreach (var adminPage in Pages.LoadRegisteredAdminPages()) {
             <AuthorizedView Permission="@adminPage.Permissions.View">
                 <BSCol Column="4" style="margin-bottom: 10px">
-                    <BSCard CardType="CardType.Card" Color="BSColor.Dark" style="min-height: 200px">
+                    <BSCard CardType="CardType.Card" Color="BSColor.Dark" style="min-height: 200px; min-width: 200px">
                         <BSCard CardType="CardType.Body" style="display: flex; flex-direction: column">
                             <BSCard CardType="CardType.Title">@adminPage.Title</BSCard>
                             <BSCard CardType="CardType.Subtitle"><span style="color: gray">@adminPage.Permissions.View</span></BSCard>

src/HopFrame.Web/Pages/Administration/AdminLogin.razor

@@ -12,9 +12,10 @@
 <PageTitle>Login</PageTitle>
 
 <div class="login-wrapper">
-    <EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form">
-        <div class="field-wrapper">
-            <h3>Login</h3>
+    <div id="login-card">
+        <span id="login-title">HopFrame Administration</span>
+        <span id="login-subtitle">Login to proceed</span>
+        <EditForm Model="UserLogin" OnValidSubmit="Login" FormName="login-form" style="display: flex; flex-grow: 1; flex-direction: column">
             <div class="mb-3">
                 <BSLabel>E-Mail address</BSLabel>
                 <InputText type="email" class="form-control" required @bind-Value="UserLogin.Email"/>
@@ -23,13 +24,15 @@
                 <BSLabel>Password</BSLabel>
                 <InputText type="password" class="form-control" required @bind-Value="UserLogin.Password"/>
             </div>
-            <BSButton Color="BSColor.Primary" IsSubmit="true">Login</BSButton>
-
+            
             @if (_hasError) {
                 <BSAlert Color="BSColor.Danger" style="margin-top: 16px; margin-bottom: 0">Email or password does not match any account!</BSAlert>
             }
-        </div>
-    </EditForm>
+            
+            <BSButton Color="BSColor.Primary" IsSubmit="true" MarginTop="Margins.Auto" MarginLeftAndRight="Margins.Auto" style="width: 100px">Login</BSButton>
+
+        </EditForm>
+    </div>
 </div>
 
 @inject IAuthService Auth
@@ -44,7 +47,7 @@
 
     private const string DefaultRedirect = "/administration";
 
-    private bool _hasError = false;
+    private bool _hasError;
 
     protected override async Task OnInitializedAsync() {
         UserLogin ??= new();
@@ -62,6 +65,6 @@
             return;
         }
 
-        Navigator.NavigateTo(string.IsNullOrEmpty(RedirectAfter) ? DefaultRedirect : RedirectAfter, true);
+        Navigator.NavigateTo(string.IsNullOrEmpty(RedirectAfter) ? DefaultRedirect : "/administration/" + RedirectAfter, true);
     }
 }

src/HopFrame.Web/Pages/Administration/AdminLogin.razor.css

@@ -2,14 +2,33 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    background-color: #2c3034;
+    height: 100vh;
 }
 
-.field-wrapper {
-    margin-top: 25vh;
-    min-width: 500px;
-
-    padding: 30px;
-    border: 2px solid #ced4da;
-    border-radius: 10px;
-    position: relative;
+#login-card {
+    min-width: 700px;
+    min-height: 500px;
+    background-color: #212529;
+    border-radius: 20px;
+    color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+#login-card span {
+    display: block;
+    text-align: center;
+}
+
+#login-title {
+    font-size: 35px;
+    line-height: 1.5;
+}
+
+#login-subtitle {
+    font-size: 24px;
+    color: gray;
+    margin-bottom: 30px;
 }

src/HopFrame.Web/Pages/Administration/AdminPageList.razor

@@ -18,7 +18,7 @@
 @using HopFrame.Web.Components
 
 <PageTitle>@_pageData.Title</PageTitle>
-<AuthorizedView Permission="@_pageData.Permissions.View" RedirectIfUnauthorized="administration/login" />
+<AuthorizedView Permission="@_pageData.Permissions.View" RedirectIfUnauthorized="@GenerateRedirectString()" />
 
 <AdminPageModal ReloadDelegate="Reload" @ref="_modal"/>
 
@@ -243,4 +243,8 @@
             });
         }
     }
+
+    private string GenerateRedirectString() {
+        return "/administration/login?redirect=" + _pageData?.Url;
+    }
 }

src/HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor

@@ -1,9 +1,6 @@
-@using HopFrame.Web.Components
-@using BlazorStrap.V5
+@using BlazorStrap.V5
 @inherits LayoutComponentBase
 
-<AuthorizedView Permission="@Security.AdminPermissions.IsAdmin" RedirectIfUnauthorized="administration/login" />
-
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
 <div class="page" style="background-color: #2c3034; position: relative; min-height: 100vh">

src/HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor

@@ -66,6 +66,13 @@
     }
 
     private void Logout() {
-        Navigator.NavigateTo("administration/login", true);
+        var redirectString = "";
+
+        if (!Navigator.Uri.EndsWith("administration") && !Navigator.Uri.EndsWith("administration/")) {
+            var parts = Navigator.Uri.Split("administration/");
+            redirectString = "?redirect=" + parts.Last();
+        }
+        
+        Navigator.NavigateTo("administration/login" + redirectString, true);
     }
 }