change password in modal popup angularJS

Question

I am quite new in programming with c# and also in using AngularJS. I have a button in a MyProfil form that opens a popup to change the password.

This is the button in MyProfile.html

<a href class="btn btn-info btn-lg" data-ng-click="changePasswordDialog()"><span class="glyphicon glyphicon-pencil"></span> {{'ChangePassword' | translate}}</a>

In the popup I have two inputs "newPassword" and "confirmPassword" and two button one to save and one to cancel. Here is the popup html code inside MyProfile.html

`

    <div class="modal-header">
        <button type="button" class="close" ng-click="ok()"
                data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <h2 class="form-login-heading">{{'ChangePassword' | translate}}</h2>
    </div>

    <div class="modal-body">

        <input type="Password" class="form-control" placeholder="{{'Password' | translate}}" data-ng-model="userData.newPassword" required autofocus>
        <input type="password" class="form-control" placeholder="{{'ConfirmPasssword' | translate}}" data-ng-model="userData.confirmPassword" required>          
    </div>
  <div class="wrapper">
    <a href="" class="btn btn-info btn-lg" data-ng-click="changePassword()" type="submit"><span class="glyphicon glyphicon-save"></span> {{'Save'|translate}}</a>
    <a href="" class="btn btn-primary btn-lg" data-ng-click="cancelChangePassword()"><span class="glyphicon glyphicon-remove-sign"></span> {{'Cancel' | translate}}</a>
</div>

`

in the myProfileController.js I have

         $scope.changePasswordDialog = function () {
    $scope.userData = {
        newPassword: "",
        confirmPassword: ""
    };
    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: 'ModalInstanceCtrlChangePassword',
        resolve: {
            userData: function () {
                return $scope.userData;
            }
        }
    });

    modalInstance.result.then(function (userData) {// I need to do somethig here // get the values of the inputs and send it to server sometinglike that
      $scope.selectedItem = userData;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });

Here is the ModalInstanceCtrlChangePassword.js when I have it like this at least I can see the popup 'use strict'; app.controller('ModalInstanceCtrlChangePassword', function ($scope, $modalInstance,userData) {

$scope.userData = userData;
$scope.selectedItem = {
    item: $scope.userData[0]
};

$scope.changePassword = function () {
    $modalInstance.dismiss('cancel');
};

$scope.cancelChangePassword = function () {
    $modalInstance.dismiss('cancel');

};

  });

But when I change the code inside the $scope.changePassword and I call a service then nothing is working even the popup is not showing. Here is it after I've added called the service:

'use strict';
app.controller('ModalInstanceCtrlChangePassword', ['$scope', '$location', 'modalService', '$cookies', function ($scope, $location, modalService, $cookies,$modalInstance ,userData) {

    $scope.userData = {
        emailwork:"",
        newPassword: "",
        confirmpassword: "",
    };

    $scope.userData = userData;
    $scope.selectedItem = {
    item: $scope.userData[0]
};

$scope.changePassword = function () {
    //$modalInstance.dismiss('cancel');
    modalService.changePassword($scope.userData).then(function (response) {
        $location.path('/home');
    },
        function (err) {
            alert("message " + err.error_description.message);
            $scope.message = err.error_description;
        });
};

$scope.cancelChangePassword = function () {
    $modalInstance.dismiss('cancel');

};

  }]);

Here is the modalService.js

'user strict';

app.factory('modalService', ['$http', '$q', 'ngAuthSettings', '$cookies', function($http, $q, ngAuthSettings, $cookies) {

var serviceBase = ngAuthSettings.apiServiceBaseUri;

var modalServiceFactory = {};

var _userInfo = {
    companyId: "",
    userName: "",
    userTableId: "",
    langId: "",
    emailWork: "",
};

if ($cookies.userName && $cookies.userTableId && $cookies.companyId && $cookies.language) {

    _userInfo.userTableId = $cookies.userTableId;
    _userInfo.companyId = $cookies.companyId;
    _userInfo.userName = $cookies.userName;
    _userInfo.langId = $cookies.language;
    _userInfo.emailWork = $cookies.emailWork;
}
var _changePassword = function (userData) {

    var data = {
        // OldPassword: userData.oldPassword,
        emailWork: _userInfo.emailWork,
        NewPassword: userData.newPassword,
        ConfirmPassword: userData.confirmPassword
    };

    var deferred = $q.defer();

    $http.post(serviceBase + 'api/Account/ChangePassword', data).success(function (response) {
        //authService.logOut();
        deferred.resolve(response);
    }).error(function (err, status) {
        //authService.logOut();
        deferred.reject(err);
        alert(err.data.message);
        // authService.logOut();

    });
    return deferred.promise;
}
   modalServiceFactory.changePassword = _changePassword;
return modalServiceFactory;
}]);

Here is the code of ChangePassword in AccountController

  // POST api/Account/ChangePassword
    [System.Web.Http.Route("ChangePassword")]
    public async Task<IHttpActionResult> ChangePassword(Cabin.Web.Models.ChangePasswordBindingModel model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var user = await UserManager.FindByEmailAsync(model.emailWork);
        if (user == null) return BadRequest();
        UserManager.RemovePassword(user.Id);
        var result= UserManager.AddPassword(user.Id, model.NewPassword);
        return !result.Succeeded ? GetErrorResult(result) : Ok();


        //IdentityResult result = await UserManager.ChangePasswordAsync(User.Identity.GetUserId(), model.OldPassword,
        //    model.NewPassword);
    }

I will appreciate any kind of guidance or solution. Thank you

Answer 1

please check this post,looks like you need to have something like:

<div ng-include="modal.html"></div>

to include your modal template first