<div class="div-block-form">
<div class="statusnotificaiton notificationbox"><strong>Success: </strong>Password reset Email is recevied on your
email zakeerio25@gmail.com please check your email and reset password.</div>
<h2 class="heading-pages">Forgot Password?</h2>
<div class="text-block-pages">Please enter your mobile number and we will send you
<br>instructions to reset your password
</div>
<div class="form-block-page w-form">
<form id="wf-form-Phone-Form" name="wf-form-Phone-Form" data-name="Phone Form" class="form">
<div class="div-block-21">
<label id="label-pass" for="Email" class="field-label-down up">Email</label>
<input type="email" class="text-field-2 w-input" data-input="2" maxlength="256" name="Email"
data-name="Email" id="resetEmail" required="">
</div>
<a id="create" href="#" class="submit-button-forgot next-button text-center w-button">Continue</a>
</form>
</div>
<div class="text-block-11">Back to <a href="/login" class="link-3">Login</a></div>
</div>
<script>
create.addEventListener('click', resetPassword);
function resetPassword() {
var auth = firebase.auth();
var emailAddress = resetEmail.value;
if (emailAddress == "") {
$('.statusnotificaiton.notificationbox').html('<strong>Error: </strong> The email field should not be empty!');
$('.statusnotificaiton.notificationbox').removeClass('statussuccess').addClass("statuserror");
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statuserror');
}, 3000)
} else {
//http://website.com/forgot-password-reset?mode=resetPassword&oobCode=Abcd&apiKey=12334&lang=en
auth.sendPasswordResetEmail(emailAddress).then(function (response) {
console.log(response);
$('.statusnotificaiton.notificationbox').html('<strong>Success: </strong>Password reset Email is recevied on your email ' + emailAddress + ' please check your email and reset password.');
$('.statusnotificaiton.notificationbox').removeClass('statuserror').addClass("statussuccess");
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statussuccess');
//document.location.assign('/login');
}, 3000)
// Email sent.
}).catch(function (error) {
console.log(error.code);
$('.statusnotificaiton.notificationbox').html('<strong>Error: </strong>' + error.message);
$('.statusnotificaiton.notificationbox').removeClass('statussuccess').addClass("statuserror");
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statuserror');
}, 3000)
//errorMessage.innerHTML = error.message;
//$('.w-form-fail').show();
});
}
}
</script>
https://yourwebsite.com/forgot-password-reset?mode=resetPassword&oobCode=123111&apiKey=APIKEY&lang=en
RESET PASSWORD PAGE
<div class="div-block-form">
<div class="statusnotificaiton notificationbox">This is test notification here</div>
<h2 class="heading-pages">Reset Password</h2>
<div class="text-block-pages-otp">Please input a new password</div>
<div class="form-block-page-reset w-form">
<form id="wf-form-Phone-Form" name="wf-form-Phone-Form" data-name="Phone Form" class="form">
<input type="password" class="text-field-password-reset w-input" autofocus="true" maxlength="256"
name="New-Password" data-name="New Password" placeholder="New Password" id="New-Password" required="">
<input type="password" class="text-field-password-reset w-input" autofocus="true" maxlength="256"
name="New-Password-confirm" data-name="New Password confirm" placeholder="Confirm Password"
id="New-Password-confirm" required="">
<input type="submit" value="Submit" data-wait="Please wait..." id="confirmPassword12"
class="submit-button-forgot next-button d-none w-button"><a id="confirmPassword" href="#"
class="submit-button-forgot next-button text-center w-button">Continue</a>
</form>
</div>
<div class="text-block-pages-pass">Your password will be used to login and confirm
<br>transactions the website
</div>
</div>
<script>
//document.addEventListener('DOMContentLoaded', () => {
// TODO: Implement getParameterByName()
$("#confirmPassword").on('click', function () {
var pwd = $("#New-Password").val();
var confirmpwd = $("#New-Password-confirm").val();
if (pwd != confirmpwd) {
$('.statusnotificaiton.notificationbox').html("<strong>Error: </strong>The confirm password does not match!");
$('.statusnotificaiton.notificationbox').removeClass('statussuccess').addClass("statuserror");
localStorage.removeItem('userdata');
localStorage.removeItem('photoUrl');
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statuserror').html("");
}, 3000)
return false;
}
// Get the action to complete.
var mode = getParameterByName('mode');
// Get the one-time code from the query parameter.
var actionCode = getParameterByName('oobCode');
// (Optional) Get the continue URL from the query parameter if available.
var continueUrl = getParameterByName('continueUrl');
var apiKey = getParameterByName('apiKey');
// (Optional) Get the language code if available.
var lang = getParameterByName('lang') || 'en';
// Configure the Firebase SDK.
// This is the minimum configuration required for the API to be used.
var auth = firebase.auth();
// Handle the user management action.
switch (mode) {
case 'resetPassword':
// Display reset password handler and UI.
handleResetPassword(auth, actionCode, continueUrl, lang);
break;
case 'recoverEmail':
// Display email recovery handler and UI.
handleRecoverEmail(auth, actionCode, lang);
break;
case 'verifyEmail':
// Display email verification handler and UI.
handleVerifyEmail(auth, actionCode, continueUrl, lang);
break;
default:
// Error: invalid mode.
}
});
//}, false);
function handleResetPassword(auth, actionCode, continueUrl, lang) {
// Localize the UI to the selected language as determined by the lang
// parameter.
// Verify the password reset code is valid.
auth.verifyPasswordResetCode(actionCode).then((email) => {
var accountEmail = email;
console.log(email);
// TODO: Show the reset screen with the user's email and ask the user for
// the new password.
var newPassword = $("#New-Password").val();
// Save the new password.
auth.confirmPasswordReset(actionCode, newPassword).then((resp) => {
// Password reset has been confirmed and new password updated.
// TODO: Display a link back to the app, or sign-in the user directly
// if the page belongs to the same domain as the app:
//auth.signInWithEmailAndPassword(accountEmail, newPassword);
auth.signInWithEmailAndPassword(accountEmail, newPassword).then((userCredential) => {
var user = userCredential.user;
useremail = user.email;
})
.catch((error) => {
console.log(error.code);
errorMessage.innerHTML = error.message;
$('.w-form-fail').show();
});
// TODO: If a continue URL is available, display a button which on
// click redirects the user back to the app via continueUrl with
// additional state determined from that URL's parameters.
}).catch((error) => {
// Error occurred during confirmation. The code might have expired or the
// password is too weak.
console.log(error);
$('.statusnotificaiton.notificationbox').html(error.message);
$('.statusnotificaiton.notificationbox').removeClass('statussuccess').addClass("statuserror");
localStorage.removeItem('userdata');
localStorage.removeItem('photoUrl');
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statuserror');
removeStorageitems(keysToRemove);
}, 3000)
});
}).catch((error) => {
// Invalid or expired action code. Ask user to try to reset the password
// again.
console.log(error);
$('.statusnotificaiton.notificationbox').html(error.message);
$('.statusnotificaiton.notificationbox').removeClass('statussuccess').addClass("statuserror");
localStorage.removeItem('userdata');
localStorage.removeItem('photoUrl');
setTimeout(function () {
$('.statusnotificaiton.notificationbox').removeClass('statuserror');
removeStorageitems(keysToRemove);
}, 3000)
});
}
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
