123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
- <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: 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 {
-
- border: none;
- box-shadow: none;
- display: block;
-
- grid-template-columns: initial;
-
- }
-
-
- #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;
- }
-
- .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">
- <div id="emailCode" style="align-items: center;">
- <label for="emailInput">Enter your email:</label>
- <input type="email" id="emailInput" v-model="loginEmail" required>
- <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="sendOTP"
- style="text-align:center;">Send Code</button>
- </div>
- <div id="emailCodeVerify">
- <label for="otpInput">Enter Code to Login:</label>
- <input type="text" id="otpInput" v-model="otpCode" required>
- <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="verifyOTP">Verify
- Code</button>
- <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="sendOTPAagin"> Send Code
- Again</button>
- </div>
- <button class="btn_login_logout primary_login_logout is-large_login_logout" @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');
- myDiv.textContent = localStorage.getItem('userEmail');
- }
- function showLoginModal() {
-
- document.getElementById('navBar').style.display = 'block';
- document.getElementById('overlay').style.display = 'block';
- }
- function logout() {
-
- localStorage.removeItem('userEmail');
-
- 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 hideLoginModal() {
- document.getElementById('navBar').style.display = 'none';
- document.getElementById('overlay').style.display = 'none';
- }
- function isValidEmail(email) {
-
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- return emailRegex.test(email);
- }
- new Vue({
- el: '#loginLogoutButton',
- data: {
- email: localStorage.getItem('userEmail') || null,
- showDropdown: false,
- },
- mounted() {
-
- 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'
-
- },
- 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'
-
- },
- 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>
|