Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

PHP Token and AJAX

I have a static function call Token::generate(); that is needed when submitting forms.

As you can see the variable $token that is using my method to create my token. Then you see the variable $hidden that is add the var to the form.

The problem is that if the user fails log in then the form will clear so they can enter there information with the errors that were created in the last attempt.

If the user attempts to try again with that token, it will not work because token has already been used.

Should I just create a php file that will just generate a token? Then I could use ajax to make a get request to obtain the token?

Would there be a better way?

if ($user->isLoggedin()) {
                echo '<span class="profile-link"><a class="titles red-links" href="/' . $user->data()->username . '">' . $user->data()->username . '</a></span>';
            } else {
                $token = Token::generate();
                $hidden = '<input type="hidden" name="token" value="' . $token . '">';
                ?><script>
                jQuery(document).ready(function(){
                    document.body.style.paddingTop="3px";
                    $('a[href^="#fallr-"]').click(function(){
                        var id = $(this).attr('href').substring(7);
                        methods[id].apply(this,[this]);
                        return false;
                    });
                    var methods = {  
                        login : function(){
                            var login = function(){
                                var username = $(this).children('form').children('input[type="text"]').val();
                                var password = $(this).children('form').children('input[type="password"]').val();
                                var remember = $(this).children('form').children('input[name="remember"]').val();
                                var token = $(this).children('form').children('input[name="token"]').val();
                                if(username.length < 1 || password.length < 1 || token.length < 1){
                                    alert('Invalid!\nPlease fill all required forms');
                                    console.log(token)
                                } else {
                                    var data = {
                                        username: username,
                                        password: password,
                                        remember: remember,
                                        token: token,
                                    }
                                    $.ajax({
                                        type: "POST",
                                        url: "login.php",
                                        data: data,
                                        dataType: "text",
                                        cache: false,
                                        success: function(data){
                                            console.log('here');
                                            if(data === 'login_success') {
                                                window.location.href = '/members/';
                                            } else {
                                                $('#error').append(data);
                                                $('form#login')[0].reset();
                                                $('form#login').children('input[name=username]').on('click', function() {
                                                    $('#error').html('');
                                                });
                                            }
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            alert(textStatus);
                                            alert(errorThrown);
                                        }
                                    });
                                }
                            }                        
                            $.fallr.show({
                                icon        : 'secure',
                                width       : '400px',
                                content     : '<h4 class="titles">Login</h4>'
                                            + '<span id="error"></span>'
                                            + '<form id="login">'
                                            +     '<input placeholder="Username" name="username" type="text"/'+'>'
                                            +     '<input placeholder="Password" name="password" type="password"/'+'>'
                                            +     '<input type="checkbox" name="remember" type="remember"/'+'> Remember Me'
                                            +     '<?php echo $hidden; ?>'
                                            + '</form>',
                                buttons : {
                                    button1 : {text: 'Submit', onclick: login},
                                    button4 : {text: 'Cancel'}
                                }
                            });             
                        }
                    };
                });
                </script>
                <a href="#" class="titles red-links">Register</a><span class="titles red">&nbsp;|&nbsp;</span><a href="#fallr-login" class="titles red-links">Login</a>