Redesign credential screen

Author: Kaliumhexacyanoferrat

Modules/Authentication.Web/Controllers/BaseController.cs

@@ -1,6 +1,7 @@
 using GenHTTP.Api.Content;
 using GenHTTP.Api.Content.Templating;
 
+using GenHTTP.Modules.Authentication.Web.ViewModels;
 using GenHTTP.Modules.IO;
 using GenHTTP.Modules.Razor;
 
@@ -10,9 +11,9 @@ namespace GenHTTP.Modules.Authentication.Web.Controllers
     public class BaseController
     {
 
-        protected IHandlerBuilder RenderAccountEntry(string title)
+        protected IHandlerBuilder RenderAccountEntry(string title, string buttonCaption)
         {
-            return ModRazor.Page(Resource.FromAssembly("EnterAccount.cshtml"), (r, h) => new BasicModel(r, h))
+            return ModRazor.Page(Resource.FromAssembly("EnterAccount.cshtml"), (r, h) => new ViewModel<EnterAccountModel>(r, h, new(buttonCaption)))
                            .AddStyle("{web-auth-resources}/style.css")
                            .Title(title);
         }

Modules/Authentication.Web/Controllers/LoginController.cs

@@ -24,7 +24,7 @@ public LoginController(Func<IRequest, string, string, ValueTask<IUser?>> perform
         public IHandlerBuilder Index()
         {
             // ToDo: already logged in
-            return RenderAccountEntry("Login");
+            return RenderAccountEntry("Login", "Login");
         }
 
         [ControllerAction(RequestMethod.POST)]
@@ -40,7 +40,7 @@ public async Task<IHandlerBuilder> Index(string user, string password, IRequest
             }
             else
             {
-                return RenderAccountEntry("Login");
+                return RenderAccountEntry("Login", "Login");
             }
         }
 

Modules/Authentication.Web/Controllers/SetupController.cs

@@ -25,7 +25,7 @@ public SetupController(Func<IRequest, string, string, ValueTask> performSetup)
 
         public IHandlerBuilder Index()
         {
-            return RenderAccountEntry("Setup");
+            return RenderAccountEntry("Setup", "Create Account");
         }
 
         [ControllerAction(RequestMethod.POST)]

Modules/Authentication.Web/Resources/style.css

@@ -1,6 +1,52 @@
-.center {
-    margin: auto;
-    width: 50%;
-    border: 3px solid green;
-    padding: 10px;
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon {
+    width: 15px;
+    height: 100%;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: 99;
+}
+
+.inputs {
+    position: relative;
+    display: flex;
+    flex-flow: column wrap;
+    gap: 20px;
+    margin-left: 10px;
+}
+
+.user_cont, .pass_cont {
+    position: relative;
+}
+
+.inputs input {
+    width: 100%;
+    border: none;
+    outline: none;
+    background-color: #DEDEDE;
+    padding: 7px 6px;
+    border-radius: 10px;
+}
+
+button {
+    width: 100%;
+    border: none;
+    outline: none;
+    padding: 5px 8px;
+    border-radius: 10px;
+    transition: all 0.1s ease;
+    background-color: #DEDEDE;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    cursor: pointer;
 }

Modules/Authentication.Web/ViewModels/EnterAccountModel.cs

@@ -0,0 +1,11 @@
+namespace GenHTTP.Modules.Authentication.Web.ViewModels
+{
+    
+    public record EnterAccountModel
+    (
+
+        string ButtonCaption
+
+    );
+    
+}

Modules/Authentication.Web/Views/EnterAccount.cshtml

@@ -1,13 +1,27 @@
-<div class="center">
+<form id="credentials" method="post" action=".">
 
-    <form id="credentials" method="post" action=".">
+    <div class="container">
+    
+        <div class="inputs">
+    
+            <div class="user_cont">
+                <input type="text" id="user" name="user" placeholder="username" />
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#333333" class="icon w-6 h-6">
+                    <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+                </svg>
+            </div>
+    
+            <div class="pass_cont">
+                <input type="password" name="password" id="password" placeholder="password" />
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#333333" class="icon w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+                </svg>
+            </div>
+    
+            <button>@Model.Data.ButtonCaption</button>
+    
+        </div>
+    
+    </div>
 
-        <input type="text" id="user" name="user" placeholder="Username" />
-
-        <input type="password" name="password" id="password" />
-
-        <input type="submit" value="Send" />
-
-    </form>
-
-</div>
+</form>