javascript - Angular 密码生成器服务

Question

我有一个密码生成器，我在两个不同的 Controller 中使用它，所以我想我应该将它移到一个服务中。

1. 我不能 100% 确定某项服务是最好的方法，并且想知道如果不是最好的方法是什么。
2. 我遇到了一个问题。当我更新密码输入字段时，该服务会发回一个 passWord 对象，我必须使用 ng-model="passWord.password"。

问题是这样的:

因为表单有其他字段使用 user.VALUE 我需要读取我的密码字段 ng-model="user.password" 但这正在破坏服务。下面是代码。

服务:

app.factory('PassWord', function($resource, $log, $rootScope, $location, $sessionStorage, $q, Data){

    var passWord = {
        inputType:"password",
        showPwTxt:"Show"
    };

    // Hide & show password function
    passWord.hideShowPassword = function(){
        if (passWord.inputType == 'password') {
            type = 'text';
            txt = 'Hide';
        }
        else {
          type = 'password';
          txt = 'Show';
        }

        passWord.inputType = type;
        passWord.showPwTxt = txt;

    };

    // test for medium and strong passwords
    var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[-!@#\"\$%\^&\*()_+|=\\]\\[{}~`:\";\'<>?,.\/])(?=.{8,})");
    var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

    // create an object for the pw strength
    passWord.passwordStrength = {};

    passWord.analyze = function(value) {
        if(strongRegex.test(value)) {
            color = "#57A83F";
            txt = "Strong";
        } else if(mediumRegex.test(value)) {
            color = "#FF9800";
            txt = "Medium";
        } else {
            color = "#E03930";
            txt = "Weak";
        }

        passWord.passwordStrength["color"] = color;
        passWord.pwStrengthTxt = txt;

    };

    // password generator
    passwordLength = 12;
    addUpper       = true;
    addNumbers     = true;
    addSymbols     = true;

    passWord.createPassword = function(){
        var lowerCharacters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var upperCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        var numbers = ['0','1','2','3','4','5','6','7','8','9'];
        var symbols = ['!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', ']', '^', '_', '`', '{', '|', '}', '~'];
        var finalCharacters = lowerCharacters;
        //if(passWord.addUpper){
            finalCharacters = finalCharacters.concat(upperCharacters);
        //}
        //if(passWord.addNumbers){
            finalCharacters = finalCharacters.concat(numbers);
        //}
        //if(passWord.addSymbols){
            finalCharacters = finalCharacters.concat(symbols);
        //}
        var passwordArray = [];
        for (var i = 1; i < passwordLength; i++) {
            passwordArray.push(finalCharacters[Math.floor(Math.random() * finalCharacters.length)]);
        };

        //update the passwrod input field in the form
        passWord.password = passwordArray.join("");

        //analyze thepassword strength
        passWord.analyze(passWord.password);

        if(passWord.pwStrengthTxt == "Medium" || passWord.pwStrengthTxt == "Weak") {
            passwordArray = [];
            passWord.createPassword();
        }
    };

    return passWord;
});

HTML:

<form name="resetForm" class="" role="form">

    <div class="form-group row" ng-show="!uid">

        <div class="col-sm-12">

            <input type="email" class="form-control" placeholder="Email" name="email" ng-model="user.email" ng-required="!uid"/>

            <span ng-show="!resetForm.email.$error.required && !resetForm.email.$error.email" class="glyphicon glyphicon-ok form-control-feedback" ></span>

            <span ng-show="resetForm.email.$touched">
                <small class="errorMessage" data-ng-show="resetForm.email.$error.required">Email is required.</small>
            </span>

            <small class="errorMessage" ng-show="resetForm.email.$error.email">Email is not valid</small>

        </div>

    </div>

    <div class="form-group row" ng-hide="!uid">
        <div class="col-sm-12">
            <span class="block input-icon input-icon-right">
                <div class="input-group">
                <input type="{{passWord.inputType}}" class="form-control" name="password" placeholder="Password" ng-minlength="6" ng-model="passWord.password" ng-change="passWord.analyze(passWord.password)" ng-required="uid"/>
                <span id="spnPassword" class="add-on input-group-addon" ng-click="passWord.hideShowPassword()" style="cursor:pointer;">{{passWord.showPwTxt}}</span>
                </div>
                <span ng-hide="resetForm.password.$error.required || resetForm.password.$error.minlength" class="glyphicon glyphicon-ok form-control-feedback" ></span>
                <small class="errorMessage" ng-show="resetForm.password.$error.minlength">Too short! Minimum 6 characers</small>
            </span>
            <div ng-show="passWord.password.length">
                <small>Password strength: <span ng-style="passWord.passwordStrength">{{passWord.pwStrengthTxt}}</span></small>
            </div>
            <br>
            <button type="button" class="btn btn-sm btn-primary" data-ng-click="passWord.createPassword()">Generate Password</button>
        </div>
    </div>

    <div class="clearfix">
        <div class="row">

            <span class="lbl col-sm-7"><span ng-show="!uid">Remembered your password? <a href="login">SignIn</a></span></span>

            <div class="col-sm-5 text-right">
                <button type="submit" class="btn btn-info" ng-click="resetPassword(user)" data-ng-disabled="resetForm.$invalid">Reset Password</button>
            </div>

        </div>
    </div>

</form>

Controller :

app.controller('resetCtrl', function ($scope, $rootScope, $log, $routeParams, $location, $http, Data, PassWord) {

    $scope.user = {email:'',password:''};

    $scope.passWord = PassWord;

    $scope.resetPassword = function (user) {
        $log.log('user is - ',user);
        // Do Stuff
    };

});

Answer 1

服务似乎是处理这个问题的好方法。只需稍微调整您的代码即可支持用户对象上的密码字段。然后抽象 Controller 中的服务方法，以便您可以更新您的范围。

app.controller('resetCtrl', function ($scope, $rootScope, $log, $routeParams, $location, $http, Data, PassWord) {

    $scope.user = {email:'',password:''};

    $scope.user.password = PassWord.createPassword();

    $scope.generateNewPassword = function() {
        $scope.user.password = PassWord.createPassword();
    }
});

然后使用新的生成密码功能更新模板

<button type="button" class="btn btn-sm btn-primary" data-ng-click="generateNewPassword()">Generate Password</button>

同时更新输入框中的密码模型，以将用户对象 ng-model="passWord.password" 与 ng-model="user.password" 相匹配