add How-to & Signout modal

Author: Rokt33r

src/browser/main/controllers/directives/SideNavController.js

@@ -1,6 +1,6 @@
 /* global angular */
 angular.module('codexen')
-  .controller('SideNavController', function ($auth, User, $rootScope, $scope) {
+  .controller('SideNavController', function ($auth, User, $rootScope, $scope, Modal) {
     var vm = this
 
     vm.isAuthenticated = $auth.isAuthenticated()
@@ -16,11 +16,7 @@ angular.module('codexen')
     reloadUser()
 
     vm.signOut = function () {
-      $auth.logout()
-        .then(function () {
-          console.log('Sign Out')
-          $rootScope.$broadcast('userSignOut')
-        })
+      Modal.signOut()
     }
 
     $scope.$on('userSignIn', function () {

src/browser/main/controllers/modals/SignOutModalController.js

@@ -0,0 +1,13 @@
+/* global angular */
+angular.module('codexen')
+  .controller('SignOutModalController', function ($modalInstance) {
+    var vm = this
+
+    vm.submit = function () {
+      $modalInstance.close()
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+  })

src/browser/main/controllers/states/AuthSignInController.js

@@ -3,13 +3,19 @@ angular.module('codexen')
   .controller('AuthSignInController', function ($auth, $rootScope) {
     var vm = this
 
+    vm.authFailed = false
+
     vm.signIn = function () {
+      vm.authFailed = false
       $auth.login({
         email: vm.email,
         password: vm.password
       }).then(function (data) {
         console.log(data)
         $rootScope.$broadcast('userSignIn')
+      }, function (err) {
+        console.log(err)
+        vm.authFailed = true
       })
     }
   })

src/browser/main/index.html

@@ -34,6 +34,7 @@
     <script src="../vendor/angular-md5.js"></script>
     <script src="../vendor/moment.js"></script>
     <script src="../vendor/marked.js"></script>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
 
     <!-- inject:js -->
     <script src="app.js"></script>
@@ -76,6 +77,7 @@
     <script src="controllers/modals/NewRecipeModalController.js"></script>
     <script src="controllers/modals/NewSnippetModalController.js"></script>
     <script src="controllers/modals/SelectSnippetModalController.js"></script>
+    <script src="controllers/modals/SignOutModalController.js"></script>
     <script src="../shared/shared.js"></script>
     <script src="../shared/config/ace.js"></script>
     <script src="../shared/config/env.js"></script>

src/browser/main/index.inject.html

@@ -32,6 +32,7 @@
     <script src="../vendor/angular-md5.js"></script>
     <script src="../vendor/moment.js"></script>
     <script src="../vendor/marked.js"></script>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
 
     <!-- inject:js -->
     <!-- endinject -->

src/browser/main/services/Modal.js

@@ -1,6 +1,19 @@
 /* global angular */
 angular.module('codexen')
-  .factory('Modal', function ($modal, $rootScope) {
+  .factory('Modal', function ($modal, $rootScope, $auth) {
+    var signOut = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/sign-out-modal.html',
+        controller: 'SignOutModalController as vm'
+      }).result.then(function () {
+        $auth.logout()
+          .then(function () {
+            console.log('Sign Out')
+            $rootScope.$broadcast('userSignOut')
+          })
+      })
+    }
+
     /* Recipe */
     var newRecipe = function () {
       return $modal.open({
@@ -98,6 +111,7 @@ angular.module('codexen')
     }
 
     return {
+      signOut: signOut,
       newRecipe: newRecipe,
       editRecipe: editRecipe,
       deleteRecipe: deleteRecipe,

src/browser/main/styles/app.css

@@ -274,6 +274,15 @@ body > .ui-select-bootstrap.open {
 .home-state {
   padding: 10px;
 }
+.home-state p {
+  margin: 5px auto 15px;
+}
+.home-state ol {
+  margin: 35px auto;
+}
+.home-state li {
+  margin-bottom: 25px;
+}
 .settings-state .panel {
   margin-top: 15px;
 }

src/browser/main/styles/states/home.styl

@@ -1,2 +1,8 @@
 .home-state
   padding 10px
+  p
+    margin 5px auto 15px
+  ol
+    margin 35px auto
+  li
+    margin-bottom 25px

src/browser/main/tpls/modals/sign-out-modal.html

@@ -0,0 +1,16 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Sign Out</h4>
+  </div>
+
+  <div class="modal-body">
+    <p>
+      Are you sure to sign out?
+    </p>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-danger">Sign Out</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/states/auth.signin.tpl.html

@@ -1,4 +1,7 @@
 <form ng-submit="vm.signIn()">
+  <p ng-if="vm.authFailed" class="alert alert-danger">
+    Incorrect email or password entered. Please try again.
+  </p>
   <div class="form-group">
     <label for="email">E-mail</label>
     <input ng-model="vm.email" type="text" id="email" name="name" class="form-control" placeholder="E-mail">