App.js :
let $$ = Dom7;
let app = new Framework7({
root: '#app', // App root element
init: false,
view: {
pushState: true,
},
name: 'myApp', // App name
theme: 'aurora', // Automatic theme detection
panel: {
swipe: 'left',
leftBreakpoint: 768,
rightBreakpoint: 1440,
},
// App routes
routes: routes,
});
let ls = app.loginScreen.create({ el: '.login-screen' });
app.on('init', function (e) {
console.log('app is initialized')
if (sessionStorage.token) {
app.views.create('.view-main', { url: '/' });
} else {
console.log('/app.js/ no token found, please login')
ls.open(false);
}
})
$$(document).on('page:init', function (e) {
// Page Data contains all required information about loaded and initialized page
let page = e.detail;
console.log('initialized page : ' + page.name)
})
$$(document).on('page:mounted', function (e) {
// Page Data contains all required information about loaded and initialized page
let page = e.detail;
console.log('page mounted : ' + page.name)
})
$$(document).on('page:beforeremove', function (e) {
// Page Data contains all required information about loaded and initialized page
let page = e.detail;
console.log('page removed : ' + page.name)
})
app.init()
// Login Screen
$$('#my-login-screen .login-button').on('click', function () {
let username = $$('#my-login-screen [name="username"]').val();
let password = $$('#my-login-screen [name="password"]').val();
let users ={username:username,password:password}
console.log('send credentials !')
socket.emit('credentials', users)
socket.on('login',function(msg) {
if (ls.opened)
$$('#loginText').html(msg)
})
socket.on('loginSuccess',function(token) {
sessionStorage.setItem('token',token)
console.log('login success, get a token : ' + token)
let view = app.views.create('.view-main', { url: '/' });
ls.close()
})
});
$$(document).on('click', '#logout', function () {
console.log('logout')
app.preloader.show();
app.view.destroy()
sessionStorage.removeItem('token',token),
app.view.main.router.navigate('/',{reloadAll:true})
app.preloader.hide() )
})
Route.js
function checkAuth(to, from, resolve, reject) {
let router = this
let app = router.app
if (sessionStorage.token) {
console.log('you have a token')
let jwt = sessionStorage.getItem('token')
socket
.emit('authenticate', {token: jwt}) //send the jwt
.on('authenticated', function () {
console.log('token is valid !')
resolve()
})
.on('unauthorized', function(msg) {
console.log("unauthorized: " + JSON.stringify(msg.data));
throw new Error(msg.data.type);
})
} else {
console.log('no token found, please login')
router.navigate('/',{reloadAll: true})
reject()
}
}
var routes = [
{
path: '/',
url: './pages/home.html',
beforeEnter: checkAuth,
},
{
path: '/configuration/',
url: './pages/configuration.html',
},
];
index.html
<body>
<div id="app">
<div class="panel panel-left panel-reveal theme-dark">
<div class="view">
<div class="page"></div>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main"></div>
<!-- Login Screen -->
<div class="login-screen" id="my-login-screen">
<div class="view view-init">
<div class="page" data-name="login">
<div class="page-content login-screen-content">
<div class="login-screen-title">Login</div>
<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 href="#" class="item-link list-button login-button">Sign In</a>
</li>
</ul>
<div class="block-footer" id="loginText">Click "Sign In" to close Login Screen</div>
</div>
</div>
</div>
</div>
</div>
Hi everyone, i discovered Framework7 and since love it !
i tried many way to add authentification to my Web app and many can work however not with me…and because of me
Authentification works but when i click on links (ajax page)
then click back
view-main page stuck and nothing
link in panel work once : page open and close directly
Please help when you have time for it of course
thank’s.
(Sorry for English, I’m french, and loving english)