Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/wincloud_gateway/node_modules/strapi-admin/admin/src/containers/Users/ListPage/   drwxr-xr-x
Free 13.09 GB of 57.97 GB (22.58%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     ModalForm.js (2.77 KB)      -rw-r--r--

import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Button } from '@buffetjs/core';
import { Modal, ModalFooter, ModalHeader, useGlobalContext } from 'strapi-helper-plugin';
import stepper from './stepper';

const ModalForm = ({ isOpen, onClosed, onToggle }) => {
  const [currentStep, setStep] = useState('create');
  // Little trick to focus the first input
  // Without this the focus is lost
  const [showBody, setShowBody] = useState(false);
  const [isSubmiting, setIsSubmiting] = useState(false);
  const [registrationToken, setRegistrationToken] = useState(null);
  const { formatMessage } = useGlobalContext();
  const ref = useRef(null);
  const { buttonSubmitLabel, Component, isDisabled, next } = stepper[currentStep];

  const goNext = () => {
    if (next) {
      setStep(next);
    } else {
      onToggle();
    }
  };

  const handleClick = () => {
    if (ref.current) {
      ref.current.submit();
    } else {
      goNext();
    }
  };

  const handleClosed = () => {
    // Fetch data only if the user has submitted a new entry
    // We can use the registrationToken to know this
    if (registrationToken || currentStep === 'magic-link') {
      onClosed();
    }

    // Reset the state so we know that the user has created a new entry when there is a registrationToken
    setStep('create');
    setShowBody(false);
    setRegistrationToken(null);
  };

  const handleSubmit = (e, data) => {
    const { registrationToken } = data;

    setRegistrationToken(registrationToken);
    goNext();
  };

  const handleOpened = () => {
    setShowBody(true);
  };

  return (
    <Modal
      isOpen={isOpen}
      onOpened={handleOpened}
      onToggle={onToggle}
      onClosed={handleClosed}
      withoverflow="true"
    >
      <ModalHeader headerBreadcrumbs={['Settings.permissions.users.add-new']} />
      {showBody && (
        <Component
          isDisabled={isDisabled}
          onSubmit={handleSubmit}
          ref={currentStep === 'create' ? ref : null}
          registrationToken={registrationToken}
          setIsSubmiting={setIsSubmiting}
          showMagicLink={currentStep === 'magic-link'}
        />
      )}
      <ModalFooter>
        <section>
          <Button type="button" color="cancel" onClick={onToggle}>
            {formatMessage({ id: 'app.components.Button.cancel' })}
          </Button>
          <Button color="success" type="button" onClick={handleClick} isLoading={isSubmiting}>
            {formatMessage({ id: buttonSubmitLabel })}
          </Button>
        </section>
      </ModalFooter>
    </Modal>
  );
};

ModalForm.defaultProps = {
  onClosed: () => {},
};

ModalForm.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClosed: PropTypes.func,
  onToggle: PropTypes.func.isRequired,
};

export default ModalForm;