added authentication.

Views/Home/_Settings.cshtml

@@ -25,7 +25,7 @@
             <label class="form-check-label" for="useDescending">Sort lists in Descending Order(Newest to Oldest)</label>
         </div>
         <div class="form-check form-switch">
-            <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="enableAuth" checked="@Model.EnableAuth">
+            <input class="form-check-input" onChange="enableAuthCheckChanged()" type="checkbox" role="switch" id="enableAuth" checked="@Model.EnableAuth">
             <label class="form-check-label" for="enableAuth">Enable Authentication</label>
         </div>
     </div>
@@ -86,4 +86,45 @@
             }
         })
     }
+    function enableAuthCheckChanged(){
+        var enableAuth = $("#enableAuth").is(":checked");
+        if (enableAuth) {
+            //swal dialog to set up username and password.
+            Swal.fire({
+                title: 'Setup Credentials',
+                html: `
+                    <input type="text" id="authUsername" class="swal2-input" placeholder="Username">
+                    <input type="password" id="authPassword" class="swal2-input" placeholder="Password">
+                    `,
+                confirmButtonText: 'Setup',
+                focusConfirm: false,
+                preConfirm: () => {
+                    const username = $("#authUsername").val();
+                    const password = $("#authPassword").val();
+                    if (!username || !password) {
+                        Swal.showValidationMessage(`Please enter username and password`)
+                    }
+                    return { username, password }
+                },
+            }).then(function (result) {
+                if (result.isConfirmed) {
+                    $.post('/Login/CreateLoginCreds', { userName: result.value.username, password: result.value.password }, function (data) {
+                        if (data) {
+                            window.location.href = '/Home';
+                        } else {
+                            errorToast("An error occurred, please try again later.");
+                        }
+                    })
+                }
+            });
+        } else {
+            $.post('/Login/DestroyLoginCreds', function (data) {
+                if (data) {
+                    setTimeout(function () { window.location.href = '/Home' }, 1000);
+                } else {
+                    errorToast("An error occurred, please try again later.");
+                }
+            });
+        }
+    }
 </script>

Views/Login/Index.cshtml

@@ -0,0 +1,28 @@
+@{
+    ViewData["Title"] = "LubeLogger - Login";
+}
+@section Scripts {
+    <script src="~/js/login.js" asp-append-version="true"></script>
+}
+<div class="container chartContainer d-flex align-items-center justify-content-center">
+    <div class="row">
+        <div class="col-12">
+            <img src="/defaults/lubelogger_logo.png" />
+            <div class="form-group">
+                <label for="inputUserName">Username</label>
+                <input type="text" id="inputUserName" class="form-control">
+            </div>
+            <div class="form-group">
+                <label for="inputUserPassword">Password</label>
+                <input type="password" id="inputUserPassword" class="form-control">
+            </div>
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" role="switch" id="inputPersistent">
+                <label class="form-check-label" for="inputPersistent">Remember Me</label>
+            </div>
+            <div class="d-grid">
+                <button type="button" class="btn btn-warning mt-2" onclick="performLogin()">Login</button>
+            </div>
+        </div>
+    </div>
+</div>