Merge pull request #86 from danieldupriest/fix-input-fields

Fix input fields

front/static/edit_report.html

@@ -8,6 +8,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
     <link rel="shortcut icon" href="img/favicon.ico">
     <title>Reimbursinator</title>
 </head>

front/static/js/viewHistory.js

@@ -97,6 +97,18 @@ function createFormGroup(sectionIdStr, field) {
             formGroup.appendChild(div);
             break;
         case "date":
+            input.type = "date";
+            input.placeholder = "mm-dd-yyyy";
+            if (field.value === "None") {
+                input.value = "";
+            } else {
+                input.value = field.value;
+            }
+            input.classList.add("form-control");
+            formGroup.appendChild(label);
+            div.appendChild(input)
+            formGroup.appendChild(div);
+            break;
         case "string":
             input.type = "text";
             input.value = field.value;
@@ -107,7 +119,11 @@ function createFormGroup(sectionIdStr, field) {
             break;
         case "decimal":
             input.type = "text";
-            input.value = field.value;
+            if (field.value === "0.00") {
+                input.value = "";
+            } else {
+                input.value = field.value;
+            }
             input.classList.add("form-control");
             input.pattern = "\\d+(\\.\\d{2})?";
             formGroup.appendChild(label);
@@ -116,7 +132,11 @@ function createFormGroup(sectionIdStr, field) {
             break;
         case "integer":
             input.type = "number";
-            input.value = field.value;
+            if (field.value === 0) {
+                input.value = "";
+            } else {
+                input.value = field.value;
+            }
             input.classList.add("form-control");
             input.step = 1;
             input.min = 0;
@@ -430,6 +450,16 @@ if (newReportForm) {
     });
 }
 
+document.addEventListener("input", function(event) {
+    if (event.target.type === "date") {
+        if (!moment(event.target.value, "YYYY-MM-DD", true).isValid()) {
+            event.target.setCustomValidity("Invalid date format");
+        } else {
+            event.target.setCustomValidity("");
+        }
+    }
+});
+
 document.addEventListener("submit", function(event) {
     if (event.target.classList.contains("section-form")) {
         event.preventDefault();

front/static/login.html

@@ -25,7 +25,7 @@
                         <form class="form" autocomplete="off">
                             <div class="form-group">
                                 <label for="email">Email:</label>
-                                <input class="form-control" id="email" type="email" name="email" required>
+                                <input class="form-control" id="email" type="email" name="email" autofocus required>
                             </div>
                             <div class="form-group">
                                 <label for="password">Password:</label>

front/static/new_report.html

@@ -8,6 +8,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
     <link rel="shortcut icon" href="img/favicon.ico">
     <title>Reimbursinator</title>
 </head>
@@ -47,7 +48,7 @@
                         <form class="form new-report-form" autocomplete="off">
                             <div class="form-group">
                                 <label for="title">Report title:</label>
-                                <input type="text" class="form-control" name="title" id="title">
+                                <input type="text" class="form-control" name="title" id="title" autofocus>
                             </div>
                             <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#newReportModal">Create</button>
                         </form>

front/static/signup.html

@@ -25,7 +25,7 @@
                         <form class="form signup" autocomplete="off" action="index.html">
                             <div class="form-group">
                                 <label for="email">Email:</label>
-                                <input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" required>
+                                <input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" autofocus required>
                             </div>
                             <div class="form-group">
                                 <label for="first_name">First Name:</label>