value-password.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">

<!--

    Print the warn message if the value does not in the given Range

Example:

    <value-password max-value="100" message="Value to high">
        <input type="text" value="10000" />
    </value-password>


@demo
-->
<dom-module id="value-fill">

  <style>
    :host {
       }

  </style>

  <template>
    <content></content>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'value-password',

    properties: {

      referenceId: String,
      messageOk: String,
      messageError: String
   },

    // Element Lifecycle

    ready: function() {
    },

    attached: function() {
        
        var these = this;

        these.inputElement = Polymer.dom(these).querySelector('input');
        
        // Array with different Regex Tests all positive
        these.regexTests = [];
        
        //Mindestens eine Zahl
        these.regexTests.push( { regex: /\d/, name: "number" } );
        
        //Mindestens eine Kleinbuchstabe
        these.regexTests.push( { regex: /[a-z]/, name: "small" } );
        
        //Mindestens ein Großbuchstabe
        these.regexTests.push( { regex: /[A-Z]/, name: "capital" } );
        
        //Keine dieser Zeichen enthalten
        these.regexNegative = /[\s`´]/;

        if ( these.inputElement) {

            setInterval(function() { these.changeValue() }, 200);

            // Prepare warning
            these.warn_node           = document.createElement('span');
            these.warn_node.className = 'error';
            these.warn_node.innerHTML = these.messageError;
            
            these.ok_node             = document.createElement('span');
            these.ok_node.className = 'success';
            these.ok_node.innerHTML = these.messageOk;
            these.ok_node.style.color = "#519951";
            these.ok_node.style.display = "block";
            
            these.passwordOk = true;
            
            // Check initial value!
            these.changeValue();
        }

   },

    detached: function() {
    },

    // Value changed, check!
    changeValue: function() {

        var these = this;
        
        if( these.inputElement.value !== 'notsetnotset' ) {
        
            if( these.inputElement.value.length < 9 || these.inputElement.value.length > 30 ) {
                
            	these.warn_node.innerHTML = 'Mindestens 9, maximal 30 Zeichen';
                Polymer.dom(these).appendChild(these.warn_node);
                
                if ( Polymer.dom(these).querySelector('span.success') ) {
                    
                    Polymer.dom(these).removeChild(these.ok_node);
                }
                
            } else {
                
            	these.passwordOk = true;
                these.regexTests.forEach(
                    function(element) {
                        
                        if(element.regex.test(these.inputElement.value) === false) {
                        
                            these.passwordOk = false;
                        } 
                    }
                );
                
                if( these.regexNegative.test(these.inputElement.value) === true ) {
                    
                    these.warn_node.innerHTML = "Leerzeichen oder Akzentzeichen sind nicht erlaubt";
                    Polymer.dom(these).appendChild(these.warn_node);
                    if ( Polymer.dom(these).querySelector('span.success') ) {
                        
                        Polymer.dom(these).removeChild(these.ok_node);
                    }
                } else if (these.passwordOk === false) {
                	
                    these.warn_node.innerHTML = these.messageError;
                    Polymer.dom(these).appendChild(these.warn_node);
                    if ( Polymer.dom(these).querySelector('span.success') ) {
                        
                        Polymer.dom(these).removeChild(these.ok_node);
                    }
                } else {
                
                    these.warn_node.innerHTML = these.messageError;
                    Polymer.dom(these).appendChild(these.ok_node);
                    if ( Polymer.dom(these).querySelector('span.error') ) {
                        
                        Polymer.dom(these).removeChild(these.warn_node);
                    }
                }
            }
            
        } else {
        
            if ( Polymer.dom(these).querySelector('span.error') ) {
                
                Polymer.dom(these).removeChild(these.warn_node);
            }
            if ( Polymer.dom(these).querySelector('span.success') ) {
                
                Polymer.dom(these).removeChild(these.ok_node);
            }
        }
    }

  });


</script>