client-ui/source/shared/ssn-directive.js

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

(function () {
    'use strict';

    angular.module(moduleName).directive('ssn', ssnController);

    function ssnController() {

        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {

                var doSsnMasking = function (value, modelValue, fullMask) {
                    //create the plain ssn string
                    var plainssn = '';

                    //if we already have a real field value we need to work out the difference
                    //between that and the value that's in the input field
                    if (modelValue !== 'undefined' && modelValue !== '')
                    {
                        //run through the characters in the input string
                        //and build the plain ssn out of the corresponding characters
                        //from the real field, and any plain characters in the input
                        for (var i = 0; i < value.length; i++)
                        {
                            if (value.charAt(i) === '•')
                            {
                                plainssn += modelValue.charAt(i);
                            }
                            else
                            {
                                plainssn += value.charAt(i);
                            }
                        }
                    }

                    //if there's no real field value then we're doing this for the first time
                    //so whatever's in the input field is the entire plain ssn
                    else
                    {
                        plainssn = value;
                    }

                    //get the masked version of the plainssn, according to fullmask 
                    //and passing the textbox reference so we have its symbol and limit properties
                    var maskedstring = encodeMaskedSsn(plainssn, fullMask);

                    //then we modify the textfield values
                    //if (AND ONLY IF) one of the values are now different from the original
                    //(this condition is essential to avoid infinite repetition 
                    // leading to stack overflow, from onpropertychange in IE
                    // [value changes, fires event, which changes value, which fires event ...])
                    //we check both instead of just one, so that we can still allow the action
                    //of changing the mask without modifying the ssn itself
                    if (modelValue !== plainssn || value !== maskedstring)
                    {
                        //copy the plain ssn to the real field
                        modelValue = plainssn;

                        //then write the masked value to the original textbox
                        value = maskedstring;
                    }
                    return {modelValue: modelValue, viewValue: value};
                };

                var encodeMaskedSsn = function (ssnstring, fullmask) {
                    //the character limit is nominally 1
                    //this is how many characters to leave plain at the end
                    //but if the fullmask flag is true the limit is zero
                    //and the ssn will be fully masked
                    var characterlimit = fullmask === true ? 0 : 1;

                    //create the masked ssn string then iterate  
                    //through he characters in the plain ssn
                    ssnstring = ssnstring.replace(/-/g, '');
                    for (var maskedstring = '', i = 0; i < ssnstring.length; i++)
                    {
                        //if we're below the masking limit, 
                        //add a masking symbol to represent this character
                        if (i < ssnstring.length - characterlimit)
                        {
                            maskedstring += '•';
                            //add dashes where appropriate
                            if (i === 2 || i === 4) {
                                maskedstring += '-';
                            }
                        }
                        //otherwise just copy across the real character
                        else
                        {
                            maskedstring += ssnstring.charAt(i);
                        }
                    }

                    //return the final masked string
                    return maskedstring;
                };

                element.on('blur', function () {
                    if (modelCtrl.$modelValue && modelCtrl.$viewValue) {
                        var ssns = doSsnMasking(modelCtrl.$viewValue, modelCtrl.$modelValue, true);
                        element.val(ssns.viewValue);
                    }
                });

                var formatter, parser;
                formatter = function (value) {
                    if (value) {
                        var ssns = doSsnMasking(modelCtrl.$modelValue, value, true);
                        element.val(ssns.viewValue);
                        return ssns.viewValue;
                    }
                    return value;

                };
                parser = function (value) {
                    var ssns = doSsnMasking(value, modelCtrl.$modelValue, false);
                    element.val(ssns.viewValue);
                    return ssns.modelValue;
                };
                modelCtrl.$formatters.push(formatter);
                return modelCtrl.$parsers.unshift(parser);
            }
        };
    };


})();