Add custom alerts

index.html

@@ -320,7 +320,7 @@
     </div>
     <div class="end_line"></div>
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="website/scripts/script.js"></script>
+    <script src="website/scripts/script.js" type="module"></script>
 
 
 </body>

website/pages/login.html

@@ -7,6 +7,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login to Dataverse</title>
+    <link rel="stylesheet" href="../styles/style.css">
     <style>
         body {
             background-color: black;
@@ -138,8 +139,20 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
         </div>
         <!--login form end-->
     </center>
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <span id="modal-message"></span>
+            <div id="modal-buttons">
+                <a
+                    href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications"><button id="accept-modal" onclick="showModal()">Try
+                        Dataverse</button></a>
+                <button onclick="closeModal()" id="close-modal">Later</button>
+            </div>
+        </div>
+    </div>
     <a href="../../index.html"><button class="goBack">Go To Home</button></a>
-    <script>
+    <script type="module">
+        import {showModal, closeModal} from '../scripts/sharedUtilities.js';
         // On page load, check local storage for email
         window.onload = function() {
             const savedEmail = localStorage.getItem('email');
@@ -213,19 +226,23 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
             // Make sure to return the password field to the type['password']
             document.querySelector('.password-field').type = 'password';
 
+            if(emailValue.length === 0) {
+                showModal('Please enter your email', 'login/signup error');
+                return;
+            }
             if (!emailRegex.test(emailValue)) {
-                alert('Invalid email address');
+                showModal('Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.', 'login/signup error');
                 return;
             }
             if(!trustedDomains.includes(emailDomain)) {
                 alert('Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.');
                 return;
             }
             if (passwordInput.value.length === 0) {
-                alert('Please enter your password');
+                showModal('Please enter your password', 'login/signup error');
                 return;
             } else if (passwordInput.value.length < 8) {
-                alert('Password must be at least 8 characters');
+                showModal('Password must be at least 8 characters', 'login/signup error');
                 return;
             }
 
@@ -240,15 +257,13 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
             // Clear the input fields
             emailInput.value = '';
             passwordInput.value = '';
-            // Redirect to index.html
-            alert('Login successful!');
-            window.location.href = '../../index.html';
-        }
-
-        document.getElementById('loginButton').addEventListener('click', login);
-        document.addEventListener("keyup", login);
+            showModal('Login successful!', 'no reply');
+            // Redirect to index.html after a short time seconds of showing the modal
+            setTimeout(() => {
+                window.location.href = '../../index.html';  
+            }, 1500);
+        });
     </script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-    <script src="../scripts/script.js"></script>
 </body>
 </html>

website/pages/signup.html

@@ -100,6 +100,7 @@
         <div class="login-container" style="padding-top: 20px;">
             <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font: sans-serif;">SIGN UP</h1>
             <div id="errorContainer" class="error-message" style="color: white"></div>
+
             <div style="text-align: left; margin-left: 10%;" class="mb-3">
                 <label for="emailInput" class="form-label" style="color: white;">Email address</label>
                 <input type="email" class="form-control" id="emailInput" placeholder="Enter your Email Address" style="width: 90%; margin-top: -5px">
@@ -138,8 +139,20 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 <p style="color: white;">Already have an account? <a href="login.html" style="text-decoration: underline; color: #004ab7;">Login</a></p>
             </div>
         </div>
+        <div id="modal" class="modal">
+            <div class="modal-content">
+                <span id="modal-message"></span>
+                <div id="modal-buttons">
+                    <a
+                        href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications"><button id="accept-modal" onclick="showModal()">Try
+                            Dataverse</button></a>
+                    <button onclick="closeModal()" id="close-modal">Later</button>
+                </div>
+            </div>
+        </div>
         <a href="../../index.html"><button class="goBack">Go To Home</button></a>
-        <script>
+        <script type="module">
+            import {showModal, closeModal} from '../scripts/sharedUtilities.js';
             window.onload = function () {
                 // Adjust password icon and icon overlay on resize
                 adjustIconPos();
@@ -209,20 +222,22 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 const passwordInput = document.getElementById('passwordInput');
                 const confirmPasswordInput = document.getElementById('confirmPasswordInput');
                 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-                const emailValue = emailInput.value;
+                const emailValue = emailInput.value
 
                 // Trusted email domains
                 const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "protonmail.com", "icloud.com", "tutanota.com"];
                 const emailDomain = emailValue.split('@')[1];
 
-                // Clear previous error messages
-                errorContainer.style.display = 'none';
-                errorContainer.innerHTML = '';
+                // Check if the user has input an email
+                if(emailValue.trim() === '') {
+                    showModal('Please enter an email.', 'login/signup error');
+                    emailInput.value = ''; // Delete any extra spaces
+                    return; 
+                }
 
                 // Validate email format and trusted domain
                 if (!emailRegex.test(emailValue) || !trustedDomains.includes(emailDomain)) {
-                    errorContainer.innerHTML = 'Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.';
-                    errorContainer.style.display = 'block'; // Show error message
+                    showModal('Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.', 'login/signup error');
                     return;
                 }
 
@@ -231,10 +246,29 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                     icon.previousElementSibling.type = 'password';
                 })
 
+                // Check if the use didn't input a password
+                if(passwordInput.value.trim() === '') {
+                    showModal('Please enter your password.', 'login/signup error');
+                    passwordInput.value = ''; // Delete any extra spaces
+                    return;
+                }
+
+                // Check for the length of the password
+                if(passwordInput.value.trim().length < 8) {
+                    showModal('Your password must be at least 8 characters.', 'login/signup error');
+                    return;
+                }
+
+                 // Check if the use didn't input 
+                 if(confirmPasswordInput.value.trim() === '') {
+                    showModal('Please confirm your password.', 'login/signup error');
+                    confirmPasswordInput.value = ''; // Delete any extra spaces
+                    return;
+                }
+
                 // Check if passwords match
-                if (passwordInput.value !== confirmPasswordInput.value) {
-                    errorContainer.innerHTML = 'Both passwords do not match.';
-                    errorContainer.style.display = 'block'; // Show error message
+                if (passwordInput.value.trim() !== confirmPasswordInput.value.trim()) {
+                    showModal('Both passwords do not match.', 'login/signup error');
                     return;
                 }
 
@@ -250,12 +284,12 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
                 passwordInput.value = '';
                 confirmPasswordInput.value = '';
 
-                // Redirect to login page
-                alert('Your account has been created successfully!');
-                window.location.href = 'login.html';
-            }
-            document.getElementById('signupButton').addEventListener('click', signup);
-            document.addEventListener('keyup', signup);
+                showModal('Account created successfully!', 'no reply');
+                // Redirect to login page after a short time seconds of showing the modal
+                setTimeout(() => {
+                    window.location.href = 'login.html';
+                }, 1500);
+            });
 
             // Load remembered email on page load
             window.onload = function () {

website/scripts/script.js

@@ -1,3 +1,5 @@
+import { showModal, closeModal } from "./sharedUtilities.js";
+
 // 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"];
 
@@ -355,28 +357,6 @@ examples2.addEventListener("mouseleave", startAutoScroll);
 
 window.addEventListener("scroll", progress);
 
-
-function showModal(message, purpose) {
-  document.getElementById('modal').style.display = 'block';
-  document.getElementById('modal-message').innerText = message;
-
-  if(purpose === 'download dataverse') {
-    // Check if the accept and close buttons has been already hidden
-    if(document.getElementById('accept-modal').style.display === 'none') {
-      document.getElementById('accept-modal').style.display = 'block';
-    document.getElementById('modal-buttons').style.gap = '25%';
-    }
-  } else if(purpose === 'submit feedback') {
-    document.getElementById('accept-modal').style.display = 'none';    
-    document.getElementById('close-modal').innerText = 'close';
-    document.getElementById('modal-buttons').style.gap = '0';
-  }
-}
-
-function closeModal() {
-  document.getElementById('modal').style.display = 'none';
-}
-
 /*CHANGING DIRECTION OF AEROPLANE*/
 
 function updateAngle() {

website/scripts/sharedUtilities.js

@@ -0,0 +1,53 @@
+function checkPurpose(purpose) {
+  // All possible custom modal purposes/types
+  const modalPurposes = ['download dataverse', 'submit feedback', 'login/signup error', 'no reply'];
+  return modalPurposes.includes(purpose); // Returns a boolean 
+}
+
+
+export function showModal(message, purpose) {
+  // Check if no modal purpose was provided
+  if(purpose === undefined || purpose === '') {
+    console.error(`Please provide a correct login purpose. See 'website/pages/scripts/sharedUtilities.js' => showModal`);
+  } else {
+    // Check whether the modal purpose is currently available
+    if(!checkPurpose(purpose)) {
+      console.error(`Modal purpose '${purpose}' is unavailable, See 'website/pages/scripts/sharedUtilities.js' => showModal`);
+      return;
+    }
+
+    document.getElementById('modal').style.display = 'block';
+    document.getElementById('modal-message').innerText = message;
+    document.getElementById('close-modal').style.display = 'block';
+
+    if(purpose === 'download dataverse') {
+      // Check if the accept and close buttons has been already hidden
+      if(document.getElementById('accept-modal').style.display === 'none') {
+        document.getElementById('accept-modal').style.display = 'block';
+
+      document.getElementById('close-modal').innerText = 'later';
+      document.getElementById('modal-buttons').style.gap = '25%';
+      }
+    } else if(purpose === 'submit feedback') {
+      document.getElementById('accept-modal').style.display = 'none';    
+      document.getElementById('close-modal').innerText = 'close';
+      document.getElementById('modal-buttons').style.gap = '0';
+    } else if(purpose === 'login/signup error') {
+      document.getElementById('accept-modal').style.display = 'none';    
+      document.getElementById('close-modal').innerText = 'Got it!';
+      document.getElementById('modal-buttons').style.gap = '0';
+    } else if(purpose === 'no reply') {
+      document.getElementById('accept-modal').style.display = 'none';    
+      document.getElementById('close-modal').style.display = 'none';
+    }
+  }
+}
+
+export function closeModal() {
+  document.getElementById('modal').style.display = 'none';
+}
+
+
+// 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;