I am trying to create a user login page using AngularJS and firebase authentication (Email and password).
I looked up a couple of tutorials online and wrote the codes, but it does not seem to work.
Below are my codes.
1) page.html
<ion-view id="page646">
<ion-content padding="true" class="has-header">
<form>
<label class="item item-input">
<span class="input-label">EMAIL</span>
<input type="email" placeholder="" ng-model="user.email">
</label>
<label class="item item-input">
<span class="input-label">PASSWORD</span>
<input type="text" placeholder="" ng-model="user.pass">
</label>
<div style="margin-right:-20px;">
<button style="left:-10px;" class="button button-positive button-full"ng-click="signIn()">SIGN IN</button>
</div>
</form>
</ion-content>
</ion-view>
2) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js">
</script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js">
</script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js">
</script>
<!-- AngularFire -->
<script
src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js">
</script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="lib/ngCordova/"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
3) controller.js
.controller('pASSWORDGMCtrl', ['$scope', '$stateParams', 'aaaService',
function ($scope, $stateParams, aaaService) {
$scope.user = {
email:"",
pass:"",
}
$scope.signIn = function(){
aaaService.login($scope.user.email, $scope.user.pass);
}
aaaService.status();
$scope.signOut = function(){
aaaService.signout();
}
}])
4) Firebase-aaa.js
angular.module('firebaseAaa', ['firebase'])
.factory('aaaService', ['$firebaseArray','$firebaseAuth',
function($firebaseArray, $firebaseAuth){
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
if(!firebase.apps.length){
firebase.initializeApp(config);
}
var ref;
var adminArray;
return{
status: function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
// if(loggingIn){
alert("Login success.");
ref = firebase.database().ref().child("Admin/" + user.uid);
adminArray = $firebaseArray(ref);
}
// loggingIn=false;
else {
// No user is signed in.
}
});
},
login: function(email, pass) {
firebase.auth().signInWithEmailAndPassword('abc#gmail.com', 'aaa').catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error signing in user: ", errorCode + " " + errorMessage);
});
},
signout: function() {
firebase.auth().signOut().then(function() {
// Sign-out successful.
alert("You are now signed out.");
// loggingIn= false;
}).catch(function(error) {
// An error happened.
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error signout: ", errorCode + " " + errorMessage);
});
},
}
}])
When I was trying out the codes, I got 'not logged in'.
I was watching at the firebase auth tutorial, there was a part where he did not enable the email and password auth. While he was trying the codes, he got an error in the console stating that the firebase email and password auth have yet been enabled.
I tried disabling mine, hoping to see the same error, but it did not turn out that way. It only says 'not logged in'.
I could not find the problem to it.
My question is how do i get a successful even for signInWithEmailAndPassword.
You need to move these bits, out of the sign in function
$scope.user = {
email:"",
pass:"",
}
It re-initialises the object "user" to empty value, plus the onAuthStateChanged should be outside too.
Related
I am creating a firebase login system. For the moment I am trying to assign the registration system to the firebase database system. For some reason I am getting this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.9/$injector/unpr?p0=%24firebaseProvider%20%3C-%20%24firebase%20%3C-%20regCtrl
I've checked the error documentation and it talks about the dependency and spelling being correct. The error seems to be happening when I go on to the registration page:
Here is the app.js:
var app= angular.module('myApp',[]);
app.controller('logCtrl',['$scope', function ($scope) {
$scope.trylogin=function trylogin() {
var username= $scope.login;
var pass = $scope.password;
if (pass.length<6|| pass.length===""){
alert('Password too short');
return false;
}
if(username.length<4|| username.length ===""){
alert('Username is too short');
return false;
}
else{
location.replace('http://localhost:63342/firebaseLogin/test.html');
}
}
}]);
app.controller('regCtrl',['$scope', '$firebase', '$firebaseAuth', function ($scope, $firebase, $firebaseAuth) {
var ref= firebase.database().ref();
var auth=$firebaseAuth();
$scope.register=function () {
auth.$createUserWithEmailAndPassword(
$scope.userregister,
$scope.passregister
).then(function (reguser) {
$scope.message="Thanks for registering " + $scope.userregister;
}).catch(function (error) {
$scope.message="invalid";
});
console.log('it works');
}
}])
here is the register.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Registration page</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-route.min.js"></script>-->
<script src="app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<script>
var config={
apiKey: "AIzaSyAD5cGUvMlkj-qTgfRmZfyB86b0q_6pFvc",
authDomain: "core-waters-237812.firebaseapp.com",
databaseURL: "https://core-waters-237812.firebaseio.com",
projectId: "core-waters-237812",
storageBucket: "core-waters-237812.appspot.com",
messagingSenderId: "474778505291",
appId: "1:474778505291:web:1d7b0baa064a325854fdce"
}
firebase.initializeApp(config);
</script>
</head>
<body ng-app="myApp" ng-controller="regCtrl">
<form name="myForm" novalidate ng-submit="register()">
<label for="reguser"> Username</label>
<input ng-model="userregister" id="reguser" type="text">
<br>
<label for="regpass">Password</label>
<input ng-model="passregister" id="regpass" type="text">
<br>
<button type="button" ng-disabled="myForm.$invalid">Register</button>
</form>
</body>
</html>
First you need to add the AngularJS bindings for Firebase from here AngularFire and then add it as dependency.
In your example you are injecting $firebase service in your regCtrl controller but you never declared its module as a myApp dependency.
var app= angular.module('myApp',['firebase']);
I'm building a simple weather app that gets the weather for any city.
For this API there are two stages:
1) you enter a name of a city, get its "where on earth ID" (woeid).
2) use the woeid to search for the weather.
This is the API: https://www.metaweather.com/api/
For example:
https://www.metaweather.com/api/location/search/?query=london
You get this JSON:
[{"title":"London","location_type":"City","woeid":44418,"latt_long":"51.506321,-0.12714"}]
For starters, just to get the woeid would be great.
It fails to connect to the API but when i type it manually it works.
app.js:
var app = angular.module('weatherApp', []);
app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {
function fetchWoeid(city) {
weatherService.getWoeid(city).then(function(data){
$scope.place = data;
});
}
fetchWoeid('london');
$scope.findWoeid = function(city) {
$scope.place = '';
fetchWoeid(city);
};
}]);
app.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWoeid (city) {
var deferred = $q.defer();
$http.get('https://www.metaweather.com/api/location/search/?query=' + city)
.success(function(data){
deferred.resolve(data);
})
.error(function(err){
console.log('Error retrieving woeid');
deferred.reject(err);
});
return deferred.promise;
}
return {
getWoeid: getWoeid
};
}]);
index.html:
<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="weatherCtrl">
<form>
<div class="form-group">
<input class="form-control" type="text" ng-model="city" placeholder="e.g. london" />
<input class="btn btn-default" type="submit" value="Search" ng-click="findWoeid(city)" />
</div>
</form>
<p ng-show="city">Searching the forecasts for: {{city}}</p>
<div>
<h1>WOEID is: {{ place }}</h1>
<a ng-click="findWeather('london'); city = ''">reset</a>
</div>
</body>
</html>
It appears you are having a Cross Origin problem. It doesn't look like Metaweather supports JSONP, so the fix for this is a bit more complex. You need to be running your page through a server that can support a proxy. One such example is https://www.npmjs.com/package/cors-anywhere. If you set that up using the defaults then change your AJAX call to:
$http.get('http://localhost:8080/https://www.metaweather.com/api/location/search/?query=' + city)
I am making an AngularJS app,in which I am using Express as backend. The problem is,whenever I run my app
angular.js:36Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.14/$injector/modulerr?p0=starter&p1=….com%2Fajax%2Flibs%2Fangularjs%2F1.3.0-beta.14%2Fangular.min.js%3A18%3A139)
Above error occurs in browser's console. I have tried many solutions but none of them worked.
My index.html is
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Routing example</title>
<script src="hhtp://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
<script src="http://localhost/try/www/js/employeeCtrl.js"></script>
</body>
</html>
My login.html is
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Daily UI - Day 1 Sign In</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://localhost/try/www/css/animate.css">
<link rel="stylesheet" href="http://localhost/try/www/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body ng-app="starter" >
<div ng-controller="loginCtrl">
<div class="top">
<h1 id="title" class="hidden"><span id="logo"></span></h1>
</div>
<div class="login-box animated fadeInUp">
<div class="box-header">
<h2>Log In</h2>
</div>
<form method="POST">
<label for="username">Username</label>
<br/>
<input type="text" name = "login" ng-model="loginId">
<br/>
<label for="password">Password</label>
<br/>
<input type="password" name = "password" ng-model = "loginPassword" >
<br/>
<button type="submit" ng-click = "loginFunc()">Sign In</button>
<br/>
Add New Order
</form>
<p class="small">Forgot your password?</p>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
</body>
</html>
My app.js is
var app = angular.module('starter', ['ngRoute','ngCordova']);
console.log("error")
app.run(function( $cordovaSQLite) {
db = window.openDatabase("marketplace.db", '1', 'my', 1024 * 1024 * 100);
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS user_master_vendor (server_db_column_id integer, name text)");
console.log("browser");
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'template/login.html',
controller: 'loginCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
app.run(function($rootScope){
$rootScope.project_url = 'http://127.0.0.1:8081';
})
app.controller('loginCtrl',function($scope, $http, $rootScope ,$location, $cordovaSQLite){
$scope.loginFunc = function($scope){
var loginPassword = $scope.loginPassword;
var loginId = $scope.loginId;
console.log(" loginCtrl");
$scope.user = {
loginId : loginId,
loginPassword : loginPassword
}
alert($scope.user.loginId);
var loginUrl = $rootScope.project_url + '/login_post';
$http({
method : 'POST',
url : loginUrl,
headers: {
'Content-Type': undefined
},
params: {
loginId : loginId,
loginPassword : loginPassword
},
dataType: 'json',
processData : false
}).then(function successCallback(response) {
console.log(response.data.result[0].Emp_Id);
console.log(response.data.result[0].Emp_Password);
console.log("successCallback called");
var server_db_column_id = response.data.result[0].Id;
var user_name = response.data.result[0].Name;
$cordovaSQLite.execute(db, 'INSERT INTO user_master_vendor (server_db_column_id, name) VALUES (?, ?)',
[server_db_column_id, user_name])
.then(function(result) {
console.log("Data Saved Successfully in user_master at INSERT ID -> " + result.insertId);
console.log("Data user_empId-> " + user_empId + ", user_empPassword->" +user_empPassword);
},
function(error) {
$scope.showp = "Data could not be saved in user_master_vendor Error -> " + error.message;
console.log(error);
});
}, function errorCallback(response) {
alert("failure: "+response);
});
}
});
Thanks a lot for helping me.I have found the soultion for the problem,it required downloading angular-route module using npm.The below link helped me.
https://docs.angularjs.org/api/ngRoute
I followed all the steps and was able to solve the problem.
I just started angularfire Auth! And i get this problem when i sign in, And if you guys have any advice on how to make a email registration form i would be more than glad to hear that . Here is the error i receive :
Error: Firebase.authWithPassword failed: First argument must be a valid object.
Here is my
script.js:
var app = angular.module('LoginApp', ["firebase"])
app.controller('AuthCtrl', [
'$scope', '$rootScope', '$firebaseAuth', function($scope, $rootScope, $firebaseAuth) {
var ref = new Firebase('https://uniquecoders.firebaseio.com/')
$scope.auth = $firebaseAuth(ref);
$scope.signIn = function(){
var ref = new Firebase('https://uniquecoders.firebaseio.com/')
ref.authWithPassword('email', {
email: $scope.signInEmail,
password: $scope.signInPassword
}, function(error,userData){
if(error = 'INVALID_EMAIL'){
alert("The Email you entered is Invalid")
}
else if(error = 'INVALID_PASSWORD'){
alert("The Password you entered is Invalid")
}
else{
console.log(error)
}
})
}
}]
);
and our Index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src = "http://s.codepen.io/assets/libs/modernizr.js"></script>
<script type="text/javascript" src="script.js"></script>
<meta charset="UTF-8">
<meta name="X-UA-Compatible" content="">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Login - UniqueCoders</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="LoginApp">
<div id="page">
<header class="container">
<div class="row">
<img src="https://lh5.googleusercontent.com/-UXr_le-DEc4/VogTLE2yDfI/AAAAAAAAAfI/9RycRDVGNu8/w993-h207-no/uniquecoders.png" alt="UniqueCoders">
</div>
</header>
<main class="container">
<div class="row login">
<form ng-controller="AuthCtrl">
<input type="email" name="email" placeholder="Email" ng-model = "signInemail" id="email">
<input type="password" name="password" ng-model = "signInpassword" placeholder="Password" id="password">
<input type="submit" value="Login" ng-click = "signIn()">
</form>
</div>
</main>
<footer class="container">
<div class="row">
<small>© 2016. Unique Coders</small>
</div>
</footer>
</div>
<!-- Scripts at the end for faster loading -->
</body>
</html>
From the documentation here is what i see:
https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-users-and-authentication
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithPassword({
"email": "yourname#email.com",
"password": "password"
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
}
});
Can you change it above and check if it works. Here is a neat example on how to do authentication with angularjs.
http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx
I'm trying to develop a mobile app with onsen+cordova
What i need is:
When the app start it load login.html page. If the app detect that the user is logged then it redirect to the home.html
For each "protected page" i want to call a function that detected if user is logged.
If not i want to redirect to login page.
All the "protected pages" have a slide menu.
Following what i've done:
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 function imNotInLoginPage() at the start of the app if use appNavigator.getCurrentPage() it works but appNavigator.getCurrentPage().page is empty
After Login instead if i call appNavigator.getCurrentPage() it is undefined and i receive a js undefined error.
How can i check if i'm in loginpage or in another?
And the very big question, is this a good praticse in angular?
Otherwise how can i achieve this goal with angular+onsen???
The support from the onsen's theme is very poor.
I've found other solutions involving angular route, but there are not compatible with onsen.
I'm going crazy for implementing this standard thing. I hope that someone can help me, providing a complete example code.
Thank you
I created 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 would help you.