mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
Update index.tsx
This commit is contained in:
Stefan Pejcic
GitHub
parent
1848058174
commit
56c566c3d6
@ -6,124 +6,88 @@ 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 handleOptionChange = (option: string) => {
|
||||
setOptions((prevOptions) => ({
|
||||
...prevOptions,
|
||||
[option]: !prevOptions[option],
|
||||
}));
|
||||
};
|
||||
|
||||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = event.target;
|
||||
setInputValues((prevInputValues) => ({
|
||||
...prevInputValues,
|
||||
[name]: value,
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setInstallOptions(prevState => ({
|
||||
...prevState,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
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}`;
|
||||
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]}`;
|
||||
}
|
||||
}
|
||||
if (options.lang) {
|
||||
command += ` --lang ${inputValues.langValue}`;
|
||||
}
|
||||
// Add more options as needed
|
||||
return command;
|
||||
};
|
||||
|
||||
return (
|
||||
<CommonLayout>
|
||||
<Head title="Install | OpenPanel">
|
||||
<html data-page="support" data-customized="true" />
|
||||
<html data-page="install" data-customized="true" />
|
||||
</Head>
|
||||
<div className="refine-prose">
|
||||
<CommonHeader hasSticky={true} />
|
||||
|
||||
<div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
|
||||
<h2 className="u-text-center">Installation instructions</h2>
|
||||
<p className="u-mb10">
|
||||
Log in to your server e.g.{" "}
|
||||
<code>ssh root@your.server</code> then download the installation
|
||||
script:
|
||||
</p>
|
||||
{/* Implement CopyToClipboardInput for first command */}
|
||||
<h1>Installation</h1>
|
||||
|
||||
<p className="u-mb10">
|
||||
Check you are running as the <code>root</code> user, configure the
|
||||
options you want below, then run:
|
||||
</p>
|
||||
{/* Implement CopyToClipboardInput for second command */}
|
||||
<div className="mb-8">
|
||||
<h2>Install Command:</h2>
|
||||
<pre>{generateInstallCommand()}</pre>
|
||||
</div>
|
||||
|
||||
<h2 className="u-text-center">Configure options</h2>
|
||||
<ul className="option-list">
|
||||
{Object.keys(options).map((option) => (
|
||||
<li
|
||||
key={option}
|
||||
className={clsx("option-item", "is-clickable", {
|
||||
"is-active": options[option],
|
||||
})}
|
||||
>
|
||||
<div className="option-header">
|
||||
<div className="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id={option}
|
||||
checked={options[option]}
|
||||
onChange={() => handleOptionChange(option)}
|
||||
/>
|
||||
<label htmlFor={option}>{option}</label>
|
||||
</div>
|
||||
{/* Implement tooltip icon */}
|
||||
</div>
|
||||
{/* Input fields for each option */}
|
||||
{options[option] && (
|
||||
<div className="mb-8">
|
||||
<h2>Advanced Install Settings:</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Input fields for advanced install settings */}
|
||||
{/* Example for hostname */}
|
||||
<div>
|
||||
<label htmlFor="hostname">Hostname:</label>
|
||||
<input
|
||||
type="text"
|
||||
name={`${option}Value`}
|
||||
value={inputValues[`${option}Value`]}
|
||||
id="hostname"
|
||||
name="hostname"
|
||||
value={installOptions.hostname}
|
||||
onChange={handleInputChange}
|
||||
placeholder={`Enter value for ${option}`}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Repeat similar structure for other options */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Implement input fields for additional input values */}
|
||||
{/* Implement a button to generate the install command */}
|
||||
<button
|
||||
className="bg-blue-500 text-white px-4 py-2"
|
||||
onClick={() => generateInstallCommand()}
|
||||
>
|
||||
<button className="bg-blue-500 text-white px-4 py-2" onClick={generateInstallCommand}>
|
||||
Generate Install Command
|
||||
</button>
|
||||
{/* Display the generated command */}
|
||||
<p>{generateInstallCommand()}</p>
|
||||
</div>
|
||||
<BlogFooter />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user