This topic contains 6 replies, has 2 voices, and was last updated by Sean Sean 4 months ago.

Login page without sidebar/header/quickSidebar within same angular app


  • didier.lefloch@gmail.com
    Participant

    Posts: 8
    Member Reply #10302

    Hi,

    I am using Angular JS and started from the index.html page that is in admin_1_angularjs.

    It all works really well (apart from the sidebar, see other post on the topic) but I wanted to integrate one of the login page that is available in the theme without the sidebar/header/quickSidebar. A completely separate page.

    The way I tried to do it was to create abstract angular UI states called private and public and have the login state derived from public, and the other states derive from private. I started by simply using <ui-view/> as the template for both the private and public abstract states and keep sidebar/header/quickSidebar in index.html. It works well like that,  i.e. by default a user not connected is lead to the login page and upon authentication it goes to the dashboard. That works really well but obviously the sidebar/header/quickSidebar are still on the login page.

    From there I tried to replace the content that is in index.html between <!– BEGIN PAGE SPINNER –> and <!– END QUICK NAV –>  (i.e. everything within the body tag except the script tags) by a single <ui-view/> tag and move that content to the template of the private state.

    Suddenly the dashboard does not display anymore and instead I have the blank screen attached.

    It must have something to do with the order of execution of controllers or scripts but I am struggling to figure out what the problem is. I was wondering whether you could share any idea / insight / lead on this issue?

    Thank you very much for your help,

    Kind regards,

    Didier Le Floch

     

     

     

     

     

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #10306

    Hi,

    In your case you can try to separate the login page from the after login pages and upon successful login you can redirect to the application page. You can refer to below links to get started:

    http://jasonwatmore.com/post/2015/03/10/angularjs-user-registration-and-login-example-tutorial

    Thanks.


    didier.lefloch@gmail.com
    Participant

    Posts: 8
    Member Reply #10317

    Hi, thanks for the answer but I know how to do a login page with AngularJS and it works perfectly.

    My only problem is that although the HTML code of header, footer, etc. is in my page once logged in, it does not appear and I get a blank page attached in my previous post instead.

    Can you help and explain what is required, javascript code to a method, etc. to initialise the layout so that everything, header, footer, etc. appear properly. I tried Layout.init() it does not work.

    There must be something that keeps all those components hidden despite the HTML code being in the page,

    It’s a technical question that requires a precise technical answer rather than general guidelines,

    Thank you,

    Didier

     


    didier.lefloch@gmail.com
    Participant

    Posts: 8
    Member Reply #10318

    Just to be clear header, footer, sidebar, theme panel and quick sidebar do not appear, whereas they are in the HTML code.

    The only explanation is that a javascript should be called to get them to appear, can you help? Thank you


    didier.lefloch@gmail.com
    Participant

    Posts: 8
    Member Reply #10319

    I removed the page-header class in the header and it appears,

    So clearly somewhere there is a code that make page-header visible / invisible,

    And the same goes for the other includes,

    Didier


    didier.lefloch@gmail.com
    Participant

    Posts: 8
    Member Reply #10320

    page-on-load and ng-spinner-bar was the answer

    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #10330

    Hi,

    Sorry for the late reply. Yes, “page-on-load” class on the body element toggles the header visible state. If you need any further clarifications please let us know.

    Thanks.

You must be logged in to reply to this topic.