Language: ENCN

Login Screen

Framework7 comes with ready to use Login Screen layout. It could be used inside of page or popup (embedded) or as a standalone overlay.

Login Screen Layout

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

Open and close Login Screen

From HTML

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>

Using JavaScript

We can also open and close Login Screen with JavaScript, we need to look at related App methods:

myApp.loginScreen() - open Login Screen

myApp.closeModal(loginScreen) - close Login Screen

  • loginScreen - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Login Screen/Popup/Modal will be closed
<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 Events

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

Start App With Login Screen

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>

Embedded Login Screen

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