User Profile

angular/app/components/nav-header/nav-header.component.html

@@ -243,7 +243,7 @@ <h3>
             <!-- Menu Footer-->
             <li class="user-footer">
               <div class="pull-left">
-                <a href="#" class="btn btn-default btn-flat">Profile</a>
+                <a ui-sref="app.profile" class="btn btn-default btn-flat">Profile</a>
               </div>
               <div class="pull-right">
                 <a ui-sref="app.logout" class="btn btn-default btn-flat">Sign out</a>

angular/app/components/password-verify/password-verify.component.js

@@ -0,0 +1,35 @@
+function passwordVerifyClass () {
+  return {
+    require: "ngModel",
+    scope: {
+      passwordVerify: '='
+    },
+    link: function(scope, element, attrs, ctrl) {
+      scope.$watch(function() {
+        var combined;
+
+        if (scope.passwordVerify || ctrl.$viewValue) {
+          combined = scope.passwordVerify + '_' + ctrl.$viewValue;
+        }
+
+        return combined;
+      }, function(value) {
+        if (value) {
+          ctrl.$parsers.unshift(function(viewValue) {
+            var origin = scope.passwordVerify;
+
+            if (origin !== viewValue) {
+              ctrl.$setValidity("passwordVerify", false);
+              return undefined;
+            } else {
+              ctrl.$setValidity("passwordVerify", true);
+              return viewValue;
+            }
+          });
+        }
+      });
+    }
+  }
+}
+
+export const PasswordVerifyClassComponent = passwordVerifyClass

angular/app/components/user-profile/user-profile.component.html

@@ -0,0 +1,110 @@
+<section class="content-header">
+    <h1>Users <small>Module description here</small></h1>
+    <ol class="breadcrumb">
+        <li><a ui-sref="app.landing"><i class="fa fa-dashboard"></i> Home</a></li>
+        <li><a ui-sref="app.userlist">User Lists</a></li>
+        <li class="active">Edit User</li>
+    </ol>
+</section>
+<section class="content">
+  <div class="row">
+    <div class="col-sm-12 col-md-7">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+          <h3 class="box-title">Profile</h3>
+        </div>
+        <form class="form-horizontal" name="userForm" ng-submit="vm.save(userForm.$valid, userForm)" novalidate>
+          <div class="box-body">
+            <div ng-if="vm.alerts" class="alert alert-{{alert.type}}" ng-repeat="alert in vm.alerts">
+              <h4>{{alert.title}}</h4>
+              <p ng-bind-html="alert.msg | trustHtml"></p>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': userForm.name.$invalid && ( vm.formSubmitted || userForm.name.$touched) }">
+              <label for="inputEmail3" class="col-sm-3 control-label">Name</label>
+              <div class="col-sm-9">
+                <input type="text" class="form-control" ng-model="vm.userdata.data.name" name="name" placeholder="Name" required>
+                <p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Name is required.</p>
+                <p ng-show="userForm.name.customError"  class="help-block">{{userForm.name.customError}}</p>
+              </div>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid && ( vm.formSubmitted || userForm.email.$touched) }">
+              <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
+              <div class="col-sm-9">
+                <input type="email" class="form-control" ng-model="vm.userdata.data.email" name="email" placeholder="Email" required>
+                <p ng-show="userForm.email.$error.required && ( vm.formSubmitted || userForm.email.$touched)" class="help-block">Email is required.</p>
+                <p ng-show="userForm.email.$error.email  && ( vm.formSubmitted || userForm.email.$touched)" class="help-block">This is not a valid email.</p>
+                <p ng-show="userForm.email.customError"  class="help-block">{{userForm.email.customError}}</p>
+              </div>
+            </div>
+            <div class="page-header">
+              <h4>Update Password <small>( Optional )</small></h4>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': userForm.current_password.$invalid && ( vm.formSubmitted || userForm.current_password.$touched) }">
+              <label for="inputEmail3" class="col-sm-3 control-label">Current Password</label>
+              <div class="col-sm-9">
+                <input type="password" class="form-control" placeholder="Password" name="current_password"
+                  ng-model="vm.userdata.data.current_password"
+                  ng-minlength="8"
+                  ng-maxlength="50"
+                  ng-required="vm.userdata.data.new_password">
+                <p ng-show="userForm.current_password.$error.required && ( vm.formSubmitted || userForm.current_password.$touched)" class="help-block">Password is required.</p>
+                <p ng-show="userForm.current_password.$error.maxlength" class="help-block">Password is too long.</p>
+                <p ng-show="userForm.current_password.$invalid &&
+                            userForm.current_password.$error.minlength &&
+                            userForm.current_password.$touched"
+                            class="help-block">Password is too short, Please enter more than 8 characters.</p>
+
+                <p ng-show="userForm.current_password.$invalid && (vm.formSubmitted || vm.errors.current_password)" class="help-block">{{vm.errors.current_password}}</p>
+                <p ng-show="userForm.current_password.customError"  class="help-block">{{userForm.current_password.customError}}</p>
+              </div>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': userForm.new_password.$invalid && ( vm.formSubmitted || userForm.new_password.$touched) }">
+              <label for="inputEmail3" class="col-sm-3 control-label">New Password</label>
+              <div class="col-sm-9">
+                <input type="password" class="form-control" placeholder="Password"  name="new_password"
+                  ng-model="vm.userdata.data.new_password"
+                  ng-minlength="8"
+                  ng-maxlength="50"
+                  ng-required="vm.userdata.data.current_password">
+                <p ng-show="userForm.new_password.$error.required && ( vm.formSubmitted || userForm.new_password.$touched)" class="help-block">New Password is required.</p>
+                <p ng-show="userForm.new_password.$error.maxlength" class="help-block">Password is too long.</p>
+                <p ng-show="userForm.new_password.$invalid &&
+                            userForm.new_password.$error.minlength &&
+                            userForm.new_password.$touched"
+                            class="help-block">Password is too short, Please enter more than 8 characters.</p>
+                <p ng-show="userForm.new_password.$invalid && (vm.formSubmitted || vm.errors.new_password)" class="help-block">{{vm.errors.new_password}}</p>
+                <p ng-show="userForm.new_password.customError"  class="help-block">{{userForm.new_password.customError}}</p>
+              </div>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': userForm.new_password_confirmation.$invalid && ( vm.formSubmitted || userForm.new_password_confirmation.$touched) }">
+              <label for="inputEmail3" class="col-sm-3 control-label">Confirm Password</label>
+              <div class="col-sm-9">
+                <input type="password" class="form-control" placeholder="Password" name="new_password_confirmation"
+                  ng-model="vm.userdata.data.new_password_confirmation"
+                  ng-minlength="8"
+                  ng-maxlength="50"
+                  ng-required="vm.userdata.data.current_password"
+                  password-verify="vm.userdata.data.new_password">
+                <p ng-show="userForm.new_password_confirmation.$error.required &&
+                            ( vm.formSubmitted || userForm.new_password_confirmation.$touched)" class="help-block">Confirm Password is required.</p>
+                <p ng-show="userForm.new_password_confirmation.$error.maxlength" class="help-block">Password is too long.</p>
+                <p ng-show="userForm.new_password_confirmation.$invalid &&
+                            userForm.new_password_confirmation.$error.minlength &&
+                            userForm.new_password_confirmation.$touched"
+                            class="help-block">Password is too short, Please enter more than 8 characters.</p>
+                <p ng-show="userForm.new_password_confirmation.$invalid && (vm.formSubmitted || vm.errors.new_password_confirmation)" class="help-block">{{vm.errors.new_password_confirmation}}</p>
+                <p ng-show="userForm.new_password_confirmation.$error.passwordVerify && (vm.formSubmitted || userForm.new_password_confirmation.$touched)"  class="help-block">Password Mismatch</p>
+                <p ng-show="userForm.new_password_confirmation.customError"  class="help-block">{{userForm.new_password.customError}}</p>
+              </div>
+            </div>
+          </div>
+          <div class="box-footer">
+            <a ui-sref="app.userlist" class="btn btn-default"><i class="fa fa-angle-double-left"></i> Back</a>
+            <button type="submit" class="btn btn-primary pull-right">Update</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+

angular/app/components/user-profile/user-profile.component.js

@@ -0,0 +1,65 @@
+class UserProfileController{
+    constructor($stateParams, $state, API){
+        'ngInject';
+
+      this.$state = $state
+      this.formSubmitted = false
+      this.alerts = []
+      this.userRolesSelected = []
+
+      if ($stateParams.alerts) {
+        this.alerts.push($stateParams.alerts)
+      }
+
+      let UserData = API.service('me', API.all('users'))
+      UserData.one().get()
+        .then((response) => {
+          this.userdata = API.copy(response)
+          this.userdata.data.current_password = ''
+          this.userdata.data.new_password = ''
+          this.userdata.data.new_password_confirmation = ''
+        })
+    }
+
+    save (isValid, userForm) {
+      if (isValid) {
+        let $state = this.$state
+
+        this.userdata.put()
+          .then(() => {
+            let alert = { type: 'success', 'title': 'Success!', msg: 'Profile has been updated.' }
+            $state.go($state.current, { alerts: alert})
+          }, (response) => {
+            let formErrors = []
+
+            if(angular.isDefined(response.data.errors.message)) {
+              formErrors = response.data.errors.message[0];
+            } else {
+              formErrors = response.data.errors;
+            }
+
+            angular.forEach(formErrors, function(value, key) {
+              let varkey = key.replace("data.", "")
+              userForm[varkey].$invalid = true;
+              userForm[varkey].customError = value[0];
+            });
+
+            this.formSubmitted = true;
+          })
+      } else {
+        this.formSubmitted = true;
+      }
+    }
+
+    $onInit(){
+    }
+}
+
+export const UserProfileComponent = {
+    templateUrl: './views/app/components/user-profile/user-profile.component.html',
+    controller: UserProfileController,
+    controllerAs: 'vm',
+    bindings: {}
+}
+
+

angular/config/routes.config.js

@@ -52,6 +52,20 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
         }
       }
     })
+    .state('app.profile', {
+      url: '/profile',
+      data: {
+        auth: true
+      },
+      views: {
+        'main@app': {
+          template: '<userProfile></userProfile>'
+        }
+      },
+      params: {
+        alerts: null
+      }
+    })
     .state('app.userlist', {
       url: '/user-lists',
       data: {

angular/index.components.js

@@ -1,3 +1,4 @@
+import { UserProfileComponent } from './app/components/user-profile/user-profile.component';
 import { UserVerificationComponent } from './app/components/user-verification/user-verification.component'
 import { ComingSoonComponent } from './app/components/coming-soon/coming-soon.component'
 import { UserEditComponent } from './app/components/user-edit/user-edit.component'
@@ -16,6 +17,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
 import { RegisterFormComponent } from './app/components/register-form/register-form.component'
 
 angular.module('app.components')
+	.component('userprofile', UserProfileComponent)
   .component('userVerification', UserVerificationComponent)
   .component('comingsoon', ComingSoonComponent)
   .component('useredit', UserEditComponent)

angular/index.directives.js

@@ -1,4 +1,6 @@
 import { RouteBodyClassComponent } from './app/components/route-bodyclass/route-bodyclass.component'
+import { PasswordVerifyClassComponent } from './app/components/password-verify/password-verify.component'
 
 angular.module('app.components')
   .directive('routeBodyclass', RouteBodyClassComponent)
+  .directive('passwordVerify', PasswordVerifyClassComponent)

app/Http/Controllers/UserController.php

@@ -8,9 +8,72 @@
 use Bican\Roles\Models\Role;
 use Bican\Roles\Models\Permission;
 use Input;
+use Auth;
+use Hash;
+use Validator;
 
 class UserController extends Controller
 {
+    public function getMe()
+    {
+        $user = Auth::user();
+
+        return response()->success($user);
+    }
+
+    public function putMe(Request $request)
+    {
+        $user = Auth::user();
+
+        $this->validate($request, [
+            'data.name' => 'required|min:3',
+            'data.email' => 'required|email|unique:users,email,'.$user->id
+        ]);
+
+        $userForm = app('request')
+                    ->only(
+                        'data.current_password',
+                        'data.new_password',
+                        'data.new_password_confirmation',
+                        'data.name',
+                        'data.email'
+                    );
+
+        $userForm = $userForm['data'];
+        $user->name = $userForm['name'];
+        $user->email = $userForm['email'];
+
+        if ($request->has('data.current_password')) {
+            Validator::extend('hashmatch', function ($attribute, $value, $parameters) {
+                return Hash::check($value, Auth::user()->password);
+            });
+
+            $rules = [
+                'data.current_password' => 'required|hashmatch:data.current_password',
+                'data.new_password' => 'required|min:8|confirmed',
+                'data.new_password_confirmation' => 'required|min:8',
+            ];
+
+            $payload = app('request')->only('data.current_password', 'data.new_password', 'data.new_password_confirmation');
+
+            $messages = array(
+                'hashmatch' => 'Invalid Password',
+            );
+
+            $validator = app('validator')->make($payload, $rules, $messages);
+
+            if ($validator->fails()) {
+                return response()->error($validator->errors());
+            } else {
+                $user->password = Hash::make($userForm['new_password']);
+            }
+        }
+
+        $user->save();
+
+        return response()->success('success');
+    }
+
     /**
      * Get all users
      *

tests/angular/app/components/user-profile.component.spec.js

@@ -0,0 +1,11 @@
+ngDescribe({
+    name: 'Test user-profile component',
+    modules: 'app',
+    element: '<user-profile></user-profile>',
+    tests: function (deps) {
+
+        it('basic test', () => {
+            //
+        });
+    }
+});