From cf9a4e0efbb56897ed6f496987676de89bc32d5b Mon Sep 17 00:00:00 2001
From: maru21 <k.muhrer@gmail.com>
Date: Sat, 28 Oct 2023 14:44:08 +0200
Subject: [PATCH] fundamental changes implemented temporary storage implemented
 settings bug fixes

---
 index.html                 |  31 ++---
 js/9.9.9/buildForm.js      |  14 +++
 js/9.9.9/createTemplate.js |  23 ++--
 js/9.9.9/evts.js           |  63 +++++++---
 js/9.9.9/files.js          | 107 +++++++++++++----
 js/9.9.9/form.js           |  43 ++++---
 js/9.9.9/init.js           |  98 ++++++++--------
 js/9.9.9/parseForm.js      |  45 +++----
 js/9.9.9/scripts.js        | 185 +++++++++++++----------------
 js/9.9.9/settings.js       | 207 ++++++++++++++++++++++++++++++++
 js/9.9.9/storage.js        | 235 +++++++++++++++++++++++--------------
 js/9.9.9/web.js            |  42 ++++---
 js/9.9.9/xorc.js           |   2 +-
 13 files changed, 723 insertions(+), 372 deletions(-)
 create mode 100644 js/9.9.9/settings.js

diff --git a/index.html b/index.html
index 758abf3..40b9e17 100644
--- a/index.html
+++ b/index.html
@@ -11,15 +11,6 @@
       //current javascript version
       let jsVer = "9.9.9";
 
-      //settings
-      window.settings = {
-        localOnly: true,
-        lineBreak: 150,
-        font: "Arial",
-        fontSize: "10px",
-
-      };
-
       let script = document.createElement("script");
       script.src = "js/" + jsVer + "/init.js";
       script.type = "module";
@@ -99,6 +90,7 @@
           href="javascript:void(0);"
           title="Toggle Textblocks Menu"
           id="toggleTestBlocksMenu"
+          style="display: none;"
           ><i class="fa fa-plane"></i
         ></a>
         <a
@@ -109,6 +101,7 @@
           ><i class="fa fa-file"></i
         ></a>
         <a
+          id="logo"
           href="."
           class="w3-left-align w3-button w3-padding-large w3-flat-wet-asphalt"
           ><img class="logo" src="logo.png" alt="logo" height="30px"
@@ -130,6 +123,7 @@
       <div
         id="mainForm"
         class="w3-row-padding w3-padding-top-64 w3-container w3-flat-clouds"
+        style="min-height: 600px;"
       >
         <div class="w3-content">
           <div class="w3-third w3-center">
@@ -273,6 +267,11 @@
       </div>
 
       <div class="w3-container w3-flat-clouds w3-padding">
+        <div
+        id="outputInfo"
+        class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds"
+        style="margin-bottom: 0px; display: none"   
+        ></div>  
         <div
           id="output"
           class="w3-row-padding w3-padding-64 w3-container w3-flat-clouds"
@@ -355,20 +354,6 @@
       <footer
         class="w3-container w3-padding w3-flat-clouds w3-center w3-margin-top"
       >
-        <br />
-        <br />
-        <div
-          class="upload-btn-wrapper"
-          id="setFormButton"
-          style="display: none"
-        >
-          <button
-            class="w3-button w3-border w3-flat-clouds"
-            id="setFormBtn"
-          >
-            Set input as default
-          </button>
-        </div>
         <div class="w3-container w3-margin-top w3-right-align w3-small" id="currentVersion">
           <span></span>
         </div>
diff --git a/js/9.9.9/buildForm.js b/js/9.9.9/buildForm.js
index e22322e..07b66b0 100644
--- a/js/9.9.9/buildForm.js
+++ b/js/9.9.9/buildForm.js
@@ -28,6 +28,19 @@ function transformTemplateObject(objects) {
   sidebarSubmitButton.innerHTML = "Save & Copy";
   sidebarList.appendChild(sidebarSubmitButton);
 
+  //create sidebar set form button
+  let sidebarSetFormButton = document.createElement("li");
+  sidebarSetFormButton.classList.add(
+    "w3-bar-item",
+    "w3-padding-large",
+    "w3-button"
+  );
+  sidebarSetFormButton.style.borderTop = "2px solid #ddd";
+  sidebarSetFormButton.id = "sb-setform";
+  sidebarSetFormButton.innerHTML = "Set input as preset";
+  sidebarList.appendChild(sidebarSetFormButton);
+  
+
   //add sidebar elemnts to sidebar
   document.getElementById("sidebar").appendChild(sidebarList);
 
@@ -55,6 +68,7 @@ function transformTemplateObject(objects) {
   copyBtn.classList.add("w3-button");
   copyBtn.classList.add("w3-grey");
   copyBtn.style.margin = "20px 0px";
+  copyBtn.id = "fromCopyBtn";
   //append submit button to submitContainer
   document.getElementById("submitContainer").appendChild(copyBtn);
 
diff --git a/js/9.9.9/createTemplate.js b/js/9.9.9/createTemplate.js
index 6db63eb..dfad2f6 100644
--- a/js/9.9.9/createTemplate.js
+++ b/js/9.9.9/createTemplate.js
@@ -1,9 +1,8 @@
 import {setNewTemplate, loadTemplate} from "./web.js";
-import { hideMenus, modalNotifier } from "./evts.js";
-import { sanitize } from "./scripts.js";
+import { hideMenus, modalNotifier, resetNavBar } from "./evts.js";
+import { passwordHash, sanitize } from "./scripts.js";
 
 function createTemplate(template = false) {
-
   
     //set current page value in activeState object
     activeState.activePage = "createTemplate";
@@ -12,10 +11,20 @@ function createTemplate(template = false) {
       document.getElementById("siteTitle").innerHTML = "Manage templates";
     } else {
       document.getElementById("siteTitle").innerHTML = "TG";
+      document.getElementById("logo").innerHTML = "TG";
     }
-  
-    //hide set Form button
-    document.getElementById("setFormButton").style.display = "none";
+
+    //sessionVerfication check
+    if (!passwordHash.verify()) {
+      modalNotifier("Error: Session is not authenticated...", 0);
+    }
+
+    //reset navbar if files was used
+    resetNavBar();
+
+    //disable toggleTestBlocksMenu
+    document.getElementById("toggleTestBlocksMenu").style.display = "none";
+
 
     if (template) {
         document.getElementById("templateInput").value = loadTemplate(template, false, "createTemplate");
@@ -154,7 +163,7 @@ function createTemplate(template = false) {
                 } 
                 let data = document.getElementById("templateInput").value;
                 setNewTemplate(fileName, data);
-                modalNotifier(fileName+" saved!", 2);
+                modalNotifier(fileName+" saved!", activeState.settings.notifierPause);
                 e.target.className = e.target.className.replace(" w3-grey", " w3-flat-nephritis");
                 e.target.style.pointerEvents = "none";
                 const timeoutSave = setTimeout(() => {
diff --git a/js/9.9.9/evts.js b/js/9.9.9/evts.js
index f602486..58bfa64 100644
--- a/js/9.9.9/evts.js
+++ b/js/9.9.9/evts.js
@@ -1,13 +1,11 @@
 import {
   clearData,
-  createStorageObj,
   createBookShelf,
   importBookShelf,
 } from "./storage.js";
 import {
   loadTemplate,
   storeFilesToServer,
-  setTemplatePreset,
   checkForStoredDataOnServer,
   delStoredDataOnServer
 } from "./web.js";
@@ -82,7 +80,17 @@ function clickClearForm() {
   loadTemplate(lT);
 }
 
-function hideMenus() {
+function hideMenus(evt) {
+  if (evt === undefined) return;
+  if (evt.target.id == "loadTemplateBtn") return;
+  if (evt.target.parentElement != null) {
+    if (evt.target.parentElement.id == "navMob") return;
+    if (evt.target.parentElement.id == "navReg") return;
+    if (evt.target.parentElement.parentElement != null) {
+      if (evt.target.parentElement.parentElement.id == "navMob") return;
+      if (evt.target.parentElement.parentElement.id == "navReg") return;
+    }
+  }
   let sidebar = document.getElementById("sidebar");
   sidebar.style.display = "none";
   let navBar = document.getElementById("navMob");
@@ -91,15 +99,13 @@ function hideMenus() {
   tbBar.className = tbBar.className.replace(" w3-show", "");
 }
 
-function modalNotifier(msg, timeout) {
+function modalNotifier(msg, timeout = 3) {
   let modalElement = document.getElementById("modalNotifier");
   let msgElement = document.getElementById("modalMsg");
 
   modalElement.style.display = "block";
   msgElement.innerHTML = msg;
-  if (timeout === undefined) {
-    const run = setTimeout(() => (modalElement.style.display = "none"), 5000);
-  } else if (timeout >= 1) {
+  if (timeout >= 1) {
     const run = setTimeout(
       () => (modalElement.style.display = "none"),
       timeout * 1000
@@ -107,16 +113,24 @@ function modalNotifier(msg, timeout) {
   }
 }
 
-function clickSetForm(e) {
-  e.preventDefault;
-  let dataArray = parseFormOnSubmit(true);
-  let lT = activeState.loadedTemplate;
-  setTemplatePreset(lT, JSON.stringify(dataArray));
-  modalNotifier("Form Saved", 2);
+function printVersion(msg = "") {
+  const scripts = document.getElementsByTagName("script");
+  const versionSpan = document.getElementById("currentVersion").lastChild;
+
+  for (var i = 0; i < scripts.length; i++) {
+    if (scripts[i].src) {
+      let source = scripts[i].src;
+      // js/version/main.js
+      let pathVersion = source.split("/");
+      pathVersion = pathVersion[pathVersion.length - 2];
+      //add it to document footer currentVersion
+      versionSpan.textContent = msg+" version: " + pathVersion;
+    }
+  }
 }
 
 function clickImportFiles() {
-  if (activeState.localOnly) {
+  if (activeState.settings.localOnly == "true") {
     createBookShelfDownload();
     return;
   }
@@ -135,7 +149,7 @@ function clickImportFiles() {
                 case "Yes":
                   importBookShelf();
                   modal.replaceWith(modal.cloneNode(true));
-                  modalNotifier("Imported!", 2);
+                  modalNotifier("Imported!", activeState.settings.notifierPause);
                   break;
                 case "Cancel":
                   modal.replaceWith(modal.cloneNode(true));
@@ -206,6 +220,20 @@ function createBookShelfDownload() {
 
 }
 
+function resetNavBar() {
+    //enable toggleFiles Button
+    let target = document.getElementById("toggleFilesMenu");
+    target.innerHTML = "";
+    let i = document.createElement("i");
+    i.classList.add("fa", "fa-file");
+    //target.classList.add("w3-disabled");
+    target.appendChild(i);
+    target.style.cssText = '';
+  
+    //enable toggleTestBlocksMenu
+    document.getElementById("toggleTestBlocksMenu").style.display = "block";
+}
+
 export {
   hideMenus,
   showMenu,
@@ -215,6 +243,7 @@ export {
   handleOnBlur,
   clickClearForm,
   modalNotifier,
-  clickSetForm,
-  clickImportFiles
+  clickImportFiles,
+  resetNavBar,
+  printVersion
 };
diff --git a/js/9.9.9/files.js b/js/9.9.9/files.js
index 75b1f90..966c6b2 100644
--- a/js/9.9.9/files.js
+++ b/js/9.9.9/files.js
@@ -2,24 +2,23 @@ import {
   storeData,
   clearData,
   retrieveData,
-  createStorageObj,
 } from "./storage.js";
 import { loadTemplate } from "./web.js";
 import parseFormOnSubmit from "./parseForm.js";
-import { modalNotifier } from "./evts.js";
+import { modalNotifier, resetNavBar } from "./evts.js";
+import { passwordHash } from "./scripts.js";
 
 function buildFile() {
-  createStorageObj();
 
   //set current page value in activeState object
   activeState.activePage = "files";
 
   //set templateFiles array
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
 
   if (tF == null || tF.length == 0) {
     //console.log("none yet");
-    modalNotifier("there are no saved texts yet");
+    modalNotifier("there are no saved texts yet", activeState.settings.notifierPause);
     return;
   }
 
@@ -27,16 +26,33 @@ function buildFile() {
     document.getElementById("siteTitle").innerHTML = "Saved files";
   } else {
     document.getElementById("siteTitle").innerHTML = "TG";
+    document.getElementById("logo").innerHTML = "TG";
   }
 
-  //hide set Form button
-  document.getElementById("setFormButton").style.display = "none";
+  //sessionVerfication check
+  if (!passwordHash.verify()) {
+    modalNotifier("Error: Session is not authenticated...", 0);
+  }
+
+  //disable toggleFiles Button
+  let target = document.getElementById("toggleFilesMenu");
+  target.innerHTML = "";
+  let i = document.createElement("i");
+  i.classList.add("fa", "fa-file");
+  //target.classList.add("w3-disabled");
+  target.appendChild(i);
+  target.style.cssText = 'background-color:#9e9e9e !important';
+  target.style.borderBottom = "4px solid #9e9e9e";
+
+  //disable toggleTestBlocksMenu
+  document.getElementById("toggleTestBlocksMenu").style.display = "none";
 
   //reset page and event listeners
   let mainFormDiv = document.getElementById("mainForm");
   let outputDiv = document.getElementById("output");
   let submitContainerDiv = document.getElementById("submitContainer");
   let sidebarDiv = document.getElementById("sidebar");
+  let fileInfoDiv = document.getElementById("outputInfo");
 
   mainFormDiv.innerHTML = "";
   mainFormDiv.replaceWith(mainFormDiv.cloneNode(true));
@@ -46,6 +62,8 @@ function buildFile() {
   submitContainerDiv.replaceWith(submitContainerDiv.cloneNode(true));
   sidebarDiv.innerHTML = "";
   sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
+  fileInfoDiv.innerHTML = "";
+  fileInfoDiv.replaceWith(fileInfoDiv.cloneNode(true));
 
   document.getElementById("mainForm").innerHTML = mainFormPlaceholder();
 
@@ -54,23 +72,33 @@ function buildFile() {
     if (e.target && e.target.matches("li.w3-bar-item")) {
       let fileName = e.target.dataset.file;
       let template = e.target.dataset.template;
-      clickLoadFileDiv(fileName, template);
+      let pos = e.target.dataset.tfpos;
+      clickLoadFileDiv(fileName, template, pos);
     }
   });
 }
 
-function loadFileDiv(fileName, template) {
+function loadFileDiv(fileName, template, pos) {
   activeState.fileName = fileName;
   activeState.loadedTemplate = template;
 
   storeData("userInputForce", retrieveData(fileName, template));
 
   loadTemplate(template, false, true);
+
+  //append TS info
+  let fileInfoDiv = document.getElementById("outputInfo");
+  let tF = retrieveData("templateFiles");
+
+  let ts = tF[pos].metadata.ts_create;
+  ts = ts.current_time_long+"  "+ts.current_date+"."+ts.current_year;
+  fileInfoDiv.innerHTML = "<p>created at: "+ts+" | template: "+template+"</p>";
+  fileInfoDiv.style.display = "block";
   
 }
 
 function loadFileDivCallBack() {
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   document.getElementById("sidebar").appendChild(loadFileSidebar(tF));
 
   let lT = activeState.loadedTemplate;
@@ -133,17 +161,28 @@ function loadFileDivCallBack() {
   let div = document.createElement("div");
   let parsedTemplate = parseFormOnSubmit(false, true);
   div.appendChild(parsedTemplate);
+
   fileDisplay.appendChild(div);
+
+  let ts = document.createElement("p");
+  ts.innerHTML = ""
+
+  //fileDisplay.appendChild(ts);
   document.getElementById("mainForm").appendChild(fileDisplay);
 
+  //fix min height of file display
+  try {
+    document.getElementById("fileDisplay").style.cssText = "min-height: 300px;";
+  } catch (e) {}
   //fix fontsize for display
-  document.getElementById("fileDisplay").firstChild.style.fontSize = "1em";
-
+  try {
+    document.getElementById("fileDisplay").firstChild.style.fontSize = "1em";
+  } catch (e) {}
   //add events
   formEvts(storageName);
 }
 
-function clickLoadFileDiv(fileName, template) {
+function clickLoadFileDiv(fileName, template, pos) {
   if (fileName == "_overflow") return;
 
   if (fileName == "_clearAll") {
@@ -152,20 +191,20 @@ function clickLoadFileDiv(fileName, template) {
   }
 
   document.getElementById("mainForm").innerHTML = "";
-  loadFileDiv(fileName, template);
+  loadFileDiv(fileName, template, pos);
 }
 
 function clearFileData(storData) {
   let fileName = storData.split("_m21_")[0];
 
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   let newArray = [];
   for (let obj of tF) {
     if (obj.fileName != fileName) {
       newArray.push(obj);
     }
   }
-  storeData("templateFiles", JSON.stringify(newArray));
+  storeData("templateFiles", newArray);
 
   clearData(fileName);
   clearData("userInput");
@@ -181,9 +220,19 @@ function clearFileData(storData) {
 function loadFileSidebar(tF) {
   let sidebarList = document.createElement("ul");
   sidebarList.classList.add("w3-ul");
+
+  let sidebarListItem = document.createElement("li");
+
+  sidebarListItem.classList.add(
+      "w3-padding-large",
+  );
+  sidebarListItem.style.borderBottom = "1px solid #ddd";
+  sidebarListItem.id = "sb-title";
+  sidebarListItem.innerHTML = "Saved Files:"
+  sidebarList.appendChild(sidebarListItem);
+
   let c = 0;
   let sidebarItemsAmount = 10;
-  let sidebarListItem;
   for (let obj of tF.reverse()) {
     sidebarListItem = document.createElement("li");
     sidebarListItem.classList.add(
@@ -209,6 +258,7 @@ function loadFileSidebar(tF) {
     sidebarListItem.innerHTML = obj.fileName.replace(/_/g, " ");
     sidebarListItem.setAttribute("data-file", obj.fileName);
     sidebarListItem.setAttribute("data-template", obj.template);
+    sidebarListItem.setAttribute("data-tFPos", obj.pos);
     sidebarList.appendChild(sidebarListItem);
     c++;
   }
@@ -287,7 +337,7 @@ function formEvts(storageName) {
     if (e.target && e.target.tagName === "INPUT") {
       switch (e.target.value) {
         case "Edit":
-          loadSpecificTemplate(storageName);
+          editSpecificTemplate(storageName);
           break;
         case "Copy":
           copyFileToClipboard();
@@ -303,19 +353,21 @@ function formEvts(storageName) {
             );
             e.target.style.pointerEvents = "auto";
           }, 250);
-          modalNotifier(activeState.fileName + " copied to clipboard", 2);
+          modalNotifier(activeState.fileName + " copied to clipboard", activeState.settings.notifierPause);
           break;
         case "Delete":
+          console.log(storageName);
           let previousFile = getPreviousFile(storageName);
           clearFileData(storageName);
+          let delFileName = activeState.fileName;
           document.getElementById("mainForm").innerHTML = "";
           if (previousFile) {
-            loadFileDiv(previousFile.fileName, previousFile.template);
+            loadFileDiv(previousFile.fileName, previousFile.template, previousFile.pos);
           } else {
             document.getElementById("mainForm").innerHTML =
               mainFormPlaceholder("No file yet");
           }
-          modalNotifier(activeState.fileName + " deleted!", 2);
+          modalNotifier(delFileName + " deleted!", activeState.settings.notifierPause);
 
           break;
         default:
@@ -325,7 +377,7 @@ function formEvts(storageName) {
   });
 }
 
-function loadSpecificTemplate(storageName) {
+function editSpecificTemplate(storageName) {
   storeData(
     "userInputForce",
     retrieveData(storageName.split("_m21_")[0], storageName.split("_m21_")[1])
@@ -334,6 +386,9 @@ function loadSpecificTemplate(storageName) {
   let sidebarDiv = document.getElementById("sidebar");
   sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
 
+  //reset navbar above all else
+  resetNavBar();
+
   //reset correct activePage
   activeState.activePage = "template";
 
@@ -342,7 +397,7 @@ function loadSpecificTemplate(storageName) {
 
 function getPreviousFile(storageName) {
   let orgFileName = storageName.split("_m21_")[0];
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   let i = 0;
   let previousFile;
 
@@ -371,7 +426,7 @@ function clickClearAllFiles() {
         case "Delete":
           clearAllFiles();
           modal.replaceWith(modal.cloneNode(true));
-          modalNotifier("All files deleted!", 2);
+          modalNotifier("All files deleted!", activeState.settings.notifierPause);
           break;
         default:
           e.preventDefault;
@@ -386,9 +441,9 @@ function clickClearAllFiles() {
   );
 }
 function clearAllFiles() {
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   if (tF == null || tF.length == 0) {
-    modalNotifier("there are no saved texts yet", 2);
+    modalNotifier("there are no saved texts yet", activeState.settings.notifierPause);
     return;
   }
   for (let storageName of tF) {
diff --git a/js/9.9.9/form.js b/js/9.9.9/form.js
index 3561c6f..37d5901 100644
--- a/js/9.9.9/form.js
+++ b/js/9.9.9/form.js
@@ -2,20 +2,24 @@
 import { storeData, createStorageObj } from "./storage.js";
 import parseInput from "./parseTemplate.js";
 import transformTemplateObject from "./buildForm.js";
-import { showSidebar, handleOnBlur, modalNotifier } from "./evts.js";
+import { handleOnBlur, modalNotifier } from "./evts.js";
 import parseFormOnSubmit, { parseTextMarkups } from "./parseForm.js";
+import { setTemplatePreset } from "./web.js";
 
 function buildForm(templateInput, loadOnly = false) {
   var wordArray = [];
 
-  //display set Form button
-  if (!loadOnly) document.getElementById("setFormButton").style.display = "block";
-
   //check for presets in "-form.txt" file; indicated by !JSON_placeholder
   if (templateInput.indexOf("!JSON_placeholder:") !== -1) {
     let jsonPlaceholder = templateInput.split("!JSON_placeholder:")[1];
+    let placeholder;
+    try {
+      placeholder = JSON.parse(jsonPlaceholder);
+    } catch (e) {
+      placeholder = ""
+    }
     templateInput = templateInput.split("!JSON_placeholder:")[0];
-    storeData("templatePreset", jsonPlaceholder);
+    storeData("templatePreset", placeholder);
   }
   //start building wordArray by splitting input by line win/unix and define eol char for recreating templateInput
   let eol;
@@ -61,18 +65,15 @@ function buildForm(templateInput, loadOnly = false) {
   setStringPos(objects, templateInput);
 
   //save objects array and template file string for web.js in session storage
-  window.sessionStorage.setItem("templateObjects", JSON.stringify(objects));
-  window.sessionStorage.setItem("fullString", templateInput);
+  activeState.templateObjects = objects;
+  activeState.fullString = templateInput;
 
   //sort objects array by words prio
   objects = prioritizeArray(objects);
 
   //remove non display objects and safe it to session storage
   let objectsPurified = purifyObjects(objects);
-  window.sessionStorage.setItem(
-    "templateObjectsPurified",
-    JSON.stringify(objectsPurified)
-  );
+  activeState.templateObjectsPurified = objectsPurified;
 
   //reset page and event listeners
   let mainFormDiv = document.getElementById("mainForm");
@@ -107,7 +108,6 @@ function prioritizeArray(objects) {
   prioArray.sort(function (a, b) {
     return a - b;
   });
-  //console.log(prioArray);
   for (let valSorted of prioArray) {
     for (let obj of objects) {
       if (valSorted === obj.prio) {
@@ -225,17 +225,19 @@ function formEvts() {
           parseFormOnSubmit();
           e.target.className = e.target.className.replace(" w3-grey", " w3-flat-carrot");
           e.target.style.pointerEvents = "none";
-          modalNotifier(activeState.fileName + " copied to clipboard", 2);
+          e.target.value = "Copied";
+          modalNotifier(activeState.fileName + " copied to clipboard", activeState.settings.notifierPause);
           const timeoutCopy = setTimeout(() => {
-            e.target.className = e.target.className.replace(" w3-flat-carrot"," w3-grey");
+            //e.target.className = e.target.className.replace(" w3-flat-carrot"," w3-grey");
+            //e.target.value = "Copy";
             e.target.style.pointerEvents = "auto";
-          }, 250);
+          }, 5000);
           break;
         case "Save":
           createStorageObj();
           e.target.className = e.target.className.replace(" w3-grey", " w3-flat-nephritis");
           e.target.style.pointerEvents = "none";
-          modalNotifier(activeState.fileName + " saved", 2);
+          modalNotifier(activeState.fileName + " saved", activeState.settings.notifierPause);
           const timeoutSave = setTimeout(() => {
             e.target.className = e.target.className.replace(" w3-flat-nephritis"," w3-grey");
             e.target.style.pointerEvents = "auto";
@@ -252,7 +254,13 @@ function formEvts() {
     if (e.target) {
       if (e.target.id == "sb-submit") {
         parseFormOnSubmit();
-        modalNotifier("File saved and copied to clipboard", 2);
+        modalNotifier("File saved and copied to clipboard", activeState.settings.notifierPause);
+      }
+      if (e.target.id == "sb-setform") {
+        let dataArray = parseFormOnSubmit(true);
+        let lT = activeState.loadedTemplate;
+        setTemplatePreset(lT, JSON.stringify(dataArray));
+        modalNotifier("Input saved as preset", activeState.settings.notifierPause);
       }
       if (e.target.id == "sb-item") {
         setTimeout(() => {
@@ -276,7 +284,6 @@ function formEvts() {
 function focusOnField(id) {
   let targetElement = document.getElementById(id);
   if (targetElement == null) return;
-  
   document.activeElement.blur();
   targetElement.focus();
   setTimeout(function () {
diff --git a/js/9.9.9/init.js b/js/9.9.9/init.js
index 03d6691..5fd3e00 100644
--- a/js/9.9.9/init.js
+++ b/js/9.9.9/init.js
@@ -3,31 +3,40 @@ import {
   showMenu,
   showSidebar,
   showTextBlocks,
-  clickSetForm,
   clickImportFiles,
   modalNotifier,
+  printVersion,
 } from "./evts.js";
 import { buildFile } from "./files.js";
 import setPassword, {
   passwordHash,
-  sessionVerification,
   inputRead,
+  getUsrId,
 } from "./scripts.js";
-import { getUsrId, logout } from "./scripts.js";
 import parseFormOnSubmit from "./parseForm.js";
-import { createStorageObj } from "./storage.js";
-import XORCipher from "./xorc.js";
-import sha256 from "./sha256.min.js";
+import { createStorageObj, storeSettings } from "./storage.js";
 import { loadNavBar, initTextBlocks } from "./web.js";
 
 window.activeState = {
-  userId: getUsrId(),
+  userId: "",
+  sessionToken: "",
   activePage: "landing",
   loadedTemplate: "",
   fileName: "",
   lastElement: "",
   serverFilesTs: "",
+  settings: {
+    localOnly: "true",
+    lineBreak: 120,
+    font: "Arial",
+    fontSize: "10px",
+    notifierPause: 1,
+    persistentStorage: "false"
+  },
   templates: [],
+  templateObjectsPurified: [],
+  templateObjects: [],
+  fullString: "",
   templateFieldTypes: [
     "simpleInput",
     "longText",
@@ -37,27 +46,42 @@ window.activeState = {
     "markup",
   ],
   markups: ["title", "link", "italic", "green_highlighted", "highlighted"],
+  storage: []
 };
 
 function init() {
-  //load settings into activeState
-  for (let setting of Object.entries(window.settings)) {
-    activeState[setting[0]] = setting[1];
+
+  //check if localStorage is available
+  try {
+    window.localStorage.getItem("test")
+  } catch (e) {
+    activeState.settings.persistentStorage = "false";
   }
 
-  //check if user is logged in
-  sessionVerification();
-  let verfiedStatus = window.sessionStorage.getItem(sha256("verified"));
-  if (verfiedStatus != null) {
-    //user logged in
+  //init passwordhash to retrieve cookie info
+  passwordHash.init();
 
-    //write verifiedStatus content into passwordHash for decode check later
-    passwordHash.set(XORCipher.decode(sha256("passwordHash"), verfiedStatus));
+  //set user id
+  activeState.userId = getUsrId();
+
+
+  //check if user is logged in
+  if (passwordHash.verify()) {
+    //user logged in
     document.getElementById("login").style.display = "none";
   } else {
     document.getElementById("login").style.display = "block";
   }
 
+  //load settings from storage
+  let settings = storeSettings("getInit", true);
+
+  if (settings != "") {
+    for (let setting of Object.entries(settings)) {
+      activeState.settings[setting[0]] = setting[1];
+    } 
+  }
+
   //load NavigationBar with templates according to server
   loadNavBar();
 
@@ -67,8 +91,9 @@ function init() {
   //add event listeners to document and window
   eventListeners();
 
-  //print current version to footer
-  printVersion();
+  //print current version and storage mode to footer
+  let msg = (activeState.settings.persistentStorage == "false") ? "temporary" : "persistent";
+  printVersion("storage mode: "+msg+" |");
 
   //adjust title for mobile use
   if (screen.width < 993) {
@@ -79,8 +104,8 @@ function init() {
 function eventListeners() {
   //add hideMenu to Body
   document
-    .getElementsByClassName("w3-main")[0]
-    .addEventListener("click", hideMenus);
+    .body
+    .addEventListener("click", (e) => hideMenus(e));
 
   //add set Password to loginForm
   document
@@ -105,20 +130,12 @@ function eventListeners() {
   document
     .getElementById("toggleFilesMenu")
     .addEventListener("click", buildFile);
-  //add load template sidebar entry
-  document
-    .getElementById("loadTemplateBtn")
-    .addEventListener("click", showMenu);
+
   //add toggle textBLocks Menu
   document
     .getElementById("toggleTestBlocksMenu")
     .addEventListener("click", showTextBlocks);
 
-  //add setFormBtn for use in form
-  document
-    .getElementById("setFormBtn")
-    .addEventListener("click", (e) => clickSetForm(e));
-
   //add saveFiles to server listener on launch page
   document
     .getElementById("importFilesSB")
@@ -132,27 +149,14 @@ function eventListeners() {
       if (e.ctrlKey && e.key == "s") {
         createStorageObj();
         parseFormOnSubmit();
-        modalNotifier("File copied to clipboard", 1);
+        modalNotifier("File copied to clipboard", activeState.settings.notifierPause);
+        let copyButton = document.getElementById("fromCopyBtn");
+        copyButton.className.replace(" w3-grey", " w3-flat-carrot");
+        copyButton.value = "Copied";
         e.preventDefault();
       }
     }
   });
 }
 
-function printVersion() {
-  const scripts = document.getElementsByTagName("script");
-  const versionSpan = document.getElementById("currentVersion").lastChild;
-
-  for (var i = 0; i < scripts.length; i++) {
-    if (scripts[i].src) {
-      let source = scripts[i].src;
-      // js/version/main.js
-      let pathVersion = source.split("/");
-      pathVersion = pathVersion[pathVersion.length - 2];
-      //add it to document footer currentVersion
-      versionSpan.textContent = "version: " + pathVersion;
-    }
-  }
-}
-
 init();
diff --git a/js/9.9.9/parseForm.js b/js/9.9.9/parseForm.js
index 574a24a..bcca0b1 100644
--- a/js/9.9.9/parseForm.js
+++ b/js/9.9.9/parseForm.js
@@ -1,4 +1,4 @@
-import { sanitize } from "./scripts.js";
+import { sanitize, getCurrentDate } from "./scripts.js";
 import { storeData, clearData, retrieveData } from "./storage.js";
 
 function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
@@ -9,23 +9,17 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
     if (parseOnly) {
       let lT = activeState.loadedTemplate;
       dataArray = retrieveData("userInputForce", lT);
-      if (dataArray != "") {
-        try {
-          dataArray = JSON.parse(dataArray);
-        } catch (e) {
-          return "";
-        }
-      }
+
       if (dataArray == null) {
         let wrapper = document.createElement("div");
-        wrapper.innerHTML = mainFormPlaceholder();
+        wrapper.innerHTML = mainFormPlaceholder("Error: file empty");
         let div = wrapper.firstChild;
         return div;
       }
 
       if (dataArray.length <= 0) {
         let wrapper = document.createElement("div");
-        wrapper.innerHTML = mainFormPlaceholder();
+        wrapper.innerHTML = mainFormPlaceholder("File empty");
         let div = wrapper.firstChild;
         return div;
       }
@@ -55,10 +49,10 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
 
   
     //get original objects from sessionstorage gen from loadTemplate
-    let objects = JSON.parse(window.sessionStorage.getItem("templateObjects"));
+    let objects = activeState.templateObjects;
 
     //get the complete unparsed template string from sessionstorage from loadTemplate
-    let fullString = window.sessionStorage.getItem("fullString");
+    let fullString = activeState.fullString;
   
     //define output buffer
     let b = "";
@@ -95,8 +89,9 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
         }
 
         //if field matches current object
-        if (obj.word.replace(/ /g, "_") === data.name) {
+        if (obj.word.replace(/ /g, "_") == data.name) {
           let value = parseDataForResult(obj, data.value);
+          if (value == "!none") value = "";
           obj.result = value;
 
         }
@@ -104,12 +99,12 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
         //handle conlist elements for parsing each element
         if (conListFlag && obj.type == "conList") {
           let value = parseConListForResult(obj, data, dataArray);
+          if (value == "!none") value = "";
           obj.result = value;
+          continue;
         }
       }
     }
-  
-    //console.log(this, dataArray);
 
     b = fullString.substring(0, objects[0].spos);
     for (let i = 0; i < objects.length; i++) {
@@ -131,8 +126,8 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
     bHtml = bHtml.replace(/ /g, "&nbsp;");
   
     let divContent = document.createElement("div");
-    divContent.style.fontFamily = activeState.font + ", Helvetica, sans-serif";
-    divContent.style.fontSize = activeState.fontSize;
+    divContent.style.fontFamily = activeState.settings.font + ", Helvetica, sans-serif";
+    divContent.style.fontSize = activeState.settings.fontSize;
     divContent.innerHTML = bHtml;
 
     let div = document.createElement("div");
@@ -144,13 +139,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
       return div;
     }
   
-    // let p = document.createElement("p");
-    // p.innerHTML = "Copied to Clipboard:";
-    // document.getElementById("output").innerHTML = "";
-    // document.getElementById("output").appendChild(p);
-    // document.getElementById("output").appendChild(div);
-  
-    storeData("userInput", JSON.stringify(dataArray));
+    storeData("userInput", dataArray);
     clearData("userInput");
   
     if (returnJSON) {
@@ -322,7 +311,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
     //parse each line of input with parseLineBreak return condensed string with newlines
     let parsedData = '';
     for (let line of data.split('\n')) {
-      let parsedLine = parseLineBreak(line, 0, activeState.lineBreak);
+      let parsedLine = parseLineBreak(line, 0, activeState.settings.lineBreak);
       if (parsedData != '') {
         parsedData = parsedData + '\n' + parsedLine;
       } else {
@@ -332,7 +321,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
     return parsedData
   }
 
-  function parseLineBreak(line, intendation = 0, lineBreak = activeState.lineBreak - 5) {
+  function parseLineBreak(line, intendation = 0, lineBreak = activeState.settings.lineBreak - 5) {
     //add 5 chars buffer to fix list intendation issue
     //each input field gets parsed line by line twice once for list inputs and a second time for each input
     let lines;
@@ -435,8 +424,8 @@ function loadTextBlocks() {
     document.body.removeChild(container);
   }
 
-  function mainFormPlaceholder() {
-    return "<div class='w3-row-padding w3-padding-24 w3-container w3-flat-clouds'><div class='w3-code notranslate w3-border-white' style='font-family: Arial, Helvetica, sans-serif;'><p>Select a file</p><br><br><br><br><br><br><br><br><br><br><br></div></div>";
+  function mainFormPlaceholder(msg) {
+    return "<div class='w3-row-padding w3-padding-24 w3-container w3-flat-clouds'><div class='w3-code notranslate w3-border-white' style='font-family: Arial, Helvetica, sans-serif;'><p>" + msg + "</p><br><br><br><br><br><br><br><br><br><br><br></div></div>";
   }
 
   export default parseFormOnSubmit;
\ No newline at end of file
diff --git a/js/9.9.9/scripts.js b/js/9.9.9/scripts.js
index 521b822..3fe9a36 100644
--- a/js/9.9.9/scripts.js
+++ b/js/9.9.9/scripts.js
@@ -4,47 +4,37 @@ import XORCipher from "./xorc.js";
 import getBrowserFingerprint from "./identify.js"
 
 export const passwordHash = {
-  name: "anae3Iegbai1ahLu",
-  fp: getBrowserFingerprint( { hardwareOnly: true } ),
+  name: cyrb53("m21_"+getBrowserFingerprint( { hardwareOnly: true } )),
   toString: () => {
-    let data;
-    try {
-      data = window.sessionStorage.getItem(sha256(passwordHash.name));
-    } catch (e) {
-      return "none";
-    }
-    if (data === null) return "none";
-    return XORCipher.decode(passwordHash.name, data);
-  },
-  getId: () => {
-    return passwordHash.fp;
+    let token = window.activeState.sessionToken;
+    if (token === null) return "none";
+    if (token == "") return "none"
+    return XORCipher.decode(passwordHash.name, token);
   },
   set: (pw) => {
-    window.sessionStorage.setItem(sha256(passwordHash.name), XORCipher.encode(passwordHash.name, pw));
+    activeState.sessionToken = XORCipher.encode(passwordHash.name, pw);
+  },
+  init: function () {
+    //check if cookie exists
+    if (getCookie(sha256(passwordHash.name)) != null) {
+      passwordHash.set(XORCipher.decode(sha256(passwordHash.name), getCookie(sha256(passwordHash.name))));
+    }
+    let verifiedStatus = false;
+    let tF = retrieveData("templateFiles");
+    if (tF != null) {verifiedStatus = true}
+
+    if (verifiedStatus == true) {
+      setCookie(sha256(passwordHash.name), XORCipher.encode(sha256(passwordHash.name), passwordHash), 10)
+    }
+  },
+  verify: function () {
+    let verifiedStatus = false;
+    let tF = retrieveData("templateFiles");
+    if (tF != null) {verifiedStatus = true}
+    return verifiedStatus;
   }
 }
 
-//export const passwordHash = {
-//  toString: () => {
-//    let fp = getBrowserFingerprint( { hardwareOnly: true } );
-//    let data;
-//    try {
-//      data = window.sessionStorage.getItem(sha256(fp));
-//    } catch (e) {
-//      return "none";
-//    }
-//    if (data === null) return "none";
-//    return XORCipher.decode(fp, data);
-//  },
-//
-//  set: (pw) => {
-//    let fp = getBrowserFingerprint( { hardwareOnly: true } );
-//    window.sessionStorage.setItem(sha256(fp), XORCipher.encode(fp, pw));
-//  }
-//}
-
-
-
 function setPassword() {
   let x = document.getElementById("loginForm");
   let pw = sanitize(x.elements[0].value);
@@ -53,72 +43,23 @@ function setPassword() {
     let pwOld = pw;
     passwordHash.set(sha256(pw));
     let templateFiles = retrieveData("templateFiles");
-    if (templateFiles != "") {
-      try {
-        JSON.parse(templateFiles);
-      } catch (e) {
-        document.getElementById("wrongPWAlert").style.display = "block";
-        const alertTimeout = setTimeout(() => {
-          document.getElementById("wrongPWAlert").style.display = "none";
-        }, 5000);
-        passwordHash.set(pwOld);
-        x.elements[0].value = "";
-        return;
-      }
+    if (templateFiles == null) {
+      document.getElementById("wrongPWAlert").style.display = "block";
+      const alertTimeout = setTimeout(() => {
+        document.getElementById("wrongPWAlert").style.display = "none";
+      }, 5000);
+      passwordHash.set(pwOld);
+      x.elements[0].value = "";
+      return;
     }
     //user logged in
 
     document.getElementById("login").style.display = "none";
-    window.sessionStorage.setItem(sha256("verified"), XORCipher.encode(sha256("passwordHash"), passwordHash));
-    setCookie(sha256("verified"), XORCipher.encode(sha256("passwordHash"), passwordHash), 10)
+    setCookie(sha256(passwordHash.name), XORCipher.encode(sha256(passwordHash.name), passwordHash), 10)
   }
 }
 
-export function getUsrId() {
-  const fingerprint = getBrowserFingerprint( { hardwareOnly: true } );
-  return cyrb53(fingerprint + passwordHash);
-}
-
-export function sessionVerification() {
-
-  //check if cookie exists
-  if (getCookie(sha256("verified")) != null) {
-    passwordHash.set(XORCipher.decode(sha256("passwordHash"), getCookie(sha256("verified"))));
-    window.sessionStorage.setItem(sha256("verified"), XORCipher.encode(sha256("passwordHash"), passwordHash));
-  }
-
-  let verfiedStatus = window.sessionStorage.getItem(sha256("verified"));
-  let data;
-  try {
-    data = window.sessionStorage.getItem(sha256(passwordHash.name));
-  } catch (e) {
-    verfiedStatus = null;
-  }
-  if (data === null) verfiedStatus = null;
-
-  //if (verfiedStatus != data) verfiedStatus = null
-  let vsString;
-  let pnString;
-  try {
-    vsString = XORCipher.decode(sha256("passwordHash"), verfiedStatus);
-    pnString = XORCipher.decode(passwordHash.name, data);
-    if (vsString != pnString) verfiedStatus = null;
-  } catch (e) {
-    verfiedStatus = null;
-  }
-
-  let tF = retrieveData("templateFiles");
-  try {
-    tF = JSON.parse(tF);
-  } catch(e) {
-    //verfiedStatus = null;
-  }
-
-  return (verfiedStatus == null) ? false : true;
-  
-}
-
-const cyrb53 = (str, seed = 21) => {
+function cyrb53(str, seed = 21) {
   let h1 = 0xdeadbeef ^ seed,
     h2 = 0x41c6ce57 ^ seed;
   for (let i = 0, ch; i < str.length; i++) {
@@ -131,7 +72,12 @@ const cyrb53 = (str, seed = 21) => {
   h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
   
   return 4294967296 * (2097151 & h2) + (h1 >>> 0);
-};
+}
+
+export function getUsrId() {
+  const fingerprint = getBrowserFingerprint( { hardwareOnly: true } );
+  return cyrb53(fingerprint + passwordHash);
+}
 
 function setCookie(cname, cvalue, exdays) {
   const d = new Date();
@@ -140,7 +86,7 @@ function setCookie(cname, cvalue, exdays) {
   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 }
 
-export function getCookie(cname) {
+function getCookie(cname) {
   let name = cname + "=";
   let ca = document.cookie.split(';');
   for(let i = 0; i < ca.length; i++) {
@@ -156,10 +102,10 @@ export function getCookie(cname) {
 }
 
 export function logout() {
-  let id = sha256("verified");
-  window.sessionStorage.setItem(id, "");
+  let id = sha256(passwordHash.name);
+  activeState.sessionToken = "";
+  setCookie(sha256(passwordHash.name), "", 1);
   document.cookie = id + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-  sessionVerification();
   document.getElementById("passwordField").value = "";
   document.getElementById("login").style.display = "block"; 
 }
@@ -202,6 +148,7 @@ export const inputRead = {
     this.source = "";
     this.inputContent = "";
     this.lastRunTime = new Date();
+    this.target = document.getElementById("toggleFilesMenu");
     this.lastExecId = "";
   },
   read: function (event) {
@@ -220,12 +167,48 @@ export const inputRead = {
     this.lastRunTime = new Date();
     clearTimeout(this.lastExecId);
 
-    document.getElementById("toggleFilesMenu").style.backgroundColor = "#c0392b";
+    this.target.style.borderBottom = "3px solid #c0392b";
+    this.target.innerHTML = "";
+    let i = document.createElement("i");
+    i.classList.add("fa", "fa-save");
+    this.target.appendChild(i);
     this.lastExecId = setTimeout(() => {
       createStorageObj();
-      document.getElementById("toggleFilesMenu").style.backgroundColor = "#34495e"
+      this.target.style.borderBottom = "none";
+      this.target.innerHTML = "";
+      let i = document.createElement("i");
+      i.classList.add("fa", "fa-file");
+      this.target.appendChild(i);
     }, 1000);
   },
 }
 
+export function getCurrentDate() {
+  let date = new Date();
+  let uts = Date.now();
+  let current_hour = date.getHours();
+  current_hour = current_hour <= 9 ? "0" + current_hour : current_hour;
+  let current_minute = date.getMinutes();
+  current_minute = current_minute <= 9 ? "0" + current_minute : current_minute;
+  let current_second = date.getSeconds();
+  current_second = current_second <= 9 ? "0" + current_second : current_second;
+  let current_month = date.getMonth() + 1;
+  current_month = current_month <= 9 ? "0" + current_month : current_month;
+  let current_day = date.getDate();
+  current_day = current_day <= 9 ? "0" + current_day : current_day;
+  let current_year = date.getFullYear();
+  
+
+  let current_time = current_hour + ":" + current_minute;
+  let current_time_long = current_hour + ":" + current_minute + ":" + current_second;
+  let current_date = current_day + "." + current_month;
+  return {
+    current_time: current_time,
+    current_time_long: current_time_long,
+    current_date: current_date,
+    current_year: current_year,
+    uts: uts
+  };
+}
+
 export default setPassword;
diff --git a/js/9.9.9/settings.js b/js/9.9.9/settings.js
new file mode 100644
index 0000000..f645a36
--- /dev/null
+++ b/js/9.9.9/settings.js
@@ -0,0 +1,207 @@
+import { hideMenus, modalNotifier, printVersion, resetNavBar } from "./evts.js";
+import { passwordHash, sanitize } from "./scripts.js";
+import sha256 from "./sha256.min.js";
+import { retrieveData, storeData, storeSettings } from "./storage.js";
+
+const buildSettings = () => {
+  //set current page value in activeState object
+  activeState.activePage = "settings";
+
+  if (screen.width > 992) {
+    document.getElementById("siteTitle").innerHTML = "Settings";
+  } else {
+    document.getElementById("siteTitle").innerHTML = "TG";
+    document.getElementById("logo").innerHTML = "TG";
+  }
+
+  //sessionVerfication check
+  if (!passwordHash.verify()) {
+    modalNotifier("Error: Session is not authenticated...", 0);
+  }
+
+  //reset navbar if files was used
+  resetNavBar();
+
+  //disable toggleTestBlocksMenu
+  document.getElementById("toggleTestBlocksMenu").style.display = "none";
+
+  //reset page and event listeners
+
+  hideMenus();
+
+  let mainFormDiv = document.getElementById("mainForm");
+  let outputDiv = document.getElementById("output");
+  let submitContainerDiv = document.getElementById("submitContainer");
+  let sidebarDiv = document.getElementById("sidebar");
+
+  mainFormDiv.innerHTML = "";
+  mainFormDiv.replaceWith(mainFormDiv.cloneNode(true));
+  outputDiv.innerHTML = "";
+  outputDiv.replaceWith(outputDiv.cloneNode(true));
+  submitContainerDiv.innerHTML = "";
+  submitContainerDiv.replaceWith(submitContainerDiv.cloneNode(true));
+  sidebarDiv.innerHTML = "";
+  sidebarDiv.replaceWith(sidebarDiv.cloneNode(true));
+
+  addSidebar();
+
+  buildForm();
+
+  //add events
+  formEvts();
+};
+
+function formEvts() {
+  //add event listener to submitContainer
+  document.getElementById("submitContainer").addEventListener("click", (e) => {
+    if (e.target && e.target.tagName === "INPUT") {
+      switch (e.target.value) {
+        case "Save":
+          saveSettings();
+          modalNotifier(
+            "Settings saved!",
+            activeState.settings.notifierPause
+          );
+          e.target.className = e.target.className.replace(
+            " w3-grey",
+            " w3-flat-nephritis"
+          );
+          e.target.style.pointerEvents = "none";
+          const timeoutSave = setTimeout(() => {
+            e.target.className = e.target.className.replace(
+              " w3-flat-nephritis",
+              " w3-grey"
+            );
+            e.target.style.pointerEvents = "auto";
+          }, 250);
+          e.preventDefault;
+          break;
+        default:
+          e.preventDefault;
+      }
+    }
+  });
+}
+
+
+function buildForm() {
+  let form = document.createElement("FORM");
+  form.setAttribute("method", "post");
+  form.setAttribute("action", "javascript:void(0)");
+  form.setAttribute("id", "mainFormObj");
+  form.classList.add("w3-row");
+
+  let settings = storeSettings("get", true);
+  if (settings == "") settings = activeState.settings; 
+
+  for (let setting of Object.entries(settings)) {
+    buildField(setting, form);
+  }
+
+  //add form to mainForm Div
+  document.getElementById("mainForm").appendChild(form);
+
+  // create a Save button
+  let saveBtn = document.createElement("input");
+  saveBtn.setAttribute("type", "submit");
+  saveBtn.setAttribute("value", "Save");
+  saveBtn.classList.add("w3-button");
+  saveBtn.classList.add("w3-grey");
+  saveBtn.style.margin = "20px";
+  //append submit button to submitContainer
+
+  document.getElementById("submitContainer").appendChild(saveBtn);
+}
+
+function buildField(obj, form) {
+
+  //create template Input fields
+  let divContainer = document.createElement("DIV");
+  divContainer.classList.add("w3-half");
+  divContainer.classList.add("w3-container");
+
+  let div = document.createElement("DIV");
+  div.classList.add("w3-section");
+  div.classList.add("w3-left-align");
+
+  div.setAttribute("style", "padding: 10px");
+
+  let label = document.createElement("LABEL");
+  label.style.display = "inline-block";
+  label.style.width = "100%";
+  label.style.paddingBottom = "5px";
+  label.style.borderBottom = "thin solid #9e9e9e";
+  label.style.fontWeight = "800";
+
+  let input = document.createElement("input");
+  input.setAttribute("type", "text");
+  input.setAttribute("name", obj[0]);
+  input.setAttribute("id", obj[0]);
+  input.classList.add("w3-input");
+  input.id = obj[0];
+  input.value = obj[1];
+  label.innerHTML = obj[0];
+  div.appendChild(label);
+  div.appendChild(input);
+  //append field to wrapper and add to mainForm
+  divContainer.appendChild(div);
+  form.appendChild(divContainer);
+}
+
+function addSidebar() {
+  let sidebarList = document.createElement("ul");
+  sidebarList.classList.add("w3-ul");
+
+  let sidebarListItem = document.createElement("li");
+
+  sidebarListItem.classList.add(
+      "w3-bar-item",
+      "w3-padding-large",
+      "w3-button"
+  );
+  sidebarListItem.style.borderBottom = "1px solid #ddd";
+  sidebarListItem.id = "sb-title";
+  sidebarListItem.innerHTML = "Edit Settings"
+  sidebarList.appendChild(sidebarListItem);
+
+  document.getElementById("sidebar").appendChild(sidebarList);
+
+}
+
+function saveSettings() {
+  let x = document.getElementById("mainFormObj");
+  let obj = {};
+  if (x == null) {
+    return;
+  }
+  for (let i = 0; i < x.length; i++) {
+    let name = x.elements[i].name;
+    let value = x.elements[i].value;
+    obj[name] = sanitize(value);
+  }
+  for (let setting of Object.entries(obj)) {
+    if (activeState.settings[setting[0]] != setting[1]) {
+      //change detected
+      if (setting[0] == "persistentStorage") {
+        let tF = retrieveData("templateFiles");
+        let settings = storeSettings("get", true);
+        activeState.settings[setting[0]] = setting[1];
+
+        if (setting[1] == "false") {
+          try {
+            window.localStorage.removeItem(sha256("settings_m21_"));
+          } catch (e) {}
+          let msg = (activeState.settings.persistentStorage == "false") ? "temporary" : "persistent";
+          printVersion("storage mode: "+msg+" |");
+        }
+        if (settings != "") storeSettings(settings);
+        if (tF != null) storeData("templateFiles", tF);
+      }
+    }
+    activeState.settings[setting[0]] = setting[1];
+  } 
+  storeSettings(obj);
+}
+
+
+export default buildSettings;
diff --git a/js/9.9.9/storage.js b/js/9.9.9/storage.js
index f199254..1e0d2c9 100644
--- a/js/9.9.9/storage.js
+++ b/js/9.9.9/storage.js
@@ -1,7 +1,37 @@
 import XORCipher from "./xorc.js";
 import sha256 from "./sha256.min.js";
-import { getUsrId, passwordHash, sanitize } from "./scripts.js";
+import { getCurrentDate, getUsrId, passwordHash, sanitize } from "./scripts.js";
+import { printVersion } from "./evts.js";
 
+const store = {
+  getItem: function (key) {return getStor().getItem(key)},
+  setItem: function (key, data) {getStor().setItem(key, data)},
+  removeItem: function (key) {getStor().removeItem(key)},
+  clear: function () {getStor().clear()},
+};
+
+const tempStore = {
+  setItem: function (key, data) {
+    globalThis.activeState.storage[key] = data;
+  },
+  getItem: function (key) {
+    return globalThis.activeState.storage[key];
+  },
+  removeItem: function (key) {
+    globalThis.activeState.storage[key] = "";
+  },
+  clear: function () {
+    globalThis.activeState.storage = "";
+  },
+};
+
+function getStor() {
+  if (window.activeState.settings.persistentStorage == "true") {
+    return window.localStorage;
+  } else {
+    return tempStore;
+  }
+}
 
 function createStorageObj() {
   let x = document.getElementById("mainFormObj");
@@ -30,16 +60,16 @@ function createStorageObj() {
     }
   } else if (userFileNamePH.length != 0) {
     activeState.fileName = userFileNamePH;
-  } 
+  }
 
-  storeData("userInput", JSON.stringify(dataArray));
-  
+  storeData("userInput", dataArray, "save");
 }
 
-function storeData(name, data) {
+function storeData(name, data, ref) {
+  data = JSON.stringify(data);
   //setCookie(name, btoa(data), 7);
   if (name == "userInput") {
-    name = getFileName();
+    name = getFileName(ref);
   }
   if (name == "userInputForce") {
     name = "userInput";
@@ -49,147 +79,141 @@ function storeData(name, data) {
   if (name == "templateFiles") {
     key = sha256(name + "_m21_");
   }
-  window.localStorage.setItem(key, obfuscate(data));
+  store.setItem(key, obfuscate(data));
 }
 
-function retrieveData(type, template = "none") {
-  if (type == "userInput") {
-    let tF = JSON.parse(retrieveData("templateFiles"));
+function retrieveData(name, template = "none") {
+  if (name == "userInput") {
+    let tF = retrieveData("templateFiles");
     if (tF == null) {
-      return "";
+      return [];
     } else {
-      type = tF[tF.length - 1].fileName;
+      name = tF[tF.length - 1].fileName;
     }
   }
-  if (type == "userInputForce") {
-    type = "userInput";
+  if (name == "userInputForce") {
+    name = "userInput";
   }
   let cdata;
+  let key;
   if (template == "none") {
     let lT = activeState.loadedTemplate;
-    let key = sha256(type + "_m21_" + lT);
-    if (type == "templateFiles") {
-      key = sha256(type + "_m21_");
+    key = sha256(name + "_m21_" + lT);
+    if (name == "templateFiles") {
+      key = sha256(name + "_m21_");
     }
-    cdata = window.localStorage.getItem(key);
   } else {
-    let key = sha256(type + "_m21_" + template);
-    cdata = window.localStorage.getItem(key);
+    key = sha256(name + "_m21_" + template);
   }
+  cdata = store.getItem(key);
+
   if (cdata != null) {
-    return obfuscate(cdata, false);
+    cdata = obfuscate(cdata, false);
+    let data;
+    try {
+      data = JSON.parse(cdata);
+    } catch (e) {
+      data = null;
+    }
+    return data;
   } else {
-    return "[]";
+    return [];
   }
 }
 
-function clearData(type, template = "none") {
+function clearData(name, template = "none") {
   let lT;
   let key;
   if (template == "none") {
     lT = activeState.loadedTemplate;
-    key = sha256(type + "_m21_" + lT);
-    if (type == "templateFiles") {
-      key = sha256(type + "_m21_");
+    key = sha256(name + "_m21_" + lT);
+    if (name == "templateFiles") {
+      key = sha256(name + "_m21_");
     }
   } else {
     lT = template;
-    key = sha256(type + "_m21_" + template);
+    key = sha256(name + "_m21_" + template);
   }
-  window.localStorage.removeItem(key);
+  store.removeItem(key);
 }
 
-function getFileName() {
+function getFileName(ref = "none") {
   let currentFileName = activeState.fileName;
   let lT = activeState.loadedTemplate;
   if (currentFileName == "none" || currentFileName == "") {
-    let date = new Date();
-    let current_hour = date.getHours();
-    current_hour = current_hour <= 9 ? "0" + current_hour : current_hour;
-    let current_minute = date.getMinutes();
-    current_minute =
-      current_minute <= 9 ? "0" + current_minute : current_minute;
-    let current_month = date.getMonth() + 1;
-    current_month = current_month <= 9 ? "0" + current_month : current_month;
-    let current_year = date.getDate();
-    current_year = current_year <= 9 ? "0" + current_year : current_year;
-
-    let current_time = current_hour + ":" + current_minute;
-    let current_date = current_year + "." + current_month;
-    currentFileName = current_time + "_" + current_date + "  " + lT;
+    let date = getCurrentDate();
+    currentFileName = date.current_time + "_" + date.current_date + "  " + lT;
     //console.log(currentFileName);
   }
 
-  let tF = null;
-  try {
-    tF = JSON.parse(retrieveData("templateFiles"));
-  } catch(e) {
-    tF = null;
-  }
+  let tF = retrieveData("templateFiles");
+  const metadata = {
+    ts_create: getCurrentDate(),
+    ts_save: "",
+    id: sha256(currentFileName),
+  };
 
-  if (tF != null) {
+  if (tF.length != 0) {
     for (let tFi of tF) {
-      if (tFi.fileName == currentFileName) {return currentFileName};
+      if (tFi.fileName == currentFileName) {
+        tFi.metadata.ts_save = getCurrentDate();
+        return currentFileName;
+      }
     }
-    tF.push({ fileName: currentFileName, template: lT });
+    tF.push({
+      fileName: currentFileName,
+      template: lT,
+      metadata: metadata,
+      pos: tF.length - 1,
+    });
   } else {
-    tF = [{ fileName: currentFileName, template: lT }];
+    tF = [
+      { fileName: currentFileName, template: lT, metadata: metadata, pos: 0 },
+    ];
   }
-  storeData("templateFiles", JSON.stringify(tF));
+  storeData("templateFiles", tF);
   activeState.fileName = currentFileName;
   return currentFileName;
 }
 
 function obfuscate(data, mode = true) {
-	if (mode) {
-	  return XORCipher.encode(sha256(passwordHash), data);
-	} else {
-	  return XORCipher.decode(sha256(passwordHash), data);
-	}
+  if (mode) {
+    return XORCipher.encode(sha256(passwordHash), data);
+  } else {
+    return XORCipher.decode(sha256(passwordHash), data);
+  }
 }
 
 function popFromTemplateFiles(fileName) {
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   let newArray = [];
   for (let obj of tF) {
     if (obj.fileName != fileName) {
       newArray.push(obj);
     }
   }
-  storeData("templateFiles", JSON.stringify(newArray));
+  storeData("templateFiles", newArray);
 }
 
 function createBookShelf() {
-  let tF = JSON.parse(retrieveData("templateFiles"));
+  let tF = retrieveData("templateFiles");
   let bookShelf = {};
-  let date = new Date();
-  let current_hour = date.getHours();
-  current_hour = current_hour <= 9 ? "0" + current_hour : current_hour;
-  let current_minute = date.getMinutes();
-  current_minute =
-    current_minute <= 9 ? "0" + current_minute : current_minute;
-  let current_month = date.getMonth() + 1;
-  current_month = current_month <= 9 ? "0" + current_month : current_month;
-  let current_year = date.getDate();
-  current_year = current_year <= 9 ? "0" + current_year : current_year;
-
-  let current_time = current_hour + ":" + current_minute;
-  let current_date = current_year + "." + current_month;
-  let saveFileName = current_time + "_" + current_date;
+  let date = getCurrentDate();
+  let saveFileName = date.current_time + "_" + date.current_date;
 
   if (tF != null) {
-    bookShelf[0] = {name: "hash", data: getUsrId(), ts: saveFileName};
+    bookShelf[0] = { name: "hash", data: getUsrId(), ts: saveFileName };
     let i = 1;
     for (let tFi of tF) {
       let data = retrieveData(tFi.fileName, tFi.template);
       bookShelf[i] = {};
       bookShelf[i].name = tFi.fileName + "_m21_" + tFi.template;
-      if (activeState.localOnly) {
-        bookShelf[i].data = data;  
+      if (activeState.settings.localOnly == "true") {
+        bookShelf[i].data = data;
       } else {
         bookShelf[i].data = obfuscate(data);
       }
-      
+
       i++;
     }
   }
@@ -197,8 +221,7 @@ function createBookShelf() {
 }
 
 function importBookShelf() {
-
-  localStorage.clear()
+  localStorage.clear();
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function () {
     if (this.readyState == 4 && this.status == 200) {
@@ -210,16 +233,52 @@ function importBookShelf() {
         let templateFilesArray = [];
         for (let file of mainArray) {
           if (file.name == "hash") continue;
-          window.localStorage.setItem(sha256(file.name), file.data);
-          templateFilesArray.push({ fileName: file.name.split("_m21_")[0], template: file.name.split("_m21_")[1] });
+          store.setItem(sha256(file.name), file.data);
+          templateFilesArray.push({
+            fileName: file.name.split("_m21_")[0],
+            template: file.name.split("_m21_")[1],
+          });
         }
-        window.localStorage.setItem(sha256("templateFiles-"), obfuscate(JSON.stringify(templateFilesArray)));
+        store.setItem(
+          sha256("templateFiles-"),
+          obfuscate(JSON.stringify(templateFilesArray))
+        );
       }
     }
   };
-  xhttp.open("GET", "php/?getStoredFiles="+getUsrId(), true);
-  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
+  xhttp.open("GET", "php/?getStoredFiles=" + getUsrId(), true);
+  xhttp.setRequestHeader(
+    "Content-type",
+    "application/x-www-form-urlencoded; charset=UTF-8"
+  );
   xhttp.send();
 }
 
-export { createStorageObj, storeData, retrieveData, clearData, getFileName, createBookShelf, importBookShelf};
+function storeSettings(data, get = false) {
+  let key = sha256("settings_m21_");
+
+  if (get) {
+    let cdata = "";
+    if (data == "getInit") {activeState.settings.persistentStorage = "true"}
+    try {
+      cdata = JSON.parse(obfuscate(store.getItem(key), false));
+    } catch (e) {
+      cdata = "";
+    }
+    if (data == "getInit") {activeState.settings.persistentStorage = "false"};
+    return cdata;
+  } else {
+    store.setItem(key, obfuscate(JSON.stringify(data)));
+  }
+}
+
+export {
+  createStorageObj,
+  storeData,
+  retrieveData,
+  clearData,
+  getFileName,
+  createBookShelf,
+  importBookShelf,
+  storeSettings,
+};
diff --git a/js/9.9.9/web.js b/js/9.9.9/web.js
index fe63405..79dfd75 100644
--- a/js/9.9.9/web.js
+++ b/js/9.9.9/web.js
@@ -1,9 +1,11 @@
 import buildForm from "./form.js";
 import { loadFileDivCallBack } from "./files.js";
-import { retrieveData, clearData, getFileName, importBookShelf } from "./storage.js";
-import { insertTextBlocks, modalNotifier } from "./evts.js";
+import { retrieveData, clearData, getFileName } from "./storage.js";
+import { insertTextBlocks, modalNotifier, resetNavBar } from "./evts.js";
 import { createTemplate, createTemplateCallBack} from "./createTemplate.js";
-import { getUsrId, logout, sessionVerification } from "./scripts.js";
+import { getUsrId, logout, passwordHash } from "./scripts.js";
+import buildSettings from "./settings.js";
+
 
 function loadTemplate(template, newFlag = false, loadOnly = false) {
   document.getElementById("siteTitle").innerHTML = template.replace(/_/g, " ");
@@ -18,10 +20,12 @@ function loadTemplate(template, newFlag = false, loadOnly = false) {
   document.getElementById("navMob").className = document
     .getElementById("navMob")
     .className.replace(" w3-show", "");
+  
   if (screen.width < 993) {
     let sidebar = document.getElementById("sidebar");
     sidebar.style.display = "none";
     document.getElementById("siteTitle").innerHTML = "TG";
+    document.getElementById("logo").innerHTML = "TG";
   }
   var xhttp = new XMLHttpRequest(); 
   xhttp.onreadystatechange = function () {
@@ -44,21 +48,12 @@ function loadTemplate(template, newFlag = false, loadOnly = false) {
       } else {
         cdata = retrieveData("userInputForce");
       }
-      if (cdata != "") {
-        let res = "";
-        try {
-          res = JSON.parse(cdata);
-        } catch (e) {
-          console.log("error", cdata);
-          return;
-        }
-        retrieveForm(res);
+      if (cdata != "" || cdata == null) {
+        retrieveForm(cdata);
       }
 
       //select first object and focus on it
-      let obj = JSON.parse(
-        window.sessionStorage.getItem("templateObjectsPurified")
-      );
+      let obj = activeState.templateObjectsPurified;
       let firstElement = document.getElementById(obj[0].word.replace(/ /g, "_"));
       if (firstElement != null) firstElement.focus();
       
@@ -71,8 +66,11 @@ function loadTemplate(template, newFlag = false, loadOnly = false) {
 
 function loadNewTemplate(template) {
 
+  //reset navbar above all else
+  resetNavBar();
+
   //sessionVerfication check
-  if (!sessionVerification()) {
+  if (!passwordHash.verify()) {
     modalNotifier("Error: Session is not authenticated...", 0);
   }
   
@@ -119,6 +117,13 @@ function loadNavBar() {
       createEntry.innerHTML = "Manage templates";
       divMob.appendChild(createEntry);
 
+      createEntry = document.createElement("a");
+      createEntry.setAttribute("href", "#");
+      createEntry.setAttribute("data-template", "!settings");
+      createEntry.classList.add("w3-bar-item", "w3-button", "w3-padding-large");
+      createEntry.innerHTML = "Settings";
+      divMob.appendChild(createEntry);
+
       createEntry = document.createElement("a");
       createEntry.setAttribute("href", "#");
       createEntry.setAttribute("data-template", "!logout");
@@ -137,6 +142,10 @@ function loadNavBar() {
             logout();
             return;
           }
+          if (template == "!settings") {
+            buildSettings();
+            return;
+          }
           loadNewTemplate(template);
         }
       });
@@ -275,6 +284,7 @@ function delStoredDataOnServer() {
 
 
 function retrieveForm(arr) {
+
   for (let i = 0; i < arr.length; i++) {
 
     let e = document.getElementById(arr[i].name);
diff --git a/js/9.9.9/xorc.js b/js/9.9.9/xorc.js
index 5e17850..86d82b5 100644
--- a/js/9.9.9/xorc.js
+++ b/js/9.9.9/xorc.js
@@ -1,5 +1,5 @@
 
-var XORCipher = {
+const XORCipher = {
   encode: function (key, data, seed) {
     data = xor_encrypt(key, data, seed);
     return b64_encode(data);