added adding users

SmearcarDB/static/index.css

@@ -359,7 +359,7 @@ a {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 
-#newLanguage, #editLanguage, #login {
+#newLanguage, #editLanguage, #login, #addUser {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -368,7 +368,7 @@ a {
 	background-color: rgba(0,0,0,0.4);
 }
 
-#newLanguage > div, #editLanguage > div, #login > div {
+#newLanguage > div, #editLanguage > div, #login > div, #addUser > div {
 	position: absolute;
 	width: 20%;
 	height: 60%;
@@ -383,11 +383,16 @@ a {
 	grid-template-rows: 6vh 1fr 1fr 1fr;
 }
 
-#loginUsername, #loginPassword {
+#addUser > div {
+	height: 40%;
+	grid-template-rows: 6vh 1fr 1fr 1fr 1fr;
+}
+
+#loginUsername, #loginPassword, #addUserUsername, #addUserPassword {
 	margin-left: 5%;
 }
 
-#login input {
+#login input, #addUser input {
 	border: 0;
 	background-color: rgba(0,0,0,0.1);
 	font-family: 'Saira Condensed',  sans-serif;
@@ -397,7 +402,7 @@ a {
 	width: 90%;
 }
 
-#newLanguageName, #editLanguageName, #loginUsername {
+#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername {
 	grid-row: 2;
 }
 
@@ -413,10 +418,19 @@ a {
 	grid-row: 1;
 }
 
-#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword {
+#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority {
 	grid-row: 3;
 }
 
+#addUserAuthority {
+	margin-left: 5%;
+	width: 90%;
+}
+
+#addUserPassword {
+	grid-row: 4;
+}
+
 #newLanguagePhonemes p, #editLanguagePhonemes p {
 	margin-left: 5%;
 }
@@ -430,12 +444,16 @@ a {
 	font-size: 1.5vh;
 }
 
-#newLanguageSubmit, #editLanguageSubmit, #loginSubmit {
+#newLanguageSubmit, #editLanguageSubmit, #loginSubmit, #addUserSubmit {
 	display: grid;
 	grid-row: 4;
 }
 
-#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p {
+#addUserSubmit {
+	grid-row: 5;
+}
+
+#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p {
 	display: block;
 	font-size: 3vh;
 	margin: auto 10% auto;
@@ -450,7 +468,7 @@ a {
 	grid-template-rows: 100%;
 }
 
-#signIn {
+#signIn, #addUserButton {
 	display: grid;
 	grid-template-columns: 70% 20%;
 	grid-template-rows: 100%;
@@ -459,15 +477,15 @@ a {
 	cursor: pointer;
 }
 
-#signIn:hover {
+#signIn:hover, #addUserButton:hover {
 	background-color: rgba(255,255,255,0.1);
 }
 
-#signIn p, #signIn i {
+#signIn p, #signIn i, #addUserButton p, #addUserButton i {
 	margin: auto;
 	font-size: 180%;
 }
 
-#addData, #editData {
+#addData, #editData, #addUserButton {
 	display: none;
 }

SmearcarDB/static/index.js

@@ -21,6 +21,13 @@ var members = [
     "Kenneth Jao", "Yaman Qalieh", "Enrico Colon"
 ];
 
+var authorityLabels = {
+    0: "#0: Full access", 
+    1: "#1: Create updates", 
+    2: "#2: Edit values and add files", 
+    3: "#3: No access"
+};
+
 var dropOp = {
     //Insert correct
 };
@@ -105,10 +112,10 @@ function getData(updatePage) {
                 createDrop();
                 if(updatePage === "add") {
                     dropOpUpdate("langSelect");
-                    document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[langid='"+(data.languages.length)+"']")[0].click();
+                    document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(data.languages.length)+"']")[0].click();
                 } else if(updatePage === "edit") {
                     dropOpUpdate("langSelect");
-                    document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[langid='"+(dropOpStore["langSelect"])+"']")[0].click();
+                    document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(dropOpStore["langSelect"])+"']")[0].click();
                 }
             },
             function error(e) {
@@ -225,6 +232,10 @@ function generateDropOp() { // For options that change based on data.
             graph.style.opacity = "1";
         }, 300);
     }].concat(["Select language..."].concat(data.values.map(a=>a.id)));
+
+    dropOp["authority"] = [function() {
+
+    }].concat(["Select authority..."].concat(Object.keys(authorityLabels)));
 }
 
 function createDrop() {
@@ -236,7 +247,7 @@ function createDrop() {
         var div = document.createElement("div");
         div.className = "button";
         var p = document.createElement("p");
-        var op = dropButtons[i].getAttribute("option");
+        let op = dropButtons[i].getAttribute("option");
         p.appendChild(document.createTextNode(dropOp[op][1]));
         var ic = document.createElement("i");
         ic.className = "fa fa-angle-down";
@@ -246,6 +257,7 @@ function createDrop() {
         var div2 = document.createElement("div");
         div2.className = "opCont transition";
 
+        if(op === "langSelect") {
             var p3 = document.createElement("p");
             p3.className = "transition";
             p3.id = "addData";
@@ -254,14 +266,15 @@ function createDrop() {
             };
             p3.appendChild(document.createTextNode("Add language..."));
             div2.appendChild(p3); 
+        }
         
         for (var j = 2; j < dropOp[op].length; j++) {
             var p2 = document.createElement("p");
-            p2.setAttribute("langId", dropOp[op][j]);
+            p2.setAttribute("dropoption", dropOp[op][j]);
             p2.className = "transition";
             p2.onclick = function(e) {
                 e.stopPropagation();
-                dropOpStore[op] = this.getAttribute("langId");
+                dropOpStore[op] = this.getAttribute("dropoption");
                 dropOpUpdate(op);
                 let opCont = this.parentNode;
                 opCont.style.opacity = "0";
@@ -269,7 +282,8 @@ function createDrop() {
                     opCont.style.display = "none";
                 }, 300);
             };
-            p2.appendChild(document.createTextNode(language(dropOp[op][j]).name));
+            if(op === "langSelect") p2.appendChild(document.createTextNode(language(dropOp[op][j]).name));
+            if(op === "authority") p2.appendChild(document.createTextNode(authorityLabels[dropOp[op][j]]))
             div2.appendChild(p2);
         }
 
@@ -295,7 +309,9 @@ function createDrop() {
 
 function dropOpUpdate(op) {
     var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0];
-    dropdown.textContent = language(dropOpStore[op]).name;
+    if(op === "langSelect") dropdown.textContent = language(dropOpStore[op]).name;
+    if(op === "authority") dropdown.textContent = authorityLabels[dropOpStore[op]];
+    console.log(op);
     (dropOp[op][0])();
 }
 
@@ -309,6 +325,7 @@ document.onclick = function(event) {
     }
 };
 
+
 function homeCards() {
     // GET posts from server
     var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
@@ -416,13 +433,24 @@ function modal(id, open) {
     }   
 }
 
-var modals = ["newLanguage", "editLanguage", "login"];
+var modals = ["newLanguage", "editLanguage", "login", "addUser"];
 for(var i = 0; i < modals.length; i++) {
     let id = modals[i];
     document.getElementById(modals[i]).onclick = function(event) { modal(id, false); };
     document.querySelectorAll("#"+modals[i]+" > div")[0].onclick = function(event) { event.stopPropagation(); };
 }
 
+document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
+    event.stopPropagation();
+    for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) {
+        var opCont = document.querySelectorAll(".dropdown .opCont")[i];
+        opCont.style.opacity = "0";
+        setTimeout(function() {
+            opCont.style.display = "none";
+        }, 300);
+    }
+}
+
 document.getElementById("editData").onclick = function() { // Open edit language.
     var langInfo = language(dropOpStore["langSelect"]);
     document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
@@ -436,9 +464,8 @@ document.getElementById("editData").onclick = function() { // Open edit language
     modal("editLanguage", true);
 };
 
-document.getElementById("signIn").onclick = function() {
+document.getElementById("signIn").onclick = function() { modal("login", true); };
-    modal("login", true);
+document.getElementById("addUserButton").onclick = function() { modal("addUser", true); };
-}
 
 document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language.
     if(!submittable) return;
@@ -703,7 +730,10 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { //
 };
 
 document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
-    var info = [document.querySelectorAll("#loginUsername input")[0], document.querySelectorAll("#loginPassword input")[0]];
+    var info = [
+        document.querySelectorAll("#loginUsername input")[0], 
+        document.querySelectorAll("#loginPassword input")[0]
+    ];
     if(info[0].value === "") {
         alert("Please enter in a username!");
         return;
@@ -716,10 +746,70 @@ document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
     modal("login", false);
     document.getElementById("addData").style.display = "block";
     document.getElementById("editData").style.display = "grid";
+    document.getElementById("addUserButton").style.display = "grid";
+    document.getElementById("signIn").style.display = "none";
     setTimeout(function() {
         info[0].value = "";
         info[1].value = "";
     }, 300)
+};
+
+document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
+    var info = [
+        document.querySelectorAll("#addUserUsername input")[0], 
+        document.querySelectorAll("#addUserPassword input")[0],
+        dropOpStore["authority"]
+    ];
+    if(info[0].value === "") {
+        alert("Please enter in a username!");
+        return;
+    } else if(info[1].value === "") {
+        alert("Please enter in a password!");
+        return;
+    } else if(info[2] === "") {
+        alert("Please enter in an authority level!");
+        return;
+    }
+
+    console.log({
+            username: info[0].value,
+            authority: info[2],
+            password: info[1].value,
+            editor: loginInfo
+        });
+
+    this.innerText = "Processing...";
+    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+
+     $.ajax({
+        url: serverURL + '/editors',
+        type: 'POST',
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8',
+        context: {counter: i},
+        data: JSON.stringify({
+            username: info[0].value,
+            authority: info[2],
+            password: info[1].value,
+            editor: loginInfo
+        })
+    })
+    .then(
+        function success(incoming) {
+            modal("addUser", false);
+            setTimeout(function() {
+                info[0].value = "";
+                info[1].value = "";
+                dropOpStore["authority"] = "";
+                document.querySelectorAll(".dropdown[option=authority] .button p")[0].textContent = dropOp["authority"][1];
+            }, 300);
+        },
+        function error(e) {
+            alert("There was an error adding a user.");
+            console.log(e);
+        }
+    );
+
 }
 
 /*function getTrelloCards() {

SmearcarDB/templates/index.html

@@ -24,6 +24,10 @@
             <p>Login</p>
             <i class="fa fa-sign-in"></i>
        </div>
+       <div id="addUserButton" class="transition">
+            <p>Add User</p>
+            <i class="fa fa-plus"></i>
+       </div>
     </div>
     <div id="sidebar">
     </div>
@@ -145,6 +149,27 @@
             </div>
         </div>
     </div>
+    <div id="addUser" class="transition">
+        <div class="card transition">
+            <h2>Add New User</h2>
+            <div id="addUserUsername">
+                <p>Username:</p>
+                <input>
+            </div>
+            <div id="addUserAuthority">
+                <p>Authority:</p>
+                <div option="authority" class="dropdown transition">
+                </div>
+            </div>
+            <div id="addUserPassword">
+                <p>Password:</p>
+                <input type="password">
+            </div>
+            <div id="addUserSubmit">
+                <p class="card">Submit!</p>
+            </div>
+        </div>
+    </div>
 </body>
 <script src="{{ url_for('static', filename='index.js') }}"></script>