From 81fb75a0adf4bec94c443f4fd2eda7a8839e1218 Mon Sep 17 00:00:00 2001
From: Matt <mattgbotha@gmail.com>
Date: Tue, 1 Oct 2024 00:45:19 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20UI=20Update:=20Styled=20the=20lo?=
 =?UTF-8?q?gin=20and=20register=20web=20pages.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Areas/Identity/Pages/Account/Login.cshtml | 139 ++++++++++++---
 .../Identity/Pages/Account/Register.cshtml    | 158 ++++++++++++++----
 2 files changed, 244 insertions(+), 53 deletions(-)

diff --git a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
index 3695a4ae..e5ee18fc 100644
--- a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
+++ b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Login.cshtml
@@ -6,70 +6,157 @@ ViewData["Title"] = "Log in";
 @* Model.ReturnUrl = Request.Query["ReturnUrl"]; *@
 }
 
-<h1>@ViewData["Title"]</h1>
+<style>
+    body {
+        background-color: #f3f1eD;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    h1, h2, h3 {
+        color: #033a30;
+        text-align: center;
+    }
+
+    .login-container {
+        background-color: #f3f1eD;
+        padding: 30px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        margin-top: 50px;
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .form-floating label {
+        font-weight: 600;
+        color: #1d695b;
+    }
+
+    .btn-primary {
+        background-color: #033a30;
+        border: none;
+        padding: 10px;
+        font-size: 1.2em;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-primary:hover {
+        background-color: #1d695b;
+    }
+
+    .external-login-button {
+        margin: auto;
+        display: block;
+        width: 80%;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+        border: 1px solid #033a30;
+        color: #033a30;
+        padding: 10px;
+    }
+
+    .external-login-button .btn {
+        width: 100%;
+    }
+
+    .login-section {
+        padding: 10px;
+        background-color: #f3f1eD;
+    }
+
+    .form-check-label {
+        font-weight: 500;
+    }
+
+    .form-check-input {
+        margin-right: 10px;
+    }
+
+    #forgot-password, a {
+        color: #1d695b;
+        text-decoration: none;
+    }
+
+    #forgot-password:hover, a:hover {
+        text-decoration: underline;
+    }
+
+    .row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .form-control {
+        border-radius: 15px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+</style>
+
 <div class="row">
-    <div class="col-md-4">
-        <section>
+    <div class="col-md-4 login-container">
+        <section class="login-section">
             <form id="account" method="post">
-                <h2>Use a local account to log in.</h2>
+                <h2>Log in to Your Account</h2>
                 <hr />
                 <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
+                
+                @* Email field *@
                 <div class="form-floating mb-3">
                     <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true"
                         placeholder="name@example.com" />
                     <label asp-for="Input.Email" class="form-label">Email / Username</label>
                     <span asp-validation-for="Input.Email" class="text-danger"></span>
                 </div>
+
+                @* Password field *@
                 <div class="form-floating mb-3">
                     <input asp-for="Input.Password" class="form-control" autocomplete="current-password"
-                        aria-required="true" placeholder="password" />
+                        aria-required="true" placeholder="password" type="password" id="Input_Password" />
                     <label asp-for="Input.Password" class="form-label">Password</label>
                     <span asp-validation-for="Input.Password" class="text-danger"></span>
                 </div>
 
+                @* Show password checkbox *@
                 <div class="checkbox mb-3">
-                    <label class="form-label">
+                    <label class="form-check-label">
                         <input type="checkbox" name="showPassword" id="ckShowPass" onclick="myshowp(this)"
                             class="form-check-input" />
                         Show Password
                     </label>
                 </div>
+
+                @* Remember me checkbox *@
                 <div class="checkbox mb-3">
-                    <label asp-for="Input.RememberMe" class="form-label">
+                    <label asp-for="Input.RememberMe" class="form-check-label">
                         <input class="form-check-input" asp-for="Input.RememberMe" />
                         @Html.DisplayNameFor(m => m.Input.RememberMe)
                     </label>
                 </div>
+
+                @* Log in button *@
                 <div>
                     <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
                 </div>
 
+
                 <div>
+                    @* Register new user *@
                     <br />
                     <p>
                         <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
                     </p>
-
-                    <br />
-                    <p>
-                        <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
-                    </p>
-
-                    <br />
-                    @* <p>
-                        <a asp-area="Identity" asp-page="/Account/Register">Register</a>
-                    </p> *@
-                    @* <p>
-                        <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
-                    </p> *@
                 </div>
             </form>
         </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
-        <section>
+
+    <div class="col-md-6">
+        <section class="login-section">
+            <br>
             <h3>Use another service to log in.</h3>
-            <hr />
+            <br>
             @{
             if ((Model.ExternalLogins?.Count ?? 0) == 0)
             {
@@ -89,8 +176,10 @@ ViewData["Title"] = "Log in";
                     <p>
                         @foreach (var provider in Model.ExternalLogins!)
                         {
-                        <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name"
-                            title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                            <button type="submit" class="btn btn-outline-primary external-login-button" name="provider" value="@provider.Name"
+                                title="Log in using your @provider.DisplayName account">
+                                Log in with @provider.DisplayName
+                            </button>
                         }
                     </p>
                 </div>
diff --git a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
index 6e03f2c5..efcc20dc 100644
--- a/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
+++ b/dotnet/UserApi/UserApi/Areas/Identity/Pages/Account/Register.cshtml
@@ -4,36 +4,136 @@
     ViewData["Title"] = "Register";
 }
 
-<h1>@ViewData["Title"]</h1>
+<style>
+    body {
+        background-color: #f3f1eD;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+
+    h1, h2, h3 {
+        color: #033a30;
+        text-align: center;
+    }
+
+    .login-container {
+        background-color: #f3f1eD;
+        padding: 30px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        margin-top: 50px;
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .form-floating label {
+        font-weight: 600;
+        color: #1d695b;
+    }
+
+    .btn-primary {
+        background-color: #033a30;
+        border: none;
+        padding: 10px;
+        font-size: 1.2em;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-primary:hover {
+        background-color: #1d695b;
+    }
+
+    .external-login-button {
+        margin: auto;
+        display: block;
+        width: 80%;
+        border-radius: 30px;
+        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+        border: 1px solid #033a30;
+        color: #033a30;
+        padding: 10px;
+    }
+
+    .external-login-button .btn {
+        width: 100%;
+    }
+
+    .login-section {
+        padding: 10px;
+        background-color: #f3f1eD;
+    }
+
+    .form-check-label {
+        font-weight: 500;
+    }
+
+    .form-check-input {
+        margin-right: 10px;
+    }
+
+    #forgot-password, a {
+        color: #1d695b;
+        text-decoration: none;
+    }
+
+    #forgot-password:hover, a:hover {
+        text-decoration: underline;
+    }
+
+    .row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .form-control {
+        border-radius: 15px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+</style>
 
 <div class="row">
-    <div class="col-md-4">
-        <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
-            <h2>Create a new account.</h2>
-            <hr />
-            <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
-                <label asp-for="Input.Email">Email</label>
-                <span asp-validation-for="Input.Email" class="text-danger"></span>
-            </div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
-                <label asp-for="Input.Password">Password</label>
-                <span asp-validation-for="Input.Password" class="text-danger"></span>
-            </div>
-            <div class="form-floating mb-3">
-                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
-                <label asp-for="Input.ConfirmPassword">Confirm Password</label>
-                <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
-            </div>
-            <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
-        </form>
+    <div class="col-md-4 login-container">
+        <section class="login-section">
+            <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
+                <h2>Create a New Account</h2>
+                <hr />
+                <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
+
+                @* Email field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                    <label asp-for="Input.Email">Email</label>
+                    <span asp-validation-for="Input.Email" class="text-danger"></span>
+                </div>
+
+                @* Password field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
+                    <label asp-for="Input.Password">Password</label>
+                    <span asp-validation-for="Input.Password" class="text-danger"></span>
+                </div>
+
+                @* Confirm Password field *@
+                <div class="form-floating mb-3">
+                    <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
+                    <label asp-for="Input.ConfirmPassword">Confirm Password</label>
+                    <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
+                </div>
+
+                @* Register button *@
+                <div>
+                    <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
+                </div>
+            </form>
+        </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
-        <section>
-            <h3>Use another service to register.</h3>
-            <hr />
+
+    <div class="col-md-6">
+        <section class="login-section">
+            <br>
+            <h3>Use Another Service to Register</h3>
+            <br>
             @{
                 if ((Model.ExternalLogins?.Count ?? 0) == 0)
                 {
@@ -51,7 +151,9 @@
                             <p>
                                 @foreach (var provider in Model.ExternalLogins!)
                                 {
-                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                                    <button type="submit" class="btn btn-outline-primary external-login-button" name="provider" value="@provider.Name" title="Register using your @provider.DisplayName account">
+                                        Register with @provider.DisplayName
+                                    </button>
                                 }
                             </p>
                         </div>