Fixed admin page to work with boostrap

admin/addCategory.html

@@ -1,11 +1,16 @@
 
-<h1 class="w3-text-teal w3-center">Add Category</h1>
+<div class="blogPost">
+    <h1 class="text-center">Add Category</h1>
 
-<form action="/admin/" method ="post" class="w3-container w3-card-4">
-    <div class="w3-group w3-padding-16">
-        <input class="w3-input" type="text" name="add_category" required>
-        <label class="w3-label w3-validate">Category</label>
-    </div>
-    <p><input type="submit" name="submit" value="Add"
-              class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-center-align"/></p>
-</form>
+    <form action="/admin/" method ="post" class="p-2">
+        <div class="form-group">
+            <input class="form-control" type="text" name="add_category" required>
+            <label>Category</label>
+        </div>
+        <div class="text-center">
+            <input type="submit" name="submit" value="Add"
+                   class="btn btn-lg btn-secondary"/>
+        </div>
+    </form>
+</div>
+<br>

admin/addCategory.js

@@ -12,9 +12,11 @@ const Promise = require('promise');
  */
 var printCategories = function(res)
 {
-    res.write("<h1 class=\"w3-text-teal w3-center\">Categories</h1>");
-    res.write("<div class=\"w3-responsive w3-card-4\"><table class=\"w3-table w3-striped w3-bordered\"><thead>");
-    res.write("<tr class=\"w3-teal\">");
+    res.write("<div class=\"blogPost p-2 \">");
+    res.write("<h1 class=\"text-center\">Categories</h1>");
+    res.write("<div class=\"\"><table class=\"table table-striped\">");
+    res.write("<thead class=\"thead-dark\">");
+    res.write("<tr>");
     res.write("<td>Name</td><td>URL</td><td>Edit</td>");
     res.write("</tr></thead><tbody>");
     return new Promise(function(resolve, reject)
@@ -33,7 +35,7 @@ var printCategories = function(res)
 
                 res.write("</tr>");
             });
-            res.write("</tbody></table></div>");
+            res.write("</tbody></table></div></div>");
             resolve();
         })
     });
@@ -76,7 +78,7 @@ module.exports=
 {
     main: function(res, postData)
     {
-        res.write("<div class=\"w3-third w3-container\">");
+        res.write("<div class=\"col-md-6\">");
         return new Promise(function(resolve, reject)
         {
             utils.include(res, "./admin/addCategory.html");

admin/editPost.js

@@ -34,7 +34,7 @@ var renderPostRow = function(result, post)
         //edit
         result.write("<td><form action=\"/admin/\" method =\"post\" >\n" +
             "    <input type=\"submit\" name=\"submit\" value=\"Edit\"\n" +
-            "              class=\"w3-teal w3-padding-16 w3-hover-dark-grey w3-btn-block w3-center-align\"/>\n" +
+            "              class=\"btn btn-secondary\"/>\n" +
             "<input type='hidden' name='edit_post' value='" + post.post_id + "'/>"+
             "</form></td>");
 
@@ -50,10 +50,10 @@ var renderPostRow = function(result, post)
  */
 var postsTable = function(result)
 {
-    result.write("<div class='w3-row'>");
-    result.write("<h1 class=\"w3-text-teal w3-center\">Posts</h1>");
-    result.write("<div class=\"w3-responsive w3-card-4\"><table class=\"w3-table w3-striped w3-bordered\"><thead>");
-    result.write("<tr class=\"w3-teal\">");
+    result.write("<div class='blogPost p-2'>");
+    result.write("<h1 class=\"text-center\">Posts</h1>");
+    result.write("<div class=\"\"><table class=\"table table-striped\">");
+    result.write("<thead class=\"thead-dark\"><tr>");
     result.write("<td>Category #</td><td>Name</td><td>Header Picture</td><td>Date</td><td>Edit</td>");
     result.write("</tr></thead><tbody>");
     return new Promise(function(resolve, reject)
@@ -77,7 +77,7 @@ var postsTable = function(result)
             });
             Promise.all(postPromises).then(function()
             {
-                result.write("</tbody></table></div></div>");
+                result.write("</tbody></table></div></div><br>");
                 resolve();
             }).catch(function(error)
             {
@@ -104,30 +104,30 @@ var displayRenderForm = function(result, post_id)
     {
         sql.getPostById(post_id).then(function(post)
         {
-            result.write("<div class='w3-row'>"+
-                "<h1 class=\"w3-text-teal w3-center\">Edit Post</h1>"+
-                "<form action=\"/admin/\" method =\"post\" class=\"w3-container w3-card-4\">"+
-                "    <div class=\"w3-group w3-padding-16\">\n" +
-                "        <input class=\"w3-input\" type=\"text\" name=\"edit_cat_num\" value='" + post.category_id + "' required>\n" +
+            result.write("<div class='blogPost p-2'>"+
+                "<h1 class=\"text-center\">Edit Post</h1>"+
+                "<form action=\"/admin/\" method =\"post\" >"+
+                "    <div class=\"form-group\">\n" +
+                "        <input class=\"form-control\" type=\"text\" name=\"edit_cat_num\" value='" + post.category_id + "' required>\n" +
                 "        <label class=\"w3-label w3-validate\">Category Number</label>\n" +
                 "    </div>"+
-                "    <div class=\"w3-group w3-padding-16\">\n" +
-                "        <input class=\"w3-input\" type=\"text\" name=\"edit_name_new\" value='" + post.name + "' required>\n" +
+                "    <div class=\"form-group\">\n" +
+                "        <input class=\"form-control\" type=\"text\" name=\"edit_name_new\" value='" + post.name + "' required>\n" +
                 "        <label class=\"w3-label w3-validate\">Post Title</label>\n" +
                 "    </div>"+
-                "    <div class=\"w3-group w3-padding-16\">\n" +
-                "        <input class=\"w3-input\" type=\"text\" name=\"edit_pic\" value='" + post.picture_url + "' required>\n" +
+                "    <div class=\"form-group\">\n" +
+                "        <input class=\"form-control\" type=\"text\" name=\"edit_pic\" value='" + post.picture_url + "' required>\n" +
                 "        <label class=\"w3-label w3-validate\">Picture URL</label>\n" +
                 "    </div>"+
-                "    <div class=\"w3-group w3-padding-16\">\n" +
-                "        <input class=\"w3-input\" type=\"date\" name=\"edit_date\" value='" + post.published.toISOString().split('T')[0] + "' required>\n" +
+                "    <div class=\"form-group\">\n" +
+                "        <input class=\"form-control\" type=\"date\" name=\"edit_date\" value='" + post.published.toISOString().split('T')[0] + "' required>\n" +
                 "        <label class=\"w3-label w3-validate\">Published Date</label>\n" +
                 "    </div>"+
-                "    <p><input type=\"submit\" name=\"submit\" value=\"Edit\"\n" +
-                "              class=\"w3-teal w3-padding-16 w3-hover-dark-grey w3-btn-block w3-center-align\"/></p>"+
+                "    <div><input type=\"submit\" name=\"submit\" value=\"Edit\"\n" +
+                "              class=\"btn btn-lg btn-secondary\"/></div>"+
                 "<input type='hidden' name='edit_post_2' value='" + post_id + "'/>"+
                 "</form>"+
-                "</div>"
+                "</div><br>"
             );
             resolve();
         }).catch(function(error)
@@ -196,6 +196,7 @@ module.exports=
     {
         return new Promise(function(resolve, reject)
         {
+            result.write("<br>");
             processPost(result, postData).then(function()
             {
                 return postsTable(result);

admin/login.html

@@ -7,11 +7,11 @@
         <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">
+                <input class="form-control" type="test" id="username1" name="username" placeholder="Enter username" required>
             </div>
             <div class="form-group">
                 <label for="password1">Password</label>
-                <input class="form-control" type="password" name="password" id="password1" placeholder="Password">
+                <input class="form-control" type="password" name="password" id="password1" placeholder="Password" required>
             </div>
             <div class="text-center">
                 <button class="btn btn-lg btn-secondary">Login</button>

admin/newPost.html

@@ -1,29 +1,31 @@
-<div class="w3-twothird w3-container">
-    <h1 class="w3-text-teal w3-center">New Post</h1>
+<div class="col-md-6 blogPost">
+    <h1 class="text-center">New Post</h1>
 
-    <form action="/admin/" method ="post" class="w3-container w3-card-4">
+    <form action="/admin/" method ="post" class="p-2">
         <!-- Post category -->
-        <div class="w3-group w3-padding-16">
-            <input class="w3-input" type="text" name="add_post_category" required>
+        <div class="form-group">
+            <input class="form-control" type="text" name="add_post_category" required>
             <label class="w3-label w3-validate">Category</label>
         </div>
         <!-- Post name -->
-        <div class="w3-group w3-padding-16">
-            <input class="w3-input" type="text" name="add_post_name" required>
+        <div class="form-group">
+            <input class="form-control" type="text" name="add_post_name" required>
             <label class="w3-label w3-validate">Name</label>
         </div>
         <!-- Post header picture -->
-        <div class="w3-group w3-padding-16">
-            <input class="w3-input" type="text" name="add_post_picture" value="n/a" required>
+        <div class="form-group">
+            <input class="form-control" type="text" name="add_post_picture" value="n/a" required>
             <label class="w3-label w3-validate">Picture</label>
         </div>
 
         <!-- Post date -->
-        <div class="w3-group w3-padding-16">
+        <div class="form-group">
             <input class="w3-input" type="date" name="add_post_date" required>
             <label class="w3-label w3-validate">Date</label>
         </div>
-        <p><input type="submit" name="submit" value="Add"
-                  class="w3-padding-16 w3-hover-dark-grey w3-btn-block w3-center-align"/></p>
+        <div class="text-center">
+            <input type="submit" name="submit" value="Add"
+                      class="btn btn-lg btn-secondary"/>
+        </div>
     </form>
 </div>

css/bootstrap.css

@@ -1854,12 +1854,6 @@ pre code {
     background-color: rgba(0, 0, 0, 0.075);
 }
 
-.table .thead-dark th {
-    color: #fff;
-    background-color: #212529;
-    border-color: #32383e;
-}
-
 .table .thead-light th {
     color: #495057;
     background-color: #F8F5F0;
@@ -9683,7 +9677,11 @@ a:hover
     border-radius: 0.25rem;
 }
 
-
+.table .thead-dark{
+    color: #fff;
+    background-color: #513E7D;
+    border-color: #32383e;
+}
 
 footer
 {