Skip to content

Instantly share code, notes, and snippets.

@tiesmaster
Last active June 1, 2023 14:37
Show Gist options
  • Select an option

  • Save tiesmaster/be7eafecdd7d24586218b2197efee69b to your computer and use it in GitHub Desktop.

Select an option

Save tiesmaster/be7eafecdd7d24586218b2197efee69b to your computer and use it in GitHub Desktop.
Add password show/hide eye icon to donpardon.nl
// ==UserScript==
// @name Add password show/hide eye icon
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.donpardon.nl/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=donpardon.nl
// @grant GM_addStyle
// @grant GM_getResourceText
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
// @resource fa https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
// ==/UserScript==
/* globals jQuery, $, waitForKeyElements */
// Kudos to: https://codepen.io/Sohail05/pen/yOpeBm
(function() {
'use strict';
let faCss = GM_getResourceText('fa')
const shouldShowPassword = function() {
const show = window.localStorage.getItem('showPassword')
if(show == null) {
return false
}
return show == 'true' ? true : false
}
console.log(shouldShowPassword())
// Fixup relative path to fa CSS URL, as we load this via GM_addStyle, the relative path goes to www.donpardon.nl
// instead of to URL of the fa CSS URL
faCss = faCss.replaceAll('../fonts', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts')
GM_addStyle(faCss)
GM_addStyle(`
.field-icon {
margin-left: -25px;
margin-top: -25px;
z-index: 2;
}
`)
$('#password').after( '<span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>' );
const shouldShow = shouldShowPassword()
if(shouldShow) {
$(".toggle-password").toggleClass("fa-eye fa-eye-slash");
$('#password').attr("type", "text")
}
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
window.localStorage.setItem('showPassword', 'true')
console.log(shouldShowPassword())
} else {
input.attr("type", "password");
window.localStorage.setItem('showPassword', 'false')
console.log(shouldShowPassword())
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment