Usability enhancements: allow login on enter key, added icons on login and logout buttons, added placeholder on gas modal

Views/Home/Index.cshtml

@@ -26,7 +26,7 @@
         @if (enableAuth)
         {
             <li class="nav-item">
-                <button class="nav-link" onclick="performLogOut()">Logout</button>
+                <button class="nav-link" onclick="performLogOut()"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
             </li>
         }
     </ul>

Views/Login/Index.cshtml

@@ -14,14 +14,14 @@
             </div>
             <div class="form-group">
                 <label for="inputUserPassword">Password</label>
-                <input type="password" id="inputUserPassword" class="form-control">
+                <input type="password" id="inputUserPassword" onkeyup="handlePasswordKeyPress(event)" 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>
+                <button type="button" class="btn btn-warning mt-2" onclick="performLogin()"><i class="bi bi-box-arrow-in-right me-2"></i>Login</button>
             </div>
         </div>
     </div>

Views/Vehicle/_GasModal.cshtml

@@ -1,10 +1,11 @@
 @inject IConfiguration Configuration
+@model GasRecordInput
 @{
     var useMPG = bool.Parse(Configuration[nameof(UserConfig.UseMPG)]);
+    var isNew = Model.Id == 0;
 }
-@model GasRecordInput
 <div class="modal-header">
-    <h5 class="modal-title">@(Model.Id == 0 ? "Add New Gas Record" : "Edit Gas Record")</h5>
+    <h5 class="modal-title">@(isNew ? "Add New Gas Record" : "Edit Gas Record")</h5>
     <button type="button" class="btn-close" onclick="hideAddGasRecordModal()" aria-label="Close"></button>
 </div>
 <div class="modal-body">
@@ -15,15 +16,15 @@
                     <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
                     <label for="gasRecordDate">Date</label>
                     <div class="input-group">
-                        <input type="text" id="gasRecordDate" class="form-control" value="@Model.Date">
+                        <input type="text" id="gasRecordDate" placeholder="Date refueled" class="form-control" value="@Model.Date">
                         <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
                     </div>
                     <label for="gasRecordMileage">Odometer Reading(@(useMPG ? "miles" : "kilometers"))</label>
-                    <input type="number" id="gasRecordMileage" class="form-control" value="@Model.Mileage">
+                    <input type="number" id="gasRecordMileage" class="form-control" placeholder="Odometer reading when refueled" value="@(isNew ? "" : Model.Mileage)">
                     <label for="gasRecordGallons">Fuel Consumption(@(useMPG ? "gallons" : "liters"))</label>
-                    <input type="text" id="gasRecordGallons" class="form-control" value="@Model.Gallons">
+                    <input type="text" id="gasRecordGallons" class="form-control" placeholder="Amount of gas it takes to fill back up to full" value="@(isNew ? "" : Model.Gallons)">
                     <label for="GasRecordCost">Cost</label>
-                    <input type="number" id="gasRecordCost" class="form-control" value="@Model.Cost">
+                    <input type="number" id="gasRecordCost" class="form-control" placeholder="Cost of gas it takes to fill back up to full" value="@(isNew ? "" : Model.Cost)">
                 </div>
                 <div class="col-md-6 col-12">
                     @if (Model.Files.Any())
@@ -52,16 +53,16 @@
     </form>
 </div>
 <div class="modal-footer">
-    @if (Model.Id > 0)
+    @if (!isNew)
     {
         <button type="button" class="btn btn-danger" onclick="deleteGasRecord(@Model.Id)" style="margin-right:auto;">Delete</button>
     }
     <button type="button" class="btn btn-secondary" onclick="hideAddGasRecordModal()">Cancel</button>
-    @if (Model.Id == 0)
+    @if (isNew)
     {
         <button type="button" class="btn btn-primary" onclick="saveGasRecordToVehicle()">Add New Gas Record</button>
     }
-    else if (Model.Id > 0)
+    else if (!isNew)
     {
         <button type="button" class="btn btn-primary" onclick="saveGasRecordToVehicle(true)">Edit Gas Record</button>
     }

wwwroot/js/login.js

@@ -9,4 +9,9 @@
             errorToast("Invalid Login Credentials, please try again.");
         }
     })
+}
+function handlePasswordKeyPress(event) {
+    if (event.keyCode == 13) {
+        performLogin();
+    }
 }