Pages

Monday, June 21, 2021

Javascript Timer start and end

05 : 00

 

<script>

$(document).ready(function(){

  var timer2 = "05 : 01";

  var interval = setInterval(function() {


    var timer = timer2.split(':');

    //by parsing integer, I avoid all extra string processing

    var minutes = parseInt(timer[0], 10);

    var seconds = parseInt(timer[1], 10);

    --seconds;

    minutes = (seconds < 0) ? --minutes : minutes;

    if (minutes < 0) clearInterval(interval);

    seconds = (seconds < 0) ? 59 : seconds;

    seconds = (seconds < 10) ? '0' + seconds : seconds;

    //minutes = (minutes < 10) ?  minutes : minutes;

    if(minutes == 0 && seconds == 0) {

      console.log(minutes + "  "+ seconds);

      clearInterval(interval);

      localStorage.removeItem('timerstart');

    }

    $('#timerSec').html(minutes + ' : ' + seconds);

    timer2 = minutes + ' : ' + seconds;

  }, 1000);

})

</script>

<strong id="timerSec" class="bold-text">05 : 00</strong>

Forgot Password and reset password in Firebase with custom email template

<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>

Monday, June 7, 2021

Get the Google places API city, state and Country

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

<script>

var city = document.getElementById("userdata_citystate");

    console.log(city);

    var autocomplete = new google.maps.places.Autocomplete(city);

    autocomplete.addListener('place_changed', function() {

    var place = autocomplete.getPlace();

    var address = place.formatted_address;

            var latitude = place.geometry.location.lat();

            var longitude = place.geometry.location.lng();

            var latlng = new google.maps.LatLng(latitude, longitude);

            var geocoder = geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'latLng': latlng }, function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {

                    if (results[0]) {

                        var address = results[0].formatted_address;

                        var state = results[0].address_components[results[0].address_components.length - 3].long_name;

                        var city = results[0].address_components[results[0].address_components.length - 4].long_name;

                        $("#userdata_citystate").val(city+", "+state);

                    }

                }

            });

    

    console.log("You selected: '" + place.formatted_address + "'");

  });

</script>