Added forgot password / reset password module

CHANGELOG.md

@@ -1,3 +1,31 @@
-### v0.0.1
+# Change Log
 
-+ Initial Commit
+## [v0.1.1](https://github.com/silverbux/laravel-angular-admin/tree/v0.1.1) (2016-05-23)
+[Full Changelog](https://github.com/silverbux/laravel-angular-admin/compare/v0.1.0...v0.1.1)
+
+**Merged pull requests:**
+
+- Added forgot password / reset password module [\#18](https://github.com/silverbux/laravel-angular-admin/pull/18) ([silverbux](https://github.com/silverbux))
+- User Profile [\#17](https://github.com/silverbux/laravel-angular-admin/pull/17) ([silverbux](https://github.com/silverbux))
+
+## [v0.1.0](https://github.com/silverbux/laravel-angular-admin/tree/v0.1.0) (2016-05-20)
+**Merged pull requests:**
+
+- Added Database Seeders [\#16](https://github.com/silverbux/laravel-angular-admin/pull/16) ([silverbux](https://github.com/silverbux))
+- User email verification [\#15](https://github.com/silverbux/laravel-angular-admin/pull/15) ([silverbux](https://github.com/silverbux))
+- Ability to set role permissions [\#14](https://github.com/silverbux/laravel-angular-admin/pull/14) ([silverbux](https://github.com/silverbux))
+- Updating demo [\#13](https://github.com/silverbux/laravel-angular-admin/pull/13) ([silverbux](https://github.com/silverbux))
+- Users List/ Edit and Role Settings [\#12](https://github.com/silverbux/laravel-angular-admin/pull/12) ([silverbux](https://github.com/silverbux))
+- User Permission Module [\#11](https://github.com/silverbux/laravel-angular-admin/pull/11) ([silverbux](https://github.com/silverbux))
+- Going for standardjs [\#9](https://github.com/silverbux/laravel-angular-admin/pull/9) ([silverbux](https://github.com/silverbux))
+- Access control list [\#8](https://github.com/silverbux/laravel-angular-admin/pull/8) ([silverbux](https://github.com/silverbux))
+- Access control list [\#7](https://github.com/silverbux/laravel-angular-admin/pull/7) ([silverbux](https://github.com/silverbux))
+- Merge pull request \#4 from silverbux/master [\#5](https://github.com/silverbux/laravel-angular-admin/pull/5) ([silverbux](https://github.com/silverbux))
+- production parameter + elixir [\#4](https://github.com/silverbux/laravel-angular-admin/pull/4) ([silverbux](https://github.com/silverbux))
+- Heroku [\#3](https://github.com/silverbux/laravel-angular-admin/pull/3) ([silverbux](https://github.com/silverbux))
+- Heroku Deployment [\#2](https://github.com/silverbux/laravel-angular-admin/pull/2) ([silverbux](https://github.com/silverbux))
+- Heroku [\#1](https://github.com/silverbux/laravel-angular-admin/pull/1) ([silverbux](https://github.com/silverbux))
+
+
+
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*

angular/app/components/forgot-password/forgot-password.component.html

@@ -0,0 +1,17 @@
+<form ng-submit="vm.submit()" class="ForgotPassword-form">
+    <div class="callout callout-danger" ng-if="vm.errorTrigger">
+        <h4>Error:</h4>
+        <p>Please check your email and try again.</p>
+    </div>
+    <div class="form-group has-feedback">
+        <input type="email" class="form-control" placeholder="Please enter your email address" ng-model="vm.email">
+        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+    </div>
+    <div class="row">
+        <div class="col-xs-8">
+        </div>
+        <div class="col-xs-4">
+            <button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,30 @@
+class ForgotPasswordController {
+  constructor (API, $state) {
+    'ngInject'
+
+    this.API = API
+    this.$state = $state
+    this.errorTrigger = false
+  }
+
+  $onInit () {
+    this.email = ''
+  }
+
+  submit () {
+    this.API.all('auth/password/email').post({
+      email: this.email
+    }).then(() => {
+      this.$state.go('login', { successMsg: `Please check your email for instructions on how to reset your password.` })
+    }, () => {
+      this.errorTrigger = true
+    })
+  }
+}
+
+export const ForgotPasswordComponent = {
+  templateUrl: './views/app/components/forgot-password/forgot-password.component.html',
+  controller: ForgotPasswordController,
+  controllerAs: 'vm',
+  bindings: {}
+}

angular/app/components/forgot-password/forgot-password.less

@@ -0,0 +1,3 @@
+.ForgotPassword-input{
+    margin-bottom: 0;
+}

angular/app/components/login-form/login-form.component.html

@@ -11,6 +11,10 @@ <h4>Email Unverified</h4>
         <h4>Registration Success!</h4>
         <p>A verification link has been sent to your Email Account. Thank You!</p>
     </div>
+    <div class="callout callout-success" ng-if="vm.successMsg">
+        <h4>Success!</h4>
+        <p>{{ vm.successMsg }}</p>
+    </div>
     <div class="form-group has-feedback">
         <input type="email" class="form-control" placeholder="Email" ng-model="vm.email">
         <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
@@ -34,6 +38,6 @@ <h4>Registration Success!</h4>
     <a href="/auth/google" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google"></i> Sign in using Google</a>
     <a href="/auth/facebook" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using Facebook</a>
 </div>
-<a href="#">I forgot my password</a>
+<a ui-sref="forgot_password">I forgot my password</a>
 <br>
 <a ui-sref="register" class="text-center">Register a new membership</a>

angular/app/components/login-form/login-form.component.js

@@ -8,6 +8,7 @@ class LoginFormController {
     this.AclService = AclService
 
     this.registerSuccess = $stateParams.registerSuccess
+    this.successMsg = $stateParams.successMsg
     this.loginfailed = false
     this.unverified = false
     this.email = ''

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

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

angular/app/components/reset-password/reset-password.component.html

@@ -0,0 +1,28 @@
+<form ng-submit="vm.submit()">
+    <div ng-if="!vm.isValidToken" layout="row" layout-align="center center">
+        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
+    </div>
+    <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 ng-show="vm.isValidToken">
+        <div class="form-group has-feedback">
+            <input type="password" ng-model="vm.password" class="form-control" placeholder="Please enter your new password">
+            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+        </div>
+        <div class="form-group has-feedback">
+            <input type="password" ng-model="vm.password_confirmation" class="form-control" placeholder="Please confirm your new password">
+            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+        </div>
+
+        <div class="row">
+            <div class="col-xs-8">
+            </div>
+            <div class="col-xs-4">
+                <button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
+            </div>
+        </div>
+    </div>
+</form>
+

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

@@ -0,0 +1,58 @@
+class ResetPasswordController {
+  constructor (API, $state) {
+    'ngInject'
+
+    this.API = API
+    this.$state = $state
+    this.alerts = []
+  }
+
+  $onInit () {
+    this.password = ''
+    this.password_confirmation = ''
+    this.isValidToken = false
+
+    this.verifyToken()
+  }
+
+  verifyToken () {
+    let email = this.$state.params.email
+    let token = this.$state.params.token
+
+    this.API.all('auth/password').get('verify', {
+    email, token}).then(() => {
+      this.isValidToken = true
+    }, () => {
+      this.$state.go('app.landing')
+    })
+  }
+
+  submit () {
+    this.alerts = []
+    let data = {
+      email: this.$state.params.email,
+      token: this.$state.params.token,
+      password: this.password,
+      password_confirmation: this.password_confirmation
+    }
+
+    this.API.all('auth/password/reset').post(data).then(() => {
+      this.$state.go('login', { successMsg: `Your password has been changed, You may now login.` })
+    }, (res) => {
+      let alrtArr = []
+
+      angular.forEach(res.data.errors, function (value) {
+        alrtArr = { type: 'error', 'title': 'Error!', msg: value[0]}
+      })
+
+      this.alerts.push(alrtArr)
+    })
+  }
+}
+
+export const ResetPasswordComponent = {
+  templateUrl: './views/app/components/reset-password/reset-password.component.html',
+  controller: ResetPasswordController,
+  controllerAs: 'vm',
+  bindings: {}
+}

angular/app/components/reset-password/reset-password.less

@@ -0,0 +1,3 @@
+.ResetPassword-input{
+    margin-bottom: 0;
+}

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

@@ -1,65 +1,62 @@
-class UserProfileController{
-    constructor($stateParams, $state, API){
-        'ngInject';
+class UserProfileController {
+  constructor ($stateParams, $state, API) {
+    'ngInject'
 
-      this.$state = $state
-      this.formSubmitted = false
-      this.alerts = []
-      this.userRolesSelected = []
+    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 = ''
-        })
+    if ($stateParams.alerts) {
+      this.alerts.push($stateParams.alerts)
     }
 
-    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;
+    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]
           })
-      } else {
-        this.formSubmitted = true;
-      }
-    }
 
-    $onInit(){
+          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: {}
+  templateUrl: './views/app/components/user-profile/user-profile.component.html',
+  controller: UserProfileController,
+  controllerAs: 'vm',
+  bindings: {}
 }
-
-

angular/app/pages/forgot-password/forgot-password.less

@@ -0,0 +1,4 @@
+.ForgotPassword-formContainer{
+    margin-top: 80px;
+    margin-bottom: 80px;
+}

angular/app/pages/forgot-password/forgot-password.page.html

@@ -0,0 +1,10 @@
+<div class="login-box">
+  <div class="login-logo">
+    <a ui-sref="login"><b>Admin</b>LTE</a>
+  </div>
+  <div class="login-box-body">
+    <h3>Forgot your password?</h3>
+    <forgot-password></forgot-password>
+    <a ui-sref="login">Back to Login Page</a>
+  </div>
+</div>

angular/app/pages/reset-password/reset-password.less

@@ -0,0 +1,4 @@
+.ResetPassword-formContainer{
+    margin-top: 80px;
+    margin-bottom: 80px;
+}