diff --git a/README.md b/README.md index e86b81e..5e80f3d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ A secure emergency information access system using YubiKey authentication. This - Markdown rendering with syntax highlighting - Webhook for remote updates of emergency information - Mobile-friendly interface +- Hidden passwords that reveal when clicked ## Setup diff --git a/example.md b/example.md new file mode 100644 index 0000000..cd11dd7 --- /dev/null +++ b/example.md @@ -0,0 +1,11 @@ +# Emergency Access + +## Bitwarden Password safe +I have setup an emergency access system for my passwords. +1. Login using the details below +2. Go to `Settings` +3. Go to `Emergency access` +4. Select request to start the emergency access. This will take 30 days before you will have access to my password vault. + +Email: `hopefullysecret@email.com` +Password: `password:SOME-SECRET-PASSWORD` diff --git a/templates/emergency.html b/templates/emergency.html index 6fb64ae..aac120a 100644 --- a/templates/emergency.html +++ b/templates/emergency.html @@ -85,6 +85,69 @@ .emergency-content ul ul ul { list-style-type: square; } + + /* Password hiding feature */ + .password-hidden { + display: inline-block; + background-color: #333; + color: transparent; + border-radius: 4px; + padding: 2px 8px; + cursor: pointer; + user-select: none; + text-shadow: 0 0 8px rgba(255,255,255,0.5); + position: relative; + } + + .password-hidden::after { + content: "Click to reveal"; + position: absolute; + color: #aaa; + font-size: 0.8em; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + } + + .password-hidden.revealed { + color: #e9e9e9; + text-shadow: none; + } + + .password-hidden.revealed::after { + content: ""; + } + + /* Hide code class for inline code */ + code.hide-password { + background-color: #333; + color: transparent; + text-shadow: 0 0 8px rgba(255,255,255,0.5); + cursor: pointer; + position: relative; + padding: 2px 5px; + border-radius: 3px; + } + + code.hide-password::after { + content: "🔒"; + position: absolute; + color: #aaa; + font-size: 1em; + right: 5px; + top: 50%; + transform: translateY(-50%); + } + + code.hide-password.revealed { + color: #e9e9e9; + text-shadow: none; + } + + code.hide-password.revealed::after { + content: ""; + } </style> </head> @@ -113,7 +176,52 @@ link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener'); }); + + // Process special password blocks + processPasswordBlocks(); + + // Process inline code with hide-password class + processPasswordCodeElements(); }); + + function processPasswordBlocks() { + // Look for div or pre elements with data-type="password" + const passwordElements = document.querySelectorAll('[data-type="password"]'); + + passwordElements.forEach(element => { + element.classList.add('password-hidden'); + + element.addEventListener('click', function() { + this.classList.toggle('revealed'); + }); + }); + } + + function processPasswordCodeElements() { + // Find all code blocks with class "hide-password" + const passwordCodes = document.querySelectorAll('code.hide-password, .hide-password code'); + + passwordCodes.forEach(code => { + // If the parent is not already a password-hidden element + if (!code.parentElement.classList.contains('password-hidden')) { + code.addEventListener('click', function() { + this.classList.toggle('revealed'); + }); + } + }); + + // Convert all `password:` prefixed code elements + const allCodeElements = document.querySelectorAll('code'); + allCodeElements.forEach(code => { + if (code.textContent.startsWith('password:')) { + code.textContent = code.textContent.replace('password:', ''); + code.classList.add('hide-password'); + code.addEventListener('click', function() { + this.classList.toggle('revealed'); + }); + } + }); + } </script> </body>