1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Add show password button to login page

This commit is contained in:
woorim02 2024-08-18 14:51:05 +09:00
parent 8c7ed0fd36
commit dcc1a3093b
3 changed files with 39 additions and 1 deletions

View file

@ -9,7 +9,12 @@
</div>
<div class="inputContainer">
<input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password" />
<input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password">
<button class="passwordToggle" type="button">
<span class="material-icons">
visibility
</span>
</button>
</div>
<label class="checkboxContainer">

View file

@ -181,6 +181,15 @@ function loadUserList(context, apiClient, users) {
context.querySelector('#divUsers').innerHTML = html;
}
function togglePassword() {
const input = document.getElementById('txtManualPassword');
if (input.type === 'password') {
input.type = 'text';
} else {
input.type = 'password';
}
}
export default function (view, params) {
function getApiClient() {
const serverId = params.serverid;
@ -310,5 +319,6 @@ export default function (view, params) {
view.addEventListener('viewhide', function () {
libraryMenu.setTransparentMenu(false);
});
view.querySelector('.passwordToggle').addEventListener('click', togglePassword);
}

View file

@ -24,3 +24,26 @@
width: fit-content;
}
}
.inputContainer {
position: relative;
}
.passwordToggle {
position: absolute;
width: 30px;
height: 30px;
top: calc(50% - 0.2em);
right: 10px;
background: none;
border: none;
cursor: pointer;
padding: 0.2em;
align-items: center;
justify-content: center;
}
.passwordToggle .material-icons {
font-size: 24px;
color: #666;
}