Hello all, I am very new to framework7. I am creating an App where there will be login screen. On login button pressed I am saving username & token in localstorage and navigating to dashboard . But its not working. The values are getting in localstorage but redirection to dashbord is not working. Also on app initialize i am checking if localstorage is set or not, if its there then redirect to dashboard or else login page will open.
here is my login code.
////////////////login.html
My App
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar -->
<!-- <div class="navbar">
<div class="navbar-inner">
<div class="title" style="margin-right: auto;margin-left: auto;display: block;">Awesome App</div>
</div>
</div> -->
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<p class="powered_by_footer">Powered By Framework7</p>
<!-- <a href="#" class="link">Link 2</a> -->
</div>
</div>
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page no-navbar no-toolbar no-swipeback" >
<!-- Scrollable page content -->
<div class="page-content">
<div class="page login-screen-page">
<div class="page-content login-screen-content">
<div class="login-screen-title">
<div class="center">
<img class='index_page_logo' src='imgs/dish.png' />
</div>
</div>
<form method="post">
<div class="list">
<ul>
<li class="item-content item-input item-input-with-info">
<div class="item-inner">
<div class="item-title item-label">Email/Mobile</div>
<div class="item-input-wrap">
<input type="text" id='username' name="username" placeholder="Your Email / Mobile" required validate>
<span class="input-clear-button"></span>
<div class="item-input-info"></div>
</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" id='password' name="password" placeholder="Your password" required validate>
<span class="input-clear-button"></span>
<div class="item-input-info"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<div class="block">
<div class="row">
<button id='login' class="col button button-fill">LOG IN</button>
<!-- <a id='login' class="col button button-fill link" href='/dashboard/' >LOG IN</a> -->
</div>
</div>
<div class="block-footer">
<p>New User ? <a href='/register/'>Register Here</a></p>
<p>Forgot Password ? <a href="/forgot-password/" class="close-login-screen">Click Here</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library Bundle JS-->
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript">
//page
// var $$ = Dom7;
// $$(document).on('page:init', '.login-screen-page', function (e){
// alert('Index');
// });
</script>
/////////////my app.js
// Init App
var app = new Framework7({
id: ‘test’,
root: ‘#app’,
routes: routes
});
var $$ = Dom7;
var mainView = app.views.create(’.view-main’,{
dynamicNavbar: true
});
var username = localStorage.getItem(‘username’); // CHECK USER LOGIN
var password = localStorage.getItem(‘password’); // CHECK USER LOGIN
var is_logged_in = localStorage.getItem(‘is_logged_in’); // CHECK USER LOGIN
if(username !="" && username !=null && password !="" && password !=null)
{
console.log(‘dashboard’);
mainView.router.load({url:‘pages/home.html’, ignoreCache:true, reloadCurrent:true });
}
else
{
console.log(‘login’);
mainView.router.load({url:‘index.html’, ignoreCache:true, reloadCurrent:true });
}
//login function
$$(’#login’).on(‘click’,function()
{
alert(‘Login pressed’);
var username = $$(’#username’).val();
var password = $$(’#password’).val();
if(username != '' && password !='')
{
alert('not blank');
localStorage.setItem("username", username);
localStorage.setItem("password", password);
localStorage.setItem("is_logged_in", '1');
mainView.router.load({url:'pages/home.html', ignoreCache:true, reloadCurrent:true });
}
else
{
alert('Please enter username & password');
}
});
/////////////////////////////////////////////////////////////////
///////////////////////route.js
var routes = [
// Index page
{
path: ‘/’,
url: ‘./index.html’,
name: ‘home’,
options: {
transition: ‘f7-parallax’,
},
},
// Components
{
path: ‘/dashboard/’,
url: ‘./pages/home.html’,
name:‘dashboard’,
options: {
transition: ‘f7-parallax’,
},
},
]
///home.html
<!-- TOP NAVBAR-->
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Awesome App</div>
<div class="right">
<a href="#" class="link button panel-open" data-panel=".panel-left">
<i class="icon icon-bars"></i>
<span>Menu</span>
</a>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block">
<div class="content-block-inner">
<div class="card">
<div class="card-header">Dashboard:</div>
</div>
</div>
</div>
</div>