refactor(perferences): use center wrapper layout

2026-06-29 19:44:28 +08:00
parent b8d7873b77
commit f719c11606
19 changed files with 684 additions and 144 deletions
@@ -0,0 +1,132 @@
+import { PasswordReg } from '@/config';
+import { INPUT_WIDTH } from '@/constants';
+import useSubmitLock from '@/hooks/use-submit-lock';
+import { updatePassword } from '@/pages/login/apis';
+import { Input as CInput, FormButtons } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import React from 'react';
+
+interface FormData {
+  new_password: string;
+  current_password: string;
+  confirm_password?: string;
+}
+
+interface ModifyPasswordFormProps {
+  onCancel: () => void;
+  onSuccess?: () => void;
+}
+
+const ModifyPasswordForm: React.FC<ModifyPasswordFormProps> = ({
+  onCancel,
+  onSuccess
+}) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const { guard, run, release } = useSubmitLock();
+
+  const handleSubmit = () => {
+    guard(() => form.submit());
+  };
+
+  const onFinish = async (values: FormData) => {
+    await run(async () => {
+      await updatePassword({
+        new_password: values.new_password,
+        current_password: values.current_password
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      onSuccess?.();
+    });
+  };
+
+  return (
+    <Form
+      name="modifyPasswordForm"
+      form={form}
+      onFinish={onFinish}
+      onFinishFailed={release}
+      preserve={false}
+    >
+      <Form.Item<FormData>
+        name="current_password"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: intl.formatMessage({
+                  id: 'users.form.currentpassword'
+                })
+              }
+            )
+          }
+        ]}
+      >
+        <CInput.Password
+          autoComplete="current-password"
+          label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        />
+      </Form.Item>
+      <Form.Item<FormData>
+        name="new_password"
+        rules={[
+          {
+            required: true,
+            pattern: PasswordReg,
+            message: intl.formatMessage({
+              id: 'users.form.rule.password'
+            })
+          }
+        ]}
+      >
+        <CInput.Password
+          autoComplete="new-password"
+          label={intl.formatMessage({ id: 'users.form.newpassword' })}
+          required
+          style={{ width: INPUT_WIDTH.default }}
+        />
+      </Form.Item>
+      <Form.Item
+        name="confirm_password"
+        dependencies={['new_password']}
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage({
+              id: 'users.password.confirm.empty'
+            })
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('new_password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(
+                new Error(
+                  intl.formatMessage({ id: 'users.password.confirm.error' })
+                )
+              );
+            }
+          })
+        ]}
+      >
+        <CInput.Password
+          required
+          autoComplete="new-password"
+          style={{ width: INPUT_WIDTH.default }}
+          label={intl.formatMessage({ id: 'users.password.confirm' })}
+        />
+      </Form.Item>
+      <FormButtons htmlType="submit" onCancel={onCancel} showCancel />
+    </Form>
+  );
+};
+
+ModifyPasswordForm.displayName = 'ModifyPasswordForm';
+
+export default ModifyPasswordForm;