Framework7 comes with ready to use Login Screen layout. It could be used inside of page or popup (embedded) or as a standalone overlay.
First of all, let's look at the standalone Login Screen layout. It behaves almost in the same way as Popup:
<body>
...
<!-- Should be a direct child of BODY -->
<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>
<!-- Login form -->
<form>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Username</div>
<div class="item-input">
<input type="text" name="username" placeholder="Username">
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" placeholder="Password">
</div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<a href="#" class="item-link list-button">Sign In</a>
</li>
</ul>
<div class="list-block-label">Some text with login information.</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
Note that all elements you see inside of <div class="login-screen"> are optional, but you can use them as boilerplate layout for your Login form
It is possible to open and close Login Screen using special classes on links:
To open login screen we need to add "open-login-screen" class to any HTML element (prefered to link)
To close login screen we need to add "close-login-screen" class to any HTML element (prefered to link)
According to above note:
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-login-screen">Open Login Screen</a></p>
</div>
</div>
...
<div class="login-screen">
<div class="view">
<div class="page">
<div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<form>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Username</div>
<div class="item-input">
<input type="text" name="username" placeholder="Your username">
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" placeholder="Your password">
</div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li><a href="#" class="item-link list-button">Sign In</a></li>
</ul>
<div class="list-block-label">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="close-login-screen">Close Login Screen</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
...
</body>
We can also open and close Login Screen with JavaScript, we need to look at related App methods:
myApp.loginScreen(loginScreen, animated) - open Login Screen
myApp.closeModal(loginScreen, animated) - close Login Screen
<body>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-login">Open Login Screen</a></p>
</div>
</div>
...
<div class="login-screen">
... login screen content ...
</div>
...
</body>
var myApp = new Framework7();
var $$ = Dom7;
$$('.open-login').on('click', function () {
myApp.loginScreen();
});
Login Screen has the same events as Modals, they could be useful when you need to do something in JavaScript when Login Screen opened/closed
Event | Target | Description |
---|---|---|
loginscreen:open | Login Screen Element<div class="login-screen"> | Event will be triggered when Login Screen starts its opening animation |
loginscreen:opened | Login Screen Element<div class="login-screen"> | Event will be triggered after Login Screen completes its opening animation |
loginscreen:close | Login Screen Element<div class="login-screen"> | Event will be triggered when Login Screen starts its closing animation |
loginscreen:closed | Login Screen Element<div class="login-screen"> | Event will be triggered after Login Screen completes its closing animation |
In many cases we need to see Login Screen opened as App's first screen. To make it visible on load, we just need to add "modal-in" class to Login Screen overlay:
<body>
...
<div class="login-screen modal-in">
... login screen content ...
</div>
</body>
It is also possible to embed Login Screen into the page or popup. Let's look on the example of Login Screen inside of page:
index page:
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center">Embedded Login Screen</div>
<div class="right"></div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="login-screen-page.html" class="open-login-screen">Open page with Login Screen</a></p>
</div>
</div>
</div>
login-screen-page.html:
<div data-page="login-screen" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<form>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Username</div>
<div class="item-input">
<input type="text" name="username" placeholder="Your username"/>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" placeholder="Your password"/>
</div>
</div>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li><a href="#" class="item-link list-button">Sign In</a></li>
</ul>
<div class="list-block-label">
<p>Click Sign In to close Login Screen</p>
</div>
</div>
</form>
</div>
</div>
my-app.js
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
myApp.onPageInit('login-screen', function (page) {
var pageContainer = $$(page.container);
pageContainer.find('.list-button').on('click', function () {
var username = pageContainer.find('input[name="username"]').val();
var password = pageContainer.find('input[name="password"]').val();
// Handle username and password
myApp.alert('Username: ' + username + ', Password: ' + password, function () {
mainView.goBack();
});
});
});
Note that on login screen page we have additional "no-navbar", "no-toolbar" and "no-swipeback" classes to hide navigation element from user