Updated the admin login page to work with boostrap

admin/admin.js

@@ -14,12 +14,10 @@ module.exports=
      */
     main: function(result, fileName, request)
     {
-        result.write("<div class=\"w3-row\">");
         return new Promise(function(resolve, reject)
         {
             if(request.session && request.session.user)
             {
-                console.log("user logged in");
                 utils.getPostData(request).then(function (postData)
                 {
                     return require("../admin/newPost.js").main(result, postData);
@@ -28,8 +26,7 @@ module.exports=
                     return require("../admin/addCategory.js").main(result, postData);
                 }).then(function(postData)
                 {
-                    result.write("</div>");
-                    console.log("hmmm");
+                    result.write("</div>"); //ends main row
                     return require("../admin/editPost.js").main(result, postData);
                 }).then(function()
                 {

admin/login.html

@@ -1,19 +1,28 @@
-<div class="w3-col 18 s12">
-    <div class="w3-card-4 w3-margin w3-white">
-        <div class="w3-container w3-dark-grey">
+<div class="col-md-8">
+    <div class="blogPost">
+        <div class="text-center">
             <h2>Login</h2>
         </div>
 
-        <form action="/admin/" method ="post" class="w3-container">
-            <p>
-            <label class="w3-text-black"><b>User Name</b></label>
-                <input class="w3-input w3-border w3-light-grey" type="text" name="username"></p>
-            <p>
-            <label class="w3-text-black"><b>Password</b></label>
-                <input class="w3-input w3-border w3-light-grey" type="password" name="password"></p>
-            <p>
-                <button class="w3-btn w3-dark-grey">Login</button></p>
+        <form action="/admin/" method ="post" class="p-2">
+            <div class="form-group">
+                <label for="username1">User Name</label>
+                <input class="form-control" type="test" id="username1" name="username" placeholder="Enter username">
+            </div>
+            <div class="form-group">
+                <label for="password1">Password</label>
+                <input class="form-control" type="password" name="password" id="password1" placeholder="Password">
+            </div>
+            <div class="text-center">
+                <button class="btn btn-lg btn-secondary">Login</button>
+            </div>
+            <br>
         </form>
+        <!--
+            /\_/\           ___
+           = o_o =_______    \ \
+            __^      __(  \.__) )
+        (@)<_____>__(_____)____/
+        -->
     </div>
-</div>
 </div>

admin/login.js

@@ -31,7 +31,6 @@ module.exports=
         main: function(result, request)
         {
             console.log("main of login.js");
-            result.write("<div class=\"w3-col l8 s12\">");
             return new Promise(function(resolve, reject)
             {
                 utils.include(result, './admin/login.html').then(function()
@@ -43,6 +42,7 @@ module.exports=
                     return processLogin(result, request);
                 }).then(function()
                 {
+                    result.write("</div>");
                     resolve();
                 })
             });

css/bootstrap.css

@@ -4232,14 +4232,7 @@ input[type="button"].btn-block {
     align-items: center;
 }
 
-.navbar-toggler {
-    padding: 0.25rem 0.75rem;
-    font-size: 1.09375rem;
-    line-height: 1;
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-}
+
 
 .navbar-toggler:hover, .navbar-toggler:focus {
     text-decoration: none;
@@ -9514,7 +9507,8 @@ a.text-dark:hover, a.text-dark:focus {
 }
 
 
-.btn-social {
+.btn-social
+{
     font-size: 20px;
     line-height: 45px;
     display: inline-block;
@@ -9522,7 +9516,8 @@ a.text-dark:hover, a.text-dark:focus {
     height: 50px;
     text-align: center;
     border: 2px solid white;
-    border-radius: 100%; }
+    border-radius: 100%;
+}
 
 .btn-outline {
     font-size: 20px;
@@ -9643,7 +9638,8 @@ a:hover
 }
 
 
-.bg-primary {
+.bg-primary
+{
     background-color: #3B536B !important;
 }
 
@@ -9651,21 +9647,9 @@ a:hover
     font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 700;
     text-transform: uppercase;
-    border: none;
-}
-#mainNav a:focus
-{
-    outline: none;
-}
-#mainNav .navbar-brand
-{
-    font-size: 1.1rem;
-    color: white;
-}
-#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover
-{
-    color: white;
 }
+
+
 #mainNav .navbar-nav
 {
     letter-spacing: 1px;
@@ -9679,10 +9663,7 @@ a:hover
     color: #D2C0FF;
     outline: none;
 }
-#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus
-{
-    color: white;
-}
+
 #mainNav .navbar-toggler
 {
     font-size: 14px;
@@ -9691,50 +9672,21 @@ a:hover
     color: white;
     border-color: white;
 }
-#mainNav .navbar-toggler:focus, #mainNav .navbar-toggler:hover
-{
-    color: white;
-    border-color: #18BC9C;
-    background-color: #D2C0FF;
+
+
+.navbar-toggler {
+    padding: 0.25rem 0.75rem;
+    font-size: 1.09375rem;
+    line-height: 1;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
 }
 
-@media (min-width: 992px)
+
+
+footer
 {
-    #mainNav {
-        padding-top: 15px;
-        padding-bottom: 15px;
-        -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-        -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
-        transition: padding-top 0.3s, padding-bottom 0.3s;
-    }
-    #mainNav .navbar-brand {
-        font-size: 2em;
-        -webkit-transition: all 0.3s;
-        -moz-transition: all 0.3s;
-        transition: all 0.3s; }
-    #mainNav .navbar-nav > li.nav-item > a.nav-link.active
-    {
-        color: white;
-        border-radius: 3px;
-        background: #D2C0FF;
-    }
-    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover
-    {
-        color: white;
-        background: #D2C0FF;
-    }
-    #mainNav.navbar-shrink
-    {
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-    #mainNav.navbar-shrink .navbar-brand
-    {
-        font-size: 1.5em;
-    }
-}
-
-footer {
     color: white;
 }
 footer h3

includes/header.html

@@ -35,7 +35,7 @@
 </head>
 
 <body>
-<div class="navbar navbar-expand-lg fixed-top bg-primary" id="mainNav">
+<div class="navbar navbar-expand-lg navbar-dark fixed-top bg-primary" id="mainNav">
     <div class="container">
         <a class="navbar-brand" href="#">Jrtechs</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">