react-rails-ux-password-field
Version:
A UX forward password field for react-js using react-rails
10 lines • 10.5 kB
JavaScript
/*!
* React UX Password Field
* version: 0.9.22
*
* MIT Licensed
* github: https://github.com/seethroughtrees/react-ux-password-field/
* demo: https://seethroughtrees.github.io/react-ux-password-field/
*
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-ux-password-field"]=e(require("react")):t["react-ux-password-field"]=e(t.React)}(this,function(t){return function(t){function e(s){if(n[s])return n[s].exports;var i=n[s]={exports:{},id:s,loaded:!1};return t[s].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function s(t,e){var n={};for(var s in t)e.indexOf(s)>=0||Object.prototype.hasOwnProperty.call(t,s)&&(n[s]=t[s]);return n}var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t},a=n(6),o=a.PropTypes,r=n(3),l=n(1),c=a.createClass({displayName:"InputPassword",propTypes:{infoBar:o.bool,statusColor:o.string,statusInactiveColor:o.string,minScore:o.number,changeCb:o.func,toggleMask:o.bool,unMaskTime:o.number,minLength:o.number,strengthLang:o.array,id:o.string},getDefaultProps:function(){return{infoBar:!0,statusColor:r.statusColor,statusInactiveColor:r.statusInactiveColor,zxcvbn:r.zxcvbnSrc,minScore:0,toggleMask:!0,unMaskTime:r.unMaskTime,strengthLang:r.strengthLang,id:"input",name:"",className:"form-control",placeholder:"Password"}},getInitialState:function(){return{value:"",score:0,entropy:0,isPassword:!0,isValid:!1}},getMeterStyle:function(t){var e=""===this.state.value?0:24*t+4;return{width:this.props.zxcvbn?e+"%":"100%",maxWidth:"85%",opacity:this.props.zxcvbn?.01*e+.5:"1",background:this.state.isValid?this.props.statusColor:this.props.statusInactiveColor,height:3,transition:"all 400ms linear",display:"inline-block",marginRight:"1%",marginLeft:"5px"}},unMaskStyle:{color:r.unMaskColor},infoStyle:{width:"100%",overflow:"hidden",height:"20px"},iconStyle:{display:"inline-block",opacity:.25,position:"relative",top:2,width:"3%"},strengthLangStyle:{fontSize:12,position:"relative",top:2},addPasswordType:function(){this.setState({isPassword:!0})},handleInputType:function(){this.setState({isPassword:!this.state.isPassword})},handleChange:function(t){t.preventDefault();var e,n=t.nativeEvent.target,s=t.target.value;this.setState({value:s,isValid:t.target.validity.valid,selectionStart:n.selectionStart,selectionEnd:n.selectionEnd}),this.props.toggleMask&&this.handleToggleMask(),e=this.props.zxcvbn?this.handleZxcvbn(s):this.state.score,this.props.onChange&&this.props.onChange(s,this.state.isValid,e),this.props.minLength&&this.handleMinLength(t.target.value.length)},handleToggleMask:function(){this.setState({isPassword:!1}),this.maskPassword()},handleToggleMaskIcon:function(){this.setState({isPassword:!this.state.isPassword})},handleZxcvbn:function(t){if("undefined"!=typeof zxcvbn||"undefined"!=typeof window.zxcvbn){var e=zxcvbn(t),n=e.score;return this.setState({score:n,entropy:e.entropy}),n<this.props.minScore&&this.setState({isValid:!1}),this.props.changeCb&&this.state.score!==n&&this.props.changeCb(this.state.score,n,t),"debug"===this.props.zxcvbn&&console.debug(e),n}},handleMinLength:function(t){t<=this.props.minLength&&this.setState({isValid:!1})},componentWillMount:function(){var t;this.props.zxcvbn&&"undefined"==typeof zxcvbn&&(t="debug"!==this.props.zxcvbn?this.props.zxcvbn:r.zxcvbnSrc,function(){var e;e=function(){var e,n;return n=document.createElement("script"),n.src=t,n.type="text/javascript",n.async=!0,e=document.getElementsByTagName("head")[0],e.parentNode.insertBefore(n,e)},null!=window.attachEvent?window.attachEvent("onload",e):window.addEventListener("load",e,!1)}.call(this)),this.maskPassword=l(this.addPasswordType,this.props.unMaskTime)},componentWillUnmount:function(){this.maskPassword&&this.maskPassword.cancel()},render:function(){var t;this.props.infoBar&&(t=a.createElement("div",{className:"passwordField__info",style:this.infoStyle},a.createElement("span",{style:this.iconStyle,className:"passwordField__icon"},a.createElement("img",{src:n(5),height:"10",width:"10"})),a.createElement("span",{style:this.getMeterStyle(this.state.score),className:"passwordField__meter"}),a.createElement("span",{style:this.strengthLangStyle,className:"passwordField__strength"},this.props.zxcvbn&&this.state.value.length>0&&this.props.strengthLang.length>0?this.props.strengthLang[this.state.score]:null)));var e=this.props,o=(e.onChange,s(e,["onChange"])),r=this;return setTimeout(function(){if(/Firefox/.test(navigator.userAgent)){var t=r.refs[r.props.id].getDOMNode();t.selectionStart=r.state.selectionStart,t.selectionEnd=r.state.selectionEnd}},1),a.createElement("div",{style:{position:"relative",display:"block"},className:"passwordField","data-valid":this.state.isValid,"data-score":this.state.score,"data-entropy":this.state.entropy},a.createElement("input",i({ref:this.props.id,className:this.props.className,type:this.state.isPassword?"password":"text",name:this.props.name,value:this.state.value,style:this.state.isPassword?null:this.unMaskStyle,onChange:this.handleChange,placeholder:this.props.placeholder},o)),a.createElement("img",{src:n(4),className:this.state.isPassword?"passwordField__mask-icon":"active passwordField__mask-icon",onClick:this.handleToggleMaskIcon}),this.state.value.length>0?a.createElement("div",null,t):null)}});t.exports=c},function(t,e,n){"use strict";function s(t,e,n){function s(){f&&clearTimeout(f),h&&clearTimeout(h),A=0,h=f=y=void 0}function a(e,n){n&&clearTimeout(n),h=f=y=void 0,e&&(A=c(),g=t.apply(m,u),f||h||(u=m=void 0))}function l(){var t=e-(c()-v);0>=t||t>e?a(y,h):f=setTimeout(l,t)}function p(){a(w,f)}function d(){if(u=arguments,v=c(),m=this,y=w&&(f||!E),b===!1)var n=E&&!f;else{h||E||(A=v);var s=b-(v-A),i=0>=s||s>b;i?(h&&(h=clearTimeout(h)),A=v,g=t.apply(m,u)):h||(h=setTimeout(p,s))}return i&&f?f=clearTimeout(f):f||e===b||(f=setTimeout(l,e)),n&&(i=!0,g=t.apply(m,u)),!i||f||h||(u=m=void 0),g}var u,h,g,v,m,f,y,A=0,b=!1,w=!0;if("function"!=typeof t)throw new TypeError(o);if(e=0>e?0:+e||0,n===!0){var E=!0;w=!1}else i(n)&&(E=!!n.leading,b="maxWait"in n&&r(+n.maxWait||0,e),w="trailing"in n?!!n.trailing:w);return d.cancel=s,d}function i(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}var a=n(2),o="Expected a function",r=Math.max,l=a(Date,"now"),c=l||function(){return(new Date).getTime()};t.exports=s},function(t,e){"use strict";function n(t){return!!t&&"object"==typeof t}function s(t,e){var n=null==t?void 0:t[e];return o(n)?n:void 0}function i(t){return a(t)&&u.call(t)==r}function a(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function o(t){return null==t?!1:i(t)?h.test(p.call(t)):n(t)&&l.test(t)}var r="[object Function]",l=/^\[object .+?Constructor\]$/,c=Object.prototype,p=Function.prototype.toString,d=c.hasOwnProperty,u=c.toString,h=RegExp("^"+p.call(d).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");t.exports=s},function(t,e){"use strict";t.exports={statusColor:"#5CE592",statusInactiveColor:"#FC6F6F",unMaskColor:"#000000",unMaskTime:1400,zxcvbnSrc:"https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/1.0/zxcvbn.min.js",strengthLang:["Weak","Okay","Good","Strong","Great"]}},function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAMCAYAAACNzvbFAAAAAXNSR0IArs4c6QAAAs5JREFUKBV1UkloFEEU/VXV3bObzShGMi5JEE/J5OItifEiSERFvAgBFVwuiqIXs4GJ6EE06kEUwYN6EQyioOBB48zdDBHcEolG1GQwIVvPdLq66vt7wuDE5R+q/n/136vq/5rBf6LlwtB6pbCdI2ujlhrUGGOczVP+CRCfIBN3k131Y/+isz/BbeffrJbau8YYtEVjJUbWtpknJafaRQDLMAQGAiE3m7U51QMiFD4+eHrTz2IdXly09L4+RIIjpaWVu9ZU14UW5uellt4VU/B4srsxZHIe11JfdnI5XRWvCZSUrdyjc9mPxNtbrJN/KSKy5r6hG0IE9ldUrYuaVhAyX0cWlOt0DnYlrhYT/Lyld+iEsIJ9q6rroq6ThamJLwvak/fo4mP+OTt8E813mfSAGQhtLVu9MQKcgXIXYfrb6Ndkd0M8L3JnLMh+zLTimtIXgwc2OD7WdC49Xr62ttqwAkDzhtnMZ9t17EetnQ3t/P1kut8KxFpjq2ojEhl4moHj2EBmJH2yH3p85jai8dDflxBaGaZy9EpJ/T4vVLkhYgaiu1/0pq8b9OlTSkuUisZObvihUABwMPOFvzCcV8ojs9B3vxCmRg55HhBPa9DKIzmY5amexm4lnVv25OjCovTAJXEtgkRkzS0v0fAV/FkJAVsKM1vCWRMaIRIFcIlnZ8gD6dxP9STO5t1PdSVOoXIuycwHW2bnQHESNcNRLzXUU3jWYEciXcjzOJ1LsGCRRrVIPKXci8nuxBG/Z9l/2tQ33IRa3UerpFyHK8JibtwG5T0GwfpFmfkW59zN2oWTTBg79Yp4BJzpHHNmZ7nQB191ND4rXLpM1Afbbn4Pz0xM9tEcj6IIeaC9CEPJyDjqZRqFBSCsHEibccQbwbDoeX6mnpz9HX+JFo52XBgum3H1Ps5wO2GbkLFyhjhNhPfk49NoLPrg2fG6uUJ/8f4LzjVgGa5Fw28AAAAASUVORK5CYII="},function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRkNDMzg4M0FFN0IxMUU0OTE2RkY5MzYyMkI3QTVDMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRkNDMzg4NEFFN0IxMUU0OTE2RkY5MzYyMkI3QTVDMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJGQ0MzODgxQUU3QjExRTQ5MTZGRjkzNjIyQjdBNUMyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJGQ0MzODgyQUU3QjExRTQ5MTZGRjkzNjIyQjdBNUMyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NkztvAAAAc9JREFUeNq8lk8oBFEcx2fG5k+0HJRQ/iVy2U1tUsjBzYnI2cUWJyl3XJRSkgOtxEU4keLgQP6kuColoeQgEkXWand8X/3UNM28Z56Z961PO2/fb9535r3f/N7TTdPUnBSLxTSBcsEA6AW1IAw+wD3YAtPg0+1mXdK4DJyAKk7MM+gE506dhuZdleBSYMpUDM5Ah1NnyKOpDnZpWn91C/ZBksZrBhFL/zaopyWQNh4HDZZ2AsQd4kbBFF3ngRnQ8581vgHVdH0M2jgPeWjpz1BePMqscdRiyrQhiF+25VK7bHI12toXgvg9+yTKGpc6TDtPD+DJ0i6RNS6ytZOC+IwtpkA2q1epKLyDb/D2h3uGQQXIBqcyWd1FBeEOZNFM1YEckHYpTGzgKyqbpmWp1kEq9IeCcQRaNP80CZoMQclb8NmUqRys8IxZpenTglHUEOxAhQEZ5/OM01qAMnwah+3Ng2BTpTGr2a1gHnSDCVXGs7Z2QpVxjUNSKjGeo29T+RuHqaRqtOdGVGZ1in6/VH9OYZet01Uhnx5qBLyAIT+MvVQulslLflWuazq+BKFXnvEaWAzI+IA31ezUMEaJE6dDQYb+9yrdMrs7oP9HgAEAXmVa5ulD/g0AAAAASUVORK5CYII="},function(e,n){e.exports=t}])});