Should be about dummy proof

darkmode.js

@@ -28,6 +28,7 @@ function getAppliedMode(userPreference) {
 
 function setAppliedMode(mode) {
     document.documentElement.dataset.appliedMode = mode;
+    themeToggle.checked = getAppliedMode(userPreference) === "dark";
 }
 
 function togglePreference() {
@@ -36,39 +37,6 @@ function togglePreference() {
     } else if (userPreference === "dark") {
         userPreference = "light";
     }
-    console.log(userPreference);
     saveUserPreference(userPreference);
     setAppliedMode(getAppliedMode(userPreference));
-}
-
-function toggleDarkMode() {
-    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/";
-    else document.cookie = "darkMode=on;path=/";
-    refreshDarkMode();
-}
-
-function refreshDarkMode() {
-    let darkMode = getCookie("darkMode", "off", "/") === "on";
-    if (darkMode) {
-        document.body.classList.add("dark-theme");
-        document.getElementById("theme").checked = true;
-    } else {
-        if (document.body.classList.contains("dark-theme")) {
-            document.body.classList.remove("dark-theme");
-        }
-        document.getElementById("theme").checked = false;
-    }
-}
-
-function getCookie(cookieName, valIfNotExists, path) {
-    let cookieArray = document.cookie.split(";");
-    for (let i = 0; i < cookieArray.length; i++) {
-        let cookie = cookieArray[i].split("=");
-        if (cookie[0].trim() === cookieName) {
-            return cookie[1];
-        }
-    }
-    console.warn("Cookie \"" + cookieName + "\" does not exist");
-    document.cookie = cookieName + "=" + valIfNotExists + ";path=" + path;
-    return valIfNotExists;
 }

index.html

@@ -58,11 +58,11 @@
             <div class="container">
                 <h1 class="text-center mt mb h1">Signature Card Creator</h1>
                 <div class="card">
-                    <a id="vcard" href="#" style="display: none">
+                    <a id="card" href="#" style="display: none">
                         <img class="card" id="cardImg" alt="card"/>
                     </a>
                 </div>
-                <label for="vcard" class="text-center"></label>
+                <label for="card" class="text-center"></label>
                 <div class="form-group mt">
                     <div class="form-group">
                         <label for="full_name">Full Name &amp; Credentials</label>
@@ -96,14 +96,14 @@
                         <label for="cellNumber">Cell Number</label>
                         <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
                     </div>
-                    <div class="form-group">
+                    <div class="form-group" id="outlookDiv">
                         <input type="radio" id="o365" name="outlookVer" value="1">
                         <label id="o365Label" for="o365">MS Office 365</label>
                         <br>
                         <input type="radio" id="o2016" name="outlookVer" value="0">
                         <label id="o2016Label" for="o2016">MS Office 2016</label>
                     </div>
-                    <button class="btn btn-primary" id="formSubmit">Generate VCard</button>
+                    <button class="btn btn-primary" id="formSubmit">Generate Signature Card</button>
                 </div>
             </div>
         </section>
@@ -125,19 +125,5 @@
     <input style="display: none" id="existingFile" type="file" accept="image/png" name="existingFile">
     <script src="script.js"></script>
     <script src="darkmode.js"></script>
-    <script>
-        clearForm();
-        loadLocations();
-        document.getElementById("fade").addEventListener("click", exitUpload, false);
-        document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false);
-        document.getElementById("formSubmit").addEventListener("click", submitForm, false);
-        document.getElementById("dottedDiv").addEventListener("click", (e) => {
-            document.getElementById("existingFile").click();
-        }, false);
-        document.getElementById("existingFile").addEventListener("input", handleInput, false);
-        document.body.addEventListener("dragover", dragOverHandler, false);
-        document.body.addEventListener("dragleave", dragLeaveHandler, false);
-        document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false);
-    </script>
 </body>
 </html>

install/index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="../stylesheet.css">
   <link rel="stylesheet" href="../darkmode.css">
   <title>Install Card</title>
+  <script>document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';</script>
 </head>
 <body>
 
@@ -53,8 +54,7 @@
       <figure><img src="assets/img3.png" alt="img3" width="60%"></figure>
       <p>7. Go to Size and change the height to 1.75". The Width should change automatically to keep in aspect.</p>
       <figure><img src="assets/img4.png" alt="img4" width="60%"></figure>
-      <p>8. Click OK, then OK again to save it.</p>
-      <p>9. Click OK, and it will now have the newly created business card included in the signatures.</p>
+      <p>8. Click OK, then OK again to save it, and you will now have the newly created business card included in the signatures.</p>
     </article>
   </main>
 

script.js

@@ -1,3 +1,29 @@
+let backendUrl = "https://signature.caiu.org"
+let locations = JSON.parse("{}");
+const locationSelector = document.getElementById("location");
+
+loadLocations();
+clearForm();
+
+document.body.addEventListener("dragover", dragOverHandler, false);
+document.body.addEventListener("dragleave", dragLeaveHandler, false);
+document.querySelectorAll('input[name = outlookVer]').forEach((element) => {
+    element.addEventListener("click", (e) => {
+        document.getElementById("outlookDiv").classList.remove("missing-info");
+        }, false);
+});
+locationSelector.addEventListener("click", (e) => {
+    locationSelector.classList.remove("missing-info");
+}, false);
+document.getElementById("dottedDiv").addEventListener("click", (e) => {
+    document.getElementById("existingFile").click();
+}, false);
+document.getElementById("fade").addEventListener("click", exitUpload, false);
+document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false);
+document.getElementById("formSubmit").addEventListener("click", submitForm, false);
+document.getElementById("existingFile").addEventListener("input", handleInput, false);
+document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false);
+
 function handleCheckbox() {
     const extensionInput = document.getElementById("extensionInput");
     const directLineInput = document.getElementById("directLineInput");
@@ -12,9 +38,6 @@ function handleCheckbox() {
     }
 }
 
-let backendUrl = "https://signature.caiu.org"
-let locations = JSON.parse("{}");
-
 function loadLocations() {
     let locationsList = document.getElementById("location");
 
@@ -29,6 +52,7 @@ function loadLocations() {
         response.text().then(text => {
             locations = JSON.parse(text);
             locationsList.innerText = "";
+            locationsList.options[0] = new Option("--- Select ---", "default");
             for (let i = 0; i < locations.length; i++) {
                 locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
             }
@@ -47,6 +71,19 @@ function clearForm() {
 }
 
 function submitForm() {
+    let missing = false;
+    if (locationSelector.value === "default") {
+        locationSelector.classList.add("missing-info");
+        missing = true;
+    }
+    if (document.querySelector('input[name = outlookVer]:checked') == null) {
+        document.getElementById("outlookDiv").classList.add("missing-info");
+        missing = true;
+    }
+    if (missing) {
+        return;
+    }
+
     let body =
         "{" +
         "\"name\":\"" + document.getElementById("full_name").value + "\"," +
@@ -76,7 +113,7 @@ function submitForm() {
 
 function downloadImage(arrayBuffer) {
     const blob = new Blob([arrayBuffer], { type: "image/png" });
-    const cardElement = document.getElementById("vcard");
+    const cardElement = document.getElementById("card");
     const imgElement = document.getElementById("cardImg");
 
     let urlCreator = window.URL || window.webkitURL;
@@ -140,6 +177,10 @@ function handleInput() {
 }
 
 function loadFromExistingCard() {
+    if (document.getElementById("editCardBtn").classList.contains("disabled")) {
+        return;
+    }
+
     exitUpload();
     const data = new FormData();
     data.append("card", document.getElementById("existingFile").files[0]);

stylesheet.css

@@ -76,14 +76,12 @@ body {
   text-align: left;
   color: var(--text-color);
   background-color: var(--background-color);
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: var(--theme-blue);
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 main {
@@ -93,6 +91,7 @@ main {
 footer {
   text-align: center;
   font-size: 12px;
+  margin-bottom: 1em;
 }
 
 button {
@@ -110,7 +109,6 @@ input {
   font-size: inherit;
   line-height: inherit;
   overflow: visible;
-  transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out;
 }
 
 textarea {
@@ -119,7 +117,6 @@ textarea {
   font-size: inherit;
   line-height: inherit;
   background-color: var(--theme-blue);
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 select {
@@ -128,6 +125,7 @@ select {
   font-size: inherit;
   line-height: inherit;
   text-transform: none;
+  cursor: pointer;
 }
 
 label {
@@ -178,7 +176,6 @@ h1, h2, h3, h4, h5, h6 {
   color: #fff;
   background-color: var(--theme-green);
   border-color: var(--theme-green-accent);
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur-fast);
 }
 .btn-primary:hover:not(:disabled):not(.disabled) {
   background-color: var(--theme-green-accent);
@@ -194,6 +191,7 @@ select.form-control:not([size]):not([multiple]) {
 input[type="checkbox"], input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
+  cursor: pointer;
 }
 
 [type="reset"], [type="submit"], button, html [type="button"] {
@@ -228,7 +226,6 @@ input[type="checkbox"], input[type="radio"] {
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: .25rem;
-  transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color var(--trans-dur) ease-in-out, box-shadow .15s ease-in-out;
 }
 
 .logo {
@@ -293,6 +290,11 @@ input[type="checkbox"], input[type="radio"] {
   text-decoration:none;
 }
 
+.missing-info {
+  border: solid 2px var(--danger) !important;
+  border-radius: .25rem;
+}
+
 .card {
   margin: auto;
   width: 24em;
@@ -311,13 +313,12 @@ input[type="checkbox"], input[type="radio"] {
 .x {
   border-radius: 50%;
   padding: .75em;
-  background: var(--theme-blue);
-  border: 2px solid var(--theme-black);
+  background: var(--theme-green);
+  border: 2px solid var(--theme-green-accent);
   position: absolute;
   right: -1.5em;
   top: -1.5em;
   text-decoration: none;
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .x div {
@@ -325,9 +326,8 @@ input[type="checkbox"], input[type="radio"] {
   width: 16px;
   font-size: 1.5rem;
   text-align: center;
-  color: var(--text-color-negative);
+  color: var(--text-color);
   line-height: 8px !important;
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .upload {
@@ -347,7 +347,6 @@ input[type="checkbox"], input[type="radio"] {
   left: 50%;
   top: 14em;
   margin-left: -20em;
-  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .upload img {