Merge pull request #349 from amin-xiv/sidebar-fix

Fixed sidebar and login and signup page issues.
multiverseweb · Nov 18, 2024 · c081041 · c081041
2 parents 954520d + 2f876bb
commit c081041
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 23 deletions.
diff --git a/website/pages/login.html b/website/pages/login.html
@@ -132,7 +132,7 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
                 <input type="checkbox" id="rememberMe" style="margin-top: -5px; width: 15px; height: 15px;">
                 <label for="rememberMe" style="color: white;">Remember Me</label>
             </div>
-            <button type="button" class="btn btn-primary" id="loginButton" style="width: 50%; font-weight: 400;">LOGIN</button>
+            <button type="button" class="btn btn-primary" id="loginButton" style="width: 50%; font-weight: 400;" onclick="login(event)">LOGIN</button>
             <div style="text-align: center; margin-top: 10px;">
                 <p style="color: white;">Don't have an account? <a href="signup.html" style="text-decoration: underline; color: #004ab7;"> Sign Up</a></p>
             </div>
@@ -152,7 +152,8 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
     </div>
     <a href="../../index.html"><button class="goBack">Go To Home</button></a>
     <script type="module">
-        import {showModal, closeModal} from '../scripts/sharedUtilities.js';
+        import {showModal, closeModal, attachToWindow} from '../scripts/sharedUtilities.js';
+        var windowFunctions = [];
         // On page load, check local storage for email
         window.onload = function() {
             const savedEmail = localStorage.getItem('email');
@@ -162,7 +163,7 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
             }
 
             // Resize password icon and icon overlay on load
-            adjustIconPos();
+            adjustIconPos();         
         };
 
         function adjustIconPos() {
@@ -188,6 +189,7 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
         }
         // Adjust password icon and icon overlay on resize
         window.addEventListener("resize", adjustIconPos);
+        windowFunctions.push(adjustIconPos);
 
         // Password hide/view handling
         document.getElementById('password_icon').addEventListener("click", function (event) {
@@ -213,7 +215,7 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
                     return;
                 }
             }
-            
+
             const emailInput = document.getElementById('emailInput');
             const passwordInput = document.getElementById('passwordInput');
             const emailValue = emailInput.value.trim();
@@ -262,7 +264,12 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
             setTimeout(() => {
                 window.location.href = '../../index.html';  
             }, 1500);
-        });
+        };
+        windowFunctions.push(login);
+        window.login = login;
+
+        // Attach required functions to the DOM window
+        attachToWindow(windowFunctions);   
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>

diff --git a/website/pages/signup.html b/website/pages/signup.html
@@ -134,7 +134,7 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 <label for="rememberMe" class="form-check-label" style="color: white; font-weight: 500;">Remember Me</label>
             </div>
 
-            <button type="button" class="btn btn-primary" id="signupButton" style="width: 60%; margin-top: 15px; font-weight: 400;">SIGN UP</button>
+            <button type="button" class="btn btn-primary" id="signupButton" style="width: 60%; margin-top: 15px; font-weight: 400;" onclick="signup(event)">SIGN UP</button>
             <div style="text-align: center; margin-top: 10px;">
                 <p style="color: white;">Already have an account? <a href="login.html" style="text-decoration: underline; color: #004ab7;">Login</a></p>
             </div>
@@ -152,18 +152,14 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
         </div>
         <a href="../../index.html"><button class="goBack">Go To Home</button></a>
         <script type="module">
-            import {showModal, closeModal} from '../scripts/sharedUtilities.js';
-            window.onload = function () {
-                // Adjust password icon and icon overlay on resize
-                adjustIconPos();
-            }
-
+            import {showModal, closeModal,  attachToWindow} from '../scripts/sharedUtilities.js';
+            var windowFunctions = [];
             // Function to adjust password visibility icon responsively
             function adjustIconPos() {
                 const passwordIcons = Array.from(document.getElementsByClassName('password_icon'));
                 const iconOverlays = Array.from(document.getElementsByClassName('icon_overlay'));
                 const mixedArray = [...passwordIcons, ...iconOverlays];
-                console.log(mixedArray);
+
                 if(window.innerWidth < 700 && window.innerWidth > 630) {
                     mixedArray.forEach((element) => {
                         element.style.right = '35px';
@@ -192,6 +188,7 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
             }
             // Adjust password icon and icon overlay on resize
             window.addEventListener("resize", adjustIconPos);
+            windowFunctions.push(adjustIconPos);
 
             const passwordIcons = document.getElementsByClassName('password_icon');
             Array.from(passwordIcons).forEach((icon) => {
@@ -289,7 +286,8 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 setTimeout(() => {
                     window.location.href = 'login.html';
                 }, 1500);
-            });
+            };
+            windowFunctions.push(signup);
 
             // Load remembered email on page load
             window.onload = function () {
@@ -298,6 +296,10 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                     document.getElementById('emailInput').value = rememberedEmail;
                     document.getElementById('rememberMe').checked = true;
                 }
+                // Reset password icon position
+                adjustIconPos();
+                // Attach required functions to the DOM window
+                attachToWindow(windowFunctions);
             };
         </script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

diff --git a/website/scripts/script.js b/website/scripts/script.js
@@ -1,4 +1,6 @@
-import { showModal, closeModal } from "./sharedUtilities.js";
+import { showModal, closeModal, attachToWindow } from "./sharedUtilities.js";
+// Array that holds all functions need to be accessible for HTML
+var windowFunctions = [];
 
 // Array of city names
 var cities = ["Pune", "Moradabad", "Dehradun", "Rampur", "Delhi", "Coimbatore", "Riyadh", "Ahmedabad", "Kolkata", "Mumbai", "Jorhat", "Arrah", "Bhopal", "Bengalore", "Secunderabad", "Ludhiana", "Nagpur", "Lucknow", "Gorakhpur", "Bhilai", "Kanpur", "Panaji"];
@@ -61,7 +63,7 @@ async function addMarkersWithDelay(cities) {
 addMarkersWithDelay(cities);
 
 
-// /preloader js styling
+// /preloader js styling and other stuff needed for preload
 window.addEventListener('DOMContentLoaded', () => {
   // Hide the loader after 3 seconds
   setTimeout(() => {
@@ -70,8 +72,10 @@ window.addEventListener('DOMContentLoaded', () => {
 
       displayCopyright();
   }, 3000);
-});
 
+  attachToWindow(windowFunctions);
+});
+windowFunctions.push(topFunction);
 function topFunction() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
@@ -156,7 +160,7 @@ function progress() {
 
 window.addEventListener("scroll", progress);
 
-
+windowFunctions.push(show);
 function show() {
   l2.style.opacity = 0;
   l1.style.transform = "rotate(-45deg)";
@@ -167,6 +171,7 @@ function show() {
   body.style.overflowY = "hidden";
   buttons.style.marginLeft = 0;
 }
+windowFunctions.push(hide);
 function hide() {
   l2.style.opacity = 1;
   l1.style.transform = "rotate(0deg)";
@@ -210,7 +215,7 @@ function updateIndicator(button) {
 }
 
 
-
+windowFunctions.push(light);
 function light(flag) {
   localStorage.setItem('theme', 'light');
   body.classList.remove('dark-mode');
@@ -226,7 +231,7 @@ function light(flag) {
   const lightButton = document.getElementById("lightButton");
   updateIndicator(lightButton); // Update the indicator position and style for the light button
 }
-
+windowFunctions.push(dark);
 function dark(flag) {
   localStorage.setItem('theme', 'dark');
   document.getElementById("map").style.filter = "invert(1) hue-rotate(180deg) brightness(1.5)";
@@ -242,7 +247,7 @@ function dark(flag) {
   const darkButton = document.getElementById("darkButton");
   updateIndicator(darkButton); // Update the indicator position and style for the dark button
 }
-
+windowFunctions.push(systemDefault);
 function systemDefault() {
   const theme = localStorage.getItem('theme');
   const defaultButton = document.getElementById("defaultButton");
@@ -413,7 +418,7 @@ function validateForm() {
 
  return false;
 } 
-
+windowFunctions.push(checkFeedbackLength);
 function checkFeedbackLength(input) {
   if(input.value.length < 10) {
       document.getElementById('feedbackError').style.opacity = '100%';

diff --git a/website/scripts/sharedUtilities.js b/website/scripts/sharedUtilities.js
@@ -1,3 +1,5 @@
+var windowFunctions = [];
+
 function checkPurpose(purpose) {
   // All possible custom modal purposes/types
   const modalPurposes = ['download dataverse', 'submit feedback', 'login/signup error', 'no reply'];
@@ -42,12 +44,26 @@ export function showModal(message, purpose) {
     }
   }
 }
+windowFunctions.push(showModal);
 
 export function closeModal() {
   document.getElementById('modal').style.display = 'none';
 }
+windowFunctions.push(closeModal);
 
+// Since this script is a module type, functions won't be accessible to the DOM by default, this function attaches all
+//  the functions that are needed for the DOM.
+export function attachToWindow(arr) {
+  arr.forEach((func) => {
+    const funcName = func.name
+    window[`${funcName}`] = func; // Attach function to the window
+  })
+}
 
 // Attach the functions to the Global scope of the HTML, so it can be used on the 'onclick' attributes
 window.showModal = showModal;
-window.closeModal = closeModal;
+window.closeModal = closeModal;
+
+window.onload = function() {
+  attachToWindow(windowFunctions);
+}