4f7feb0c81142e6ff34ba5a23bee77d2e04a945d hiram Thu Aug 6 13:25:41 2026 -0700 reposition the hide/show icon outside the password box and show mouse over information about the function refs #37921 diff --git src/hg/hgLogin/hgLogin.c src/hg/hgLogin/hgLogin.c index 3445e3459d7..595cb879f59 100644 --- src/hg/hgLogin/hgLogin.c +++ src/hg/hgLogin/hgLogin.c @@ -731,39 +731,39 @@ /* Set up new user account and send activation mail to user */ { char query[256]; char *token = generateRandomPassword(); char *tokenMD5 = generateTokenMD5(token); sqlSafef(query,sizeof(query), "UPDATE gbMembers SET lastUse=NOW(),emailToken='%s', emailTokenExpires=DATE_ADD(NOW(), INTERVAL 7 DAY), accountActivated='N' WHERE userName='%s'", tokenMD5, username ); sqlUpdate(conn, query); sendActivateMail(email, username, tokenMD5); return; } void printPwdEyeIcon(char *iconId, char *slashId) -/* print a clickable eye icon, absolutely positioned inside a password - * input's wrapper span; slashId is the <line> toggled to show "hidden". - * No-op if disabled via hg.conf login.pwdEyeIcon. */ +/* print a clickable eye icon as a normal sibling right after a password + * input (not overlapping it); slashId is the <line> toggled to show + * "hidden". No-op if disabled via hg.conf login.pwdEyeIcon. */ { if (!pwdEyeIconEnabled) return; hPrintf( "<span id=\"%s\" title=\"Show/hide password\" " - "style=\"position:absolute; right:8px; top:50%%; transform:translateY(-50%%); " + "style=\"display:inline-block; margin-left:6px; vertical-align:middle; " "cursor:pointer; user-select:none;\">" "<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" " "stroke=\"#666\" stroke-width=\"2\">" "<path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"/>" "<circle cx=\"12\" cy=\"12\" r=\"3\"/>" "<line id=\"%s\" x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" style=\"display:none;\"/>" "</svg>" "</span>", iconId, slashId); } void printPwdToggleJS() /* define the password show/hide toggle function used by all eye icons */ { jsInline( "function togglePwdVisibility(inputId, slashId) {\n" @@ -794,31 +794,31 @@ "\n", hgLoginUrl); if (errMsg && sameString(errMsg, "Your account has been activated.")) hPrintf("<span style='color:green;'>%s</span>\n", errMsg ? errMsg : ""); else hPrintf("<span style='color:red;'>%s</span>\n", errMsg ? errMsg : ""); hPrintf("<form method=post action=\"%s\" name=\"accountLoginForm\" id=\"accountLoginForm\">" "\n" "<div class=\"inputGroup\">" "<label for=\"userName\">Username</label>" "<input type=text name=\"hgLogin_userName\" value=\"%s\" size=\"30\" id=\"userName\">" "<a class=\"forgotLink\" href=\"%s?hgLogin.do.displayAccHelpPage=1&hgLogin_helpWith=username\">Forgot username</a>" "</div>" "\n" "<div class=\"inputGroup\">" "<label for=\"password\">Password</label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=password name=\"hgLogin_password\" value=\"\" size=\"30\" id=\"password\">" , hgLoginUrl, username, hgLoginUrl); printPwdEyeIcon("pwdEyeIcon", "pwdEyeSlash"); hPrintf( "</span>" "<a class=\"forgotLink\" href=\"%s?hgLogin.do.displayAccHelpPage=1&hgLogin_helpWith=password\">Forgot password</a>" "</div>" "\n" "<div class=\"formControls\">" " <input type=\"submit\" name=\"hgLogin.do.displayLogin\" value=\"Login\" class=\"largeButton\">" " <a href=\"%s\" class=\"cancelButton\">Cancel</a>" "</div>" , hgLoginUrl, getReturnToURL()); if (pwdEyeIconEnabled) { @@ -877,49 +877,49 @@ "<h3>Change Password</h3>" "\n" "<p> <span style='color:red;'>%s</span> </p>" "\n" "<form method=\"post\" action=\"%s\" name=\"changePasswordForm\" id=\"changePasswordForm\">" "\n" "<div class=\"inputGroup\">" "<label for=\"userName\">Username</label>" "<input type=\"text\" name=\"hgLogin_userName\" size=\"30\" value=\"%s\" id=\"email\">" "</div>" "\n", errMsg ? errMsg : "", hgLoginUrl, cartUsualString(cart, "hgLogin_userName", "")); hPrintf("<div class=\"inputGroup\">" "\n" "<label for=\"currentPw\">Current or Emailed Password</label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=\"password\" name=\"hgLogin_password\" value=\"\" size=\"30\" id=\"currentPw\">"); printPwdEyeIcon("curPwEyeIcon", "curPwEyeSlash"); hPrintf( "</span>" "</div>" "\n" "<div class=\"inputGroup\">" "<label for=\"newPw1\">New Password</label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=\"password\" name=\"hgLogin_newPassword1\" value=\"\" size=\"30\" id=\"newPw1\">"); printPwdEyeIcon("newPw1EyeIcon", "newPw1EyeSlash"); hPrintf( "</span>" "</div>" "\n" "<div class=\"inputGroup\">" "<label for=\"newPw2\">Re-enter New Password</label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=\"password\" name=\"hgLogin_newPassword2\" value=\"\" size=\"30\" id=\"newPw2\">"); printPwdEyeIcon("newPw2EyeIcon", "newPw2EyeSlash"); hPrintf( "</span>" "</div>" "\n" "<div class=\"formControls\">" " <input type=\"submit\" name=\"hgLogin.do.changePassword\" value=\"Change Password\" class=\"largeButton\"> " " <a href=\"%s\" class=\"cancelButton\">Cancel</a>" "\n" "</div>" "</form>" "\n" "</div><!-- END - changePwBox -->" "\n", getReturnToURL()); @@ -1283,41 +1283,41 @@ "<label for=\"reenterEmail\">Re-enter Email address</label>" "<input type=text name=\"hgLogin_email2\" value=\"%s\" size=\"30\" id=\"emailCheck\">" "</div>\n", cartUsualString(cart, "hgLogin_userName", ""), cartUsualString(cart, "hgLogin_email", ""), cartUsualString(cart, "hgLogin_email2", "")); if (sqlFieldIndex(conn, "gbMembers", "recovEmail") != -1) hPrintf("<div class=\"inputGroup\">" "<label for=\"recovEmail\">Optional Secondary Recovery Email</label>" "<input type=text name=\"hgLogin_recovEmail\" size=\"30\" id=\"recovEmail\">" "</div>" "\n"); hPrintf("<div class=\"inputGroup\">" "<label for=\"password\">Password <small>(must be at least 5 characters)</small></label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=password name=\"hgLogin_password\" value=\"%s\" size=\"30\" id=\"password\">", cartUsualString(cart, "hgLogin_password", "")); printPwdEyeIcon("signupPwEyeIcon", "signupPwEyeSlash"); hPrintf( "</span>" "</div>" "\n" "<div class=\"inputGroup\">" "<label for=\"passwordCheck\">Re-enter Password</label>" - "<span style=\"position:relative; display:inline-block;\">" + "<span style=\"display:inline-flex; align-items:center;\">" "<input type=password name=\"hgLogin_password2\" value=\"%s\" size=\"30\" id=\"passwordCheck\">", cartUsualString(cart, "hgLogin_password2", "")); printPwdEyeIcon("signupPwCheckEyeIcon", "signupPwCheckEyeSlash"); hPrintf( "</span>" "\n" "</div>" "\n" "<div class=\"formControls\">" " <input type=\"submit\" name=\"hgLogin.do.signup\" value=\"Sign Up using Email\" class=\"largeButton\"> " " <a href=\"%s\" class=\"cancelButton\">Cancel</a>" "</div>" "</form>" "</div><!-- END - signUpBox -->", getReturnToURL());