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,59 +124,60 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
           })}
         />
       </Form.Item>
-      <Form.Item
+      <div className={`${styles.passwordWrapper} password-wrapper`}>
-        style={{
+        <Form.Item
-          marginBottom: 20
+          style={{
-        }}
+            marginBottom: 20
-        name="password"
+          }}
-        label={
+          name="password"
-          <Flex
+          label={
-            align="center"
+            <Flex
-            justify="space-between"
+              align="center"
-            style={{ width: '100%' }}
+              justify="space-between"
-          >
+              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' })}
+              <span>{intl.formatMessage({ id: 'common.form.password' })}</span>
-            </Button>
+            </Flex>
-          </Flex>
-        }
-        rules={[
-          {
-            required: true,
-            message: intl.formatMessage(
-              { id: 'common.form.rule.input' },
-              {
-                name: intl.formatMessage({ id: 'common.form.password' })
-              }
-            )
           }
-        ]}
+          rules={[
-      >
+            {
-        <Input.Password
+              required: true,
-          className={styles.password}
+              message: intl.formatMessage(
-          autoComplete="current-password"
+                { id: 'common.form.rule.input' },
-          prefix={<LockOutlined />}
+                {
-          style={{ height: 44 }}
+                  name: intl.formatMessage({ id: 'common.form.password' })
-          placeholder={intl.formatMessage({
+                }
-            id: 'common.login.password.holder'
+              )
-          })}
+            }
-        />
+          ]}
-      </Form.Item>
+        >
+          <Input.Password
+            autoComplete="current-password"
+            prefix={<LockOutlined />}
+            style={{ height: 44 }}
+            placeholder={intl.formatMessage({
+              id: 'common.login.password.holder'
+            })}
+          />
+        </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>