{"id":664,"date":"2025-01-22T09:09:26","date_gmt":"2025-01-22T09:09:26","guid":{"rendered":"http:\/\/localhost:8888\/wordpress\/?page_id=664"},"modified":"2025-01-22T14:25:19","modified_gmt":"2025-01-22T14:25:19","slug":"forgotpassword","status":"publish","type":"page","link":"http:\/\/localhost:8888\/wordpress\/forgotpassword\/","title":{"rendered":"ForgotPassword"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n \n \n \n Dynamic Form with Log<\/title>\n <style>\n \/* General Styling *\/\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* Dynamic Form Section *\/\n .login-container {\n text-align: center;\n width: 100%;\n display: block;\n max-width: 400px;\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n .login-container h4 {\n margin-bottom: 20px;\n }\n\n .otp-new-container {\n display: none; \/* Initially hidden *\/\n justify-content: center;\n align-items: center;\n width: 100%;\n margin-top: 180px; \n margin-left: 390px;\n max-width: 400px;\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n \n .otp-new-container h4 {\n margin-bottom: 20px;\n }\n\n .input-group {\n margin-bottom: 15px;\n text-align: left;\n }\n\n .input-group label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n \n\n .hidden {\n display: none;\n }\n\n .input-group input {\n width: 100%;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n \/* OTP Box Styling *\/\n .otp-container {\n display: flex;\n justify-content: center;\n gap: 10px;\n }\n\n .otp-box {\n width: 50px;\n height: 50px;\n text-align: center;\n font-size: 24px;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n \/* Button styling *\/\n .login-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: #3498db;\n color: white;\n margin: 10px;\n padding: 10px;\n border: none;\n border-radius: 5px;\n font-size: 16px;\n cursor: pointer;\n position: relative;\n }\n\n .login-btn .button-text {\n margin-right: 10px;\n }\n\n .login-btn .loader {\n display: none;\n width: 16px;\n height: 16px;\n border: 2px solid #fff;\n border-radius: 50%;\n border-top: 2px solid transparent;\n animation: spin 1s linear infinite;\n }\n\n .login-btn.loading .button-text {\n display: none;\n }\n\n .login-btn.loading .loader {\n display: inline-block;\n }\n \n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n <\/style>\n<\/head>\n<body>\n \n <!-- Dynamic Form Section -->\n <div class=\"login-container\" id=\"dynamicFormContainer\">\n <h4>Please Enter the Email id linked with your account<\/h4>\n <form id=\"dynamicForm\">\n <div class=\"input-group\">\n <label for=\"emailid\">Email id<\/label>\n <input type=\"text\" id=\"emailid\" name=\"emailid\" placeholder=\"Enter your Email Id\" required \/>\n <\/div>\n <button type=\"submit\" class=\"login-btn\" id=\"submitButton\">\n <span class=\"button-text\">Submit<\/span>\n <span class=\"loader\"><\/span>\n <\/button>\n <\/form>\n <\/div>\n\n <div class=\"otp-new-container\" id=\"otpContainer\">\n <h4>Enter your OTP<\/h4>\n <div class=\"otp-container\" id=\"otpBoxes\">\n <input type=\"text\" class=\"otp-box\" id=\"otp1\" maxlength=\"1\" \/>\n <input type=\"text\" class=\"otp-box\" id=\"otp2\" maxlength=\"1\" \/>\n <input type=\"text\" class=\"otp-box\" id=\"otp3\" maxlength=\"1\" \/>\n <input type=\"text\" class=\"otp-box\" id=\"otp4\" maxlength=\"1\" \/>\n <\/div>\n <button id=\"verifyOtpButton\" class=\"login-btn\">\n <span class=\"button-text\">Verify OTP<\/span>\n <\/button>\n <\/div>\n <div class=\"login-container hidden\" id=\"newPasswordContainer\">\n <h2>Enter your new password<\/h2>\n <form id=\"newPasswordForm\">\n <div class=\"input-group\">\n <label for=\"newpassword\">New Password<\/label>\n <input type=\"text\" id=\"newpassword\" name=\"newpassword\" placeholder=\"New password\" required \/>\n <\/div>\n <div class=\"input-group\">\n <label for=\"confirmpassword\">Confirm Password<\/label>\n <div class=\"confirmpassword-container\">\n <input type=\"password\" id=\"confirmpassword\" name=\"confirmpassword\" placeholder=\"Confirm password\" required \/>\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"login-btn\" id=\"submitButtonPassword\">\n <span class=\"button-text\">Submit<\/span>\n <span class=\"loader\"><\/span>\n <\/button>\n <\/form>\n <\/div>\n\n <script>\n document.getElementById('dynamicForm').addEventListener('submit', function(event) {\n event.preventDefault();\n\n const emailId = document.getElementById('emailid').value.trim();\n if (!emailId) {\n alert('Please enter a valid Email ID.');\n return;\n }\n\n const submitButton = document.getElementById('submitButton');\n\n \/\/ Show the loader and make the button unclickable\n submitButton.classList.add('loading');\n submitButton.disabled = true;\n\n \/\/ Generate a random 4-digit number for OTP\n const otp = Math.floor(1000 + Math.random() * 9000);\n console.log(\"Generated OTP:\", otp);\n\n \/\/ Make a GET request to the provided API\n const apiUrl = `https:\/\/script.google.com\/macros\/s\/AKfycby_nsqe6Dt3VVZat6Kt6jgY7X9U_-FSf-JKTtFTAd2YW2Xalo7YX_IVX1Hel1HZBDmaaQ\/exec?action=forgotpassword&eotusername=${emailId}&otp=${otp}`;\n fetch(apiUrl)\n .then(response => response.text())\n .then(data => {\n console.log(\"API Response:\", data);\n\n \/\/ Hide the email input and submit button\n document.getElementById('dynamicFormContainer').style.display = 'none';\n\n \/\/ Show the OTP container\n const otpContainer = document.getElementById('otpContainer');\n otpContainer.style.display = 'block';\n\n \/\/ Autofocus the first OTP box\n document.getElementById('otp1').focus();\n\n \/\/ Store OTP in case you need to verify it later\n sessionStorage.setItem('generatedOTP', otp.toString());\n })\n .catch(error => console.error('Error calling API:', error))\n .finally(() => {\n \/\/ Remove the loader and re-enable the button\n submitButton.classList.remove('loading');\n submitButton.disabled = false;\n });\n });\n\n \/\/ Event listener to verify OTP\n document.getElementById('verifyOtpButton').addEventListener('click', function() {\n const enteredOtp = Array.from(document.querySelectorAll('.otp-box'))\n .map(box => box.value.trim())\n .join('');\n const generatedOtp = sessionStorage.getItem('generatedOTP');\n\n if (enteredOtp === generatedOtp) {\n document.getElementById('otpContainer').style.display = 'none';\n const npc = document.getElementById('newPasswordContainer');\n npc.style.display = 'block';\n } else {\n alert('Incorrect OTP. Please try again.');\n }\n });\n document.getElementById('newPasswordForm').addEventListener('submit', function (event) {\n event.preventDefault();\n\n const newPassword = document.getElementById('newpassword').value.trim();\n const confirmPassword = document.getElementById('confirmpassword').value.trim();\n const emailId = document.getElementById('emailid').value.trim();\n\n if (newPassword !== confirmPassword) {\n alert(\"Passwords do not match. Please try again.\");\n return;\n }\n\n const submitPasswordButton = document.getElementById('submitButtonPassword');\n\n \/\/ Show the loader and make the button unclickable\n submitPasswordButton.classList.add('loading');\n submitPasswordButton.disabled = true;\n \n \/\/ Make an API request to reset the password\n const apiUrl = \"http:\/\/127.0.0.1:5000\/resetpassword\"; \/\/ Update with your backend URL\n fetch(apiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({ email: emailId, password: newPassword }),\n })\n .then((response) => response.json())\n .then((data) => {\n if (data.success) {\n alert(\"Password Reset successfully!\");\n \/\/ Redirect to another page\n window.location.href = \"https:\/\/127.0.0.1:5000\/login\";\n } else {\n alert(`Failed: ${data.message}`);\n }\n })\n .catch((error) => console.error(\"Error:\", error))\n .finally(() => {\n \/\/ Remove the loader and re-enable the button\n submitPasswordButton.classList.remove('loading');\n submitPasswordButton.disabled = false;\n });\n });\n\n \/\/ Automatically move to next OTP box\n document.querySelectorAll('.otp-box').forEach((input, index) => {\n input.addEventListener('input', function() {\n if (this.value && index < 3) {\n document.querySelectorAll('.otp-box')[index + 1].focus();\n }\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6fb9231 e-flex e-con-boxed e-con e-parent\" data-id=\"6fb9231\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic Form with Log Please Enter the Email id linked with your account Email id Submit Enter your OTP Verify […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-664","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/pages\/664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/comments?post=664"}],"version-history":[{"count":76,"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/pages\/664\/revisions"}],"predecessor-version":[{"id":751,"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/pages\/664\/revisions\/751"}],"wp:attachment":[{"href":"http:\/\/localhost:8888\/wordpress\/wp-json\/wp\/v2\/media?parent=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}