javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Toderp working with login and signup!

Browse Source
This commit is contained in:
Max Lynch
2013-09-10 20:37:41 -05:00
parent fc1a8270c0
commit 48d4c32173
11 changed files with 1804 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
example/angular/app.css
View File

@@ -11,17 +11,58 @@
transition: transform 1s ease-in-out;
*/
}
.reveal-animation.ng-enter {
.reveal-animation > .ng-enter {
-webkit-transition: 0.2s linear all;
-webkit-transform:translate3d(100%,0,0) ;
}
.reveal-animation.ng-enter-active {
.reveal-animation > .ng-enter-active {
-webkit-transform:translate3d(0,0,0) ;
}
.reveal-animation.ng-leave {
.reveal-animation > .ng-leave {
-webkit-transition: 0.2s linear all;
-webkit-transform:translate3d(0,0,0);
}
.reveal-animation.ng-leave-active {
.reveal-animation > .ng-leave-active {
-webkit-transform:translate3d(-100%,0,0);
}
.animate-switch-container {
position:relative;
background:white;
border:1px solid black;
height:40px;
overflow:hidden;
}
.animate-switch-container > div {
padding:10px;
}
.animate-switch-container > .ng-enter,
.animate-switch-container > .ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.animate-switch-container > .ng-enter {
top:-50px;
}
.animate-switch-container > .ng-enter.ng-enter-active {
top:0;
}
.animate-switch-container > .ng-leave {
top:0;
}
.animate-switch-container > .ng-leave.ng-leave-active {
top:50px;
}

60
example/angular/index.html
View File

@@ -1,60 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css">
<link rel="stylesheet" href="app.css">
<script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-resource.js"></script>
<script src="../../js/ionic-list.js"></script>
<script src="../../js/controllers/ionic-leftrightmenu.js"></script>
<script src="menu.js"></script>
</head>
<body ng-app="ionic.menu">
<ionic-left-right-menu>
<section id="page" class="full-section menu-animated">
<header class="bar bar-header bar-dark">
<div class="buttons">
<a id="left-button" class="button button-dark" href="#">
<i class="icon-reorder"></i>
</a>
</div>
<h1 class="title">Chats</h1>
<div class="buttons">
<button id="right-button" class="button button-dark">
<i class="icon-cog"></i>
</button>
</div>
</header>
</section>
<div class="menu menu-left">
<ul class="list">
<li class="list-divider">Left Nav Things</li>
</ul>
</div>
<div class="menu menu-right">
<ul class="list">
<li class="list-divider">Right Nav Things</li>
</ul>
</div>
<!--
<ionic-menu side="left">
</ionic-menu>
<ionic-content>
<h2>ASDF</h2>
<ionic-content>
<ionic-menu side="right">
</ionic-menu>
-->
</ionic-left-right-menu>
</body>
</html>

41
example/angular/menu.js vendored
View File

@@ -1,41 +0,0 @@
angular.module('ionic.menu', [])
.controller('LeftRightMenuController', ['$scope', '$element',
function LeftRightMenuCtrl($scope, $element) {
var ctrl = ion.controllers.LeftRightMenuViewController;
$scope.controllerInitData = {};
$scope.initIonicController = function() {
$scope._ionicController = new ctrl($scope.controllerInitData);
};
}])
.directive('ionicLeftRightMenu', function() {
return {
restrict: 'EA',
controller: 'LeftRightMenuController',
link: function($scope, element, attributes) {
$scope
console.log('link', $scope);
}
}
})
/*
.directive('ionicMenu', function() {
return {
restrict: 'EA',
controller: '',
compile: function(elm, attrs, transclude) {
return function(scope, element, attrs, menuCtrl) {
console.log('Compile');
};
},
link: function(scope) {
console.log('link');
}
}
});
*/

0
example/angular/panel.js vendored
View File

36
example/toderp/app.css
View File

@@ -11,7 +11,8 @@ label {
input {
background-color: transparent !important;
}
#login {
/*
#signup-button {
position: fixed;
bottom: 10px;
z-index: 4;
@@ -19,3 +20,36 @@ input {
left: 10px;
right: 10px;
}
*/
.pane {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.reveal-animation {
/*
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
.reveal-animation > .ng-enter {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(100%,0,0) ;
}
.reveal-animation > .ng-enter-active {
-webkit-transform:translate3d(0,0,0) ;
}
.reveal-animation > .ng-leave {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(0%,0,0);
}
.reveal-animation > .ng-leave-active {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(-100%,0,0);
}

2
example/toderp/app.js
View File

@@ -1,4 +1,4 @@
angular.module('toderp', [])
angular.module('toderp', ['firebase'])
.factory('TaskStorageService', function() {
return {

88
example/toderp/index.html
View File

@@ -1,4 +1,4 @@
<html>
<html ng-app="toderp">
<head>
<meta charset="utf-8">
<title>ToDerp</title>
@@ -9,37 +9,74 @@
<link rel="stylesheet" href="../../dist/ionic.css">
<link rel="stylesheet" href="app.css">
<script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-route.js"></script>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js'></script>
<script src="../../js/ionic-list.js"></script>
<script src="../../js/ionic-events.js"></script>
<script src="../../js/ionic-gestures.js"></script>
<script src="../../js/controllers/ionic-leftrightmenu.js"></script>
<script src="js/toderp.js"></script>
</head>
<body ng-app="toderp">
<div id="login">
<main class="content content-padded has-header">
<div class="container" style="text-align: center">
<h1>ToDerp</h1>
<h3>Finish your Top Three Tasks Today</h3>
</div>
<form class="form-horizontal">
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="">
</label>
<body ng-controller="ToderpCtrl">
<div ng-switch on="display.screen" class="reveal-animation">
<div id="login" ng-switch-when="login"ng-controller="LoginCtrl" class="pane">
<main class="content content-padded has-header">
<div class="container" style="text-align: center">
<h1>ToDerp</h1>
<h3>Finish your Top Three Tasks Today</h3>
</div>
<button class="button button-info button-block">Log in</button>
</form>
<button id="login" class="button button-default button-block">Create an account</button>
</main>
</section>
<form class="form-horizontal" ng-submit="tryLogin(loginForm)">
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="" ng-model="loginForm.email">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="loginForm.password">
</label>
</div>
<div class="input-group inset">
<button class="button button-info button-block">Log in</button>
<div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div>
</div>
</form>
<button ng-click="showSignup()" id="signup-button" class="button button-default button-block">Create an account</button>
</main>
</div>
<div id="signup" ng-switch-when="signup" ng-controller="SignupCtrl" class="pane">
<header class="bar bar-header bar-danger">
<a href="#" class="button">Back</a>
<h1 class="title">Sign up (it's free!)</h1>
</header>
<main class="content content-padded has-header">
<form class="form-horizontal" ng-submit="trySignup(signupForm)">
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password">
</label>
</div>
<div class="input-group inset">
<button class="button button-info button-block">Sign up</button>
<div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
</div>
</form>
</main>
</div>
</div>
<!--
<div id="page" class="page" ng-controller="TodaysTaskListCtrl">
@@ -75,6 +112,5 @@
</ul>
</div>
-->
<script src="app.js"></script>
</body>
</html>

81
example/toderp/js/toderp.js Normal file
View File

@@ -0,0 +1,81 @@
angular.module('toderp', ['firebase', 'ngRoute', 'ngAnimate'])
.controller('ToderpCtrl', function($scope) {
$scope.display = {
screen: 'login'
};
$scope.setScreen = function(screen) {
$scope.display.screen = screen;
};
})
.factory('AuthService', function(angularFireAuth, $rootScope) {
var ref = new Firebase('https://ionic-todo-demo.firebaseio.com/');
angularFireAuth.initialize(ref, {
scope: $rootScope,
name: 'user'
});
$rootScope.$on('angularFireAuth:login', function(evt, user) {
console.log('Logged in!', evt, user);
});
$rootScope.$on('angularFireAuth:logout', function(evt, user) {
console.log('Logged out!', evt, user);
});
$rootScope.$on('angularFireAuth:error', function(evt, err) {
console.log('Login Error!', evt, err);
});
return {
login: function(email, password) {
if(!email || !password) {
return;
}
console.log('Logging in', email, password);
return angularFireAuth.login('password', {
email: email,
password: password
});
},
signup: function(email, password) {
if(!email || !password) {
return;
}
console.log('Signing up', name, email, password);
angularFireAuth.createUser(email, password, function(err, user) {
console.log('SIGED UP', err, user);
});
}
};
})
.controller('LoginCtrl', function($scope, AuthService) {
console.log('Created login Ctrl');
$scope.loginForm = {
email: 'max@drifty.com',
password: 'test'
};
$scope.tryLogin = function(data) {
$scope.loginError = false;
AuthService.login(data.email, data.password)
.then(function(e) {
$scope.loginError = false;
}, function(e) {
$scope.display.screen = 'signup';
$scope.loginError = true;
});
}
$scope.showSignup = function() {
$scope.setScreen('signup');
}
})
.controller('SignupCtrl', function($scope, AuthService) {
$scope.trySignup = function(data) {
AuthService.signup(data.email, data.password);
};
});