ExtJS4 & Symfony 2 - extjs

Question

I have to mix up Symfony2 and ExtJS4. All views need to be render with ExtJS, no twig.
All the application is in a secured area, only members will be able to access it.
When an user launch the application, main viewport is displayed with login form. After connecting, the entire app is displayed.
In facts, the / route need to display viewport. It will call an ajax request to check if user is connected.
if yes, launch the app
if not, show the login form
And I don't know how to do that, the / action in my controller wait for response and I only want to launch javascript.
EDIT : the login form must be made with ExtJS.
security.yml
firewalls:
dev:
pattern: ^/(_(profiler|wdt)|css|images|js)/
security: false
login:
pattern: ^/login$
security: false
secured_area:
pattern: ^/
form_login:
check_path: /login_check
login_path: /login
logout:
path: /logout
target: /
and the loginAction
public function loginAction()
{
if ($this->get('request')->attributes->has(SecurityContext::AUTHENTICATION_ERROR)) {
$error = $this->get('request')->attributes->get(SecurityContext::AUTHENTICATION_ERROR);
} else {
$error = $this->get('request')->getSession()->get(SecurityContext::AUTHENTICATION_ERROR);
}
$json = json_encode(array(
'username' => $this->get('request')->getSession()->get(SecurityContext::LAST_USERNAME),
'error' => $error,
));
$response = new Response($json);
$response->headers->set('Content-Type', 'application/json');
return $response;
}

Answer 1

Process should be -
Make an ajax call to login_check
Read the json response into an object and check whatever variable is set to denote success or failure
If the user isn't logged in, show the login window
In the click event of the login button, make another ajax call to log them in
If they authenticate, return a variable to notify via json, and show the app, if not give them a hint as to what went wrong in a message.
-
var login = Ext.create('Ext.window.Window', {
id: 'login',
height: 200,
width: 350,
layout: 'anchor',
modal: true,
title: 'Welcome, Please Login',
items: [
this.username = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Username'
}),
this.password = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Password'
}),
this.submit = Ext.create('Ext.button.Button', {
text: 'Login'
})
]
});
login.submit.on('click', function (btn, e, eOpts) {
Ext.Ajax.request({
scope: this,
params: {
username: login.username.getValue(),
password: login.password.getValue()
},
url: 'yoursite/login',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.logged_in === true) {
//Show App
} else {
//Display error message
}
}
});
});
Ext.Ajax.request({
scope: this,
url: 'yoursite/login_check',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.username === null) {
//Show Login window
login.show();
} else {
//Logic to show app if logged in
}
}
});