Add another option for locking the menu -- code reentry

src/options/body.css

@@ -294,6 +294,26 @@ html[schedule="false"] #schedule_container > *:not(#schedule_modal_header) {
   gap: 15vh;
 }
 
+/* Code Entry */
+#lock_code_container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: calc(var(--footer-height) + 3px);
+  width: 100vw;
+  z-index: 100;
+  font-size: 1rem;
+
+  background-color: var(--body-background-color);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 25px;
+}
+
+
 #main_container {
   display: flex;
   flex-direction: row;

src/options/general.css

@@ -39,6 +39,9 @@ html[dark_mode='false'], html:not([dark_mode]) {
 html[global_enable="false"] #timer_container,
 html[global_enable="true"][menu_timer="false"] #timer_container,
 html[global_enable="true"][menu_timer="true"]:not([menu_timer_counting_down]) #timer_container,
+html[global_enable="false"] #lock_code_container,
+html[global_enable="true"][lock_code="false"] #lock_code_container,
+html[global_enable="true"][lock_code="true"]:not([entering_lock_code]) #lock_code_container,
 html[global_enable="true"] #disabled_message_container,
 html[global_enable="false"] #main_container,
 html[global_enable="false"] #search_bar {

src/options/main.html

@@ -98,6 +98,12 @@
       <div></div>
     </div>
 
+    <div id="lock_code_container">
+      <div>Re-type Code</div>
+      <div id="code"></div>
+      <input>
+    </div>
+
     <div id='settings-menu' class='hidden'>
       <div id='settings-schedule'>Schedule</div>
       <hr>

src/options/main.js

@@ -9,6 +9,7 @@ const TEMPLATE_FIELDSET = document.getElementById('template_fieldset');
 const TEMPLATE_SECTION = document.getElementById('template_section');
 const TEMPLATE_OPTION = document.getElementById('template_option');
 const TIMER_CONTAINER = document.getElementById('timer_container');
+const LOCK_CODE_CONTAINER = document.getElementById('lock_code_container');
 let openedTime = Date.now();
 let currentUrl;
 
@@ -164,6 +165,20 @@ function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) {
     timerLoop();
   }
 
+  if (SETTING_VALUES['lock_code']) {
+    HTML.setAttribute('entering_lock_code', '');
+    const code = generateRandomString(16);
+    const input = qs('input', LOCK_CODE_CONTAINER);
+    qs('div#code', LOCK_CODE_CONTAINER).innerText = code;
+    input.addEventListener('input', e => {
+      console.log(input.value);
+      console.log();
+      if (input.value === code) {
+        HTML.removeAttribute('entering_lock_code', '');
+      }
+    });
+  }
+
   const openScheduleButton = document.getElementById('disabled_message_open_schedule');
   openScheduleButton.addEventListener('click', e => openScheduleModal());
 
@@ -348,7 +363,7 @@ function handleEnter(e) {
 
 // For the menu timer option
 function timerLoop() {
-  const timeLeft = 9 - Math.floor((Date.now() - openedTime) / 1000);
+  const timeLeft = Math.max(1, 9 - Math.floor((Date.now() - openedTime) / 1000));
   const timeLeftElt = TIMER_CONTAINER.querySelector('div:nth-child(2)');
   timeLeftElt.innerText = `${timeLeft} second${timeLeft === 1 ? '' : 's'} remaining.`;
 

src/shared/main.js

@@ -553,16 +553,31 @@ const SECTIONS = [
         id: "remove_context",
         defaultValue: false,
       },
-      {
-        name: "Enable the menu timer - 10 seconds",
-        id: "menu_timer",
-        defaultValue: false,
-      },
       {
         name: "Enable grayscale mode",
         id: "grayscale_mode",
         defaultValue: false,
       },
+      {
+        name: "Lock settings - 10 second timer",
+        id: "menu_timer",
+        defaultValue: false,
+        effects: {
+          true: {
+            lock_code: false,
+          }
+        }
+      },
+      {
+        name: "Lock settings - code entry",
+        id: "lock_code",
+        defaultValue: false,
+        effects: {
+          true: {
+            menu_timer: false,
+          }
+        }
+      },
     ]
   },
 ];
@@ -676,6 +691,7 @@ const idToShortId = {
   "only_show_playlists":               '79',
   "remove_channel_subscribers":        '80',
   "grayscale_mode":                    '81',
+  "lock_code":                         '82',
 };
 
 

src/shared/utils.js

@@ -145,3 +145,15 @@ function hydrateDropdown(
 	}
 	root.addEventListener('click', clickListener);
 }
+
+
+function generateRandomString(length) {
+  const characters = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters.charAt(randomIndex);
+  }
+  return result;
+}
+