$(document).ready(function() {
    $('#loginForm')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            var validator = $(e.target).data('bootstrapValidator');
            $('#loginModal')
                .one('hidden.bs.modal', function() {
                    $('#welcomeModal')
                        .find('.username')
                            .html(validator.getFieldElements('username').val()).end()
                        .modal('show');
                })
                .modal('hide');
        });

    $('#loginModal').on('shown.bs.modal', function() {
        $('#loginForm').bootstrapValidator('resetForm', true)
                       .find('[name="username"]').focus();
    });
});