Login screen help needed

#1

Im trying to load a login screen when my app loads, but I can´t make it to load at all.
I don’t know what I´m missing.

I have this in a separate page, login.asp from the standalone example in the docs.

<div class="login-screen">
  <!-- Default view-page layout -->
  <div class="view">
    <div class="page">
      <!-- page-content has additional login-screen content -->
      <div class="page-content login-screen-content">
        <div class="login-screen-title">My App</div>
     Some content here...
  </div>
  </div>
</div>

And then I try to create and open it like this.

var loginScreen = app.loginScreen.create('.view', {
			  routes: [{
    		      path: '/login-screen/',
				  
				  url: 'https://domain.se/login.asp',
				  options: {
				  animate: false,
				  },
				},
			  ],
			});
	
app.loginScreen.open()

And in my index.html I have

<div id="login" class="view"></div>

Any input really appreciated, thanks.

#2

I’m stack with the same problem.
I need to open my login screen inside a function callback.
I have a login-test.html page which should be loaded.

I tried all of this with no lucky :triumph:

// 1)
                                                     app.loginScreen.open("/login-screen/",false );
//2)
                                                     app.loginScreen.create({url:"./pages/login-test.html"},false );
//3)
                                                     app.loginScreen.open("login",false);
//4) 
                                                     var loginScreen = app.loginScreen.create('.view', {
                                                              routes: [{
                                                                    path: '/login/',
                                                                    url: './pages/login-test.html',
                                                                    options: {
                                                                    animate: false,
                                                                    },
                                                                  },
                                                                  ],
                                                                });
                                                      app.loginScreen.open();

This is my routes.js

var f7_routes = [
 
  {
    path: '/login-screen/',
    componentUrl: './pages/login-test.html',
  },

    {
    path: '/',
    url: './index.html',
    on: {
        pageAfterIn: function (e, page) {
          // do something after page gets into the view
        },
        pageInit:  function (e, page) {
                   // HELP HERE !!! I SHOULD FORCE OPEN THE LOGIN HERE 
        }
},
  {
    path: '(.*)',
    url: './404.html',
  },
];

app.routes.push(  f7_routes);



// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/', 
  routes: f7_routes
});
#3

https://jsfiddle.net/nolimits4web/u76f6ty7/

#4

Thanks Vladimir, yes I see that the jsfiddle works, great. I had to do it in another way since i could´t wait :slight_smile:

#5

Vladimir, may be you could add this simple example to the v2 docu at login-screen section.
It’s very usefull :grinning:

#6

Thankyou for this example.

I thought this is a good place to ask about the online example also : https://framework7.io/docs/login-screen.html
The modal option works great but when you try as a page there is no way to continue. You can not type in the username/password or close the window. chrome browser

#7

Just issue in demo, it is fixed