Implement Change Password using AngularJS in ASP.Net MVC

Last Reply 5 months ago By dharmendr

Posted 5 months ago

Hi,

I have one table with relevant fields Id,UserName and Password

1  mahesh  mahesh

Currently i am going to do change password functionality using Old password

Ex:I would like tochange password=mahesh to mahesh1

Could you please help me

@{
    Layout = null;
}
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",  []);
        app.directive('validPasswordC', function () {
            return {
                require: 'ngModel',
                scope: {

                    reference: '=validPasswordC'

                },
                link: function (scope, elm, attrs, ctrl) {
                    ctrl.$parsers.unshift(function (viewValue, $scope) {

                        var noMatch = viewValue != scope.reference
                        ctrl.$setValidity('noMatch', !noMatch);
                        return (noMatch) ? noMatch : !noMatch;
                    });

                    scope.$watch("reference", function (value) {;
                        ctrl.$setValidity('noMatch', value === ctrl.$viewValue);

                    });
                }
            }
        });

        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {

        }]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div>
            <br />
            <br />
            <br />
            <div id="wrapper" class="clearfix">
                <div class="well">
                    <form name="userForm" novalidate>

                        <div class="form-horizontal">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="Passeord">Password</label>
                                    <input type="text" class="form-control" ng-model="Password" />
                                </div>
                                <div class="col-md-3">
                                    <label for="Password">New Password</label>
                                    <input type="text" class="form-control" ng-model="Password1" />

                                </div>
                                <div class="col-md-3">
                                    <label for="Password">Confirm New  Password</label>
                                    <input type="text" class="form-control" name="Password2" ng-model="Password2"  valid-password-c="Password1"/>
                                    <p style="color: red" ng-show="userForm.Password2.$error.noMatch" class="error">Passwords do not match.</p>

                                </div>
                            </div>
                            <div></div>
                            <div class="form-group" style="width: 120%;  padding: 10px;">
                                <div class="col-md-offset-2 col-md-5">
                                    <p>
                                        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="Save()"><span class="glyphicon glyphicon-ok"></span>Change Password</button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <hr style="width: 550px;" />
            <br />
        </div>
    </div>

</body>

</html>

 

Posted 5 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult UpdatePassword(string UserName, string OldPassword, string NewPassword)
    {
        // Get old password from database based on user name for compare.
        if (OldPassword == "123")
        {
            // Code for updating new password.
            return Json("Password changed Successfully.");
        }
        else
        {
            return Json("User Name Or old password does not match with our Database.");
        }
    }
}

View

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.IsVisible = false;
            $scope.Save = function (isValid) {
                if (!$scope.IsVisible) {
                    if (isValid) {
                        $http({
                            method: 'POST',
                            url: 'Home/UpdatePassword',
                            params: { UserName: $scope.username, OldPassword: $scope.oldpassword, NewPassword: $scope.newpassword }
                        }).success(function (data, status, headers, config) {
                            alert(data);
                        }).error(function (data, status, headers, config) {
                            $scope.message = 'Unexpected Error';
                        });
                    } else {
                        if ($scope.userForm.$error.required != undefined) {
                            for (var i = 0; i < $scope.userForm.$error.required.length; i++) {
                                $scope.userForm.$error.required[i].$pristine = false;
                            }
                        }
                    }
                }
            }
            $scope.Compare = function () {
                if ($scope.newpassword != $scope.confirmpassword) {
                    $scope.IsVisible = true;
                } else {
                    $scope.IsVisible = false;
                }
            }
        } ]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div>
            <div id="wrapper" class="clearfix">
                <div class="well">
                    <form name="userForm" novalidate>
                    <div class="form-horizontal">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="UserName">
                                    User Name</label>
                                <input type="text" name="username" class="form-control" ng-model="username" required />
                                <div ng-show="userForm.username.$error.required && !userForm.username.$pristine"
                                    class="help-block" style="color: red">
                                    User Name required</div>
                            </div>
                            <div class="col-md-3">
                                <label for="OldPassword">
                                    Old Password</label>
                                <input type="text" name="oldpassword" class="form-control" ng-model="oldpassword"
                                    required />
                                <div ng-show="userForm.oldpassword.$error.required && !userForm.oldpassword.$pristine"
                                    class="help-block" style="color: red">
                                    Enter Old Password</div>
                            </div>
                            <div class="col-md-3">
                                <label for="NewPassword">
                                    New Password</label>
                                <input type="text" name="newpassword" class="form-control" ng-model="newpassword"
                                    required />
                                <div ng-show="userForm.newpassword.$error.required && !userForm.newpassword.$pristine"
                                    class="help-block" style="color: red">
                                    New Password required</div>
                            </div>
                            <div class="col-md-3">
                                <label for="ConfirmPassword">
                                    Confirm Password</label>
                                <input type="text" name="confirmpassword" class="form-control" ng-model="confirmpassword"
                                    required ng-keyup="Compare()" />
                                <div ng-show="userForm.confirmpassword.$error.required && !userForm.confirmpassword.$pristine"
                                    class="help-block" style="color: red">
                                    Confirm New Password required</div>
                                <div ng-show="IsVisible" class="help-block" style="color: red">
                                    New and Confirm Password do not match</div>
                            </div>
                        </div>
                        <div>
                        </div>
                        <div class="form-group" style="width: 120%; padding: 10px;">
                            <div class="col-md-offset-2 col-md-5">
                                <p>
                                    <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="Save(userForm.$valid)">
                                        <span class="glyphicon glyphicon-ok"></span>Change Password</button>
                                </p>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot