OnsenUi Angular and Login
I am trying to develop a mobile app with onsen + cordova
What I need:
Load the login.html page when launching the application. If the app detects that the user is logged in, it is redirected to home.html
For each "secure page" I want to call the function that was found during user registration. If I don't want to redirect the login page.
All "protected pages" have a slide menu.
After what I did:
index.html
<html ng-app="app2gest">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<title>App2Gest</title>
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components.css"/>
<!-- Download also your onsen-css-components.css stylesheet using the integrated CSS Components Theme Roller
http://components.onsenui.io -->
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-theme.css"/>
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-default.css"/>-->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-basic-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-dark-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-sunshine-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-purple-theme.css"/> -->
<link rel="stylesheet" type="text/css" href="css/angular-carousel.css"/>
<!-- NVD3 re-usable charting library (based on D3) -->
<link rel="stylesheet" type="text/css" href="css/nvd3/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left" max-slide-distance="85%" swipable="true" swipe-target-width="100" var="menu">
</ons-sliding-menu>
<!-- Javascripts -->
<script type="text/javascript" src="vendors/onsen/js/angular/angular.js"></script>
<script type="text/javascript" src="js/angular-touch.js"></script>
<script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/lodash.underscore.min.js"></script>
<script type="text/javascript" src="js/bluebird.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/app-local-storage.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
home.html
<ons-page ng-controller="HomeController" ng-init="LoginUtility.checkLogin()">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button onclick="ons.slidingMenu.toggleMenu()">
<ons-icon icon="bars">
</ons-toolbar-button>
</div>
<div class="center">App2Gest</div>
<div class="right">
<ons-toolbar-button onclick="appNavigator.pushPage('settings.html', {title: 'Settings', animation: 'slide'})">
<ons-icon icon="gears">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<section class="home-grid">
<div class="grid-menu">
<div class="centering-and-alignment" ng-repeat="row in items| partition:2">
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="showDetail(($parent.$index * row.length) + $index);">
<ons-icon icon="{{item.icon}}"></ons-icon>
<div class="grid-menu-item-label">{{item.title}}</div>
</div>
</div>
</div>
</section>
</ons-scroller>
<div>
</div>
</ons-page>
login.html
<ons-navigator title="Navigator" var="appNavigator">
<ons-page sliding-menu-ignore="true" ng-controller="LoginController" ng-init="LoginUtility.checkLogin()">
<ons-toolbar>
<div class="left">
</div>
<div class="center">App2Gest - Login</div>
</ons-toolbar>
<div class="main-image-wrapper">
<i class="fa fa-sign-in main-image"></i>
</div>
<form ng-submit="LoginUtility.login()">
<input type="email" class="text-input--underbar" placeholder="Username" value="" ng-model="username">
<input type="password" class="text-input--underbar" placeholder="Password" value="" ng-model="password">
<br>
<button class="button login-button">Log in</button>
<br>
</form>
</ons-page>
</ons-navigator>
app.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
ons.setDefaultDeviceBackButtonListener(function() {
if (navigator.notification.confirm("Vuoi chiudere l\'app?",
function(index) {
if (index == 1) { // OK button
navigator.app.exitApp(); // Close the app
}
}
))
;
});
// Open any external link with InAppBrowser Plugin
$(document).on('click', 'a[href^=http], a[href^=https]', function(e) {
e.preventDefault();
var $this = $(this);
var target = $this.data('inAppBrowser') || '_blank';
window.open($this.attr('href'), target);
});
// Initialize Push Notifications
// Uncomment the following initialization when you have made the appropriate configuration for iOS - http://goo.gl/YKQL8k and for Android - http://goo.gl/SPGWDJ
//app.initPushwoosh();
},
// Update DOM on a Received Event
receivedEvent: function(id) {
//var parentElement = document.getElementById(id);
//var listeningElement = parentElement.querySelector('.listening');
//var receivedElement = parentElement.querySelector('.received');
//listeningElement.setAttribute('style', 'display:none;');
//receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
},
// Register device for Push Notifications
initPushwoosh: function() {
var pushNotification = window.plugins.pushNotification;
if (device.platform == "Android") {
registerPushwooshAndroid();
}
if (device.platform == "iPhone" || device.platform == "iOS") {
registerPushwooshIOS();
}
}
};
(function() {
var app = angular.module('app2gest', ['onsen.directives', 'ngTouch', 'ngSanitize', 'appLocalStorage', 'LocalStorageModule', 'ui.event']);
app.controller("LoginController", function($scope, LoginUtility) {
$scope.LoginUtility = LoginUtility;
$scope.LoginUtility.setScope($scope);
});
// Home Controller
app.controller('HomeController', function($scope, Data, LoginUtility) {
$scope.items = Data.items;
$scope.LoginUtility = LoginUtility;
$scope.LoginUtility.setScope($scope);
$scope.showDetail = function(index) {
var selectedItem = $scope.items[index];
Data.selectedItem = selectedItem;
if (selectedItem.type === 'internal') {
$scope.ons.navigator.pushPage(selectedItem.url, {title: selectedItem.title, animation: 'slide'});
}
else {
window.open(selectedItem.url);
}
};
});
app.controller('CaricoHomeController', function($scope) {
});
// Menu Controller
app.controller('MenuController', function($scope, MenuData) {
$scope.items = MenuData.items;
$scope.showDetail = function(index) {
var selectedItem = $scope.items[index];
MenuData.selectedItem = selectedItem;
$scope.ons.slidingMenu.setMainPage(selectedItem.page, {closeMenu: true});
};
});
// Barcodescanner Controller
app.controller('BarcodescannerController', function($scope) {
$scope.scan = function() {
cordova.plugins.barcodeScanner.scan(function(result) {
$scope.result = result;
$scope.$apply();
}, function(error) {
$scope.error = error;
$scope.$apply();
});
}
});
//dummy implementation
app.factory('LoginUtility', function() {
var username;
var password;
var scopeVar;
var loginObj = {};
loginObj.setScope = function(elem) {
scopeVar = elem;
};
loginObj.isGuest = function() {
return username == null;
};
loginObj.login = function() {
console.log('login called');
username = scopeVar.username;
password = scopeVar.password;
//dummy login, we assume login always succeded
scopeVar.ons.slidingMenu.setMainPage("home.html", {closeMenu: true});
};
loginObj.logout = function() {
username = null;
};
loginObj.checkLogin = function() {
if (this.isGuest() && **imNotInLoginPage()**) {
scopeVar.ons.slidingMenu.setMainPage("login.html", {closeMenu: true});
}
};
return loginObj;
});
// Filter
app.filter('partition', function($cacheFactory) {
var arrayCache = $cacheFactory('partition');
var filter = function(arr, size) {
if (!arr) {
return;
}
var newArr = [];
for (var i = 0; i < arr.length; i += size) {
newArr.push(arr.slice(i, i + size));
}
var cachedParts;
var arrString = JSON.stringify(arr);
cachedParts = arrayCache.get(arrString + size);
if (JSON.stringify(cachedParts) === JSON.stringify(newArr)) {
return cachedParts;
}
arrayCache.put(arrString + size, newArr);
return newArr;
};
return filter;
});
})();
For the dummy imNotInLoginPage () function at the start of the app, if appNavigator.getCurrentPage () is running, but appNavigator.getCurrentPage (). page is empty
After login, if I call appNavigator.getCurrentPage () it is undefined and I get js undefined error.
How can I check if I am on a login page or a different one?
And a very big question, is this a good estimate in angular?
Otherwise, how can I achieve this goal with angular + onsen ???
Onsen theme support is very poor. I found other solutions using angular route, but they are not onsen compatible.
I am going crazy to implement this standard thing. I hope someone can help me by providing complete example code.
thank
+3
source to share
1 answer
I created a sample. If I misunderstand what you mean, please tell me.
index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body>
<ons-navigator var="myNavigator" page="login.html">
</ons-navigator>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['onsen']);
myApp.controller('loginCtrl', function($scope) {
if(checkLogin()) {
openProtectedPage();
}
function openProtectedPage() {
alert("you are already logged in. open protected page");
setTimeout(function() {
myNavigator.pushPage('protected.html');
}, 1000);
}
function checkLogin() {
//temporariry return true;
// please write your own logic to detect user login;
return true;
}
});
login.html
<ons-page ng-controller="loginCtrl">
<ons-toolbar>
<div class="center">Login Page</div>
</ons-toolbar>
<div style="text-align: center; margin-top: 30px;">
Email: <input type="text" />
</div>
<div style="text-align: center; margin-top: 30px;">
Password: <input type="text" />
</div>
<div style="text-align: center;margin-top: 30px;">
<ons-button>
Sign In
</ons-button>
</div>
</ons-page>
protected.html
<ons-page>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</ons-page>
I hope this example helps you.
+6
source to share