CommunityRuleFrontend/_includes/header.html

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
  .user-icon {
    display: inline-block;
    position: relative;
  }

  /* Style for the modal */
  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #FFC907;
    border: 2px solid #ccc;
    z-index: 2000;
  }

  .dropdown {
    display: inline-block;
    position: relative;
    z-index: 1000;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    width: auto;
    overflow: auto;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
    /* background-color: rgba(255, 255, 255, 0); */
    background-color: white;
  }

  .dropdown.active .dropdown-content {
    display: block;
  }

  .dropdown-content a {
    display: block;
    color: #000000;
    padding: 5px;
    text-decoration: none;
  }

  .dropdown-content a:hover {
    color: #FFFFFF;
    background-color: #FFC907;
  }

  .dropdown:hover {
    /* Resetting styles for hover state */
    border: none;
    box-shadow: none;
    display: block;
    /* Or any other appropriate display value */
    grid-template-columns: initial;
    /* Or any other appropriate value */
  }
</style>

<header class="site-header">

  <div class="wrapper">

    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
    <img src="{% link assets/elements/icon_do.svg %}" alt="do-ocracy icon"
      style="height:40px; padding: 5px 0 0 20px;" />

    <nav class="site-nav">
      <a href="#" class="menu-icon">
        <svg viewBox="0 0 18 15">
          <path fill="#424242"
            d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z" />
          <path fill="#424242"
            d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z" />
          <path fill="#424242"
            d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z" />
        </svg>
      </a>

      <div class="trigger" style="display: inline-block;">
        {% for my_page in site.pages %}
        {% if my_page.title %}
        <a class="page-link{% if page.url == my_page.url %} page-link-active{% endif %}"
          href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
        {% endif %}
        {% endfor %}
        <div class="user-icon">
          <div id="loginLogoutButton">
            <div id="login" style="height: 20px; width: 30px;">
              <button onclick="showLoginModal()"
                style="background-color: #FFC907; height: 30px; width: 35px; padding:0px; border-color: #FFC907;">
                <img src="{% link assets/elements/loginIcon.png %}" alt="Login" style="width: 100%; height: 100%;">
              </button>
            </div>


            <div id="logout" class="dropdown disable-hover"
              style="background-color: #FFC907; height: 30px; width: 35px; ">
              <button onclick="toggleDropdown()"
                style="background-color: #FFC907; height: 30px; width: 32px; padding:0px;">
                <img src="{% link assets/elements/loggedin.png %}" alt="Profile" style="width: 100%; height: 100%;">
              </button>
              <div class="dropdown-content">
                <div id="emailText"
                  style="padding: 10px; padding-top: 20px; margin-top: 1px; margin-bottom: 1px; height: 10 px"> </div>
                <a href="#" style="padding: 10px; margin-top: 1px; margin-bottom: 1px; height: 10 px"
                  @click="logout">Logout</a>
              </div>

            </div>
          </div>
        </div>

        <div id="navBar" class="modal">
          <div id="emailCode">
            <label for="emailInput">Enter your email:</label>
            <input type="email" id="emailInput" v-model="loginEmail" required>
            <button @click="sendOTP" style="font-family: Arial, Helvetica, sans-serif;">Send Code</button>
          </div>
          <div id="emailCodeVerify" style="display: none;">
            <label for="otpInput">Enter Code to Login:</label>
            <input type="text" id="otpInput" v-model="otpCode" required>
            <button @click="verifyOTP" style="font-family: Arial, Helvetica, sans-serif;">Verify Code</button>
            <button @click="sendOTPAagin" style="font-family: Arial, Helvetica, sans-serif;"> Send Code again</button>
          </div>
          <button @click="closeModal" style="font-family: Arial;">Close</button>
        </div>
      </div>
  </div>
  </nav>
  </div>
</header>

<script>
  function toggleDropdown() {
    var dropdown = document.getElementById('logout');
    dropdown.classList.toggle('active');
    var myDiv = document.getElementById('emailText'); // Get the div element by ID
    myDiv.textContent = localStorage.getItem('userEmail');
  }
  function showLoginModal() {
    // Show the modal and overlay
    document.getElementById('navBar').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
  }
  function logout() {
    // Remove email from local storage
    localStorage.removeItem('userEmail');

    // Hide the dropdown and overlay
    document.getElementById('login').style.display = 'block';
    document.getElementById('logout').style.display = 'none';
    document.getElementById('emailCode').style.display = 'block';
    document.getElementById('emailCodeVerify').style.display = 'none';
    window.location.reload();
  }

  function showLoginModal() {
    document.getElementById('navBar').style.display = 'block';
    // document.getElementById('overlay').style.display = 'block';
  }

  function hideLoginModal() {
    document.getElementById('navBar').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
  }

  function isValidEmail(email) {
    // Regular expression for a basic email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }
  new Vue({
    el: '#loginLogoutButton',
    data: {
      email: localStorage.getItem('userEmail') || null,
      showDropdown: false,
    },
    mounted() {
      // Retrieve email from local storage on component mount
      this.email = localStorage.getItem('userEmail');
      if (this.email) {
        document.getElementById('login').style.display = 'none';
        document.getElementById('logout').style.display = 'block';
      } else {
        document.getElementById('login').style.display = 'block';
        document.getElementById('logout').style.display = 'none';
      }
    },
  });
  new Vue({
    el: '#navBar',
    data: {
      loginEmail: '',
      email: localStorage.getItem('userEmail'),
      otpCode: "",
      backendUrlOtp: "http://localhost:3000/api/send_otp",
      backendUrlValidateOtp: "http://localhost:3000/api/validate_otp"
    },
    methods: {

      sendOTPAagin() {
        document.getElementById('emailCode').style.display = 'block';
        document.getElementById('emailCodeVerify').style.display = 'none';
      },
      sendOTP() {
        const requestData = {
          email: this.loginEmail
        }
        if (isValidEmail(this.loginEmail)) {
          fetch(this.backendUrlOtp, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Access-Control-Allow-Methods': 'POST',
              'Access-Control-Allow-Headers': 'Content-Type'
              // Add any other headers you may need, such as authorization headers
            },
            body: JSON.stringify(requestData),
          }).then(response => {
            if (!response.ok) {
              alert('Error while sending OTP');
            } else {
              alert(`Code sent to: ${this.loginEmail}`);
              document.getElementById('emailCode').style.display = 'none';
              document.getElementById('emailCodeVerify').style.display = 'block';
            }

          })
        } else {
          alert(`Please enter valid email address`);
        }

      },

      verifyOTP() {

        const requestData = {
          email: this.loginEmail,
          otp: this.otpCode
        }
        fetch(this.backendUrlValidateOtp, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': 'Content-Type'
            // Add any other headers you may need, such as authorization headers
          },
          body: JSON.stringify(requestData),
        }).then(response => {
          if (response.status == 500) {
            alert('Error while validating code');
          } else if (response.status == 200) {
            alert('Logged in successfully');
            localStorage.setItem('userEmail', this.loginEmail)
            document.getElementById('login').style.display = 'none';
            document.getElementById('logout').style.display = 'block';
            document.getElementById('logout').classList.remove('active');
            this.closeModal();
          } else {
            alert('Invalid code, please enter valid code');
          }
        })

      },

      closeModal() {
        document.getElementById('navBar').style.display = 'none';

      },
    },
  });

</script>