Jump to content

symfony2 modal login


Recommended Posts

Boas pessoal,

Após uma longa ausência voltei a actividade.

Estou aqui com um problema, eu já programo em PHP a cerca de 5/6 anos, mas só recentemente comecei a utilizar o Symfony2. Tenho de admitir que adaptei-me bem, mas agora que comecei a tentar utilizar o jQuery Ajax e assim as coisas começaram a baralhar-me.

Eu quero colocar o meu login com modal, se introduzir os dados certos corre tudo bem, sem problemas, o meu problema é:

- ao introduzir dados invalidos ou mesmo em branco eu queria que fizesse o return para dentro do modal, a aparecer a mensagem de erro como é obvio, para o utilizador voltar a tentar, mas o que esta a acontecer de momento é que ao introduzir os dados errados ele envia para outra pagina que tenho de login estática sem o modal.

Espero ter-me feito perceber. Se for preciso deixar alguma parte do código para demonstrar o que tenho feito basta dizer que eu coloco aqui o essencial.

Desde já obrigado  😉

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

Espero ter-me feito perceber. Se for preciso deixar alguma parte do código para demonstrar o que tenho feito basta dizer que eu coloco aqui o essencial.

Desde já obrigado  😉

eu disse que se fosse preciso codigo para explicar melhor que era so dizer que eu aqui colocava. Amanha quando chegar a empresa ja deixo aqui a parte importante do codigo

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

Boas,

Como disse ontem, hoje deixo aqui a parte do codigo que faz o login, espero que alguem me possa ajudar.

esta é a parte do menu, onde chamo o login

{% if not is_granted('ROLE_USER') %}
	<ul>
		<li><a href="{{ path('home') }}">Home</a></li>
		<li><a href="{{ path('new_user') }}">Register</a></li>
		<li><a href="#" id="login_link" target="_self">Login</a></li>
	</ul>
{% endif %}
...
<div id="login_form" style='display:none'>
<div id="status" align="left">
	<center><h1><img src="{{ asset('../web/images/key.png') }}" align="middle"> LOGIN</h1> 
		<div id="login_response"><!-- spanner --></div> 
	</center>
	<form action="{{ path('login_check') }}" method="post">
		<input type="hidden" name="_target_path" value="/members" />

		<label>User</label>
		{% if last_username is defined %}
			<input type="text" id="username" name="_username" value="{{ last_username }}" /><br />  
		{% endif %}
		{% if last_username is not defined %}
			<input type="text" id="username" name="_username" value="" /><br />
		{% endif %}
		<label>Password</label>
		<input type="password" id="password" name="_password" /><br />  

		<label> </label><input type="submit" name="login" value="Login" />

		<div id="ajax_loading">
			<img align="middle" src="{{ asset('../web/images/spinner.gif') }}"> Processing...
		</div>
	</form>
</div>
</div>

aqui fica a parte do javascript:

// When DOM is ready
var $login = jQuery.noConflict();
$login(document).ready(function(){
// Launch MODAL BOX if the Login Link is clicked
$login("#login_link").click( function(){ $login('#login_form').modal(); });

// When the form is submitted
$login("#status > form").submit( function(){  
	// Hide 'Submit' Button
	$login('#submit').hide();

	// Show Gif Spinning Rotator
	$login('#ajax_loading').show();

	// 'this' refers to the current submitted form  
	var str = $login(this).serialize();  

	// -- Start AJAX Call --
	$login.ajax({
	    type: "POST",
	    url: $(this).attr("action"),  // Send the login info to this page
      		data:str,
	    success: function(msg){
		$login("#status").ajaxComplete(
			function(event, request, settings){  
				// Show 'Submit' Button
				$login('#submit').show();

				// Hide Gif Spinning Rotator
				$login('#ajax_loading').hide();  

				// LOGIN OK?
				if(msg == 'OK'){  
					var login_response = '<div id="logged_in">' +
						'<div style="width: 350px; float: left; margin-left: 70px;">' + 
						'<div style="width: 40px; float: left;">' +
						'<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader3.gif">' +
						'</div>' +
						'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
						"You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";  

						$login('a.modalCloseImg').hide();  
						$login('#simplemodal-container').css("width","500px");
						$login('#simplemodal-container').css("height","120px");
						$login(this).html(login_response); // Refers to 'status'

						// After 2 seconds redirect
						setTimeout('go_to_private_page()', 2000); 
				// ERROR?
				}else{  
					var login_response = msg;
					$login('#login_response').html(login_response);
				}  
			});  
		}
	}); // -- End AJAX Call --
	return false;
}); // end submit event
});

e o controller onde efectua a verificaçao para o login:

class SecurityController extends Controller{
    public function loginAction(){
    	$request = $this->getRequest();
        $session = $request->getSession();

        // get the login error if there is one
        if ($request->attributes->has(SecurityContext::AUTHENTICATION_ERROR)) {
            $error = $request->attributes->get(SecurityContext::AUTHENTICATION_ERROR);
        } else {
            $error = $session->get(SecurityContext::AUTHENTICATION_ERROR);
        }

        return $this->render('AcmeStoreBundle:Security:login.html.twig', array(
            // last username entered by the user
            'last_username' => $session->get(SecurityContext::LAST_USERNAME),
            'error'         => $error,
        ));
    }

public function memberAction(){
	return $this->render('AcmeStoreBundle:Member:member.html.twig');
}
}

basicamente, o que acontece é, ele do ajax envia a informaçao para o meu controller, mas depois nao retorna para o ajax, e nao estou a conseguir fazer essa ligaçao, eu sei que no controller ele tem um return para o login.html.twig, mas só esta assim porque ainda nao consegui descobrir forma de retornar a informaçao para o ajax, mesmo para mostrar a mensagem que o login esta correcto e que ira ser redirecionado e para mostrar a mensagem que os dados sao invalidos.

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

Desde já obrigado pelo link. Consegui colocar a funcionar, sendo que reparei que quando estou a trabalhar no linux, no localhost, o site fica mais "rápido" do que quando estou a trabalhar também no localhost.

Mas esta a funcionar obrigado 😉

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.