I modified a jQuerry script to use it on my login.php. In the script is a function called checkuser(). This function will fade in a msg to register, when the username does not exist/ / is invalid.
Right now as I'm using this code, every username is invalid. So how am I gonna check my database using this code?
- <div id="register-inner">
- {{ Form::text('username', '', array ('id' => 'reg-user', 'class' => 'login-input required', 'placeholder' => 'Username', 'autocomplete' => 'off')) }}
- </div>
Laravel code
- <div id="register">
- <p>Username not found.</p>
- <button type="button" id="reg-btn" class="green btn-s">Register</button>
- </div>
- <script type='text/javascript'>
$('#login-body').hide();
$(window).load( function() {
$('#load').fadeOut(600, function() {
$('#login-body').fadeIn(10, function() {
$(this).addClass('show');
$('#password').focus();
if ($(window).width() <= 480) $('#password').blur();
});
});
});
var browserSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (browserSafari) $('#wrapper').addClass('safari-fix');
if ($.storage() == true) {
localStorage.removeItem('user-name');
localStorage.removeItem('user-avatar');
} else {
function lsnotif() {
$('#wrapper').append('<div class="notif orange full slideUp">LocalStorage is disabled. Your settings will not be saved!<span class="icon icon-resistor"></span><p class="nt-det">Upgrade your browser or enable local data storage.</p></div>');
};
setTimeout(lsnotif, 2000);
$.fn.notif();
}
$('#login-user .icon-user').click( function() {
$('#login-user').toggleClass('showusr');
});
$('#user-select li').click( function() {
$('#login-user').removeClass('showreg showusr');
$(this).addClass('sel').siblings('.sel').removeClass('sel');
var name = $(this).children('span').text();
img = $(this).children('img').attr('src');
$('#username').val(name).removeClass('error').addClass('valid');
$('#avatar img').attr('src', img).fadeIn(300);
$('#login-user').find('.input-error').remove();
$('#login-pass').find('.input-error').remove();
$('#forgot-psw').fadeOut(200);
$('#password').removeClass('error').val('').focus();
if ($.storage() == true) {
localStorage.setItem('user-name',name);
localStorage.setItem('user-avatar',img);
};
});
var users = ["novalex","m1chael","Johnny 1337"];
var username = $('#username');
var typeDelay;
$(username).keyup(function(){
clearTimeout(typeDelay);
$('#user-select').find('.sel').removeClass('sel');
typeDelay = setTimeout(checkuser, 500);
});
function checkuser() {
var usrval = username.val();
usrlen = usrval.length;
if ($.inArray(usrval, users) == -1 && usrlen > 0) {
$('#avatar img').fadeOut(300);
$('#login-user').addClass('showreg').removeClass('showusr');
$('#user-select').find('.sel').removeClass('sel');
} else if (usrlen == 0) {
$('#avatar img').fadeOut(200);
$('#login-user').removeClass('showreg');
} else {
$('#avatar img').fadeIn(300);
$('#login-user').removeClass('showreg showusr');
$('#user-select li').each( function() {
var name = $(this).find('span').text();
img = $(this).children('img').attr('src');
if (name == usrval) {
$(this).addClass('sel');
$('#avatar img').attr('src', img);
}
});
$('#login-pass').find('.input-error').remove();
$('#password').removeClass('error').focus();
};
};
$('.input-error').click( function() {
var trigger = $(this).data('trigger');
$(this).offsetParent().find('input').eq(trigger).focus();
});
$('#password').keyup( function() {
if ($(this).val()) $('#forgot-psw').fadeOut(200)
else $('#forgot-psw').fadeIn(300);
});
$('#reg-btn').click( function() {
$('#login-form').removeClass('show');
$('#register-form').addClass('show');
$('#login-action').hide();
$('#reg-user').focus();
});
$('#rb-check').checkfn();
$('#login-form, #register-form').validate();
</script>
User in the database are save in the table 'users'. And the username row is called 'email' as shown on the picture:
Example: http://bruteforce.tv/