implement wallpaper storage

static/style.css

@@ -4,6 +4,9 @@
   --main_color: #1f9b92;
   --sub_color: #00000000;
   --err_color: #DC143C;
+  
+  --main_bg: '/static/bg2.png';
+  --login_bg: '/static/bg.png';
 }
 
 * { scrollbar-color:var(--main_color) var(--sub_color); }
@@ -21,6 +24,7 @@ body {
   background: var(--bg_color);
   color: var(--fg_color);
   background: url('/static/bg2.png');
+  background: url(var(--main_bg));
   background-size: cover;
   background-position: top left;
   background-attachment: fixed;
@@ -28,6 +32,7 @@ body {
 
 .login-body {
   background: url('/static/bg.png');
+  background: url(var(--login_bg));
   background-size: cover;
   background-position: center center;
   height: 100vh;

static/theme.js

@@ -1,4 +1,6 @@
 const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
+const loginBgReader = new FileReader();
+const mainBgReader = new FileReader();
 
 const saveData = {
   theme: defaultTheme,
@@ -28,7 +30,7 @@ function toByte(v) {
   ).slice(-2);
 }
 
-function resetTheme(theme) {
+function resetTheme(theme, bg = false) {
   try{
     let bg_col = theme[0];
     let fg_col = theme[1];
@@ -58,6 +60,13 @@ function resetTheme(theme) {
     $("err_col_input").value = err_col;
     $("err_col_opacity").value = err_opacity;
   } catch {}
+  
+  if (bg) {
+    localStorage.setItem("loginScreen", '/static/bg.png');
+    localStorage.setItem("mainScreen", '/static/bg2.png');
+    resetBG("login");
+    resetBG("main");
+  }
 }
 
 function setTheme() {
@@ -87,23 +96,65 @@ function setTheme() {
     document.body.style.setProperty("--sub_color", saveData.theme[3]);
     document.body.style.setProperty("--err_color", saveData.theme[4]);
   }
+  
+  setBG("login");
+  setBG("main");
 }
 
 function setBG(screen) {
-  // get the input element based on screen
-  // create the reader
-  // save dataURL into localstorage
-  
-  // resetBG(screen)
+  let reader = null;
+  switch(screen) {
+    case "login":
+      reader = loginBgReader;
+      break;
+    case "main":
+      reader = mainBgReader;
+      break;
+  }
+  const imgPath = $(`${screen}_bg_upload`)?.files[0];
+  if (imgPath) {
+    reader.readAsDataURL(imgPath);
+  }
 }
 
 function resetBG(screen) {
   // set dataURL from localstorage to theme state
+  saveData[screen + "Screen"] = localStorage.getItem(screen + "Screen");
   // bind reader load -> body background set dataURL
+  let selector = null;
+  switch (screen) {
+    case "login":
+      selector = ".login-body";
+      break;
+    case "main":
+      selector = "body";
+      break;
+  }
+  const rules = document.styleSheets[0].cssRules;
+  let rule = null;
+  for (var i = 0; i < rules.length; i++) {
+    if (rules[i].selectorText == selector) {
+      rule = rules[i];
+      break;
+    }
+  }
+
+  rule.style.setProperty("background", `url('${saveData[screen + "Screen"]}`);
+  rule.style.setProperty("background-size", "cover");
+  rule.style.setProperty("background-attachment", "fixed");
 }
 
-loadStorage();
-resetTheme(saveData.theme);
-setTheme();
+function initializeReaders() {
+  loginBgReader.addEventListener("load", () => {
+     localStorage.setItem("loginScreen", loginBgReader.result);
+     resetBG("login");
+  }, false);
+    mainBgReader.addEventListener("load", () => {
+     localStorage.setItem("mainScreen", mainBgReader.result);
+     resetBG("main");
+  }, false);
+}
+
+initializeReaders();
 resetBG("login");
 resetBG("main");

static/theme2.js

@@ -0,0 +1,4 @@
+
+loadStorage();
+resetTheme(saveData.theme);
+setTheme();

templates/config.html

@@ -28,7 +28,7 @@
   <label for="main-upload">Set Main BG</label><br/>
   <input type="file" id="main_bg_upload" name="file"/>
   </div>
-        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme)">Reset</button>
+        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme, true)">Reset</button>
       </form>
     </details>
 

templates/footer.html

@@ -1,6 +1,6 @@
 {{define "footer"}}
   </body>
   
-    <script src="/static/theme.js" type="text/javascript"></script>
+    <script src="/static/theme2.js" type="text/javascript"></script>
 </html>
 {{end}}

templates/header.html

@@ -8,6 +8,7 @@
     <link rel='stylesheet' type='text/css' href='/static/style.css'>
     <link rel='shortcut icon' href='/static/favicon.png'>
     
+    <script src="/static/theme.js" type="text/javascript"></script>
     <title>Nirvash &mdash; CMS</title>
   </head>
   <body>