Last active
June 1, 2023 14:37
-
-
Save tiesmaster/be7eafecdd7d24586218b2197efee69b to your computer and use it in GitHub Desktop.
Add password show/hide eye icon to donpardon.nl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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