From 319a0e0e31dcdbaf9a533734f232194b0b741f00 Mon Sep 17 00:00:00 2001
From: Dhvani Maktuporia <dhvani365@gmail.com>
Date: Thu, 10 Oct 2024 20:09:12 +0530
Subject: [PATCH 1/3] Made the home page responsive

---
 .env.example              |  53 ------------------
 public/css/styles.css     | 113 ++++++++++++++++++++++++++++++++++----
 views/home.ejs            |   8 ++-
 views/partials/footer.ejs |  34 ++++++++++++
 views/partials/header.ejs |  59 +++++++++++---------
 5 files changed, 176 insertions(+), 91 deletions(-)
 delete mode 100644 .env.example

diff --git a/.env.example b/.env.example
deleted file mode 100644
index 9f48c08..0000000
--- a/.env.example
+++ /dev/null
@@ -1,53 +0,0 @@
-# Since the ".env" file is gitignored, you can use the ".env.example" file to
-# build a new ".env" file when you clone the repo. Keep this file up-to-date
-# when you add new variables to `.env`.
-
-# This file will be committed to version control, so make sure not to have any
-# secrets in it. If you are cloning this repo, create a copy of this file named
-# ".env" and populate it with your secrets.
-
-GOOGLE_ID=
-GOOGLE_SECRET=
-
-FACEBOOK_APP_ID=
-FACEBOOK_APP_SECRET=
-
-PUBLIC_BASENAME=http://localhost:3000/
-PORT=3000
-MONGO_SERVER=mongodb://127.0.0.1:27017
-
-
-## How to get your GOOGLE_ID and GOOGLE_SECRET
-
-# Create a Google Cloud Platform (GCP) Project:
-#  - Go to the Google Cloud Console.
-#  - Create a new project by clicking on the project dropdown menu at the top of the page and selecting "New Project".
-#  - Follow the prompts to name your project and select your organization.
-#  - Enable the Google Sign-In API:
-
-# In the Cloud Console, go to the "APIs & Services" > "Library".
-#  - Search for "Google Sign-In API" and select it.
-#  - Click on the "Enable" button to enable the API for your project.
-#  - Create OAuth 2.0 Credentials:
-
-# In the Cloud Console, navigate to "APIs & Services" > "OAuth consent screen".
-#  - Choose either "External" or "Internal" based on your use case and fill in the required information.
-#  - After setting up the consent screen, go to "APIs & Services" > "Credentials".
-#  - Click on "Create Credentials" and select "OAuth client ID".
-#  - Choose "Web application" as the application type.
-#  - In the "Authorized redirect URIs" section, add the URL where users will be redirected after signing in with Google. Typically, this would be something like https://yourwebsite.com/auth/google/callback.
-#  - Click "Create" to generate your OAuth 2.0 credentials. This will provide you with your GOOGLE_ID (Client ID) and GOOGLE_SECRET (Client Secret).
-
-
-#  ## How to get your FACEBOOK_APP_ID and FACEBOOK_APP_SECRET
-
-# Create a Facebook Developer Account:
-# - Go to the Facebook Developer website (https://developers.facebook.com/) and sign in with your Facebook credentials.
-# - Create a new app by clicking on the "My Apps" dropdown menu at the top right corner and selecting "Create App."
-# - Follow the prompts to set up your new app. Choose a display name, category, and other relevant details.
-
-# Configure Basic Settings:
-# - Once your app is created, navigate to the app dashboard.
-# - Under the "Settings" tab, go to the "Basic" section.
-# - Add your website domain under "App Domains" and save the changes.
-# - Note down your App ID and App Secret.
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
index 561eecc..8f10aed 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -52,31 +52,75 @@ html {
   border-bottom-color: transparent;
   animation: spin 1.25s linear infinite;
 }
+/* Navbar links */
 nav a {
   color: #a7daff !important;
 }
+
 nav a:hover {
   border: 1px solid #a7daff !important;
 }
+
 .navbar-brand {
   color: white !important;
 }
+
+/* Hamburger & Mobile Nav */
+.hamburger {
+  display: none; /* Hidden on larger screens */
+}
+
 #nav_small {
-  display: none;
+  display: none; /* Hidden initially */
+  /* background-color: var(--accent-clr); 
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  z-index: 1500; */
+}
+
+/* Styles for mobile nav items */
+/* #nav_small a {
+  color: white;
+  padding: 10px;
+  text-align: center;
+  background-color: #444;
+  border-bottom: 1px solid #555;
+}
+
+#nav_small a:hover {
+  background-color: #555;
+} */
+
+#nav_small2 {
+  display: none; 
 }
+
+/* #nav_small2 a {
+  color: #a7daff;
+  padding: 10px;
+  text-align: center;
+  background-color: #192e4e;
+  border-bottom: 1px solid #444;
+}
+
+#nav_small2 a:hover {
+  background-color: #0a1d3c;
+} */
+
 #theme-toggle {
   width: 40px;
   height: 40px;
   padding: 0;
   border-radius: 50px;
-  background-color: #a7daff;
-  background: transparent;
-  color:#a7daff;
+  background-color: transparent;
+  color: #a7daff;
   margin-right: 20px;
 }
+
 button {
   cursor: pointer;
-
   padding: 1em 2em;
   border: none;
   outline: none;
@@ -85,7 +129,6 @@ button {
   font-size: 1.0rem;
   border-radius: 10px;
   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
-
   -webkit-tap-highlight-color: transparent;
 }
 button.secondary {
@@ -284,7 +327,42 @@ header h1 {
   margin-right: 10px;
 }
 
+/* Making navbar responsive */
+@media (max-width: 768px) {
+  .navbar .nav_big {
+    display: none; /* Hide large nav items on mobile */
+  }
+
+  .hamburger {
+    display: block; /* Show hamburger on mobile */
+    color: #a7daff;
+  }
+
+  .hide#nav_small {
+    display: block;
+    background-color: #333;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+  }
+
+  .hide#nav_small2 {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hide#nav_small2 a {
+    padding: 10px;
+    color: white;
+    background-color: #444;
+  }
 
+  .hide#nav_small2 a:hover {
+    background-color: #555;
+  }
+}
 
 @media (max-width: 600px) {
   .flexbox {
@@ -293,7 +371,7 @@ header h1 {
   .hero {
     flex-direction: column-reverse;
   }
-  .illustration {
+  /* .illustration {
     scale: 1;
   }
   .hamburger {
@@ -315,14 +393,30 @@ header h1 {
   #nav_small.side_nav a {
     width: 100%;
     color: #a7daff;
+  } */
+  .know_more{
+    width: 100%;
+    height: auto;
+    font-size: 0.9rem;
+  }
+  .illustration{
+    margin: 0px;
+  }
+  .main-content {
+    height: 100px;
+    margin-bottom: 0px;
+    padding-top: 20px;
+  }
+  .hero{
+    min-height: 350px;
   }
   .hero .container {
     align-items: center;
   }
-  .main-content {
+  /* .main-content {
     margin-left: unset !important;
     margin-top: unset !important;
-  }
+  } */
   .main-content h1 {
     text-align: center;
   }
@@ -360,7 +454,6 @@ header h1 {
 }
 
 /* CSS for Privacy */
-
 main {
   margin: 1px 60px;
   padding: 1px 0;
diff --git a/views/home.ejs b/views/home.ejs
index 97a895a..749d6c5 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -1,5 +1,9 @@
 <%- include('partials/header') %>
-
+<style>
+  @media (max-width: 768px) {
+    
+  }
+</style>
 <div class="flexbox hero">
   <div class="flexbox container">
     <div class="main-content">
@@ -22,6 +26,6 @@
   <p class="tagline">
     We allow you to add your secrets that you don't want to share with anyone.
   </p>
-  <a href="/about"><button>Know More</button></a>
+  <a href="/about"><button class="know_more">Know More</button></a>
 </section>
 <%- include('partials/footer') %>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 6756fda..7efe824 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -147,4 +147,38 @@
   .mt-4 {
     margin-top: 1.5rem;
   }
+
+  @media (min-width: 768px) {
+    /* Adjust for larger screens */
+    .col-md-3 {
+      flex-basis: 24%;
+    }
+
+    .footer-title {
+      font-size: 1.8rem;
+    }
+
+    .footer-link {
+      font-size: 1.1rem;
+    }
+  }
+
+  /* Adjust text size for smaller devices */
+  @media (max-width: 576px) {
+    p.text-white{
+      font-size: 0.9rem;
+    }
+    .footer-title {
+      font-size: 1.4rem;
+    }
+
+    .footer-link {
+      font-size: 0.9rem;
+    }
+
+    .social-icon .icon {
+      width: 40px;
+      height: 40px;
+    }
+  }
 </style>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 0308ae6..5835945 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -24,13 +24,13 @@
     <link rel="stylesheet" href="css/SuggestModal.css" />
   </head>
 
-  <body oncanplay="toggle_nav_body()">
+  <body>
     <nav class="navbar navbar-dark bg-dark justify-content-between" id="navbar">
       <a href="/" class="navbar-brand" style="border: 1px solid transparent">
         <i class="fas fa-key fa-1.5x logo" style="color: white"></i>
         Secrets</a
       >
-      <form class="form-inline">
+      <form class="form-inline" onsubmit="return false;">
         <button id="theme-toggle">
           <i class="fas fa-sun" style="display: none;font-size: medium;"></i>
           <i class="fas fa-moon" style="font-size: medium;"></i>
@@ -55,33 +55,40 @@
         </div>
       </form>
     </nav>
+
     <div class="hide" id="nav_small">
       <div class="hide" id="nav_small2">
-        <a
-          href="/"
-          class="btn my-2 my-sm-0 home"
-          type="submit"
-          onclick="toggle_nav()"
-        >
-          Home
-        </a>
-        <a
-          href="/about"
-          class="btn my-2 my-sm-0 about"
-          type="submit"
-          onclick="toggle_nav()"
-        >
-          About
-        </a>
-        <a
-          href="/contact"
-          class="btn my-2 my-sm-0 about"
-          type="submit"
-          onclick="toggle_nav()"
-        >
-          Contact
-        </a>
+        <a href="/" class="btn my-2 my-sm-0 home" type="submit" onclick="toggle_nav()">Home</a>
+        <a href="/about" class="btn my-2 my-sm-0 about" type="submit" onclick="toggle_nav()">About</a>
+        <a href="/contact" class="btn my-2 my-sm-0 about" type="submit" onclick="toggle_nav()">Contact</a>
       </div>
     </div>
+
+    <!-- Added JS for toggle -->
+    <script>
+      function toggle_nav() {
+        const navSmall = document.getElementById('nav_small');
+        const navSmall2 = document.getElementById('nav_small2');
+        
+        navSmall.classList.toggle('hide');
+        navSmall2.classList.toggle('hide');
+      }
+    
+      // Hide mobile menu if clicked outside the navbar
+      function toggle_nav_body() {
+        const navbar = document.getElementById('navbar');
+        const navSmall = document.getElementById('nav_small');
+        const navSmall2 = document.getElementById('nav_small2');
+        
+        document.body.addEventListener('click', function (e) {
+          if (!navbar.contains(e.target) && !navSmall.contains(e.target)) {
+            navSmall.classList.add('hide');
+            navSmall2.classList.add('hide');
+          }
+        });
+      }    
+      document.addEventListener('DOMContentLoaded', toggle_nav_body);
+    </script>
+    
   </body>
 </html>

From b05a1a6f755aee2a44bad465f1749bd4d7441a2b Mon Sep 17 00:00:00 2001
From: Dhvani Maktuporia <dhvani365@gmail.com>
Date: Fri, 11 Oct 2024 21:01:44 +0530
Subject: [PATCH 2/3] Created Edit & Delete secret option

---
 app.js                    |  78 ++++++++++++++++-
 public/css/styles.css     |  98 ++++++++++++++++++----
 views/partials/header.ejs |  24 +++---
 views/register.ejs        |  54 ++++++++----
 views/secrets.ejs         | 172 ++++++++++++++++++++++++++++++++++++--
 5 files changed, 372 insertions(+), 54 deletions(-)

diff --git a/app.js b/app.js
index 12c54a4..40b6e2b 100644
--- a/app.js
+++ b/app.js
@@ -10,7 +10,7 @@ const findOrCreate = require("mongoose-findorcreate");
 const LocalStrategy = require("passport-local").Strategy;
 const GoogleStrategy = require("passport-google-oauth20").Strategy;
 const FacebookStrategy = require("passport-facebook").Strategy;
-
+// const axios = require("axios");
 const app = express();
 
 app.use(express.static("public"));
@@ -296,6 +296,82 @@ app.post('/api/votes', async (req, res) => {
   }
 });
 
+// DELETE /api/delete-secret
+app.post('/api/delete-secret', async (req, res) => {
+  try {
+    // Check if the user is authenticated
+    if (!req.isAuthenticated() || !req.user) {
+      return res.status(401).json({ message: 'User is not authenticated.' });
+    }
+    const { index } = req.body;
+    const user = await User.findById(req.user.id); // Assuming user is logged in
+
+    if (!user) {
+      return res.status(404).json({ message: 'User not found' });
+    }
+
+    if (typeof index === 'number' && index >= 0 && index < user.secret.length) {
+      // Remove the secret based on index
+      user.secret.splice(index, 1);
+      await user.save();
+      return res.status(200).json({ message: 'Secret deleted successfully.' });
+    } else {
+      return res.status(400).json({ message: 'Invalid index provided.' });
+    }
+  } catch (error) {
+    console.error('Error deleting secret:', error);
+    return res.status(500).json({ message: 'Internal server error.' });
+  }
+});
+
+
+// POST /api/save-update-secret
+app.post('/api/save-update-secret', async (req, res) => {
+  try {
+    console.log('User Authenticated:', req.isAuthenticated()); // Check if user is authenticated
+    console.log('User ID:', req.user ? req.user.id : 'No user'); // Check user object
+    
+    if (!req.isAuthenticated()) {
+        return res.status(401).json({ message: 'User is not authenticated.' });
+    }
+
+      const { index, content } = req.body;
+
+      // Find user using req.user.id
+      const user = await User.findById(req.user.id);
+      if (!user) {
+          return res.status(404).json({ message: 'User not found.' });
+      }
+
+      // Validate index
+      if (typeof index !== 'number' || index < 0 || index >= user.secret.length) {
+          return res.status(400).json({ message: 'Invalid index provided.' });
+      }
+
+      // Validate content
+      if (typeof content !== 'string') {
+          return res.status(400).json({ message: 'Content must be a string.' });
+      }
+
+      // Access the secret safely
+      const secret = user.secret[index];
+      if (!secret || typeof secret.title === 'undefined') {
+          return res.status(400).json({ message: 'Secret not found or invalid structure.' });
+      }
+
+      // Update the title
+      secret.title = content;
+      await user.save();
+
+      res.status(200).json({ message: 'Secret updated successfully.' });
+  } catch (error) {
+      console.error('Error updating secret:', error.message || error);
+      res.status(500).json({ message: 'Internal server error.', error: error.message });
+  }
+});
+
+
+
 app.get('*', (req, res) => {
   res.status(404).render("404-page");
 });
diff --git a/public/css/styles.css b/public/css/styles.css
index 8f10aed..358cbbd 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -72,14 +72,13 @@ nav a:hover {
 
 #nav_small {
   display: none; /* Hidden initially */
-  /* background-color: var(--accent-clr); 
-  position: absolute;
-  top: 60px;
-  left: 0;
-  width: 100%;
-  z-index: 1500; */
 }
-
+#nav_small2 {
+  display: none; 
+}
+.hide {
+  display: none;
+}
 /* Styles for mobile nav items */
 /* #nav_small a {
   color: white;
@@ -93,10 +92,6 @@ nav a:hover {
   background-color: #555;
 } */
 
-#nav_small2 {
-  display: none; 
-}
-
 /* #nav_small2 a {
   color: #a7daff;
   padding: 10px;
@@ -326,19 +321,44 @@ header h1 {
 .vote-count{
   margin-right: 10px;
 }
+.button_all_white, .button_all_black{
+  font-size: 1em; 
+  margin: 10px;
+}
 
-/* Making navbar responsive */
+/* styling edit and delete icons */
+.icon{
+  color: white;
+  height: 30px;
+  width: 30px;
+  transition: transform 0.2s;
+  color: #ff4b4b;
+}
+.icon:hover {
+  transform: scale(1.1);
+}
 @media (max-width: 768px) {
+  /* Making navbar responsive */
+  .hide {
+    display: none;
+  }
+  .hide#nav_small {
+    display: none;
+  }
+
+  .hide#nav_small2 {
+    display: none;
+  }
   .navbar .nav_big {
-    display: none; /* Hide large nav items on mobile */
+    display: none; 
   }
 
   .hamburger {
-    display: block; /* Show hamburger on mobile */
+    display: block; 
     color: #a7daff;
   }
 
-  .hide#nav_small {
+  #nav_small {
     display: block;
     background-color: #333;
     position: absolute;
@@ -348,20 +368,62 @@ header h1 {
     z-index: 1000;
   }
 
-  .hide#nav_small2 {
+  #nav_small2 {
     display: flex;
     flex-direction: column;
   }
 
-  .hide#nav_small2 a {
+  #nav_small2 a {
     padding: 10px;
     color: white;
     background-color: #444;
   }
 
-  .hide#nav_small2 a:hover {
+  #nav_small2 a:hover {
     background-color: #555;
   }
+  /* Making secret page responsive */
+  .button_all_white{
+    font-size: 1.5em; 
+    margin: 10px;
+    width: 100px;
+    height: 50px;
+  }
+  .button_all_black{
+    font-size: 1.5em; 
+    margin: 10px;
+    width: 150px;
+    height: 50px;
+  }
+  /* Making login & register page responsive */
+  .form-control{
+    font-size: 1rem;
+    height: 45px;
+    border-radius: 20px;
+    padding: 10px;
+  }
+  .button_all_black#user-login{
+    font-size: 1.2rem;
+    height: 45px;
+  }
+  .btn-social{
+    height: 40px;
+    padding: 10px 50px;
+  }
+  .pass-text{
+    font-size: 0.8rem;
+    margin-left: 10px;
+    color: red;
+  }
+  .form-check{
+    margin-left: 3px;
+  }
+  .form-check .pass-text{
+    padding-top: 1px;
+    font-size: 1.0rem;
+    color: black;
+    font-weight: 500;
+  }
 }
 
 @media (max-width: 600px) {
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 5835945..a3c3f86 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -61,6 +61,8 @@
         <a href="/" class="btn my-2 my-sm-0 home" type="submit" onclick="toggle_nav()">Home</a>
         <a href="/about" class="btn my-2 my-sm-0 about" type="submit" onclick="toggle_nav()">About</a>
         <a href="/contact" class="btn my-2 my-sm-0 about" type="submit" onclick="toggle_nav()">Contact</a>
+        <a href="/register" class="btn my-1 my-sm-0 register" type="submit">Register</a>
+        <a href="/login" class="btn my-2 my-sm-0 login" type="submit">Login</a>
       </div>
     </div>
 
@@ -74,20 +76,18 @@
         navSmall2.classList.toggle('hide');
       }
     
-      // Hide mobile menu if clicked outside the navbar
-      function toggle_nav_body() {
-        const navbar = document.getElementById('navbar');
+      // Function to hide nav_small and nav_small2 on page load
+      function hide_nav_on_load() {
         const navSmall = document.getElementById('nav_small');
         const navSmall2 = document.getElementById('nav_small2');
-        
-        document.body.addEventListener('click', function (e) {
-          if (!navbar.contains(e.target) && !navSmall.contains(e.target)) {
-            navSmall.classList.add('hide');
-            navSmall2.classList.add('hide');
-          }
-        });
-      }    
-      document.addEventListener('DOMContentLoaded', toggle_nav_body);
+
+        // Add 'hide' class to both elements on page load
+        navSmall.classList.add('hide');
+        navSmall2.classList.add('hide');
+      }
+
+      // Call the function to hide elements when the DOM is fully loaded
+      document.addEventListener('DOMContentLoaded', hide_nav_on_load);
     </script>
     
   </body>
diff --git a/views/register.ejs b/views/register.ejs
index 3602302..8ccf638 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -28,14 +28,22 @@
                                 <div class="form-group">
                                     <label for="password">Password</label>
                                     <input
-                                        placeholder="minimum 8 length with at least 1 special ,upper ,lower and a number"
+                                      placeholder="Enter a strong password"
                                         type="password"
                                         class="form-control"
                                         name="password"
                                         minlength="8"
                                         id="user-password"
                                     />
-                                         </div>
+                                  </div>
+
+                                <!-- Added Show Password Checkbox -->
+                                <div class="form-group form-check">
+                                  <input type="checkbox" class="form-check-input" id="show-password-checkbox">
+                                  <p class="pass-text">Show Password</p>
+                                </div>
+                                <p class="pass-text">Password should be of minimum 8 characters with uppercase, lowercase letters and special symbols</p>
+                                                                  
                                 <button
                                     type="submit"
                                     class="button_all_black secondary"
@@ -84,6 +92,18 @@
       href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
     />
     <script>
+      // Show/Hide Password Toggle Functionality
+      const showPasswordCheckbox = document.getElementById("show-password-checkbox");
+      const passwordInput = document.getElementById("user-password");
+
+      showPasswordCheckbox.addEventListener("change", function () {
+          if (this.checked) {
+              passwordInput.type = "text"; // Show password
+          } else {
+              passwordInput.type = "password"; // Hide password
+          }
+      });
+
       // Initialize Toastify globally
       Toastify({
         position: "toast-top-left",
@@ -147,20 +167,21 @@
         }
         return true;
       }
+
+      // Validate user
       const userRegister = document.getElementById("user-register");
       userRegister.addEventListener("click", async (e) => {
         e.preventDefault();
 
-        // Validate Form
         const isFormValid = validateForm();
 
         if (isFormValid) {
           try {
-            // Send POST request only if the password is valid
             const formData = JSON.stringify({
               username: document.querySelector('input[name="username"]').value,
               password: document.querySelector('input[name="password"]').value,
             });
+            
             const response = await fetch("/register", {
               method: "POST",
               headers: {
@@ -169,41 +190,40 @@
               body: formData,
             });
 
+            const data = await response.json();
+
             if (response.ok) {
-              const data = await response.json();
               if (data.success) {
-                await Toastify({
+                Toastify({
                   text: data.message,
                   type: "success",
                 }).showToast();
-                window.location.href = "/secrets"; 
-                window.alert("Registration successful! Login to continue");
+                window.location.href = "/secrets";
               } else {
                 Toastify({
                   text: data.message,
                   type: "error",
                   style: {
-              background: "linear-gradient(to right, #4E575F,#343A40)",
-            },
+                    background: "linear-gradient(to right, #4E575F, #343A40)",
+                  },
                 }).showToast();
               }
             } else {
-              console.error("Server error:", response.statusText);
               Toastify({
-                text: "Error! Please try again later",
+                text: data.message,
                 type: "error",
                 style: {
-              background: "linear-gradient(to right, #4E575F,#343A40)",
-            },
+                  background: "linear-gradient(to right, #4E575F, #343A40)",
+                },
               }).showToast();
             }
           } catch (error) {
             Toastify({
-              text: "Error! Please try again later",
+              text: "An error occurred! Please try again.",
               type: "error",
               style: {
-              background: "linear-gradient(to right, #4E575F,#343A40)",
-            },
+                background: "linear-gradient(to right, #4E575F, #343A40)",
+              },
             }).showToast();
           }
         }
diff --git a/views/secrets.ejs b/views/secrets.ejs
index ff2f1cc..bdbff64 100644
--- a/views/secrets.ejs
+++ b/views/secrets.ejs
@@ -10,9 +10,8 @@
 
           <div class="card">
             <div class="card-body" style="display: flex;justify-content:flex-start;">
-
               <p class="secret-text">
-              <div class="inner-secret-text">
+              <div class="inner-secret-text" id="secret-text-<%= index %>">
                 <%= secret.title %>
               </div>
               <div class="vote-container" id="vote-container-<%= index %>">
@@ -35,6 +34,14 @@
                 </span>
               </div>
               </p>
+              <!-- Edit and Remove Icons -->
+              <div style="display: flex; margin-left: 15px;">
+                <img class="icon edit-icon" alt="Edit" id="edit-secret-<%= index %>" onclick="handleEditSecret(<%= index %>,'<%= user.username %>',<%= secret.upvote %>,<%= secret.downvote %>)"
+                src="https://img.icons8.com/ios-glyphs/30/a7daff/edit.png" style="cursor:pointer; margin-right: 10px;" />
+                
+                <img class="icon remove-icon" alt="Remove" id="remove-secret-<%= index %>" onclick="handleRemoveSecret(<%= index %>)"
+                src="https://img.icons8.com/material-outlined/24/ff4b4b/delete.png" style="cursor:pointer;" />
+              </div>
             </div>
           </div>
           <% }) %>
@@ -42,9 +49,13 @@
               <style>
                 .card {
                   margin: 10px 0px;
+                  height: 80px;
                   background-color: #315B9A;
                   transition: transform 0.3s ease-in-out;
                   font-size: 20px;
+                  color: white;
+                  font-weight: 600;
+                  padding: 0px;
                 }
 
                 .card:hover {
@@ -168,17 +179,166 @@
                   }
                 }
 
+                // Handling edit button functionality 
+                function handleEditSecret(index, username, upvote, downvote) {
+                  const secretTextElement = document.getElementById(`secret-text-${index}`);
+                  if (!secretTextElement) {
+                    console.error(`Element with ID secret-text-${index} not found`);
+                    return; // Exit if the element doesn't exist
+                  }
+                  const secretText = secretTextElement.innerText;
+
+                  // Replace the secret text with an input field for editing
+                  const inputElement = document.createElement("input");
+                  inputElement.type = "text";
+                  inputElement.value = secretText;
+                  inputElement.id = `edit-input-${index}`;
+                  inputElement.style.width = "100%";
+                  inputElement.style.marginBottom = "20px";
+
+                  secretTextElement.replaceWith(inputElement);
+
+                  // Add Save Button
+                  const saveButton = document.createElement("button");
+                  saveButton.innerText = "Save";
+                  saveButton.style.marginLeft = "10px";
+                  saveButton.style.marginTop = "-10px";
+                  saveButton.style.marginBottom = "10px";
+                  saveButton.onclick = function() {
+                    saveEditedSecret(index, username, upvote, downvote);
+                  };
+
+                  // Add Cancel Button
+                  const cancelButton = document.createElement("button");
+                  cancelButton.innerText = "Cancel";
+                  cancelButton.style.marginLeft = "5px";
+                  cancelButton.style.marginTop = "-10px";
+                  cancelButton.style.marginBottom = "10px";
+                  cancelButton.onclick = function() {
+                    cancelEdit(index, secretText, secretTextElement);
+                  };
+
+                  inputElement.parentElement.appendChild(saveButton);
+                  inputElement.parentElement.appendChild(cancelButton);
+                }
+
+                function cancelEdit(index, originalText, originalSecretElement) {
+                  // Create the original secret text element
+                  originalSecretElement.innerText = originalText;
+
+                  // Find the input element
+                  const inputElement = document.getElementById(`edit-input-${index}`);
+
+                  // Replace the input element with the original text
+                  inputElement.replaceWith(originalSecretElement);
+
+                  // Remove the Save and Cancel buttons
+                  const parentElement = originalSecretElement.parentElement;
+                  
+                  // Assuming the buttons are added to the same parent as the input
+                  const buttons = parentElement.querySelectorAll("button");
+
+                  buttons.forEach(button => {
+                    if (button.innerText === "Save" || button.innerText === "Cancel") {
+                      button.remove(); // Remove both Save and Cancel buttons
+                    }
+                  });
+                }
+                
+                function saveEditedSecret(index, username, upvote, downvote) {
+                  const editedText = document.getElementById(`edit-input-${index}`).value;
+                  // Make a request to the server to save the edited secret
+                  fetch('/api/save-update-secret', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: {
+                      'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                      index,
+                      username,
+                      newSecret: editedText,
+                      upvote,
+                      downvote,
+                    }),
+                  })
+                  .then(response => response.json())
+                  .then(data => {
+                      const newSecretElement = document.createElement("div");
+                      newSecretElement.className = "card-body";
+                      newSecretElement.style = "display: flex; justify-content: flex-start;";
+                      newSecretElement.innerHTML = `
+                          <p class="secret-text">
+                            <div class="inner-secret-text" id="secret-text-${index}">
+                              ${editedText}
+                            </div>
+                            <div class="vote-container" id="vote-container-${index}">
+                              <img class="vote-image" alt="Upvote" data-index="${index}" data-value="${username}"
+                                id="upvote-image-${index}" data-upvotecount="${upvote}"
+                                data-downvotecount="${downvote}" onclick="handleUpvote(this, ${index})" width="24"
+                                height="24"
+                                src="${upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png'}" />
+                              <span class="vote-count" id="upvote-count-${index}">
+                                ${upvote}
+                              </span>
+                              <img class="vote-image" width="24" height="24" data-index="${index}"
+                                id="downvote-image-${index}" data-value="${username}"
+                                data-upvotecount="${upvote}" data-downvotecount="${downvote}"
+                                onclick="handleDownvote(this, ${index})"
+                                src="${downvoted ? 'https://img.icons8.com/material/24/thumbs-down--v1.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-down-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png'}"
+                                alt="Downvote" />
+                              <span class="vote-count" id="downvote-count-${index}">
+                                ${downvote}
+                              </span>
+                            </div>
+                          </p>
+                          <!-- Edit and Remove Icons -->
+                          <div style="display: flex; margin-left: 15px;">
+                            <img class="icon edit-icon" alt="Edit" id="edit-secret-${index}" onclick="handleEditSecret(${index},'${username}',${upvote},${downvote})"
+                              src="https://img.icons8.com/ios-glyphs/30/a7daff/edit.png" style="cursor:pointer; margin-right: 10px;" />
+                            <img class="icon remove-icon" alt="Remove" id="remove-secret-${index}" onclick="handleRemoveSecret(${index})"
+                              src="https://img.icons8.com/material-outlined/24/ff4b4b/delete.png" style="cursor:pointer;" />
+                          </div>
+                      `;
+
+                      const editContainer = document.getElementById(`edit-input-${index}`).parentElement;
+                      editContainer.replaceWith(newSecretElement);
+                  })
+                  .catch(error => console.error('Error:', error));
+                }
+
+                // Handling delete button functionality 
+                function handleRemoveSecret(index) {
+                  if (confirm('Are you sure you want to delete this secret?')) {
+                    fetch('/api/delete-secret', {
+                      method: 'POST',
+                      credentials: 'include',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({ index }),
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                      // Remove the card from the DOM
+                      const cardElement = document.getElementById(`secret-text-${index}`).parentElement.parentElement;
+                      cardElement.remove();
+                    })
+                    .catch(error => console.error('Error deleting secret:', error));
+                  }
+                }
+
               </script>
 
 
               <hr />
               <div class="d-flex justify-content-center">
-                <a class="button_all_white" href="/logout" role="button"><button class="secondary"
-                    style="font-size: 1em; margin: 10px">
+                <a class="button_all_white" href="/logout" role="button">
+                  <button class="secondary">
                     Log Out
                   </button></a>
-                <a class="button_all_black" href="/submit-secret-form" role="button"><button
-                    style="font-size: 1em; margin: 10px">
+                <a class="button_all_black" href="/submit-secret-form" role="button">
+                  <button class="secondary">
                     Submit a Secret
                   </button></a>
               </div>

From 993cfb4961437cf9963eba4cd138fdc929318a97 Mon Sep 17 00:00:00 2001
From: Dhvani Maktuporia <dhvani365@gmail.com>
Date: Sat, 12 Oct 2024 11:49:46 +0530
Subject: [PATCH 3/3] Made secrets page responsive

---
 public/css/styles.css | 91 ++++++++++++++++++++++++++++++++++++++++++-
 views/secrets.ejs     | 51 +++++++++++++-----------
 2 files changed, 118 insertions(+), 24 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 358cbbd..9c0601e 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -325,7 +325,19 @@ header h1 {
   font-size: 1em; 
   margin: 10px;
 }
-
+/* .inner-secret-text,  */
+.edit{
+  margin-top: 2%;
+  width: 80%;
+  margin-left: 8%;
+}
+.edit .vote-container{
+  display: none;
+}
+.editInput {
+  width: 80%; 
+  margin-bottom: 20px;
+}
 /* styling edit and delete icons */
 .icon{
   color: white;
@@ -337,6 +349,10 @@ header h1 {
 .icon:hover {
   transform: scale(1.1);
 }
+.vote-image{
+  width: 24px;
+  height: 24px;
+}
 @media (max-width: 768px) {
   /* Making navbar responsive */
   .hide {
@@ -424,6 +440,78 @@ header h1 {
     color: black;
     font-weight: 500;
   }
+  /* making secret page responsive */
+  .inner-secret-text{
+    width: 50%;
+    margin-left: 0px;
+    font-size: 16px;
+    vertical-align: middle;
+    margin-top: 10px;
+  }
+  .vote-container{
+    margin-top: 10px;
+  }
+  .vote-image{
+    height: 30px;
+    width: 30px;
+  }
+  .vote-count{
+    font-size: 20px;
+  }
+  .edit-rem-icon{
+    margin-top: 10px;
+  }
+
+  /* Stack the buttons vertically */
+  .saveBtn,
+  .cancelBtn {
+    display: block;
+    width: 100%; /* Buttons take full width */
+    margin-bottom: 10px; /* Space between buttons */
+  }
+  .editInput {
+    width: 92%; 
+    margin-bottom: 0px;
+  }
+  /* Responsive vote container */
+  .vote-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%; /* Flexbox layout ensures responsive resizing */
+    margin-top: 10px;
+  }
+  .card-body{
+    display: flex;
+    flex-direction: row;
+    z-index: 0;
+  }
+  .edit .vote-container{
+    display: none;
+  }
+  .edit .edit-icon{
+    display: none;
+  }
+  .edit .remove-icon{
+    display: none;
+  }
+  .edit.card{
+    z-index: 10;
+  }
+  .edit{
+    height: 500px;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+    background-color: #0b0967;
+    padding-left: 20px;
+  }
+  .edit .editInput{
+    font-size: 16px;
+  }
+  .edit button{
+    width: 90%;
+  }
 }
 
 @media (max-width: 600px) {
@@ -526,3 +614,4 @@ section.c1 {
   padding: 20px;
   margin-bottom: 20px;
 }
+
diff --git a/views/secrets.ejs b/views/secrets.ejs
index bdbff64..982304a 100644
--- a/views/secrets.ejs
+++ b/views/secrets.ejs
@@ -17,8 +17,7 @@
               <div class="vote-container" id="vote-container-<%= index %>">
                 <img class="vote-image" alt="Upvote" data-index='<%= index %>' data-value='<%= user.username %>'
                   id="upvote-image-<%= index %>" data-upvotecount='<%= secret.upvote %>'
-                  data-downvotecount='<%= secret.downvote %>' onclick="handleUpvote(this ,<%= index %>)" width="24"
-                  height="24"
+                  data-downvotecount='<%= secret.downvote %>' onclick="handleUpvote(this ,<%= index %>)"
                   src="<%= upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png' %>" />
                 <span class="vote-count" id="upvote-count-<%= index %>">
                   <%= secret.upvote %>
@@ -35,7 +34,7 @@
               </div>
               </p>
               <!-- Edit and Remove Icons -->
-              <div style="display: flex; margin-left: 15px;">
+              <div style="display: flex; margin-left: 15px;" class="edit-rem-icon">
                 <img class="icon edit-icon" alt="Edit" id="edit-secret-<%= index %>" onclick="handleEditSecret(<%= index %>,'<%= user.username %>',<%= secret.upvote %>,<%= secret.downvote %>)"
                 src="https://img.icons8.com/ios-glyphs/30/a7daff/edit.png" style="cursor:pointer; margin-right: 10px;" />
                 
@@ -48,24 +47,25 @@
             <% }) %>
               <style>
                 .card {
-                  margin: 10px 0px;
-                  height: 80px;
-                  background-color: #315B9A;
-                  transition: transform 0.3s ease-in-out;
-                  font-size: 20px;
-                  color: white;
-                  font-weight: 600;
-                  padding: 0px;
-                }
-
-                .card:hover {
-                  transform: scale(1.05);
-                  box-shadow: 0 0 15px #64a9db;
-                }
-
-                .card-text {
-                  color: #A7DAFF;
+                    margin: 10px 0px;
+                    height: 80px;
+                    background-color: #315B9A;
+                    transition: transform 0.3s ease-in-out;
+                    font-size: 20px;
+                    color: white;
+                    font-weight: 600;
+                    padding: 0px;
+                  }
+                  .card-text {
+                    color: #A7DAFF;
+                  }
+                @media (min-width:770px) {
+                  .card:hover {
+                    transform: scale(1.05);
+                    box-shadow: 0 0 15px #64a9db;
+                  }
                 }
+                
               </style>
               <script>
 
@@ -187,20 +187,23 @@
                     return; // Exit if the element doesn't exist
                   }
                   const secretText = secretTextElement.innerText;
-
+                  const body = secretTextElement.parentElement;
+                  body.className = 'edit';
                   // Replace the secret text with an input field for editing
                   const inputElement = document.createElement("input");
                   inputElement.type = "text";
+                  inputElement.className = "editInput";
                   inputElement.value = secretText;
                   inputElement.id = `edit-input-${index}`;
-                  inputElement.style.width = "100%";
-                  inputElement.style.marginBottom = "20px";
+                  // inputElement.style.width = "100%";
+                  // inputElement.style.marginBottom = "20px";
 
                   secretTextElement.replaceWith(inputElement);
 
                   // Add Save Button
                   const saveButton = document.createElement("button");
                   saveButton.innerText = "Save";
+                  saveButton.className = 'saveBtn';
                   saveButton.style.marginLeft = "10px";
                   saveButton.style.marginTop = "-10px";
                   saveButton.style.marginBottom = "10px";
@@ -211,6 +214,7 @@
                   // Add Cancel Button
                   const cancelButton = document.createElement("button");
                   cancelButton.innerText = "Cancel";
+                  saveButton.className = 'cancelBtn';
                   cancelButton.style.marginLeft = "5px";
                   cancelButton.style.marginTop = "-10px";
                   cancelButton.style.marginBottom = "10px";
@@ -240,6 +244,7 @@
 
                   buttons.forEach(button => {
                     if (button.innerText === "Save" || button.innerText === "Cancel") {
+                      parentElement.className = 'card-body';
                       button.remove(); // Remove both Save and Cancel buttons
                     }
                   });