From 56c566c3d6318be2aa5f8498d7be2f6c46201daf Mon Sep 17 00:00:00 2001 From: Stefan Pejcic Date: Sat, 1 Jun 2024 14:34:08 +0200 Subject: [PATCH] Update index.tsx --- documentation/src/pages/install/index.tsx | 194 +++++++++------------- 1 file changed, 79 insertions(+), 115 deletions(-) diff --git a/documentation/src/pages/install/index.tsx b/documentation/src/pages/install/index.tsx index 584fbc63..5f1abf25 100644 --- a/documentation/src/pages/install/index.tsx +++ b/documentation/src/pages/install/index.tsx @@ -6,129 +6,93 @@ import { CommonLayout } from "@site/src/refine-theme/common-layout"; import clsx from "clsx"; const Install: React.FC = () => { - const [options, setOptions] = useState({ - port: false, - lang: false, - hostname: false, - email: false, - password: false, - apache: true, // Default to true - phpfpm: true, // Default to true - // Add more options as needed - }); + const [installOptions, setInstallOptions] = useState({ + hostname: "", + version: "", + skipRequirements: false, + skipPanelCheck: false, + skipAptUpdate: false, + overlay2: false, + skipFirewall: false, + skipImages: false, + skipBlacklists: false, + skipSSL: false, + withModsec: false, + ips: "", + noSSH: false, + enableFTP: false, + enableMail: false, + postInstall: "", + screenshots: "", + debug: false, + repair: false, + }); - const [inputValues, setInputValues] = useState({ - // Define initial input values if needed - portValue: "", - langValue: "", - hostnameValue: "", - emailValue: "", - passwordValue: "", - }); + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value, type, checked } = e.target; + setInstallOptions(prevState => ({ + ...prevState, + [name]: type === "checkbox" ? checked : value, + })); + }; - const handleOptionChange = (option: string) => { - setOptions((prevOptions) => ({ - ...prevOptions, - [option]: !prevOptions[option], - })); - }; + const generateInstallCommand = () => { + let command = "bash <(curl -sSL https://get.openpanel.co/)"; + for (const option in installOptions) { + if (installOptions[option]) { + if (typeof installOptions[option] === "boolean") { + command += ` --${option}`; + } else { + command += ` --${option}=${installOptions[option]}`; + } + } + } + return command; + }; - const handleInputChange = (event: React.ChangeEvent) => { - const { name, value } = event.target; - setInputValues((prevInputValues) => ({ - ...prevInputValues, - [name]: value, - })); - }; + return ( + + + + +
+ - const generateInstallCommand = () => { - let command = "Your install command here"; - // Logic to generate install command based on selected options and input values - // For example: - if (options.port) { - command += ` --port ${inputValues.portValue}`; - } - if (options.lang) { - command += ` --lang ${inputValues.langValue}`; - } - // Add more options as needed - return command; - }; +
+

Installation

- return ( - - - - -
- +
+

Install Command:

+ 
{generateInstallCommand()}
+
-
-

Installation instructions

-

- Log in to your server e.g.{" "} - ssh root@your.server then download the installation - script: -

- {/* Implement CopyToClipboardInput for first command */} +
+

Advanced Install Settings:

+
+ {/* Input fields for advanced install settings */} + {/* Example for hostname */} +
+ + +
+ {/* Repeat similar structure for other options */} +
+
-

- Check you are running as the root user, configure the - options you want below, then run: -

- {/* Implement CopyToClipboardInput for second command */} - -

Configure options

-
    - {Object.keys(options).map((option) => ( -
  • -
    -
    - handleOptionChange(option)} - /> - -
    - {/* Implement tooltip icon */} +
    - {/* Input fields for each option */} - {options[option] && ( - - )} -
    • - ))} -
- - {/* Implement input fields for additional input values */} - {/* Implement a button to generate the install command */} - - {/* Display the generated command */} -

{generateInstallCommand()}

-
- -
- - ); + +
+ + ); }; export default Install;