diff --git a/src/controllers/wizard/user/index.html b/src/controllers/wizard/user/index.html index 62c2eb9c56..08f7a50883 100644 --- a/src/controllers/wizard/user/index.html +++ b/src/controllers/wizard/user/index.html @@ -12,10 +12,16 @@
+
${PasswordRequiredForAdmin}
+

${MoreUsersCanBeAddedLater}

diff --git a/src/controllers/wizard/user/index.js b/src/controllers/wizard/user/index.js index eb521c87af..0d3bc2e1db 100644 --- a/src/controllers/wizard/user/index.js +++ b/src/controllers/wizard/user/index.js @@ -5,6 +5,7 @@ import '../../../elements/emby-input/emby-input'; import '../../../elements/emby-button/emby-button'; import Dashboard from '../../../utils/dashboard'; import toast from '../../../components/toast/toast'; +import './user.scss'; function getApiClient() { return ApiClient; @@ -71,6 +72,16 @@ function onViewShow() { }); } +function togglePassword() { + const inputIds = ['txtManualPassword', 'txtPasswordConfirm']; + inputIds.forEach(id => { + const input = document.getElementById(id); + if (input) { + input.type = (input.type === 'password') ? 'text' : 'password'; + } + }); +} + export default function (view) { view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit); view.addEventListener('viewshow', function () { @@ -80,4 +91,7 @@ export default function (view) { document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); }); view.addEventListener('viewshow', onViewShow); + view.querySelectorAll('.passwordToggle').forEach(button => { + button.addEventListener('click', togglePassword); + }); } diff --git a/src/controllers/wizard/user/user.scss b/src/controllers/wizard/user/user.scss new file mode 100644 index 0000000000..2522737c5d --- /dev/null +++ b/src/controllers/wizard/user/user.scss @@ -0,0 +1,23 @@ +.inputContainer { + position: relative; +} + +.passwordToggle { + position: absolute; + width: 3em; + height: 3em; + top: 2.95em; + transform: translateY(-50%); + right: 0.1em; + background: none; + border: none; + cursor: pointer; + padding: 0.1em; + align-items: center; + justify-content: center; +} + +.passwordToggle .material-icons { + font-size: 1.8em; + color: #666; +} \ No newline at end of file