CommunityRuleFrontend/_includes/header.html

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!-- <link rel="stylesheet" href="{{ " /css/main.css" | prepend: site.baseurl }}"> -->
<style>
  .user-icon {
    display: inline-block;
    position: relative;
  }

  .dropdown_header {
    display: inline-block;
    position: relative;
    z-index: 1000;
    background-color: #FFC907;
  }

  .dropdown-content_header {
    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;
    font-family: Reforma2018, serif;
    font-size: 1em;
  }

  .dropdown_header.active .dropdown-content_header {
    display: block;
  }

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

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

  .dropdown_header: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 for the modal */
  /* #navBar.modal {
    display: flex;
    flex-direction: column;
    align-items: center;
  } */

  #emailCode,
  #emailCodeVerify {
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }

  #emailCode {
    display: block;
  }

  #emailCodeVerify {
    display: none;
  }

  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    border: 2px solid #ccc;
    z-index: 2000;
    width: 60%;
    height: 20%;
    text-align: center;
    font-family: Reforma2018, serif;
    font-size: 1em;
  }

  /* Additional styling for buttons */
  .btn_login_logout {
    position: relative;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #29335C;
    font-family: Reforma2018, serif;
    margin: 10px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .btn_login_logout.primary_login_logout {
    background-color: #FFC907;
    color: black;
    border: 1px solid #d3a500;
  }

  .btn_login_logout.is-large_login_logout {
    font-size: 1em;
    text-align: center;
  }

  .btn_login_logout:hover {
    cursor: pointer;
    background-color: #d3a500
  }
</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" id="loginLogoutButton">
          <div id="login">
            <button class="btn_login_logout primary_login_logout is-large_login_logout" onclick="showLoginModal()"
              style="height: 42px; width: 100px; padding: 2px; text-align: center">
              <img src="{% link assets/tabler_icons/login.svg %}" alt="Login"> Login
            </button>
          </div>

          <div id="logout" class="dropdown_header">
            <button class="btn_login_logout primary_login_logout is-large_login_logout" onclick="toggleDropdown()"
              style="height: 40px; width: 40px; padding: 2px; text-align: center">
              <img src="{% link assets/tabler_icons/user.svg %}" alt="Login">
            </button>
            <div class="dropdown-content_header">
              <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>

    <div id="navBar" class="modal" style="width: 40%; height: 15%; padding-top: 1%; flex-direction: column; justify-content: center; align-items: center;">
    <div id="emailCode" style="align-items: center; text-align: center;">
      <label for="emailInput">Enter your email:</label>
      <input type="email" id="emailInput" v-model="loginEmail" required>
      <div style="display: flex; flex-direction: row; justify-content: center; margin-top: 20px;">
        <button class="btn primary is-large" @click="sendOTP">Send Code</button>
        <span style="margin: 0 10px;"></span> <!-- Spacer -->
        <button class="btn primary is-large" @click="closeModal">Close</button>
      </div>
    </div>
    <div id="emailCodeVerify" style="text-align: center;">
      <label for="otpInput">Enter Code to Login:</label>
      <input type="text" id="otpInput" v-model="otpCode" required>
      <div style="display: flex; flex-direction: row; justify-content: center; margin-top: 20px;">
        <button class="btn primary is-large" @click="verifyOTP">Verify Code</button>
        <span style="margin: 0 10px;"></span> <!-- Spacer -->
        <button class="btn primary is-large" @click="sendOTPAagin">Send Code Again</button>
        <span style="margin: 0 10px;"></span> <!-- Spacer -->
        <button class="btn primary is-large" @click="closeModal">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: "/api/send_otp",
      backendUrlValidateOtp: "/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>