From 549ce7f2990dca50dce097a38044ce80a8efe15f Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 25 Jun 2015 20:31:38 +0900
Subject: [PATCH] add How-to & Signout modal

---
 .../directives/SideNavController.js           |  8 +---
 .../modals/SignOutModalController.js          | 13 ++++++
 .../states/AuthSignInController.js            |  6 +++
 src/browser/main/index.html                   |  2 +
 src/browser/main/index.inject.html            |  1 +
 src/browser/main/services/Modal.js            | 16 ++++++-
 src/browser/main/styles/app.css               |  9 ++++
 src/browser/main/styles/states/home.styl      |  6 +++
 .../main/tpls/modals/sign-out-modal.html      | 16 +++++++
 .../main/tpls/states/auth.signin.tpl.html     |  3 ++
 src/browser/main/tpls/states/home.tpl.html    | 42 ++++++++++++++++++-
 src/browser/popup/index.inject.html           |  1 -
 12 files changed, 113 insertions(+), 10 deletions(-)
 create mode 100644 src/browser/main/controllers/modals/SignOutModalController.js
 create mode 100644 src/browser/main/tpls/modals/sign-out-modal.html

diff --git a/src/browser/main/controllers/directives/SideNavController.js b/src/browser/main/controllers/directives/SideNavController.js
index b9f343b3..23cf4bd7 100644
--- a/src/browser/main/controllers/directives/SideNavController.js
+++ b/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 () {
diff --git a/src/browser/main/controllers/modals/SignOutModalController.js b/src/browser/main/controllers/modals/SignOutModalController.js
new file mode 100644
index 00000000..77065e36
--- /dev/null
+++ b/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')
+    }
+  })
diff --git a/src/browser/main/controllers/states/AuthSignInController.js b/src/browser/main/controllers/states/AuthSignInController.js
index 5ce7f07e..394a9d3a 100644
--- a/src/browser/main/controllers/states/AuthSignInController.js
+++ b/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
       })
     }
   })
diff --git a/src/browser/main/index.html b/src/browser/main/index.html
index 7fa946a6..90e036e9 100644
--- a/src/browser/main/index.html
+++ b/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>
diff --git a/src/browser/main/index.inject.html b/src/browser/main/index.inject.html
index ab66192d..00a03de0 100644
--- a/src/browser/main/index.inject.html
+++ b/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 -->
diff --git a/src/browser/main/services/Modal.js b/src/browser/main/services/Modal.js
index 00252c64..380b5075 100644
--- a/src/browser/main/services/Modal.js
+++ b/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,
diff --git a/src/browser/main/styles/app.css b/src/browser/main/styles/app.css
index 5c078945..7288235e 100644
--- a/src/browser/main/styles/app.css
+++ b/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;
 }
diff --git a/src/browser/main/styles/states/home.styl b/src/browser/main/styles/states/home.styl
index 290ad895..80209e29 100644
--- a/src/browser/main/styles/states/home.styl
+++ b/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
diff --git a/src/browser/main/tpls/modals/sign-out-modal.html b/src/browser/main/tpls/modals/sign-out-modal.html
new file mode 100644
index 00000000..db967182
--- /dev/null
+++ b/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>
diff --git a/src/browser/main/tpls/states/auth.signin.tpl.html b/src/browser/main/tpls/states/auth.signin.tpl.html
index 309706c7..3cd9ada6 100644
--- a/src/browser/main/tpls/states/auth.signin.tpl.html
+++ b/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">
diff --git a/src/browser/main/tpls/states/home.tpl.html b/src/browser/main/tpls/states/home.tpl.html
index a7a03a1e..343dacf2 100644
--- a/src/browser/main/tpls/states/home.tpl.html
+++ b/src/browser/main/tpls/states/home.tpl.html
@@ -1,9 +1,47 @@
 <div class="home-state">
-  <h1 class="jumbotron">Codexen App <small>v0.2</small></h1>
+  <h1 class="jumbotron">Codexen App <small>v0.1.1</small></h1>
+
+  <h2>About CodeXen</h2>
+
   <p>
-    App for Code snippets<br>
+    CodeXen is short code storage tool make coding more stressless. If you use CodeXen, then you will be disentangled from troublesome organizing a large number of snippets and googling same code many times.
   </p>
 
+  <ol>
+    <li>
+      <h4>
+        Post your code
+      </h4>
+      <p>
+        Post your commonly used code with description,category,and tags.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Save on cloud
+      </h4>
+      <p>
+        From short snippet to long complex code,CodeXen saves any code simply.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Use code like a magic
+      </h4>
+      <p>
+        CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Code Elegantly
+      </h4>
+      <p>
+        That's all!
+        You must be loved with CodeXen. Enjoy coding;)
+      </p>
+    </li>
+  </ol>
   <p>
     © 2015 MAISIN&CO.,Inc.
   </p>
diff --git a/src/browser/popup/index.inject.html b/src/browser/popup/index.inject.html
index 21b92d6f..73dcd5dd 100644
--- a/src/browser/popup/index.inject.html
+++ b/src/browser/popup/index.inject.html
@@ -50,7 +50,6 @@
     <script src="../vendor/ace.js"></script>
     <script src="../vendor/angular.js" charset="utf-8"></script>
     <script src="../vendor/satellizer.js"></script>
-    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
 
     <!-- inject:js -->
     <!-- endinject -->