Toderp signup and nav controller fixes

dist/ionic-angular.js

@@ -68,6 +68,12 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     navBar: {
       shouldGoBack: function() {
       },
+      show: function() {
+        this.isVisible = true;
+      },
+      hide: function() {
+        this.isVisible = false;
+      },
       setTitle: function(title) {
         $scope.navController.title = title;
       },
@@ -101,15 +107,16 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navBar', function() {
   return {
     restrict: 'E',
-    require: '^navController',
+    require: '^navCtrl',
     transclude: true,
     replace: true,
     scope: true,
-    template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: isHidden}">' + 
+    template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
+        '<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
-        '<h1 class="title">{{getTopController().title}}</h1>' + 
+        '<h1 class="title">{{navController.getTopController().title}}</h1>' + 
       '</header>',
     link: function(scope, element, attrs, navCtrl) {
+      scope.navController = navCtrl;
       scope.goBack = function() {
         navCtrl.pop();
       }
@@ -120,9 +127,17 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navContent', function() {
   return {
     restrict: 'ECA',
+    require: '^navCtrl',
     scope: true,
-    link: function(scope, element, attrs) {
+    link: function(scope, element, attrs, navCtrl) {
       scope.title = attrs.title;
+
+      if(attrs.navBar === "false") {
+        navCtrl.hideNavBar();
+      } else {
+        navCtrl.showNavBar();
+      }
+
       scope.isVisible = true;
       scope.pushController(scope);
 

dist/ionic.js

@@ -2119,6 +2119,16 @@ ionic.views.TabBar.prototype = {
 ;
 (function(ionic) {
 
+/**
+ * The NavController makes it easy to have a stack
+ * of views or screens that can be pushed and popped
+ * for a dynamic navigation flow. This API is modelled
+ * off of the UINavigationController in iOS.
+ *
+ * The NavController can drive a nav bar to show a back button
+ * if the stack can be poppped to go back to the last view, and
+ * it will handle updating the title of the nav bar and processing animations.
+ */
 ionic.controllers.NavController = function(opts) {
   var _this = this;
 
@@ -2135,12 +2145,26 @@ ionic.controllers.NavController = function(opts) {
 };
 
 ionic.controllers.NavController.prototype = {
+  /**
+   * @return {array} the array of controllers on the stack.
+   */
   getControllers: function() {
     return this.controllers;
   },
+
+  /**
+   * @return {object} the controller at the top of the stack.
+   */
   getTopController: function() {
     return this.controllers[this.controllers.length-1];
   },
+
+  /**
+   * Push a new controller onto the navigation stack. The new controller
+   * will automatically become the new visible view.
+   *
+   * @param {object} controller the controller to push on the stack.
+   */
   push: function(controller) {
     var last = this.controllers[this.controllers.length - 1];
 
@@ -2175,6 +2199,12 @@ ionic.controllers.NavController.prototype = {
     return controller;
   },
 
+  /**
+   * Pop the top controller off the stack, and show the last one. This is the
+   * "back" operation.
+   *
+   * @return {object} the last popped controller
+   */
   pop: function() {
     var next, last;
 
@@ -2207,8 +2237,27 @@ ionic.controllers.NavController.prototype = {
     return last;
   },
 
+  /**
+   * Show the NavBar (if any)
+   */
+  showNavBar: function() {
+    if(this.navBar) {
+      this.navBar.show();
+    }
+  },
+
+  /**
+   * Hide the NavBar (if any)
+   */
+  hideNavBar: function() {
+    if(this.navBar) {
+      this.navBar.hide();
+    }
+  },
+
+  // Update the nav bar after a push or pop
   _updateNavBar: function() {
-    if(!this.getTopController()) {
+    if(!this.getTopController() || !this.navBar) {
       return;
     }
 
@@ -2219,8 +2268,7 @@ ionic.controllers.NavController.prototype = {
     } else {
       this.navBar.showBackButton(false);
     }
-  },
+  }
-
 };
 })(window.ionic);
 ;

example/toderp2/css/app.css

@@ -18,3 +18,11 @@
 }
 #splash-view .ionic-logo {
 }
+
+#signup-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}

example/toderp2/index.html

@@ -32,27 +32,82 @@
 
     <!-- The root view controller -->
     <nav-ctrl ng-controller="TodoCtrl">
+      <nav-bar></nav-bar>
     </nav-ctrl>
 
     <!-- Splash -->
     <script id="splash.html" type="text/ng-template">
-      <div id="splash-view" class="view fade-in" nav-content>
+      <div id="splash-view" class="view fade-in" nav-content nav-bar="false">
         <img src="img/ionic.png" class="ionic-logo">
       </div>
     </script>
 
-    <!-- Login -->
-    <script id="login.html" type="text/ng-template">
-      <div id="login-view" class="view" nav-content ng-controller="LoginCtrl">
-        <h1>Login</h1>
-      </div>
-    </script>
-
     <!-- Signup -->
     <script id="signup.html" type="text/ng-template">
-      <div id="signup-view" class="view" nav-content ng-controller="SignupCtrl"></div>
+      <div title="Sign up" id="signup-view" class="view" nav-content ng-controller="SignupCtrl"></div>
+        <main class="content">
+          <form class="form-horizontal" ng-submit="trySignup(signupForm)">
+            <div class="container" style="text-align: center">
+              <h1>Toderp</h1>
+              <h4>What do you need to derp?</h4>
+            </div>
+            <div class="input-group">
+              <label class="input-wrapper row">
+                <span class="input-label col-xs-4">Full name</span>
+                <input class="col-xs-8" type="text" placeholder="" ng-model="signupForm.name">
+              </label>
+              <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">
+              <button class="button button-primary button-block">Get derp'n</button>
+              <div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
+            </div>
+          </form>
+          <div id="signup-bottom">
+            <h3>Already have an account?</h3>
+            <button class="button button-clear button-block">Sign in</button>
+          </div>
+        </main>
+      </div>
     </script>
 
+    <!-- Login -->
+    <script id="login.html" type="text/ng-template">
+      <div title="Login" id="login-view" class="view" nav-content ng-controller="LoginCtrl">
+        <main class="content padded">
+          <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">Full name</span>
+                <input class="col-xs-8" type="text" placeholder="" ng-model="loginForm.name">
+              </label>
+              <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-primary 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>
+    </script>
+
+
     <!-- Tasks -->
     <script id="tasks.html" type="text/ng-template">
       <side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl">

example/toderp2/js/controllers.js

@@ -5,22 +5,21 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
   $scope.candy = 'yes';
 
   $scope.navController.pushFromTemplate('splash.html');
-  //$scope.navController.pushFromTemplate('login.html');
-  //$scope.navController.pushFromTemplate('signup.html');
-  //$scope.navController.pushFromTemplate('tasks.html');
 
-  console.log($scope);
   $rootScope.$on('angularFireAuth:login', function(evt, user) {
-    $scope.display.screen = 'tasks';
+    $scope.navController.pushFromTemplate('tasks.html');
   });
   $rootScope.$on('angularFireAuth:logout', function(evt, user) {
-    console.log('Logged out!', evt, user);
+    $scope.navController.pushFromTemplate('signup.html');
   });
   $rootScope.$on('angularFireAuth:error', function(evt, err) {
-    console.log('Login Error!', evt, err);
+    $scope.navController.pushFromTemplate('signup.html');
   });
 })
 
+.controller('SplashCtrl', function($scope) {
+})
+
 // The login form controller
 .controller('LoginCtrl', function($scope,  AuthService) {
   console.log('Created login Ctrl');
@@ -30,6 +29,10 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
     password: 'test'
   };
 
+  $scope.showSignup = function() {
+    $scope.navController.pushFromTemplate('signup.html');
+  };
+
   $scope.tryLogin = function(data) {
     $scope.loginError = false;
     AuthService.login(data.email, data.password)

js/controllers/navController.js

@@ -118,6 +118,24 @@ ionic.controllers.NavController.prototype = {
     return last;
   },
 
+  /**
+   * Show the NavBar (if any)
+   */
+  showNavBar: function() {
+    if(this.navBar) {
+      this.navBar.show();
+    }
+  },
+
+  /**
+   * Hide the NavBar (if any)
+   */
+  hideNavBar: function() {
+    if(this.navBar) {
+      this.navBar.hide();
+    }
+  },
+
   // Update the nav bar after a push or pop
   _updateNavBar: function() {
     if(!this.getTopController() || !this.navBar) {

js/ext/angular/src/directive/ionicNav.js

@@ -24,6 +24,12 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     navBar: {
       shouldGoBack: function() {
       },
+      show: function() {
+        this.isVisible = true;
+      },
+      hide: function() {
+        this.isVisible = false;
+      },
       setTitle: function(title) {
         $scope.navController.title = title;
       },
@@ -57,15 +63,16 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navBar', function() {
   return {
     restrict: 'E',
-    require: '^navController',
+    require: '^navCtrl',
     transclude: true,
     replace: true,
     scope: true,
-    template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: isHidden}">' + 
+    template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
+        '<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
-        '<h1 class="title">{{getTopController().title}}</h1>' + 
+        '<h1 class="title">{{navController.getTopController().title}}</h1>' + 
       '</header>',
     link: function(scope, element, attrs, navCtrl) {
+      scope.navController = navCtrl;
       scope.goBack = function() {
         navCtrl.pop();
       }
@@ -76,9 +83,17 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navContent', function() {
   return {
     restrict: 'ECA',
+    require: '^navCtrl',
     scope: true,
-    link: function(scope, element, attrs) {
+    link: function(scope, element, attrs, navCtrl) {
       scope.title = attrs.title;
+
+      if(attrs.navBar === "false") {
+        navCtrl.hideNavBar();
+      } else {
+        navCtrl.showNavBar();
+      }
+
       scope.isVisible = true;
       scope.pushController(scope);
 

js/ext/angular/test/nav.html

@@ -40,12 +40,12 @@
   </head>
   <body>
 
-    <nav-controller>
+    <nav-ctrl>
       <nav-bar></nav-bar>
 
       <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
       </content>
-    </nav-controller>
+    </nav-ctrl>
 
     <script src="../../../../dist/ionic.js"></script>
     <script src="../../../../dist/ionic-angular.js"></script>
@@ -64,7 +64,7 @@
           '</div>')(childScope, cb);
       }
 
-      angular.module('navTest', ['ionic.ui'])
+      angular.module('navTest', ['ionic.ui.nav'])
 
       .controller('AppCtrl', function($scope, $compile, $element) {
         pushIt($scope, $compile, $element, function(cloned, scope) {