☰

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.)

Od 04.10.2019.. Pogledajte najnovija verzija.

//
// ==UserScript==
// @name          Toggle Passwords
// @namespace     http://jaron.nl/
// @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.)
// @version 2.0.4
// @include       *
// @exclude       
// ==/UserScript==
(() => {
	const hideIconUrl = '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>';
	const showIconUrl = '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>'
	const css = `
		.tggl-pw {
			--icon-width: 18px;
			--icon-height: calc(2 * var(--icon-width) / 3);
			--pd-v: 10px;
			--pd-h: 15px;

			position: relative;
			display: inline-block;
			border-radius: 5px;
			background: white;
			vertical-align: middle;
		}

		.tggl-pw__btn {
			--hide-icon: url('${hideIconUrl}');

			--show-icon: url('${showIconUrl}');

			position: absolute;
			z-index: 1;
			top: 50%;
			right: 5px;
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 3px;
			padding: var(--pd-v) var(--pd-h);
			width: 0;
			height: 0;
			transform: translateY(-50%);
			cursor: pointer;
			background: var(--show-icon) center center no-repeat;
			background-size: var(--icon-width) var(--icon-height);
			background-color: white;
			opacity: 0.5;
			transition: opacity 0.3s ease-in-out;
		}

		.tggl-pw__btn:hover,
		.tggl-pw__btn:focus {
			opacity: 0.8;
		}

		.tggl-pw__btn:hover {
			outline: none;
		}

		.tggl-pw__btn--hide {
			background-image: var(--hide-icon);
		}
	`;

	let pwFields = [];
	let allToggleBtns = [];

	/**
	* add a toggle to a password field
	* @returns {undefined}
	*/
	const addToggle = function(pwField, idx) {
		const span = document.createElement('span');
		const btn = document.createElement('button');
		pwField.setAttribute('data-toggl-pw-id', idx);
		span.classList.add('tggl-pw');
		btn.classList.add('tggl-pw__btn');
		btn.type = 'button';
		btn.title = 'toggle all password fields';
		btn.setAttribute('data-toggl-pw-id', idx);
		span.appendChild(btn);
		btn.addEventListener('click', toggleAllFields);
		pwField.after(span);
		allToggleBtns.push(btn);
	};

	/**
	* toggle all password fields
	* @returns {undefined}
	*/
	const toggleAllFields = function(e) {
		let newType;
		const tgtId = e.target.getAttribute('data-toggl-pw-id');
		pwFields.forEach((pwField) => {
			if (!newType) {
				// when we get to first field; this will determine all field's new type
				newType = (pwField.type === 'password') ? 'text' : 'password';
			}
			pwField.type = newType;

			allToggleBtns.forEach((btn) => {
				if (pwField.type === 'password') {
					btn.classList.remove('tggl-pw__btn--hide');
				} else {
					btn.classList.add('tggl-pw__btn--hide');
				}
			});

		});
		if (newType === 'text') {
			document.querySelector(`[data-toggl-pw-id="${tgtId}"]`).select();
		}
	};
	
	

	/**
	* reset all password fields to type password
	* @returns {undefined}
	*/
	const resetAllPwFields = function(e) {
		pwFields.forEach(pwField => pwField.type = 'password')
	};
	

	/**
	* initialize
	* @returns {undefined}
	*/
	const init = function() {
		pwFields = document.querySelectorAll(`input[type='password']`) ;
		pwFields.forEach((pwField, idx) => {
			addToggle(pwField, idx);
			const currForm = pwField.closest('form');
			if (currForm) {
				currForm.addEventListener('submit', resetAllPwFields);
			}
		});
		const styles = document.createElement('style');
		styles.innerHTML = css;
		document.querySelector('head').appendChild(styles);
	};
	

	init();
})();