fix: enhance layout consistency in UserAdd.page and UserEdit.page

- Wrapped password input fields in a flex container for better alignment.
- Added a new utility class .font-mono in default-base.css for consistent font styling in text areas.
- This change continues the effort to enhance visual consistency across the plugin.
This commit is contained in:
Zack Spear
2025-05-22 12:31:44 -07:00
parent e2551e7e9b
commit dba1c6a408
3 changed files with 31 additions and 8 deletions
+12 -3
View File
@@ -165,9 +165,18 @@ _(Custom image)_:
:user_add_custom_image_help:
_(Password)_:
: <input type="hidden" name="userPassword" value="">
<input type="password" name="userPasswordGUI" maxlength="129" autocomplete="new-password" onKeyUp="validatePassword(this.value);this.form.cmdUserEdit.disabled=(this.form.userName.value=='' || this.form.userPasswordGUI.value!=this.form.userPasswordConfGUI.value)">
<i id="showPass" class="fa fa-eye" style="cursor:pointer" title="_(Show / Hide password)_" onclick="showPassword()"></i><span><span class="usage-disk sys none"><span id="strength-bar" style="width:0"></span><span></span></span><span id="strength-text"></span></span>
: <span class="flex flex-row items-center gap-2">
<input type="hidden" name="userPassword" value="">
<input type="password" name="userPasswordGUI" maxlength="129" autocomplete="new-password" onKeyUp="validatePassword(this.value);this.form.cmdUserEdit.disabled=(this.form.userName.value=='' || this.form.userPasswordGUI.value!=this.form.userPasswordConfGUI.value)">
<i id="showPass" class="fa fa-eye" style="cursor:pointer" title="_(Show / Hide password)_" onclick="showPassword()"></i>
</span>
<span>
<span class="usage-disk sys none">
<span id="strength-bar" style="width:0"></span>
<span></span>
</span>
<span id="strength-text"></span>
</span>
:user_password_help:
+13 -4
View File
@@ -207,9 +207,18 @@ _(Delete)_<input type="checkbox" name="confirmDelete" onChange="chkDelete(this.f
<input type="hidden" name="userName" value="<?=htmlspecialchars($name)?>">
_(Password)_:
: <input type="hidden" name="userPassword" value="">
<input type="password" name="userPasswordGUI" maxlength="129" autocomplete="new-password" onKeyUp="validatePassword(this.value);this.form.cmdUserEdit.disabled=(this.form.userPasswordGUI.value != this.form.userPasswordConfGUI.value);">
<i id="showPass" class="fa fa-eye" style="cursor:pointer" title="_(Show / Hide password)_" onclick="showPassword()"></i><span><span class="usage-disk sys none"><span id="strength-bar" style="width:0"></span><span></span></span><span id="strength-text"></span></span>
: <span class="flex flex-row items-center gap-2">
<input type="hidden" name="userPassword" value="">
<input type="password" name="userPasswordGUI" maxlength="129" autocomplete="new-password" onKeyUp="validatePassword(this.value);this.form.cmdUserEdit.disabled=(this.form.userPasswordGUI.value != this.form.userPasswordConfGUI.value);">
<i id="showPass" class="fa fa-eye" style="cursor:pointer" title="_(Show / Hide password)_" onclick="showPassword()"></i>
</span>
<span>
<span class="usage-disk sys none">
<span id="strength-bar" style="width:0"></span>
<span></span>
</span>
<span id="strength-text"></span>
</span>
:user_password_help:
@@ -230,7 +239,7 @@ _(Retype password)_:
<input type="hidden" name="#file" value="<?=$file;?>">
_(SSH authorized keys)_:
: <textarea spellcheck="false" cols="80" rows="<?=max(substr_count($text,"\n")+1,10)?>" maxlength="16384" name="text" style="resize:none;white-space:normal;font-family:bitstream;width:65.5%"><?=htmlspecialchars($text)?></textarea>
: <textarea class="font-mono" spellcheck="false" cols="80" rows="<?=max(substr_count($text,"\n")+1,10)?>" maxlength="16384" name="text"><?=htmlspecialchars($text)?></textarea>
&nbsp;
: <span class="inline-block">
@@ -149,7 +149,6 @@ textarea,
min-height: 2rem;
line-height: 2rem;
outline: none;
/* width: 300px; */
width: 100%;
margin: 0;
box-shadow: none;
@@ -1730,6 +1729,12 @@ span#wlan0 {
background-color: var(--shade-bg-color);
}
/* TailwindCSS inspired utility classes */
.font-mono {
font-family: bitstream, monospace;
}
.hidden {
display: none;
}