Better behaved logins with the power of <form>

cards/qwikclock_punchinout.html

@@ -5,6 +5,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="far fa-clock"></i> <span class="card_title">QwikClock</span></h3>
 <div class="card-body">
-    <button class="btn btn-success btn-lg btn-block start_btn"><span class="icon"><i class="fas fa-play fa-2x"></i></span> Punch In</button>
+    <button class="btn btn-success btn-lg btn-block start_btn"><span class="icon"><i class="fas fa-play"></i></span> Punch In</button>
     <button class="btn btn-danger btn-lg btn-block stop_btn"><span class="icon"><i class="fas fa-stop"></i></span> Punch Out</button>
 </div>

js/login.js

@@ -87,7 +87,8 @@ function loadQuickLogin() {
     }
 }
 
-$("#userpassloginbtn").click(function () {
+$("#userpass_form").submit(function (event) {
+    event.preventDefault();
     var user = $("#username").val();
     var pass = $("#password").val();
     if (user != "" && pass != "") {
@@ -95,7 +96,8 @@ $("#userpassloginbtn").click(function () {
     }
 });
 
-$("#mobilecodeloginbtn").click(function () {
+$("#mobilecode_form").submit(function (event) {
+    event.preventDefault();
     var code = $("#code").val();
     if (code != "") {
         codelogin(code);

pages/login.html

@@ -25,7 +25,7 @@
 
 
                         <div class="tab-pane fade" id="userpass">
-                            <div id="userpass_form">
+                            <form id="userpass_form">
                                 <input style="display:none" type="text" name="fakeusernameremembered"/>
                                 <input style="display:none" type="password" name="fakepasswordremembered"/>
                                 <div class="input-group">
@@ -37,21 +37,21 @@
                                     <input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
                                 </div>
                                 <br />
-                                <button class="btn btn-primary" id="userpassloginbtn">Log In</button>
-                            </div>
+                                <button type="submit" class="btn btn-primary" id="userpassloginbtn">Log In</button>
+                            </form>
                         </div>
 
 
                         <div class="tab-pane fade" id="mobilecode">
                             <div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-desktop"></i> button to get a code.</div>
-                            <div id="mobilecode_form">
+                            <form id="mobilecode_form">
                                 <div class="input-group input-group-lg">
                                     <span class="input-group-addon">B-</span>
                                     <input type="text" class="form-control" id="code" placeholder="123456" />
                                 </div>
                                 <br />
-                                <button class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
-                            </div>
+                                <button type="submit" class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
+                            </form>
                         </div>