<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Some Tests Example</title>
<!--
Based on http://codepen.io/ionic/pen/odqCz
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
-->
<link href="https://code.ionicframework.com/1.3.3/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.3/js/ionic.bundle.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<script src="fbconfig.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.js"></script>
<script src="script.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Wubba Lubba dub dub!">
<ion-content class="padding">
<h1>{{sayHi}}</h1> hey {{name}}
<br>
<br>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="email@email" ng-model="singinData.email">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="singinData.password">
</label>
</div>
<span style="color:red">{{error}}</span>
<br>
<br>
<button class="button button-full button-positive" ng-click="signIn(singinData)">
Login User/Password
</button>
<button class="button button-full button-positive" ng-click="signInWithPopup()">
Login/Register Facebook
</button>
<button class="button button-full button-clear button-positive" ng-click="register()">
Register
</button>
<button class="button button-full button-clear button-positive" ng-click="signOut()">
Sign Out
</button>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<p>
I will show in a simple way how to do some auth ( regular login | facebook | register | logout ) with firebase, hope you like it
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/register.html" type="text/ng-template">
<ion-view view-title="register">
<ion-content class="padding">
<p style="color:blue">{{message}}</p>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="email@email" ng-model="registerData.email">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="registerData.password">
</label>
</div>
<button class="button button-full button-positive" ng-click="createUserEmailPassword(registerData)">
Register
</button>
<button class="button button-full button-clear button-positive" ng-click="cancelReg()">
Cancel
</button>
<pre>{{registerData|json}}</pre>
</ion-content>
</ion-view>
</script>
</body>
</html>
(function() {
'use strict';
console.clear();
angular.module('ionicApp', [
'ionic',
'firebase',
'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl',
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('register', {
url: "/register",
abstract: false,
templateUrl: "templates/register.html",
controller: 'RegisterCtrl'
})
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeCtrl', HomeCtrl)
.controller('RegisterCtrl', RegisterCtrl)
.factory('AppService', AppService);
///////////////////////
// CONTROLLER
function HomeCtrl($firebaseObject, $firebaseAuth, $scope, AppService, $state, $location, $timeout) {
var ref = firebase.database().ref();
$scope.error = '';
$scope.sayHi = 'Get Schwifty';
$scope.authObj = $firebaseAuth();
$scope.data = {};
$scope.name = "";
$scope.singinData = {email:'',password:''}
$scope.authObj = $firebaseAuth(); // lest register firebaseouth to use it
$scope.authObj.$onAuthStateChanged(function(firebaseUser) {
if (firebaseUser) {
console.log("$onAuthStateChanged::Signed in as:", firebaseUser);
$scope.name = firebaseUser.displayName;
$scope.data = $firebaseObject(ref);
$scope.$apply();
} else {
console.log("Signed out", firebaseUser);
$scope.data = {};
}
});
/////////////Setup Functions
$scope.signOut = signOut;
$scope.signInWithPopup = signInWithPopup;
$scope.register = register;
$scope.cancelReg = cancelReg;
$scope.signIn = signIn;
///////////////
// functions
function signInWithPopup(){
AppService.signInWithPopup();
}
function signOut(){
$scope.data.$destroy();
$scope.name='';
$scope.authObj.$signOut();
}
function register(){
$location.path('/register');
}
function cancelReg(){
$location.path('/home');
}
function signIn(SingInData){
AppService.signInWithEmail(SingInData).then(function(rs){
console.log('signIn',rs)
}).catch(function(err){
$scope.error = 'email or password wrong, please try again';
$timeout(function(){$scope.error ='';},2000);
console.error('does not exist or other error');
});
}
}
//////////////////////
// Register controller
function RegisterCtrl($firebaseObject, $firebaseAuth, $scope, AppService, $state, $location, $timeout){
$scope.message = '';
$scope.registerData = {email:'',password:''}
$scope.cancelReg = cancelReg;
$scope.createUserEmailPassword = createUserEmailPassword;
function createUserEmailPassword(register){
AppService.createUserEmailPassword(register.email, register.password)
.then(function(data){
console.log(data);
$scope.message = data.email + 'has been created, thanks';
data.updateProfile({
displayName: "email registered user" /// well only an example
}).then(function() {
// so something
}, function(error) {
// An error happened.
});
$timeout(function(){cancelReg();},2000);
});
}
function cancelReg(){
$location.path('/home');
}
}
///////////////////////
// SERVICE
function AppService($firebaseAuth) {
var authObj = $firebaseAuth();
return {
signInWithPopup:signInWithPopup,
createUserEmailPassword:createUserEmailPassword,
signInWithEmail:signInWithEmail
}
/////////////Functions
function signAnon(){
// next time
}
function createUserEmailPassword(email, password){
return authObj.$createUserWithEmailAndPassword(email, password);
}
function signInWithRedirect(){
authObj.$signInWithRedirect("facebook").then(function(wow) {
console.log('$signInWithRedirect',wow);
}).catch(function(error) {
console.error("Authentication failed:", error);
});
}
function signInWithPopup(){
authObj.$signInWithPopup("facebook").then(function(result) {
console.log("Signed in as:", result.user.uid);
}).catch(function(error) {
console.error("Authentication failed:", error);
});
}
function signInWithEmail(data){
return authObj.$signInWithEmailAndPassword(data.email, data.password);
}
}
})();
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
// Initialize Firebase
var config = {
apiKey: "AIzaSyDo3U6GIfiBU90jStqfrua2yfDxO-PLqoU",
authDomain: "etg-prod.firebaseapp.com",
databaseURL: "https://etg-prod.firebaseio.com",
projectId: "etg-prod"
};
firebase.initializeApp(config);