Hi,
I’m facing bit of an issue when after user is logged out and goes to login page.
Login page doesn’t recognize the submit function which is in the my-app.js file.
Appreciate your help.
my-app.js
var $$ = Dom7;
// Theme
var theme = ‘auto’;
if (document.location.search.indexOf(‘theme=’) >= 0) {
theme = document.location.search.split(‘theme=’)[1].split(’&’)[0];
}
var app = new Framework7({
// App root element
root: ‘#app’,
theme: theme,
// App Name
name: ‘CloudDev Fiji’,
// App id
id: ‘com.supportClouddev.dev’,
// Enable swipe panel
panel: {
swipe: ‘fade’,
},
// Add default routes
routes: routes,
});
var view = app.views.create(’.view-main’);
$$(’#login’).submit(function(e){
e.preventDefault();
var formData = app.form.convertToData('#login');
// alert(JSON.stringify(formData));
formData.api_token = key;
formData.username = username;
formData.passkey = passkey;
var action = url+‘login’;
app.preloader.show();
app.request({
crossDomain: true,
url: action,
data: formData,
method:'POST',
statusCode: {
0: function (xhr)
{
app.preloader.hide();
alert('Connection Timed out!!!');
},
404: function (xhr)
{
app.preloader.hide();
alert('page not found');
},
422: function (xhr)
{
response = JSON.parse(xhr.responseText);
textdata = response.message;
errors = response.errors;
app.preloader.hide();
var notificationWithButton = app.notification.create({
title: app.name,
subtitle: 'Error!!!',
text: textdata,
closeButton: true,
});
notificationWithButton.open();
if(errors.email)
{
$$('#div-email').addClass('item-input-with-error-message');
$$('#div-email').addClass('item-input-invalid');
}
if(errors.password)
{
$$('#div-password').addClass('item-input-with-error-message');
$$('#div-password').addClass('item-input-invalid');
}
},
401: function (xhr)
{
app.preloader.hide();
textdata = 'Error, Incorrect credentials !!!'
var notificationWithButton = app.notification.create({
title: app.name,
subtitle: 'Error!!!',
text: textdata,
closeButton: true,
cssClass:'bg-color-pink',
});
notificationWithButton.open();
},
200:function (data)
{
app.preloader.hide();
response = JSON.parse(data.responseText);
if(response.status === 401)
{
$$('#div-email').addClass('item-input-with-error-message');
$$('#div-email').addClass('item-input-invalid');
$$('.item-input-error-message').html(textdata);
}
if(response.token)
{
var notificationSuccess = app.notification.create({
title: app.name,
subtitle: 'Login Successful !!!',
text: 'Redirecting....',
closeTimeout: 3000,
cssClass:'bg-color-green',
});
notificationSuccess.open();
setSessionData(response);
view.router.navigate("/home/");
}//if ends
}//status code ends 200
},
error: function(jqXHR, textStatus){
if(textStatus === 'timeout')
{
app.preloader.hide();
textdata = 'Connection Timed Out';
var notificationWithButton = app.notification.create({
title: app.name,
subtitle: 'Error!!!',
text: textdata,
closeButton: true,
});
notificationWithButton.open();
}
if(textStatus === 0)
{
app.preloader.hide();
textdata = 'not working';
var notificationWithButton = app.notification.create({
title: app.name,
subtitle: 'Error!!!',
text: textdata,
closeButton: true,
});
notificationWithButton.open();
}
}
});
});
global.js
//application key
var key = ‘123455k’;
var username = ‘test_api’;
var passkey = ‘sandip1234’;
// var url= ‘http://localhost/clouddev/api/’;
var url= ‘http://192.168.8.102/clouddev/api/’;
var response;
var datatext;
var notificationError;
var notificationSuccess;
var storage = window.localStorage;
// --------------------------------------------------------------------
// Set Session Data
// --------------------------------------------------------------------
function showNotification(type,title,textdata,timeout_bool,time)
{
if(type === ‘error’)
{
css = ‘bg-color-pink’;
}
if(type === ‘success’)
{
css = ‘bg-color-green’;
}
if(timeout_bool)
{
notificationError = app.notification.create({
title: app.name,
subtitle: title,
text: textdata,
closeButton: false,
closeTimeout: time,
cssClass:css
}).open();
}
else
{
notificationError = app.notification.create({
title: app.name,
subtitle: title,
text: textdata,
closeButton: true,
cssClass:css
}).open();
}
}
function setSessionData(msg)
{
storage.setItem(‘TOKEN’, msg.token);
storage.setItem(‘menu’, ‘0’);
}
function checkSession()
{
var check = storage.getItem(‘auth’);
if(check) {
console.log(‘rejected’);
reject(’/about/’);
} else {
resolve(’/’);
console.log(‘resolved’);
}
}
function checkAuth(to, from, resolve, reject) {
console.log(storage);
var menu = storage.getItem(‘menu’);
if(menu === ‘0’)
{
console.log(‘get_menus ‘+storage.getItem(‘menu’));
load_menus();
storage.removeItem(‘menu’);
resolve(’/home/’);
}
var formData = {};
action = url+‘status’;
app.request({
dataType : ‘jsonp’,
crossDomain: true,
url: action,
method:‘GET’,
“headers”: {
“authorization”:"Bearer "+storage.getItem(‘TOKEN’)
},
statusCode: {
0: function (xhr)
{
reject(’/login/’);
},
404: function (xhr)
{
reject(’/login/’);
},
422: function (xhr)
{
reject(’/login/’);
},
401: function (xhr)
{
reject(’/login/’);
},
200:function (data)
{
app.preloader.hide();
response = JSON.parse(data.responseText);
if(response.status === 401)
{
reject('/login/');
}
if(response.status === 502)
{
reject('/login/');
}
console.log(response.error);
if(response.error === 'TOKEN_INVALID')
{
app.panel.close();
mainView.router.navigate('/login-screen/');
}
if(response.data === 0)
{
resolve('/home/');
}
}
}
});//AJAX Call Finished
}
function load_menus()
{
app.preloader.show();
var formData = {};
action = url+‘get_menus’;
app.request({
dataType : ‘jsonp’,
crossDomain: true,
url: action,
method:‘GET’,
“headers”: {
“authorization”:"Bearer "+storage.getItem(‘TOKEN’)
},
statusCode: {
0: function (xhr)
{
app.preloader.hide();
showNotification(‘error’,‘Oops !!!’,‘Something went wrong.’);
},
404: function (xhr)
{
app.preloader.hide();
showNotification(‘error’,‘Oops !!!’,‘Something went wrong.’);
},
422: function (xhr)
{
app.preloader.hide();
showNotification(‘error’,‘Oops !!!’,‘Something went wrong.’);
},
500: function (xhr)
{
app.preloader.hide();
showNotification(‘error’,‘Oops !!!’,‘Something went wrong.’);
},
401: function (xhr)
{
app.preloader.hide();
showNotification(‘error’,‘Oops !!!’,‘Something went wrong.’);
},
200:function (data)
{
app.preloader.hide();
response = JSON.parse(data.responseText);
if(response.status === 502)
{
showNotification('error','Oops !!!','Something went wrong.');
}
if(response.data === 0)
{
showNotification('success','Yah !!!','Menus loaded.',true,3000);
$$('#menus').html(response.menus);
// app.panel.get('.panel-right-2').open();
}
}
}
});
}
function logout()
{
view.router.clearHistory();
app.panel.destroy(’.panel-right-2’);
view.router.navigate(’/login-screen/’);
}
routes.js
var routes = [
{
name:‘login-screen’,
path: ‘/login-screen/’,
url: ‘./index.html’,
options: {
transition: ‘f7-dive’,
},
},
{
path: ‘/about/’,
url: ‘./pages/about.html’,
options: {
transition: ‘f7-dive’,
},
},
{
path:’/home/’,
url:’./pages/home.html’,
beforeEnter:[checkAuth],
},
{
path: ‘(.*)’,
url: ‘./pages/404.html’,
},
];
index.html
My App <!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="login-screen" class="page" >
<!-- Top Navbar -->
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="/about/" class="link">About</a>
<!-- <a href="/to/" class="link">Link 2</a> -->
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<div class="page no-toolbar no-navbar no-swipeback login-screen-page">
<div class="page-content login-screen-content">
<div class="login-screen-title"><img src="img/Cloud-Dev-Logo.png" width="200px"></div>
<form class="list" id="login" action="POST">
<ul>
<li class="item-content item-input item-input-with-value" id="div-email">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="email" placeholder="Your username" id="email" name="email" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input" id="div-password">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" placeholder="Your password" id="password" name="password" required validate>
</div>
</div>
</li>
</ul>
<div class="block block-strong row">
<div class="col"><button class="button convert-form-to-data" type="submit">Login</button></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/global.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>