From a1fecb96ba65f7095c8673acd8d484918cb69078 Mon Sep 17 00:00:00 2001
From: Jashwanth-rit <158207370+Jashwanth-rit@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:04:22 +0530
Subject: [PATCH] fixes:#265

---
 views/auth.ejs | 639 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 638 insertions(+), 1 deletion(-)

diff --git a/views/auth.ejs b/views/auth.ejs
index e9d841e..e9c0500 100644
--- a/views/auth.ejs
+++ b/views/auth.ejs
@@ -7,8 +7,401 @@
     <script src="js/client-validation.js" defer></script>
     <style>
         body {
-            overflow-y: auto;  // Changed from hidden to auto to allow scrolling
+            overflow-y: auto; 
         }
+        @keyframes backgroundAnimation {
+    0% {
+        background-color: #f0f0f0;
+    }
+    50% {
+        background-color: #d0e8d0;
+    }
+    100% {
+        background-color: #a0d4bc;
+    }
+}
+
+.card {
+    width: 400px;
+    background: 34947c;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    margin: 10px; /* Reduced gap around card */
+    animation: cardAnimation 1s ease-in-out;
+}
+
+@keyframes cardAnimation {
+    from {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.card-header, .card-footer {
+    padding: 16px;
+    text-align: center;
+    margin: 10px; /* Reduced gap around card header and footer */
+}
+
+.card-title {
+    font-size: 24px;
+    margin-bottom: 8px;
+    font-weight: bold; /* Make title bold */
+    font-style: italic; /* Make title italic */
+}
+
+.card-description {
+    color: #666;
+}
+
+.tabs {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 10px; /* Reduced gap around tabs */
+    background-color: rgb(240, 236, 236);
+}
+
+.tabs button {
+    flex: 1;
+    padding: 8px; /* Reduced padding to make the height smaller */
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 8px;
+    margin: 5px;
+    color: darkgrey;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.tabs button.active {
+    border-bottom: 2px solid #eceef0;
+    color: rgb(236, 232, 232); /* Change text color to black when active */
+    background-color: #5a926b; /* Change background color to white when active */
+}
+
+.tabs button:hover {
+    background-color: rgb(255, 255, 255);
+    color: darkgrey;
+}
+
+.tabs button.active:hover {
+    background-color: rgb(204, 160, 103);
+    color: rgb(0, 0, 0);
+}
+
+.tabs button:not(.active) {
+    background-color: transparent;
+    color: darkgrey;
+}
+
+.tab-content {
+    display: none;
+    padding: 16px;
+    margin: 10px; /* Reduced gap around tab content */
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.form-group {
+    margin-bottom: 16px;
+    margin: 10px; /* Reduced gap around form group */
+    position: relative; /* Add relative positioning for icon positioning */
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold; /* Make labels bold */
+}
+
+.form-group input {
+    width: 100%;
+    padding: 8px;
+    padding-right: 40px; /* Add padding to the right to make room for the icon */
+    box-sizing: border-box;
+    border-radius: 8px; /* Add round border to input tags */
+    border: 2px solid grey; /* Add 2px grey border to input tags */
+    transition: border-color 0.3s; /* Smooth transition for border color */
+    margin: 10px 0; /* Reduced gap around input fields */
+    animation: inputAnimation 0.5s ease-in-out;
+}
+
+@keyframes inputAnimation {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.form-group input:hover {
+    border-color: #888a8d; /* Change border color on hover */
+}
+
+.form-group input:focus {
+    border-color: darkgrey; /* Change border color to dark grey on focus */
+    outline: none; /* Remove default outline */
+}
+
+.form-group .toggle-password {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: #888a8d;
+    font-size: 1.2em; /* Adjust the size of the icon */
+    margin-top: 12px; /* Add top margin of 1px */
+}
+
+.form-group .toggle-password:hover {
+    color: darkgrey;
+}
+
+.btn {
+    width: 100%;
+    padding: 12px;
+    background-color: #0b0c0c;
+    color: white;
+    border: none;
+    cursor: pointer;
+    margin: 10px 0; /* Reduced gap around buttons */
+    border-radius: 50px; /* Make buttons round */
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn:hover {
+    background-color: #333;
+    transform: translateY(-2px);
+}
+
+.btn:disabled {
+    background-color: #aaa;
+}
+
+
+
+
+
+.btn1{
+    width: 100%;
+    padding: 12px;
+    background-color: #fff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    margin: 10px 0; /* Reduced gap around buttons */
+    border-radius: 50px; /* Make buttons round */
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn1:hover {
+    background-color: #fff;
+    transform: translateY(-2px);
+}
+
+.btn1:disabled {
+    background-color: #aaa;
+}
+
+.btn1 a{
+    text-decoration: none;
+    color: #232836;
+}
+
+.btn2{
+    width: 100%;
+    padding: 12px;
+    background-color: #4267b2;;
+    color: white;
+    border: none;
+    cursor: pointer;
+    margin: 10px 0; /* Reduced gap around buttons */
+    border-radius: 50px; /* Make buttons round */
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn2:hover {
+    background-color: #016dcb;
+    transform: translateY(-2px);
+}
+
+.btn2:disabled {
+    background-color: #aaa;
+}
+
+.btn2 a{
+    text-decoration: none;
+    color: #FFF;
+}
+
+.btn3{
+    width: 100%;
+    padding: 12px;
+    background-color: #000000;
+    color: white;
+    border: none;
+    cursor: pointer;
+    margin: 10px 0; /* Reduced gap around buttons */
+    border-radius: 50px; /* Make buttons round */
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn3:hover {
+    background-color: #000000;
+    transform: translateY(-2px);
+}
+
+.btn3:disabled {
+    background-color: #aaa;
+}
+
+.btn3 a{
+    text-decoration: none;
+    color: #FFF;
+}
+
+.card-footer p {
+    font-size: 12px;
+    color: #666;
+}
+
+.error {
+    color: red;
+    font-size: 12px;
+    margin-top: -12px;
+    margin-bottom: 12px;
+}
+
+.success {
+    color: green;
+    font-size: 14px;
+    margin-top: 12px;
+    display: none;
+}
+
+.forgot-password {
+    text-align: right;
+    margin-top: -10px;
+    margin-bottom: 10px;
+}
+
+.forgot-password a {
+    color: #3b56cc;
+    text-decoration: none;
+    font-size: 12px;
+}
+
+.forgot-password a:hover {
+    text-decoration: underline;
+}
+
+.already-have-account {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.already-have-account a {
+    color: #3b56cc;
+    text-decoration: none;
+    font-size: 12px;
+}
+
+.already-have-account a:hover {
+    text-decoration: underline;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 400px;
+    border-radius: 8px;
+    animation: modalAnimation 0.5s ease-in-out;
+}
+
+@keyframes modalAnimation {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: rgb(0, 0, 0);
+    text-decoration: none;
+    cursor: pointer;
+}
+div.tab-content{
+    height:50vh;
+    overflow: auto;
+    
+}
+.tab-content::-webkit-scrollbar{
+    display:none;
+}
+label {
+    margin: 0; /* Remove default margin from the label */
+    display: flex; /* Set display to flex for proper alignment */
+    align-items: center; /* Vertically center the icon and text */
+    padding-left:5px;
+}
+.success-message {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(255, 192, 203, 0.8); /* Pink translucent background */
+    color: black;
+    padding: 15px 20px;
+    border-radius: 5px;
+    font-size: 16px;
+    z-index: 1000;
+    text-align: center;
+}
         .input-submit {
             display: flex;
             justify-content: center;
@@ -96,6 +489,13 @@
                 <div class="input-box">
                     <input type="submit" class="input-submit" value="<%= action === 'login' ? 'LOGIN' : 'SIGN UP' %>">
                 </div>
+                <button type="submit" class="btn1" id="login-btn" style=" background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=); background-repeat: no-repeat; background-position: 20% 50%; background-size: 30px;"><a href="https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0">Login With Google</a></button>
+                <button type="submit" class="btn2" id="login-btn"     style=" background-image: url(https://cdn.freebiesupply.com/logos/large/2x/facebook-logo-2019.png); background-repeat: no-repeat; background-position: 20% 50%; background-size: 30px;"><a href="https://www.facebook.com/login/">Login With Facebook</button>
+                <div class="success" id="login-success">Login successful!</div>
+
+                <button type="submit" class="btn3" id="login-btn"     style=" background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/57/X_logo_2023_%28white%29.png); background-repeat: no-repeat; background-position: 20% 50%; background-size: 30px;"><a href="https://x.com/i/flow/login">Login With X</button>
+                    <div class="success" id="login-success">Login successful!</div>
+
             </form>
             <div class="bottom">
                 <span>
@@ -149,6 +549,243 @@
         domain="www.chatbase.co"
         defer>
         </script>
+        <script>
+            document.querySelectorAll('.tab-link').forEach(button => {
+    button.addEventListener('click', () => {
+        document.querySelectorAll('.tab-link').forEach(btn => btn.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+
+        button.classList.add('active');
+        document.getElementById(button.dataset.tab).classList.add('active');
+        animateTabContent(document.getElementById(button.dataset.tab));
+    });
+});
+
+function animateTabContent(tabContent) {
+    tabContent.style.opacity = 0;
+    setTimeout(() => {
+        tabContent.style.opacity = 1;
+        tabContent.style.transition = 'opacity 0.5s';
+    }, 50);
+}
+
+function validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(String(email).toLowerCase());
+}
+
+function validatePassword(password) {
+    return password.length >= 6;
+}
+
+document.getElementById('login-form').addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const email = document.getElementById('login-email').value;
+    const password = document.getElementById('login-password').value;
+    const emailError = document.getElementById('login-email-error');
+    const passwordError = document.getElementById('login-password-error');
+    const successMessage = document.getElementById('login-success');
+
+    let valid = true;
+
+    if (!validateEmail(email)) {
+        emailError.textContent = 'Invalid email address';
+        valid = false;
+    } else {
+        emailError.textContent = '';
+    }
+
+    if (!validatePassword(password)) {
+        passwordError.textContent = 'Password must be at least 6 characters';
+        valid = false;
+    } else {
+        passwordError.textContent = '';
+    }
+
+    if (valid) {
+        const loginBtn = document.getElementById('login-btn');
+        loginBtn.disabled = true;
+        loginBtn.textContent = 'Logging in...';
+        console.log('Login submitted');
+        setTimeout(() => {
+            loginBtn.disabled = false;
+            loginBtn.textContent = 'Login';
+            successMessage.style.display = 'block';
+            successMessage.style.opacity = 0;
+            setTimeout(() => {
+                successMessage.style.opacity = 1;
+                successMessage.style.transition = 'opacity 0.5s';
+            }, 50);
+            localStorage.setItem('isLoggedIn', 'true'); // Store login status
+            setTimeout(() => {
+                successMessage.style.display = 'none';
+                const urlParams = new URLSearchParams(window.location.search);
+                const redirect = urlParams.get('redirect');
+                if (redirect === 'scholarships') {
+                    window.location.href = '/pages/scholarship-feature/scholarships.html'; // Redirect to scholarships page after login
+                }
+            }, 2000); // Hide success message after 2 seconds
+        }, 2000);
+    }
+});
+
+document.getElementById('signup-form').addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const email = document.getElementById('signup-email').value;
+    const password = document.getElementById('signup-password').value;
+    const confirmPassword = document.getElementById('signup-confirm-password').value;
+    const emailError = document.getElementById('signup-email-error');
+    const passwordError = document.getElementById('signup-password-error');
+    const confirmPasswordError = document.getElementById('signup-confirm-password-error');
+    const successMessage = document.getElementById('signup-success');
+
+    let valid = true;
+
+    if (!validateEmail(email)) {
+        emailError.textContent = 'Invalid email address';
+        valid = false;
+    } else {
+        emailError.textContent = '';
+    }
+
+    if (!validatePassword(password)) {
+        passwordError.textContent = 'Password must be at least 6 characters';
+        valid = false;
+    } else {
+        passwordError.textContent = '';
+    }
+
+    if (password !== confirmPassword) {
+        confirmPasswordError.textContent = 'Passwords do not match';
+        valid = false;
+    } else {
+        confirmPasswordError.textContent = '';
+    }
+
+    if (valid) {
+        const signupBtn = document.getElementById('signup-btn');
+        signupBtn.disabled = true;
+        signupBtn.textContent = 'Signing up...';
+        console.log('Signup submitted');
+        setTimeout(() => {
+            signupBtn.disabled = false;
+            signupBtn.textContent = 'Sign Up';
+            successMessage.style.display = 'block';
+            successMessage.style.opacity = 0;
+            setTimeout(() => {
+                successMessage.style.opacity = 1;
+                successMessage.style.transition = 'opacity 0.5s';
+            }, 50);
+            setTimeout(() => {
+                successMessage.style.display = 'none';
+                switchToLogin(); // Switch to login tab after successful signup
+            }, 2000); // Hide success message after 2 seconds
+        }, 2000);
+    }
+});
+
+// Clear success message on user interaction
+document.querySelectorAll('#signup-form input').forEach(input => {
+    input.addEventListener('input', () => {
+        document.getElementById('signup-success').style.display = 'none';
+    });
+});
+
+document.querySelectorAll('#login-form input').forEach(input => {
+    input.addEventListener('input', () => {
+        document.getElementById('login-success').style.display = 'none';
+    });
+});
+
+function togglePassword(id) {
+    const input = document.getElementById(id);
+    const icon = input.nextElementSibling;
+    if (input.type === 'password') {
+        input.type = 'text';
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+    } else {
+        input.type = 'password';
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+    }
+}
+
+function openModal() {
+    const modal = document.getElementById('passwordRecoveryModal');
+    modal.style.display = 'flex';
+    modal.style.opacity = 0;
+    setTimeout(() => {
+        modal.style.opacity = 1;
+        modal.style.transition = 'opacity 0.5s';
+    }, 50);
+}
+
+function closeModal() {
+    const modal = document.getElementById('passwordRecoveryModal');
+    modal.style.opacity = 0;
+    setTimeout(() => {
+        modal.style.display = 'none';
+    }, 500);
+}
+
+document.getElementById('password-recovery-form').addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const email = document.getElementById('recovery-email').value;
+    const emailError = document.getElementById('recovery-email-error');
+    const successMessage = document.getElementById('recovery-success');
+
+    if (!validateEmail(email)) {
+        emailError.textContent = 'Invalid email address';
+    } else {
+        emailError.textContent = '';
+        // Simulate sending recovery email
+        console.log('Recovery email sent');
+        successMessage.style.display = 'block';
+        successMessage.style.opacity = 0;
+        setTimeout(() => {
+            successMessage.style.opacity = 1;
+            successMessage.style.transition = 'opacity 0.5s';
+        }, 50);
+        setTimeout(() => {
+            successMessage.style.display = 'none';
+            closeModal();
+        }, 3000); // Hide success message after 3 seconds
+    }
+});
+
+function switchToLogin() {
+    document.querySelectorAll('.tab-link').forEach(btn => btn.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+
+    const loginTab = document.querySelector('.tab-link[data-tab="login"]');
+    const loginContent = document.getElementById('login');
+
+    loginTab.classList.add('active');
+    loginContent.classList.add('active');
+    animateTabContent(loginContent);
+}
+
+document.getElementById("signup-form").addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevent the form from submitting in the traditional way
+
+    // Assuming signup is successful:
+    showSignupSuccessMessage();
+
+    // Clear the form
+    document.getElementById("signup-form").reset();
+});
+
+function showSignupSuccessMessage() {
+    var messageBox = document.getElementById("signup-success-message");
+    messageBox.style.display = "block"; // Show the message
+
+    // Hide the message after 3 seconds
+    setTimeout(function() {
+        messageBox.style.display = "none";
+    }, 3000);
+}
+        </script>
         
 <script>
     // Save data to local storage on signup