{"id":2516,"date":"2024-04-02T14:18:05","date_gmt":"2024-04-02T11:18:05","guid":{"rendered":"https:\/\/soaringwords.dops.digital\/?page_id=2516"},"modified":"2024-04-03T10:35:08","modified_gmt":"2024-04-03T07:35:08","slug":"otp-verification","status":"publish","type":"page","link":"https:\/\/soaringwords.org\/otp-verification\/","title":{"rendered":"OTP Verification"},"content":{"rendered":"\n    <!-- HTML for login form -->\n\t<style>\n\t\t.login-form-custom input, .main-form-verification input{\n\t\t\tbackground: transparent;\n\t\t\theight: 52px;\n\t\t}\n\t\t.article{\n\t\t\tbackground-color: #FFF2EF;\n\t\t}\n\t\t.icon{\n\t\t\theight: 200px;\n\t\t}\n\t\t@media screen and (max-width: 1400px){\n\t\t\t.icon {\n\t\t\t\theight: 135px;\n\t\t\t}\n\t\t}\n\t\t.flex-end-title-section{\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-end;\n\t\t}\n\t\tbutton#login-btn, button#login-city-btn, button#verify-btn{\n\t\t\theight: 52px;\n\t\t\ttransition: 0.3s;\n\t\t}\n\t\tbutton#show-username-form, button#back-to-login-btn{\n\t\t\theight: 52px;\n\t\t\tbackground: transparent;\n\t\t\ttransition: 0.3s;\n\t\t}\n\t\t\n\t\tbutton#show-username-form:hover {\n\t\t\tcolor: var(--mandy);\n\t\t}\n\t\tbutton#back-to-login-btn:hover{\n\t\t\tcolor: var(--mandy);\n\t\t}\n\t\t\n\t\tbutton {\n\t\t\tcursor: pointer;\n\t\t}\n\t\tbutton#login-btn:hover {\n\t\t\tbackground: var(--cinnabar);\n\t\t}\n\t\tbutton#verify-btn:hover {\n\t\t\tbackground: var(--cinnabar);\n\t\t}\n\t\tbutton#login-city-btn:hover {\n\t\t\tbackground: var(--cinnabar);\n\t\t}\n\t<\/style>\n    <div id=\"custom-login-form\">\n            <div class=\"title_section headline_1 flex-end-title-section\">\n                SOARING Into<br\/>Positive Wellbeing\n\t\t\t\t<div class=\"icon\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\n                  <path d=\"M36.5463 12.4739C33.0835 10.9743 29.6859 12.9264 26.9026 14.8602C24.9882 16.2006 23.1704 17.6577 21.4554 19.274C21.7035 17.8346 21.7275 16.3607 21.4495 14.8628C20.8401 11.6362 18.8705 8.63699 16.0139 7.33658C14.7768 6.76866 12.911 6.39394 11.8245 7.40606C10.699 8.42347 10.2909 10.4035 10.049 11.8853C9.47719 15.3366 10.0416 18.9369 10.9327 22.32C12.1118 26.7238 13.8477 30.9874 14.5871 35.5157C14.6057 35.6429 14.6797 35.741 14.8318 35.8286C14.7044 35.9107 14.577 35.9928 14.4497 36.0749C14.084 36.2974 15.2739 36.6771 15.3355 36.6904C15.8122 36.8206 16.5458 36.9376 16.9833 36.6621C23.9386 32.2172 31.1651 27.5843 35.9927 20.4212C37.4055 18.37 40.1385 14.0424 36.5463 12.4739ZM14.8347 7.71244C14.8409 7.75486 14.7854 7.78399 14.7238 7.7707C14.7957 7.71772 14.8347 7.71244 14.8347 7.71244ZM14.276 8.11245C14.276 8.11245 14.4034 8.03033 14.5245 7.9058C14.7218 8.03049 14.9356 8.13134 15.1103 8.23747C15.4206 8.455 15.6981 8.72023 15.9756 8.98546C15.6961 8.98002 15.4455 9.03558 15.3469 9.17868L12.6199 13.1379C12.6609 12.8728 12.6793 12.5891 12.7203 12.3241C12.919 10.9563 13.3004 9.06631 14.276 8.11245ZM12.5598 16.8227C12.57 16.7564 12.5577 16.6716 12.5515 16.6291C12.8926 16.6479 13.1823 16.587 13.2808 16.4439L17.2727 10.6483C17.6551 11.2237 17.9657 11.8522 18.2145 12.4673C16.4917 15.1227 14.7689 17.7781 13.0626 20.4097C12.8114 19.2325 12.6384 18.0448 12.5598 16.8227ZM13.8159 23.5302C13.9104 23.4958 14.0049 23.4614 14.0542 23.3899C15.6948 20.8537 17.319 18.3414 18.9597 15.8053C19.1641 18.4378 18.4522 21.0645 17.3108 23.3385C17.1691 23.5955 17.0439 23.8288 16.9022 24.0858C16.8201 24.2051 16.7605 24.3429 16.6784 24.4622C16.662 24.486 16.6455 24.5099 16.6517 24.5523C16.1734 25.5037 15.7628 26.5109 15.3975 27.5552C15.2682 27.8971 17.843 28.6301 18.0626 27.9515C18.4053 26.8887 18.8384 25.9001 19.3332 24.9248C21.547 22.2245 24.0096 19.7286 26.6777 17.5508C26.7332 17.5217 26.766 17.474 26.8215 17.4448C25.1828 19.7212 23.5667 22.0161 21.928 24.2925C20.9197 25.705 19.895 27.1413 18.8868 28.5537C18.1085 29.6323 16.9686 30.8246 16.922 32.28C16.8976 32.9321 19.055 32.9862 19.3714 32.8353C19.4659 32.8009 19.5377 32.7479 19.6158 32.7373C18.7469 33.3307 17.839 33.9294 16.9475 34.5042C16.1858 30.7792 14.8282 27.1997 13.8159 23.5302ZM20.7168 31.9611C20.8216 31.8605 20.9427 31.7359 21.0639 31.6114C21.2015 31.463 20.6836 31.187 20.0836 31.0303C20.5415 30.2114 21.1904 29.4748 21.7059 28.7778C22.7141 27.3654 23.7388 25.929 24.7471 24.5166C26.7308 21.7394 28.7145 18.9621 30.7146 16.1611C30.8624 15.9464 30.1596 15.6306 29.4589 15.4659C29.9621 15.095 30.4715 14.7665 30.981 14.4381C31.856 13.8871 34.4401 12.0884 35.2891 13.2712C35.5626 13.6451 35.6696 14.1064 35.6985 14.5783C35.0081 14.3473 34.0732 14.2143 33.872 14.6092C31.3569 19.3399 28.4637 23.7974 25.2149 28.0002C25.1492 28.0956 25.2684 28.2309 25.5048 28.3503C25.1844 28.6099 24.8639 28.8695 24.5599 29.1053C23.3337 30.1147 22.0397 31.0684 20.7168 31.9611Z\" fill=\"#E5584A\"\/>\n                <\/svg>\n\t\t\t<\/div>\n\t\t<\/div>\n              <p>If your organization is already a collaboration partner with Soaringwords, then please<br\/> log in here to gain access to all of the workshop materials.<\/p>\n          <div class=\"login-form-custom\">\n            <div id=\"login-message\"><\/div>\n            <input autocomplete=\"off\" type=\"email\" id=\"username\" placeholder=\"Email\">\n            <input autocomplete=\"off\" type=\"password\" id=\"password\" placeholder=\"Password\">\n            <button id=\"login-btn\">Continue<\/button>\n             <button id=\"show-username-form\">Login with A Code<\/button> <!-- Button to show username form -->\n            <!--<button id=\"show-verification-btn\">Send Verification Code<\/button> <!-- Button to show verification form -->\n        <\/div>\n\t          <\/div>\n    <!-- HTML for username form (Initially hidden) -->\n     <div id=\"username-form\" style=\"display: none;\">\n      <div class=\"title_section headline_1 flex-end-title-section\">\n                SOARING Into<br\/>Positive Wellbeing\n\t\t\t\t<div class=\"icon\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\n                  <path d=\"M36.5463 12.4739C33.0835 10.9743 29.6859 12.9264 26.9026 14.8602C24.9882 16.2006 23.1704 17.6577 21.4554 19.274C21.7035 17.8346 21.7275 16.3607 21.4495 14.8628C20.8401 11.6362 18.8705 8.63699 16.0139 7.33658C14.7768 6.76866 12.911 6.39394 11.8245 7.40606C10.699 8.42347 10.2909 10.4035 10.049 11.8853C9.47719 15.3366 10.0416 18.9369 10.9327 22.32C12.1118 26.7238 13.8477 30.9874 14.5871 35.5157C14.6057 35.6429 14.6797 35.741 14.8318 35.8286C14.7044 35.9107 14.577 35.9928 14.4497 36.0749C14.084 36.2974 15.2739 36.6771 15.3355 36.6904C15.8122 36.8206 16.5458 36.9376 16.9833 36.6621C23.9386 32.2172 31.1651 27.5843 35.9927 20.4212C37.4055 18.37 40.1385 14.0424 36.5463 12.4739ZM14.8347 7.71244C14.8409 7.75486 14.7854 7.78399 14.7238 7.7707C14.7957 7.71772 14.8347 7.71244 14.8347 7.71244ZM14.276 8.11245C14.276 8.11245 14.4034 8.03033 14.5245 7.9058C14.7218 8.03049 14.9356 8.13134 15.1103 8.23747C15.4206 8.455 15.6981 8.72023 15.9756 8.98546C15.6961 8.98002 15.4455 9.03558 15.3469 9.17868L12.6199 13.1379C12.6609 12.8728 12.6793 12.5891 12.7203 12.3241C12.919 10.9563 13.3004 9.06631 14.276 8.11245ZM12.5598 16.8227C12.57 16.7564 12.5577 16.6716 12.5515 16.6291C12.8926 16.6479 13.1823 16.587 13.2808 16.4439L17.2727 10.6483C17.6551 11.2237 17.9657 11.8522 18.2145 12.4673C16.4917 15.1227 14.7689 17.7781 13.0626 20.4097C12.8114 19.2325 12.6384 18.0448 12.5598 16.8227ZM13.8159 23.5302C13.9104 23.4958 14.0049 23.4614 14.0542 23.3899C15.6948 20.8537 17.319 18.3414 18.9597 15.8053C19.1641 18.4378 18.4522 21.0645 17.3108 23.3385C17.1691 23.5955 17.0439 23.8288 16.9022 24.0858C16.8201 24.2051 16.7605 24.3429 16.6784 24.4622C16.662 24.486 16.6455 24.5099 16.6517 24.5523C16.1734 25.5037 15.7628 26.5109 15.3975 27.5552C15.2682 27.8971 17.843 28.6301 18.0626 27.9515C18.4053 26.8887 18.8384 25.9001 19.3332 24.9248C21.547 22.2245 24.0096 19.7286 26.6777 17.5508C26.7332 17.5217 26.766 17.474 26.8215 17.4448C25.1828 19.7212 23.5667 22.0161 21.928 24.2925C20.9197 25.705 19.895 27.1413 18.8868 28.5537C18.1085 29.6323 16.9686 30.8246 16.922 32.28C16.8976 32.9321 19.055 32.9862 19.3714 32.8353C19.4659 32.8009 19.5377 32.7479 19.6158 32.7373C18.7469 33.3307 17.839 33.9294 16.9475 34.5042C16.1858 30.7792 14.8282 27.1997 13.8159 23.5302ZM20.7168 31.9611C20.8216 31.8605 20.9427 31.7359 21.0639 31.6114C21.2015 31.463 20.6836 31.187 20.0836 31.0303C20.5415 30.2114 21.1904 29.4748 21.7059 28.7778C22.7141 27.3654 23.7388 25.929 24.7471 24.5166C26.7308 21.7394 28.7145 18.9621 30.7146 16.1611C30.8624 15.9464 30.1596 15.6306 29.4589 15.4659C29.9621 15.095 30.4715 14.7665 30.981 14.4381C31.856 13.8871 34.4401 12.0884 35.2891 13.2712C35.5626 13.6451 35.6696 14.1064 35.6985 14.5783C35.0081 14.3473 34.0732 14.2143 33.872 14.6092C31.3569 19.3399 28.4637 23.7974 25.2149 28.0002C25.1492 28.0956 25.2684 28.2309 25.5048 28.3503C25.1844 28.6099 24.8639 28.8695 24.5599 29.1053C23.3337 30.1147 22.0397 31.0684 20.7168 31.9611Z\" fill=\"#E5584A\"\/>\n                <\/svg>\n\t\t\t<\/div>\n   \t<\/div>\n\t\t  \n       <p>Please enter a distinctive code to proceed with login.<\/p>\n        <div id=\"username-message\"><\/div>\n        <!--<input type=\"text\" id=\"username-only\" placeholder=\"Code\">-->\n         <!-- <div class=\"login-form-custom\">\n            <div id=\"login-message\"><\/div>\n            <input type=\"Your Unique Code*\" id=\"username\" placeholder=\"Your Unique Code*\">\n            \n            <button id=\"login-city-btn\">Submit<\/button>\n             <button id=\"show-username-form\">Login with A Code<\/button> <Button to show username form> \n            <button id=\"show-verification-btn\">Send Verification Code<\/button> <Button to show verification form>\n        <\/div> -->\n        <div class=\"main-form-verification\">\n              <input autocomplete=\"off\" type=\"text\" id=\"city\" placeholder=\"Your unique code*\"> \n                <button id=\"login-city-btn\">Submit<\/button>\n             <button id=\"back-to-login-btn\">Back to Login<\/button> \n         <\/div>\n    <\/div>\n\n    <script>\n    jQuery(document).ready(function($) {\n        \/\/ Show verification form when \"Send Verification Code\" button is clicked\n        $('#show-verification-btn').on('click', function() {\n            $('#custom-login-form').hide();\n            $('#verification-form').show();\n        });\n\n        \/\/ Switch back to login form when \"Back to Login\" button is clicked\n        $('#back-to-login-btn').on('click', function() {\n            $('#verification-form').hide();\n            $('#custom-login-form').show();\n        });\n         \/\/ Show username form when \"Try with Username\" button is clicked\n            $('#show-username-form').on('click', function() {\n                $('#custom-login-form').hide();\n                $('#username-form').show();\n            });\n\n            \/\/ Switch back to login form when \"Back to Login\" button is clicked\n            $('#back-to-login-btn').on('click', function() {\n                $('#username-form').hide();\n                $('#custom-login-form').show();\n            });\n         jQuery(document).ready(function($) {\n    var verificationTimer; \/\/ Variable to store the timer\n    \n    \/\/ Function to start the timer\n    function startVerificationTimer() {\n        var timerDuration = 60; \/\/ Duration in seconds (2 minutes)\n        var timerDisplay = $('#verification-timer'); \/\/ Element to display remaining time\n        \n        verificationTimer = setInterval(function() {\n            timerDisplay.text(timerDuration);\n            timerDuration--;\n            \n            if (timerDuration < 0) {\n                clearInterval(verificationTimer);\n                \/\/ Hide verification form and show login form\n                $('#verification-form').hide();\n                $('#custom-login-form').show();\n            }\n        }, 1000); \/\/ Update every second\n    }\n    \n    \/\/ Function to stop the timer\n    function stopVerificationTimer() {\n        clearInterval(verificationTimer);\n        $('#verification-timer').text(''); \/\/ Clear timer display\n    }\n \/\/ AJAX request to handle user login with city\n        $('#login-city-btn').on('click', function() {\n            var city = $('#city').val();\n\n            \/\/ AJAX request to check user credentials with city only\n            $.ajax({\n                type: 'POST',\n                url: 'https:\/\/soaringwords.org\/wp-admin\/admin-ajax.php',\n                data: {\n                    'action': 'custom_user_login_city_only',\n                    'city': city,\n                },\n                success: function(response) {\n                    $('#username-message').html(response);\n                    \/\/ Redirect after successful login\n                    if (response.indexOf('Login successful') !== -1) {\n                        window.location.href = '\/new-landing-page\/'; \/\/ Replace with your desired URL\n                    }\n                }\n            });\n        });\n\n    \/\/ AJAX request to handle user login\n    $('#login-btn').on('click', function() {\n        var username = $('#username').val();\n        var password = $('#password').val();\n\t\t$('#login-btn').html(\"Please wait..\");\n        \/\/ AJAX request to check user credentials\n        $.ajax({\n            type: 'POST',\n            url: 'https:\/\/soaringwords.org\/wp-admin\/admin-ajax.php',\n            data: {\n                'action': 'custom_user_login',\n                'username': username,\n                'password': password\n            },\n            success: function(response) {\n                var startIndex = response.indexOf('<div');\n\t\t\t\tvar modifiedResponse = '';\n\n\t\t\t\t\/\/ Check if '<div' is found\n\t\t\t\tif (startIndex !== -1) {\n\t\t\t\t  \/\/ Extract everything from '<div' to the end of the string\n\t\t\t\t  modifiedResponse = response.substring(startIndex);\n\t\t\t\t}\n\n\t\t\t\t\/\/ Now you can set the HTML content of '#login-message' with the modifiedResponse\n\t\t\t\t$('#login-message').html(modifiedResponse);\n\t\t\t\t$('#login-btn').html(\"Continue\");\n                \/\/ Redirect after successful login\n                if (response.indexOf('Verification code sent') !== -1) {\n                    \/\/$('#custom-login-form').hide();\n                   \/\/ $('#verification-form').show();\n                    \/\/startVerificationTimer(); \/\/ Start the timer when verification code is sent\n                } else if (response.indexOf('Login successful') !== -1) {\n                    window.location.href = 'https:\/\/soaringwords.org\/new-landing-page'; \/\/ Replace with your desired URL\n                }\n            }\n        });\n    });\n\n\n\n\/*make field box otp verification *\/\n\n    const inputs = document.querySelectorAll(\".otp-field input\");\n\ninputs.forEach((input, index) => {\n    input.dataset.index = index;\n    input.addEventListener(\"keyup\", handleOtp);\n    input.addEventListener(\"paste\", handleOnPasteOtp);\n});\n\nfunction handleOtp(e) {\n    \n    const input = e.target;\n    let value = input.value;\n    let isValidInput = value.match(\/[0-9a-z]\/gi);\n    input.value = \"\";\n    input.value = isValidInput ? value[0] : \"\";\n\n    let fieldIndex = input.dataset.index;\n    if (fieldIndex < inputs.length - 1 && isValidInput) {\n        input.nextElementSibling.focus();\n    }\n\n    if (e.key === \"Backspace\" && fieldIndex > 0) {\n        input.previousElementSibling.focus();\n    }\n\n    \/\/ if (fieldIndex == inputs.length - 1 && isValidInput) {\n    \/\/     submit();\n    \/\/ }\n}\n\nfunction handleOnPasteOtp(e) {\n    const data = e.clipboardData.getData(\"text\");\n    const value = data.split(\"\");\n    if (value.length === inputs.length) {\n        inputs.forEach((input, index) => (input.value = value[index]));\n        submit();\n    }\n}\n\n\/\/ function submit() {\n\/\/     console.log(\"Submitting...\");\n\/\/     \/\/ \ud83d\udc47 Entered OTP\n\/\/     let otp = \"\";\n\/\/     inputs.forEach((input) => {\n\/\/         otp += input.value;\n\/\/         \/\/ input.disabled = true;\n\/\/         \/\/ input.classList.add(\"disabled\");\n\/\/     });\n\/\/     console.log(otp);\n\/\/     \/\/ \ud83d\udc49 Call API below\n\/\/ }\n\n    \/\/ AJAX request to handle verification code\n    $('#verify-btn').on('click', function() {\n        \/\/var verificationCode = $('#verification-code').val();\n       \n        var userId = $('#user-id').val();\n       let otp = \"\";\n        inputs.forEach((input) => {\n        otp += input.value;\n        \/\/ input.disabled = true;\n        \/\/ input.classList.add(\"disabled\");\n    });\n    \/\/console.log(otp);\n        \/\/debugger\n        \/\/\/var userId = 8; \/\/ Get the current user ID or default to 0\n        \/\/var userId = ; \/\/ Get the current user ID or default to 0\n        $.ajax({\n            type: 'POST',\n            url: 'https:\/\/soaringwords.org\/wp-admin\/admin-ajax.php',\n            data: {\n                'action': 'custom_verify_code',\n                'verification_code': otp,\n                'user_id': userId \/\/ Pass the user ID\n            },\n            success: function(response) {\n                $('#verification-message').html(response);\n                \/\/ Redirect after successful verification\n                if (response.indexOf('Login successful') !== -1) {\n                    window.location.href = 'https:\/\/soaringwords.org\/new-landing-page'; \/\/ Replace with your desired URL\n                }\n            }\n        });\n    });\n});\n\n\n    });\n\n\n\n    <\/script>\n\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2516","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/pages\/2516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/comments?post=2516"}],"version-history":[{"count":3,"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/pages\/2516\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/pages\/2516\/revisions\/2519"}],"wp:attachment":[{"href":"https:\/\/soaringwords.org\/api\/wp\/v2\/media?parent=2516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}