From ef14c84edc4aa8bd3ae3eaa8b3e6ab00ca8da38f Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Thu, 10 Jul 2025 19:56:05 +0800
Subject: [PATCH] feat: show the popover on the top when window's width too
 small and close popover when password options is empty (#3952)

---
 web/src/auth/ForgetPage.js            | 4 ++--
 web/src/auth/SignupPage.js            | 4 ++--
 web/src/common/modal/PasswordModal.js | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/auth/ForgetPage.js b/web/src/auth/ForgetPage.js
index b49fe48d..e09327d7 100644
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@@ -385,7 +385,7 @@ class ForgetPage extends React.Component {
                 },
               ]}
             />
-            <Popover placement="right" content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
+            <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
               <Form.Item
                 name="newPassword"
                 hidden={this.state.current !== 2}
@@ -415,7 +415,7 @@ class ForgetPage extends React.Component {
                   }}
                   onFocus={() => {
                     this.setState({
-                      passwordPopoverOpen: true,
+                      passwordPopoverOpen: application.organizationObj.passwordOptions?.length > 0,
                       passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, this.form.current?.getFieldValue("newPassword") ?? ""),
                     });
                   }}
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index cfc4353a..3781a1ac 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -607,7 +607,7 @@ class SignupPage extends React.Component {
       }
     } else if (signupItem.name === "Password") {
       return (
-        <Popover placement="right" content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
+        <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
           <Form.Item
             name="password"
             className="signup-password"
@@ -635,7 +635,7 @@ class SignupPage extends React.Component {
             }}
             onFocus={() => {
               this.setState({
-                passwordPopoverOpen: true,
+                passwordPopoverOpen: application.organizationObj.passwordOptions?.length > 0,
                 passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, this.form.current?.getFieldValue("password") ?? ""),
               });
             }}
diff --git a/web/src/common/modal/PasswordModal.js b/web/src/common/modal/PasswordModal.js
index 36570c2e..62b8e99f 100644
--- a/web/src/common/modal/PasswordModal.js
+++ b/web/src/common/modal/PasswordModal.js
@@ -132,18 +132,18 @@ export const PasswordModal = (props) => {
             </Row>
           ) : null}
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Popover placement="right" content={passwordPopover} open={passwordPopoverOpen}>
+            <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={passwordPopover} open={passwordPopoverOpen}>
               <Input.Password
                 addonBefore={i18next.t("user:New Password")}
                 placeholder={i18next.t("user:input password")}
                 onChange={(e) => {
                   handleNewPassword(e.target.value);
-                  setPasswordPopoverOpen(true);
+                  setPasswordPopoverOpen(passwordOptions?.length > 0);
                   setPasswordPopover(PasswordChecker.renderPasswordPopover(passwordOptions, e.target.value));
 
                 }}
                 onFocus={() => {
-                  setPasswordPopoverOpen(true);
+                  setPasswordPopoverOpen(passwordOptions?.length > 0);
                   setPasswordPopover(PasswordChecker.renderPasswordPopover(passwordOptions, newPassword));
                 }}
                 onBlur={() => {