frontend/src/modules/UserFormData/UserFormData.tsx - master - softailor/gridient

frontend/src/modules/UserFormData/UserFormData.tsx
138 строк4 KB
Jenkins
Auto add
18 фев 2026, 10:19
18 фев 2026, 10:191e6c4f8
import { FC, useState } from "react";

import { Button, Form, Input, notification } from "antd";
import { useForm } from "antd/lib/form/Form";

import { FormValidator, RegisterFormValues, ResponseModel } from "models";

type UserFormDataProps = {
  onSubmit: (data: RegisterFormValues) => Promise<ResponseModel>;
  onSuccess?: () => void;
  options?: {
    needPassword?: boolean;
    btnText?: string;
    successMsg?: string;
    disableLogin?: boolean;
  };
  initialData?: RegisterFormValues;
};

export const UserFormData: FC<UserFormDataProps> = ({
  onSubmit,
  onSuccess,
  options,
  initialData,
}) => {
  const [form] = useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: RegisterFormValues) => {
    setLoading(true);

    try {
      const displayName =
        values.firstName || values.lastName
          ? `${values.firstName} ${values.lastName}`
          : values.login;
      const result = await onSubmit({ ...values, displayName });

      if (!result.error && !result.errors) {
        notification.success({
          title: "Успешно",
          description: result.data?.message ?? options?.successMsg ?? "Пользователь успешно создан",
        });
        onSuccess?.();
      }
    } finally {
      setLoading(false);
    }
  };

  const validatePassword: FormValidator = (_, value, callback) => {
    if (!value) {
      callback();
    }
    const passwordRegex = /^(?=.*\p{Ll})(?=.*\p{Lu})(?=.*\d)(?=.*[^\p{L}\d\s])(?!\s*$).{8,}$/u;
    if (!passwordRegex.test(value)) {
      callback(
        "Пароль должен содержать минимум 8 символов, заглавную букву, строчную, цифру и спецсимвол, не считая пробелы (невидимые символы запрещены)",
      );
    }
    callback();
  };

  const validatePasswordCopy: FormValidator = (_, value, callback) => {
    const password = form.getFieldValue("password");
    if (value && value !== password) {
      callback("Пароли не совпадают!");
    } else {
      callback();
    }
  };

  return (
    <Form
      layout="vertical"
      onFinish={handleSubmit}
      autoComplete="off"
      form={form}
      initialValues={initialData}
    >
      <Form.Item
        label="Логин"
        name="login"
        rules={[{ required: true, message: "Введите логин пользователя" }]}
      >
        <Input
          placeholder="Введите логин пользователя"
          disabled={!options?.needPassword || options.disableLogin}
        />
      </Form.Item>
      {options?.needPassword && (
        <Form.Item
          label="Пароль"
          name="password"
          rules={[{ required: true, message: "Введите пароль" }, { validator: validatePassword }]}
        >
          <Input.Password placeholder="Введите пароль" />
        </Form.Item>
      )}
      {options?.needPassword && (
        <Form.Item
          label="Повторите пароль"
          name="passwordRepeat"
          rules={[
            { required: true, message: "Введите пароль" },
            { validator: validatePasswordCopy },
          ]}
        >
          <Input.Password placeholder="Введите пароль" />
        </Form.Item>
      )}
      <Form.Item label="Фамилия" name="lastName">
        <Input placeholder="Введите фамилию" />
      </Form.Item>
      <Form.Item label="Имя" name="firstName">
        <Input placeholder="Введите имя" />
      </Form.Item>
      <Form.Item label="Отчество" name="middleName">
        <Input placeholder="Введите отчество" />
      </Form.Item>
      <Form.Item
        label="Email"
        name="email"
        rules={[
          { required: true, message: "Введите email" },
          { type: "email", message: "Введите корректный email" },
        ]}
      >
        <Input placeholder="Введите email" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} block>
          {options?.btnText}
        </Button>
      </Form.Item>
    </Form>
  );
};