Need suggestion: regarding cardLayout

[sujeetkr]

Hi,
Requirement: If user is not logged in show him, login window, otherwise show him dashboard.
Approach Used: In ViewPort, I created two card : loginWindowCard and dashboardCard. Based on user login status, set the active card.

Problem : 1) Since I am using card layout, I have to load all view, even before user logins.
-> Dashboard is created even before user is login to the site
-> Its stores are loaded. That is service call is made to fill store for dashboard. Since useris not logged in, so service return empty data.

Need suggestion: 1) Is card layout is good solution for above situation? Is there any alternative?
2) If I have to use card layout, then can I dynamically add the card? Like if user is not logged in, then only add loginWindowCard. As soon as user logs in, add the dashboard card and make it active.
3) How can I implement, if card exits then make it active, otherwise create a card and add it to card layout and then make it active ?

Thanks,
Sujeet

[VDP]

Safest way is to do the login part on a completely separate page. Then navigating to the new page with the dashboard when backend validated the credentials.

When you do the login part on the client side a nifty user can just use the console to switch cards manually and get access without login. Even when the card isn't created yet it's just an extra line of code: container.add(Ext.create('dashboard'));

But it's not always that big of a problem. Say you want to protect content coming from the backend rather then preventing unauthorized user viewing your application. You can still use the card principal and just check in the backend if the credentials are valid, send content else throw (send) exception. (like a 401 or something)

But in general we don't want to put the cat among the pigeons. So I usually leave the authentication on a separate page.

[friend]

I second what VDP says. Any production app I deploy always uses a separate login page, where it performs a full-page submit on any login attempt. This is usually a necessity if you use the ExtJs MVC design pattern and your server-size request mappings are protected by some form of role-based security.

[sujeetkr]

As per your suggestion, I separated the login page form main application. I am relying on session to check if user is logged in or not. It is working fine.

What if user deletes browser cache? In my app user remains on dashboard, but since session is cleared, he doesn't see anything. The stores are returning empty data.

Requirement: If user clears browser cache, then he should be logged out? How can I achieve this?

Is there any way in extjs to detect that cache/cookies is cleaned ?

[VDP]

If you're session has ended/is cleared/ is invalid the backend should send an "unauthorized error". (401 or such). You can listen on the 'exception (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.Server-event-exception)' event on the server proxy ( rest/ajax/jsonp/direct...) or if you're loading forms in a failure (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.Action-cfg-failure) callback. Check the exception and act on it (redirect to login page for example)

There is no native javascript on cache clear or on cookie clear/delete event.