add settings/password_change state

Author: Rokt33r

package.json

@@ -25,7 +25,7 @@
     "short code"
   ],
   "author": "Dick Choi <fluke8259@gmail.com> (http://kazup.co)",
-  "license": "ISC",
+  "license": "No License",
   "bugs": {
     "url": "https://github.com/Rokt33r/codexen-app/issues"
   },

src/config/states.js

@@ -27,6 +27,16 @@ angular.module('codexen')
         controller: 'AuthSignInController as vm'
       })
 
+      .state('settings', {
+        url: '/settings',
+        views: {
+          'main-view': {
+            templateUrl: 'tpls/states/settings.tpl.html',
+            controller: 'SettingsController as vm'
+          }
+        }
+      })
+
       /* Snippets */
       .state('snippets', {
         url: '/snippets',

src/controllers/states/SettingsController.js

@@ -0,0 +1,33 @@
+/* global angular */
+angular.module('codexen')
+  .controller('SettingsController', function (Settings) {
+    var vm = this
+
+    vm.changePassword = changePassword
+    vm.isSuccess = false
+    vm.isError = false
+
+    function changePassword () {
+      var params = {
+        password: vm.password,
+        newPassword: vm.newPassword
+      }
+
+      Settings.changePassword(params)
+        .success(function (data) {
+          resetInput()
+          vm.isSuccess = true
+          vm.isError = false
+        })
+        .error(function () {
+          resetInput()
+          vm.isError = true
+          vm.isSuccess = false
+        })
+    }
+
+    function resetInput () {
+      vm.password = ''
+      vm.newPassword = ''
+    }
+  })

src/services/Settings.js

@@ -0,0 +1,13 @@
+/* global angular */
+angular.module('codexen')
+  .factory('Settings', function ($http, apiUrl) {
+    var changePassword = function (params) {
+      var url = apiUrl + 'settings/change_password'
+
+      return $http.post(url, params)
+    }
+
+    return {
+      changePassword: changePassword
+    }
+  })

src/styles/_index.styl

@@ -21,6 +21,9 @@ h1, h2, h3, h4, h5
 textarea
   resize: vertical
 
+hr
+  border-color $baseBorderColor
+
 #side-view
   position:absolute
   top: 0

src/styles/states/settings.styl

@@ -0,0 +1,8 @@
+.settings-state
+  .panel
+    margin-top 15px
+  h1
+    margin 30px 0
+  .section
+    h4
+      margin-bottom 15px

src/tpls/directives/side-nav.tpl.html

@@ -3,7 +3,7 @@
     <img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
     <a href ng-bind="vm.currentUser.name"></a>
     <span class="nav-control-group pull-right">
-      <a href class="btn btn-sm btn-default"><i class="fa fa-gears fa-fw"></i></a>
+      <a ui-sref="settings" class="btn btn-sm btn-default" ui-sref-active="active"}"><i class="fa fa-gears fa-fw"></i></a>
       <a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
     </span>
 

src/tpls/states/settings.tpl.html

@@ -0,0 +1,33 @@
+<div class="settings-state container-fluid">
+  <div class="row">
+    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3 panel panel-default">
+      <h1><i class="fa fa-gears"></i> Settings</h1>
+      <p>
+        Some settings...
+      </p>
+      <hr>
+      <div class="section">
+        <h4>Change Password</h4>
+        <form ng-submit="vm.changePassword()">
+          <alert type="success" ng-show="vm.isSuccess" close="vm.isSuccess=false">
+            Successfully changed!!
+          </alert>
+          <alert type="danger" ng-show="vm.isError" close="vm.isError=false">
+            Request failed!!
+          </alert>
+          <div class="form-group">
+            <label for="password">Current Password</label>
+            <input ng-model="vm.password" class="form-control" type="password" name="password"  placeholder="Current Password">
+          </div>
+          <div class="form-group">
+            <label for="newPassword"> New Password</label>
+            <input ng-model="vm.newPassword" class="form-control" type="password" name="newPassword" placeholder="New Password">
+          </div>
+          <div class="form-group">
+            <button type="submit" class="btn btn-primary form-control">Change Password</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>