password.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var common_1 = require("@angular/common");
  14. var domhandler_1 = require("../dom/domhandler");
  15. var Password = /** @class */ (function () {
  16. function Password(el, zone) {
  17. this.el = el;
  18. this.zone = zone;
  19. this.promptLabel = 'Enter a password';
  20. this.weakLabel = 'Weak';
  21. this.mediumLabel = 'Medium';
  22. this.strongLabel = 'Strong';
  23. this.feedback = true;
  24. }
  25. Object.defineProperty(Password.prototype, "showPassword", {
  26. set: function (show) {
  27. this.el.nativeElement.type = show ? 'text' : 'password';
  28. },
  29. enumerable: true,
  30. configurable: true
  31. });
  32. Password.prototype.ngDoCheck = function () {
  33. this.updateFilledState();
  34. };
  35. //To trigger change detection to manage ui-state-filled for material labels when there is no value binding
  36. Password.prototype.onInput = function (e) {
  37. this.updateFilledState();
  38. };
  39. Password.prototype.updateFilledState = function () {
  40. this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;
  41. };
  42. Password.prototype.createPanel = function () {
  43. this.panel = document.createElement('div');
  44. this.panel.className = 'ui-password-panel ui-widget ui-state-highlight ui-corner-all';
  45. this.meter = document.createElement('div');
  46. this.meter.className = 'ui-password-meter';
  47. this.info = document.createElement('div');
  48. this.info.className = 'ui-password-info';
  49. this.info.textContent = this.promptLabel;
  50. this.panel.appendChild(this.meter);
  51. this.panel.appendChild(this.info);
  52. this.panel.style.minWidth = domhandler_1.DomHandler.getOuterWidth(this.el.nativeElement) + 'px';
  53. document.body.appendChild(this.panel);
  54. };
  55. Password.prototype.onFocus = function (e) {
  56. var _this = this;
  57. if (this.feedback) {
  58. if (!this.panel) {
  59. this.createPanel();
  60. }
  61. this.panel.style.zIndex = String(++domhandler_1.DomHandler.zindex);
  62. this.zone.runOutsideAngular(function () {
  63. setTimeout(function () {
  64. domhandler_1.DomHandler.addClass(_this.panel, 'ui-password-panel-visible');
  65. domhandler_1.DomHandler.removeClass(_this.panel, 'ui-password-panel-hidden');
  66. }, 1);
  67. domhandler_1.DomHandler.absolutePosition(_this.panel, _this.el.nativeElement);
  68. });
  69. }
  70. };
  71. Password.prototype.onBlur = function (e) {
  72. var _this = this;
  73. if (this.feedback) {
  74. domhandler_1.DomHandler.addClass(this.panel, 'ui-password-panel-hidden');
  75. domhandler_1.DomHandler.removeClass(this.panel, 'ui-password-panel-visible');
  76. this.zone.runOutsideAngular(function () {
  77. setTimeout(function () {
  78. _this.ngOnDestroy();
  79. }, 150);
  80. });
  81. }
  82. };
  83. Password.prototype.onKeyup = function (e) {
  84. if (this.feedback) {
  85. var value = e.target.value, label = null, meterPos = null;
  86. if (value.length === 0) {
  87. label = this.promptLabel;
  88. meterPos = '0px 0px';
  89. }
  90. else {
  91. var score = this.testStrength(value);
  92. if (score < 30) {
  93. label = this.weakLabel;
  94. meterPos = '0px -10px';
  95. }
  96. else if (score >= 30 && score < 80) {
  97. label = this.mediumLabel;
  98. meterPos = '0px -20px';
  99. }
  100. else if (score >= 80) {
  101. label = this.strongLabel;
  102. meterPos = '0px -30px';
  103. }
  104. }
  105. this.meter.style.backgroundPosition = meterPos;
  106. this.info.textContent = label;
  107. }
  108. };
  109. Password.prototype.testStrength = function (str) {
  110. var grade = 0;
  111. var val;
  112. val = str.match('[0-9]');
  113. grade += this.normalize(val ? val.length : 1 / 4, 1) * 25;
  114. val = str.match('[a-zA-Z]');
  115. grade += this.normalize(val ? val.length : 1 / 2, 3) * 10;
  116. val = str.match('[!@#$%^&*?_~.,;=]');
  117. grade += this.normalize(val ? val.length : 1 / 6, 1) * 35;
  118. val = str.match('[A-Z]');
  119. grade += this.normalize(val ? val.length : 1 / 6, 1) * 30;
  120. grade *= str.length / 8;
  121. return grade > 100 ? 100 : grade;
  122. };
  123. Password.prototype.normalize = function (x, y) {
  124. var diff = x - y;
  125. if (diff <= 0)
  126. return x / y;
  127. else
  128. return 1 + 0.5 * (x / (x + y / 4));
  129. };
  130. Object.defineProperty(Password.prototype, "disabled", {
  131. get: function () {
  132. return this.el.nativeElement.disabled;
  133. },
  134. enumerable: true,
  135. configurable: true
  136. });
  137. Password.prototype.ngOnDestroy = function () {
  138. if (this.panel) {
  139. document.body.removeChild(this.panel);
  140. this.panel = null;
  141. this.meter = null;
  142. this.info = null;
  143. }
  144. };
  145. __decorate([
  146. core_1.Input(),
  147. __metadata("design:type", String)
  148. ], Password.prototype, "promptLabel", void 0);
  149. __decorate([
  150. core_1.Input(),
  151. __metadata("design:type", String)
  152. ], Password.prototype, "weakLabel", void 0);
  153. __decorate([
  154. core_1.Input(),
  155. __metadata("design:type", String)
  156. ], Password.prototype, "mediumLabel", void 0);
  157. __decorate([
  158. core_1.Input(),
  159. __metadata("design:type", String)
  160. ], Password.prototype, "strongLabel", void 0);
  161. __decorate([
  162. core_1.Input(),
  163. __metadata("design:type", Boolean)
  164. ], Password.prototype, "feedback", void 0);
  165. __decorate([
  166. core_1.Input(),
  167. __metadata("design:type", Boolean),
  168. __metadata("design:paramtypes", [Boolean])
  169. ], Password.prototype, "showPassword", null);
  170. __decorate([
  171. core_1.HostListener('input', ['$event']),
  172. __metadata("design:type", Function),
  173. __metadata("design:paramtypes", [Object]),
  174. __metadata("design:returntype", void 0)
  175. ], Password.prototype, "onInput", null);
  176. __decorate([
  177. core_1.HostListener('focus', ['$event']),
  178. __metadata("design:type", Function),
  179. __metadata("design:paramtypes", [Object]),
  180. __metadata("design:returntype", void 0)
  181. ], Password.prototype, "onFocus", null);
  182. __decorate([
  183. core_1.HostListener('blur', ['$event']),
  184. __metadata("design:type", Function),
  185. __metadata("design:paramtypes", [Object]),
  186. __metadata("design:returntype", void 0)
  187. ], Password.prototype, "onBlur", null);
  188. __decorate([
  189. core_1.HostListener('keyup', ['$event']),
  190. __metadata("design:type", Function),
  191. __metadata("design:paramtypes", [Object]),
  192. __metadata("design:returntype", void 0)
  193. ], Password.prototype, "onKeyup", null);
  194. Password = __decorate([
  195. core_1.Directive({
  196. selector: '[pPassword]',
  197. host: {
  198. '[class.ui-inputtext]': 'true',
  199. '[class.ui-corner-all]': 'true',
  200. '[class.ui-state-default]': 'true',
  201. '[class.ui-widget]': 'true',
  202. '[class.ui-state-filled]': 'filled'
  203. }
  204. }),
  205. __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone])
  206. ], Password);
  207. return Password;
  208. }());
  209. exports.Password = Password;
  210. var PasswordModule = /** @class */ (function () {
  211. function PasswordModule() {
  212. }
  213. PasswordModule = __decorate([
  214. core_1.NgModule({
  215. imports: [common_1.CommonModule],
  216. exports: [Password],
  217. declarations: [Password]
  218. })
  219. ], PasswordModule);
  220. return PasswordModule;
  221. }());
  222. exports.PasswordModule = PasswordModule;
  223. //# sourceMappingURL=password.js.map