refactor(ui): improve captcha form responsiveness

- adjust layout spacing on public auth-related templates
- ensure captcha challenge areas remain visible on small screens
- align image driver output with refreshed markup

Signed-off-by: Qi HU <github@spcsky.com>
This commit is contained in:
Qi HU
2025-10-13 12:15:15 +08:00
parent 0f172a94be
commit 1614ac3f3d
6 changed files with 28 additions and 20 deletions

View File

@@ -31,7 +31,7 @@ class ImageCaptchaDriver implements CaptchaDriverInterface
return implode("\n", [
sprintf('<tr><td class="rowhead">%s</td><td align="left"><img src="%s" border="0" alt="CAPTCHA" /></td></tr>', htmlspecialchars($imageLabel, ENT_QUOTES, 'UTF-8'), $imageUrl),
sprintf('<tr><td class="rowhead">%s</td><td align="left"><input type="text" autocomplete="off" style="width: 180px; border: 1px solid gray" name="imagestring" value="" /><input type="hidden" name="imagehash" value="%s" /></td></tr>', htmlspecialchars($codeLabel, ENT_QUOTES, 'UTF-8'), htmlspecialchars($imagehash, ENT_QUOTES, 'UTF-8')),
sprintf('<tr><td class="rowhead">%s</td><td align="left"><input type="text" autocomplete="off" style="width: 100%%; min-width: 180px; border: 1px solid gray; box-sizing: border-box" name="imagestring" value="" /><input type="hidden" name="imagehash" value="%s" /></td></tr>', htmlspecialchars($codeLabel, ENT_QUOTES, 'UTF-8'), htmlspecialchars($imagehash, ENT_QUOTES, 'UTF-8')),
]);
}

View File

@@ -164,9 +164,13 @@ if($_SERVER['REQUEST_METHOD'] === 'POST'){
<h2><?= $lang_complains['text_new_complain'] ?></h2>
<form action="" method="post">
<input type="hidden" name="action" value="new" />
<?php
$inputStyle = 'style="width: min(100%, 420px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"';
$textareaStyle = 'style="width: min(100%, 420px); min-width: 180px; border: 1px solid gray; box-sizing: border-box; height: 250px; resize: vertical;"';
?>
<table border="0" cellpadding="5">
<tr><td class="rowhead"><?php echo $lang_complains['text_new_email']?></td><td class="rowfollow" align="left"><input type="email" name="email" style="width: 180px; border: 1px solid gray" /></td></tr>
<tr><td class="rowhead"><?php echo $lang_complains['text_new_body']?></td><td class="rowfollow" align="left"><textarea name="body" style="width: 200px; height: 250px" placeholder="<?= $lang_complains['text_new_body_placeholder'] ?>"></textarea></td></tr>
<tr><td class="rowhead"><?php echo $lang_complains['text_new_email']?></td><td class="rowfollow" align="left"><input type="email" name="email" <?php echo $inputStyle; ?> autocomplete="email" /></td></tr>
<tr><td class="rowhead"><?php echo $lang_complains['text_new_body']?></td><td class="rowfollow" align="left"><textarea name="body" <?php echo $textareaStyle; ?> placeholder="<?= $lang_complains['text_new_body_placeholder'] ?>"></textarea></td></tr>
<?php show_image_code (); ?>
<tr><td class="toolbox" colspan="2" align="center"><input type="submit" value="<?= $lang_complains['text_new_submit']?>" class="btn" /></td></tr>
</table>

View File

@@ -110,13 +110,14 @@ else
</form>
<?php echo sprintf($lang_confirm_resend['text_resend_confirmation_mail_note'], $maxloginattempts)?>
<p><?php echo $lang_confirm_resend['text_you_have'] ?><b><?php echo remaining ();?></b><?php echo $lang_confirm_resend['text_remaining_tries'] ?></p>
<form method="post" action="confirm_resend.php">
<table border="1" cellspacing="0" cellpadding="10">
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_registered_email'] ?></td>
<td class="rowfollow"><input type="text" style="width: 200px" name="email" /></td></tr>
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_new_password'] ?></td><td align="left"><input type="password" style="width: 200px" name="wantpassword" /><br />
<font class="small"><?php echo $lang_confirm_resend['text_password_note'] ?></font></td></tr>
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_enter_password_again'] ?></td><td align="left"><input type="password" style="width: 200px" name="passagain" /></td></tr>
<?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
<form method="post" action="confirm_resend.php">
<table border="1" cellspacing="0" cellpadding="10" style="width: min(100%, 420px);">
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_registered_email'] ?></td>
<td class="rowfollow"><input type="email" name="email" autocomplete="email" <?php echo $formInputStyle; ?> /></td></tr>
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_new_password'] ?></td><td align="left"><input type="password" name="wantpassword" autocomplete="new-password" <?php echo $formInputStyle; ?> /><br />
<font class="small"><?php echo $lang_confirm_resend['text_password_note'] ?></font></td></tr>
<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_enter_password_again'] ?></td><td align="left"><input type="password" name="passagain" autocomplete="new-password" <?php echo $formInputStyle; ?> /></td></tr>
<?php
show_image_code();
?>

View File

@@ -59,9 +59,10 @@ if (!$useChallengeResponseAuthentication) {
<p><?php echo $lang_login['p_need_cookies_enables']?><br /> [<b><?php echo $maxloginattempts;?></b>] <?php echo $lang_login['p_fail_ban']?></p>
<p><?php echo $lang_login['p_you_have']?> <b><?php echo remaining ();?></b> <?php echo $lang_login['p_remaining_tries']?></p>
<table border="0" cellpadding="5">
<tr><td class="rowhead"><?php echo $lang_login['rowhead_username']?></td><td class="rowfollow" align="left"><input type="text" class="username" name="username" style="width: 180px; border: 1px solid gray" /></td></tr>
<tr><td class="rowhead"><?php echo $lang_login['rowhead_password']?></td><td class="rowfollow" align="left"><input type="password" <?php echo $passwordName ?> style="width: 180px; border: 1px solid gray"/></td></tr>
<tr><td class="rowhead"><?php echo $lang_login['rowhead_two_step_code']?></td><td class="rowfollow" align="left"><input type="text" name="two_step_code" placeholder="<?php echo $lang_login['two_step_code_tooltip'] ?>" style="width: 180px; border: 1px solid gray"/></td></tr>
<?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
<tr><td class="rowhead"><?php echo $lang_login['rowhead_username']?></td><td class="rowfollow" align="left"><input type="text" class="username" name="username" autocomplete="username" <?php echo $formInputStyle; ?> /></td></tr>
<tr><td class="rowhead"><?php echo $lang_login['rowhead_password']?></td><td class="rowfollow" align="left"><input type="password" <?php echo $passwordName ?> autocomplete="current-password" <?php echo $formInputStyle; ?> /></td></tr>
<tr><td class="rowhead"><?php echo $lang_login['rowhead_two_step_code']?></td><td class="rowfollow" align="left"><input type="text" name="two_step_code" inputmode="numeric" pattern="[0-9]*" placeholder="<?php echo $lang_login['two_step_code_tooltip'] ?>" <?php echo $formInputStyle; ?> /></td></tr>
<?php
show_image_code ();
if ($securelogin == "yes")

View File

@@ -139,7 +139,8 @@ else
<form method="post" action="recover.php">
<table border="1" cellspacing="0" cellpadding="10">
<tr><td class="rowhead"><?php echo $lang_recover['row_registered_email'] ?></td>
<td class="rowfollow"><input type="text" style="width: 150px" name="email" /></td></tr>
<?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
<td class="rowfollow"><input type="email" <?php echo $formInputStyle; ?> name="email" autocomplete="email" /></td></tr>
<?php
show_image_code ();
?>

View File

@@ -78,24 +78,25 @@ print("<div align=right valign=top>".$lang_signup['text_select_lang']. $s . "</d
<table border="1" cellspacing="0" cellpadding="10">
<?php
print("<tr><td class=text align=center colspan=2>".$lang_signup['text_cookies_note']."</td></tr>");
$formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"';
if ($isPreRegisterEmailAndUsername && !empty($inv["pre_register_username"])) {
$usernameInput = sprintf('<input type="text" style="width: 200px" name="wantusername" value="%s" readonly />', $inv["pre_register_username"]);
$usernameInput = sprintf('<input type="text" %s name="wantusername" value="%s" readonly autocomplete="username" />', $formInputStyle, htmlspecialchars($inv["pre_register_username"], ENT_QUOTES));
} else {
$usernameInput = '<input type="text" style="width: 200px" name="wantusername" />';
$usernameInput = '<input type="text" ' . $formInputStyle . ' name="wantusername" autocomplete="username" />';
}
if ($isPreRegisterEmailAndUsername && !empty($inv["pre_register_email"])) {
$emailInput = sprintf('<input type="text" style="width: 200px" name="email" value="%s" readonly />', $inv["pre_register_email"]);
$emailInput = sprintf('<input type="email" %s name="email" value="%s" readonly autocomplete="email" />', $formInputStyle, htmlspecialchars($inv["pre_register_email"], ENT_QUOTES));
} else {
$emailInput = '<input type="text" style="width: 200px" name="email" />';
$emailInput = '<input type="email" ' . $formInputStyle . ' name="email" autocomplete="email" />';
}
?>
<tr><td class=rowhead><?php echo $lang_signup['row_desired_username'] ?></td><td class=rowfollow align=left><?php echo $usernameInput?><br />
<font class=small><?php echo $lang_signup['text_allowed_characters'] ?></font></td></tr>
<tr><td class=rowhead><?php echo $lang_signup['row_pick_a_password'] ?></td><td class=rowfollow align=left><input type="password" style="width: 200px" class="wantpassword"/><br />
<tr><td class=rowhead><?php echo $lang_signup['row_pick_a_password'] ?></td><td class=rowfollow align=left><input type="password" <?php echo $formInputStyle; ?> class="wantpassword" autocomplete="new-password" /><br />
<font class=small><?php echo $lang_signup['text_minimum_six_characters'] ?></font></td></tr>
<tr><td class=rowhead><?php echo $lang_signup['row_enter_password_again'] ?></td><td class=rowfollow align=left><input type="password" style="width: 200px" class="passagain" /></td></tr>
<tr><td class=rowhead><?php echo $lang_signup['row_enter_password_again'] ?></td><td class=rowfollow align=left><input type="password" <?php echo $formInputStyle; ?> class="passagain" autocomplete="new-password" /></td></tr>
<?php
show_image_code ();
?>