☰

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-15 提交的版本。查看 最新版本。

  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
  7. // @include       *
  8. // @exclude       
  9. // ==/UserScript==
  10. (() => {
  11. 	const css = `
  12. 	body {
  13. 		background: beige;
  14. 	}
  15. 		.tggl-pw {
  16. 			--icon-width: 18px;
  17. 			--icon-height: calc(2 * var(--icon-width) / 3);
  18. 			--pd-v: 10px;
  19. 			--pd-h: 15px;
  20.  
  21. 			position: relative;
  22. 			display: inline-block;
  23. 			border-radius: 5px;
  24. 			background: white;
  25. 			vertical-align: middle;
  26. 		}
  27.  
  28. 		/*
  29. 		.tggl-pw::before {
  30. 			content: '';
  31. 			display: block;
  32. 			position: absolute;
  33. 			border: 8px solid transparent;
  34. 			border-right-color: white;
  35. 			top: 50%;
  36. 			transform: translateY(-50%);
  37. 			right: 100%;
  38. 		}
  39. 		*/
  40.  
  41. 		.tggl-pw__btn {
  42. 			--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>');
  43.  
  44. 			--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>');
  45.  
  46. 			position: absolute;
  47. 			z-index: 1;
  48. 			top: 50%;
  49. 			left: 0;
  50. 			width: 100%;
  51. 			height: 100%;
  52. 			border: none;
  53. 			padding: var(--pd-v) var(--pd-h);
  54. 			width: 0;
  55. 			height: 0;
  56. 			transform: translate(-100%, -50%);
  57. 			cursor: pointer;
  58. 			background: var(--show-icon) center center no-repeat;
  59. 			background-size: var(--icon-width) var(--icon-height);
  60. 			opacity: 0.5;
  61. 			transition: opacity 0.3s ease-in-out;
  62. 		}
  63.  
  64. 		.tggl-pw__btn:hover,
  65. 		.tggl-pw__btn:focus {
  66. 			outline: none;
  67. 			opacity: 0.8;
  68. 		}
  69.  
  70. 		.tggl-pw__btn--hide {
  71. 			background-image: var(--hide-icon);
  72. 		}
  73. 	`;
  74.  
  75. 	let pwFields = [];
  76. 	let allToggleBtns = [];
  77.  
  78. 	/**
  79. 	* add a toggle to a password field
  80. 	* @returns {undefined}
  81. 	*/
  82. 	const addToggle = function(pwField) {
  83. 		const span = document.createElement('span');
  84. 		const btn = document.createElement('button');
  85. 		span.classList.add('tggl-pw');
  86. 		btn.classList.add('tggl-pw__btn');
  87. 		btn.type = "button";
  88. 		btn.title = "toggle all password fields";
  89. 		span.appendChild(btn);
  90. 		btn.addEventListener('click', toggleAllFields);
  91. 		pwField.after(span);
  92. 		allToggleBtns.push(btn);
  93. 	};
  94.  
  95. 	/**
  96. 	* toggle all password fields
  97. 	* @returns {undefined}
  98. 	*/
  99. 	const toggleAllFields = function(e) {
  100. 		let newType;
  101. 		pwFields.forEach((pwField) => {
  102. 			if (!newType) {
  103. 				newType = (pwField.type === 'password') ? 'text' : 'password';
  104. 			}
  105. 			pwField.type = newType;
  106.  
  107. 			allToggleBtns.forEach((btn) => {
  108. 				if (pwField.type === 'password') {
  109. 					btn.classList.remove('tggl-pw__btn--hide');
  110. 				} else {
  111. 					btn.classList.add('tggl-pw__btn--hide');
  112. 				}
  113. 			});
  114. 		});
  115. 	};
  116. 	
  117. 	
  118.  
  119. 	/**
  120. 	* reset all password fields to type password
  121. 	* @returns {undefined}
  122. 	*/
  123. 	const resetAllPwFields = function(e) {
  124. 		pwFields.forEach(pwField => pwField.type = 'password')
  125. 	};
  126. 	
  127.  
  128. 	/**
  129. 	* initialize
  130. 	* @returns {undefined}
  131. 	*/
  132. 	const init = function() {
  133. 		pwFields = document.querySelectorAll(`input[type="password"]`) ;
  134. 		pwFields.forEach((pwField) => {
  135. 			addToggle(pwField);
  136. 			const currForm = pwField.closest('form');
  137. 			if (currForm) {
  138. 				currForm.addEventListener('submit', resetAllPwFields);
  139. 			}
  140. 		});
  141. 		const styles = document.createElement('style');
  142. 		styles.innerHTML = css;
  143. 		document.querySelector('head').appendChild(styles);
  144. 	};
  145. 	
  146.  
  147. 	init();
  148. })();