fix(style): forgot password layout

src/pages/login/components/local-user-form.tsx

@@ -29,21 +29,12 @@ const useStyles = createStyles(({ token, css }) => {
         }
       }
     `,
-    password: css`
+    passwordWrapper: css`
-      .ant-input-suffix {
+      position: relative;
-        display: flex;
+      .forgot-password {
-        flex-direction: row-reverse;
+        position: absolute;
-        .reset-link {
+        right: 0;
-          padding: 0;
+        top: 74px;
-          font-size: 12px;
-          color: ${token.colorTextSecondary};
-        }
-        .ant-divider {
-          margin-left: 2px;
-        }
-        .reset-link:hover {
-          color: var(--ant-color-link-hover);
-        }
       }
     `
   };
@@ -133,6 +124,7 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
           })}
         />
       </Form.Item>
+      <div className={`${styles.passwordWrapper} password-wrapper`}>
         <Form.Item
           style={{
             marginBottom: 20
@@ -145,16 +137,6 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
               style={{ width: '100%' }}
             >
               <span>{intl.formatMessage({ id: 'common.form.password' })}</span>
-            <Button
-              type="link"
-              size="small"
-              className="reset-link"
-              style={{ fontSize: 12, padding: 0 }}
-              href={externalLinks.resetPassword}
-              target="_blank"
-            >
-              {intl.formatMessage({ id: 'common.button.forgotpassword' })}
-            </Button>
             </Flex>
           }
           rules={[
@@ -170,7 +152,6 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
           ]}
         >
           <Input.Password
-          className={styles.password}
             autoComplete="current-password"
             prefix={<LockOutlined />}
             style={{ height: 44 }}
@@ -179,13 +160,24 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
             })}
           />
         </Form.Item>
+        <Button
+          type="link"
+          size="small"
+          className="forgot-password"
+          style={{ fontSize: 12, padding: 0 }}
+          href={externalLinks.resetPassword}
+          target="_blank"
+        >
+          {intl.formatMessage({ id: 'common.button.forgotpassword' })}
+        </Button>
+      </div>
       <Button
         htmlType="submit"
         type="primary"
         block
         loading={props.loading}
         icon={<IconFont type="icon-login" />}
-        style={{ height: '44px', fontSize: '14px', marginTop: 8 }}
+        style={{ height: '44px', fontSize: '14px', marginTop: 20 }}
       >
         {intl.formatMessage({ id: 'common.button.login' })}
       </Button>