Search code examples
angularjsangular-directive

Angular (v1) directive to mask (from display, not model) any random substring in an input text field

Objective: Ability to hide/mask a substring of a text input field, without affecting the ng-model variable

Example:

<input type="text" placeholder="enter URL" ng-model="input.url" mask="dilbert">

If the user enters admin:[email protected] then the display shows admin:*******@mylocation.host.com while $scope.input.url will contain admin:[email protected]

Is this possible? I have a situation where I just need to hide the password inside URLs when displaying forms, should the user enter it. The workaround is to keep a display variable and a cloned actual variable but that is not really an elegant solution.

Further motivation explained (to address WilliamB's comment below)

This requirement is for a mobile app which requires a URL to be configured. That URL may include basic auth credentials if the user has configured the backend server to use basic auth (Every user of this mobile app uses their own server)

Here is a sample screen shot: enter image description here

The ask

a) When the URL field is displayed, but not being edited, the password is masked without affecting the model variable

b) To keep this simple, when the URL fields are being edited, the password is displayed as regular text (in focus)

c) the mask='string' ask was a simplification. In reality, this usecase would likely be a mask directive and if attached to an input text field, would mask the password text when input is of format url://user:password@domain/path

I realize this is only a basic masking - but its a mobile app, and very few people will start dissecting DOMs to look at what is masked

Solution

  • The final solution that works exactly as I want: (doesn't include a generic mask, but can be easily modified if needed - my real need was to hide the user:password field of a URI)

    //credit: http://stackoverflow.com/a/23931217/1361529
.directive('hidepassword', function () {

  var modelSet = function (str)
  {

        return str;
  };

  var viewSet = function (str)
  {
        //URI.js: https://github.com/garycourt/uri-js
        if (!str) return str;
        var c = URI.parse(str);
        if (c.userinfo) c.userinfo="***:***";
        var vc = URI.serialize({scheme : c.scheme, 
                                userinfo: c.userinfo,
                                host: c.host,
                                port: c.port,
                                path: c.path,
                                query: c.query,
                                fragment: c.fragment
                                });
        console.log ("CONVERTED IS "+vc);


        return vc;
  };

  return {

    restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attr, ngModel) {
        ngModel.$parsers.push(modelSet);
        ngModel.$formatters.push(viewSet);

        element.bind('blur', function() {
          element.val(viewSet(ngModel.$modelValue));
        });
        element.bind('focus', function () {
          element.val(ngModel.$modelValue);
        });

      }
  };
})