Migrate login v1 to v3

Questions
1

Hello, I’m trying to migrate my app in v1 to v3, to benefit from all the news. The first difficulty encountered is the new management of the routes. Above all with the login page. You can help me. Here is the code I use on v1:

At the start of the effect app a check if the user has logged in this way:

var user = window.localStorage.getItem ("user");

if (! (user)) {
myApp.loginScreen ();
} else {
// code app
}

If the user is not present I open the modal to login or register

<div class="login-screen layout-white">
	<div class="view">
		<div class="page">
			<div class="page-content login-screen-content">
				
				<form action="#" method="post" name="form_login" id="form_login">
					...	
				</form>
			</div>
		</div>
	</div>
</div><!-- end login-screen -->

with v3 how could I do?

In summary I have the root page index.html that when the app opens checks if the user is present otherwise opens the login-screen modal.

Thank

2

nobody can help me

Thank

3

Check the v3 login screen API http://framework7.io/docs/login-screen.html#login-screen-app-methods

5

@nolimits4web

Hi, I did it this way is correct?

file index.html

 <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">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      <input type="text" name="username" placeholder="Your username">
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      <input type="password" name="password" placeholder="Your password">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li><a class="item-link list-button" href="#">Sign In</a></li>
              </ul>
              <div class="block-footer">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p><a class="link login-screen-close" href="#">Close Login Screen</a></p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

app.js

var mainView = app.views.create('.view-main', {
  on: {
    pageInit: function() {
      console.log('page init')
// example, here I will put my verification code
      var a = 1;
      if (a == 10) {
        app.loginScreen.open('.login-screen');
      }
    }
  }
})
6

Yes, looks correct. But it is better to use Router’s async feature for this

7