☰

Toggle Passwords

Places an eye-icon at the right side of every password field. Clicking this icon toggles the display of all passwords between •••• and text.(submitting a form will allways revert the fields to type=password, to make sure no auto-completion information is stored for these fields by your browser.)

目前为 2019-07-18 提交的版本。查看 最新版本。

  1. //
  2. // ==UserScript==
  3. // @name          Toggle Passwords
  4. // @namespace     http://jaron.nl/
  5. // @description   Places an eye-icon at the right side of every password field. Clicking this icon toggles the display of all passwords between •••• and text.(submitting a form will allways revert the fields to type=password, to make sure no auto-completion information is stored for these fields by your browser.)
  6. // @version 2.0.3
  7. // @include       *
  8. // @exclude       
  9. // ==/UserScript==
  10. (() => {
  11. 	const css = `
  12. 		.tggl-pw {
  13. 			--icon-width: 18px;
  14. 			--icon-height: calc(2 * var(--icon-width) / 3);
  15. 			--pd-v: 10px;
  16. 			--pd-h: 15px;
  17.  
  18. 			position: relative;
  19. 			display: inline-block;
  20. 			border-radius: 5px;
  21. 			background: white;
  22. 			vertical-align: middle;
  23. 		}
  24.  
  25. 		/*
  26. 		.tggl-pw::before {
  27. 			content: '';
  28. 			display: block;
  29. 			position: absolute;
  30. 			border: 8px solid transparent;
  31. 			border-right-color: white;
  32. 			top: 50%;
  33. 			transform: translateY(-50%);
  34. 			right: 100%;
  35. 		}
  36. 		*/
  37.  
  38. 		.tggl-pw__btn {
  39. 			--hide-icon: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60"><path d="M45 15c-2.8 0-5.3.8-7.6 2.1 1.3 1.1 2.1 2.7 2.1 4.5 0 3.2-2.6 5.8-5.8 5.8-1.2 0-2.4-.4-3.3-1-.2 1.1-.4 2.3-.4 3.6 0 8.3 6.7 15 15 15s15-6.7 15-15-6.7-15-15-15z"/><g stroke="black" stroke-width="7" stroke-miterlimit="10"><path fill="none" stroke-linecap="round" d="M5 55L85 5"/><path d="M85 30S67.1 55 45 55 5 30 5 30 22.9 5 45 5s40 25 40 25z" fill="none"/></g></svg>');
  40.  
  41. 			--show-icon: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 60"><style></style><g id="Layer_4"><path d="M85 30S67.1 55 45 55 5 30 5 30 22.9 5 45 5s40 25 40 25z" fill="none" stroke="black" stroke-width="7" stroke-miterlimit="10"/><path d="M45 15c-2.8 0-5.3.8-7.6 2.1 1.3 1.1 2.1 2.7 2.1 4.5 0 3.2-2.6 5.8-5.8 5.8-1.2 0-2.4-.4-3.3-1-.2 1.1-.4 2.3-.4 3.6 0 8.3 6.7 15 15 15s15-6.7 15-15-6.7-15-15-15z"/></g></svg>');
  42.  
  43. 			position: absolute;
  44. 			z-index: 1;
  45. 			top: 50%;
  46. 			right: 5px;
  47. 			width: 100%;
  48. 			height: 100%;
  49. 			border: none;
  50. 			border-radius: 3px;
  51. 			padding: var(--pd-v) var(--pd-h);
  52. 			width: 0;
  53. 			height: 0;
  54. 			transform: translateY(-50%);
  55. 			cursor: pointer;
  56. 			background: var(--show-icon) center center no-repeat;
  57. 			background-size: var(--icon-width) var(--icon-height);
  58. 			background-color: white;
  59. 			opacity: 0.5;
  60. 			transition: opacity 0.3s ease-in-out;
  61. 		}
  62.  
  63. 		.tggl-pw__btn:hover,
  64. 		.tggl-pw__btn:focus {
  65. 			outline: none;
  66. 			opacity: 0.8;
  67. 		}
  68.  
  69. 		.tggl-pw__btn--hide {
  70. 			background-image: var(--hide-icon);
  71. 		}
  72. 	`;
  73.  
  74. 	let pwFields = [];
  75. 	let allToggleBtns = [];
  76.  
  77. 	/**
  78. 	* add a toggle to a password field
  79. 	* @returns {undefined}
  80. 	*/
  81. 	const addToggle = function(pwField) {
  82. 		const span = document.createElement('span');
  83. 		const btn = document.createElement('button');
  84. 		span.classList.add('tggl-pw');
  85. 		btn.classList.add('tggl-pw__btn');
  86. 		btn.type = "button";
  87. 		btn.title = "toggle all password fields";
  88. 		span.appendChild(btn);
  89. 		btn.addEventListener('click', toggleAllFields);
  90. 		pwField.after(span);
  91. 		allToggleBtns.push(btn);
  92. 	};
  93.  
  94. 	/**
  95. 	* toggle all password fields
  96. 	* @returns {undefined}
  97. 	*/
  98. 	const toggleAllFields = function(e) {
  99. 		let newType;
  100. 		pwFields.forEach((pwField) => {
  101. 			if (!newType) {
  102. 				newType = (pwField.type === 'password') ? 'text' : 'password';
  103. 			}
  104. 			pwField.type = newType;
  105.  
  106. 			allToggleBtns.forEach((btn) => {
  107. 				if (pwField.type === 'password') {
  108. 					btn.classList.remove('tggl-pw__btn--hide');
  109. 				} else {
  110. 					btn.classList.add('tggl-pw__btn--hide');
  111. 				}
  112. 			});
  113. 		});
  114. 	};
  115. 	
  116. 	
  117.  
  118. 	/**
  119. 	* reset all password fields to type password
  120. 	* @returns {undefined}
  121. 	*/
  122. 	const resetAllPwFields = function(e) {
  123. 		pwFields.forEach(pwField => pwField.type = 'password')
  124. 	};
  125. 	
  126.  
  127. 	/**
  128. 	* initialize
  129. 	* @returns {undefined}
  130. 	*/
  131. 	const init = function() {
  132. 		pwFields = document.querySelectorAll(`input[type="password"]`) ;
  133. 		pwFields.forEach((pwField) => {
  134. 			addToggle(pwField);
  135. 			const currForm = pwField.closest('form');
  136. 			if (currForm) {
  137. 				currForm.addEventListener('submit', resetAllPwFields);
  138. 			}
  139. 		});
  140. 		const styles = document.createElement('style');
  141. 		styles.innerHTML = css;
  142. 		document.querySelector('head').appendChild(styles);
  143. 	};
  144. 	
  145.  
  146. 	init();
  147. })();