UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update index.tsx

Browse Source
This commit is contained in:
Stefan Pejcic 2024-06-01 14:34:08 +02:00 committed by GitHub
parent 1848058174
commit 56c566c3d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 79 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
documentation/src/pages/install/index.tsx
View File

@ -6,129 +6,93 @@ import { CommonLayout } from "@site/src/refine-theme/common-layout";
import clsx from "clsx"; import clsx from "clsx";
const Install: React.FC = () => { const Install: React.FC = () => {
const [options, setOptions] = useState({ const [installOptions, setInstallOptions] = useState({
port: false, hostname: "",
lang: false, version: "",
hostname: false, skipRequirements: false,
email: false, skipPanelCheck: false,
password: false, skipAptUpdate: false,
apache: true, // Default to true overlay2: false,
phpfpm: true, // Default to true skipFirewall: false,
// Add more options as needed 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({ const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Define initial input values if needed const { name, value, type, checked } = e.target;
portValue: "", setInstallOptions(prevState => ({
langValue: "", ...prevState,
hostnameValue: "", [name]: type === "checkbox" ? checked : value,
emailValue: "", }));
passwordValue: "", };
});
const handleOptionChange = (option: string) => { const generateInstallCommand = () => {
setOptions((prevOptions) => ({ let command = "bash <(curl -sSL https://get.openpanel.co/)";
...prevOptions, for (const option in installOptions) {
[option]: !prevOptions[option], if (installOptions[option]) {
})); if (typeof installOptions[option] === "boolean") {
}; command += ` --${option}`;
} else {
command += ` --${option}=${installOptions[option]}`;
}
}
}
return command;
};
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { return (
const { name, value } = event.target; <CommonLayout>
setInputValues((prevInputValues) => ({ <Head title="Install | OpenPanel">
...prevInputValues, <html data-page="install" data-customized="true" />
[name]: value, </Head>
})); <div className="refine-prose">
}; <CommonHeader hasSticky={true} />
const generateInstallCommand = () => { <div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
let command = "Your install command here"; <h1>Installation</h1>
// 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;
};
return ( <div className="mb-8">
<CommonLayout> <h2>Install Command:</h2>
<Head title="Install | OpenPanel"> <pre>{generateInstallCommand()}</pre>
<html data-page="support" data-customized="true" /> </div>
</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"> <div className="mb-8">
<h2 className="u-text-center">Installation instructions</h2> <h2>Advanced Install Settings:</h2>
<p className="u-mb10"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
Log in to your server e.g.{" "} {/* Input fields for advanced install settings */}
<code>ssh root@your.server</code> then download the installation {/* Example for hostname */}
script: <div>
</p> <label htmlFor="hostname">Hostname:</label>
{/* Implement CopyToClipboardInput for first command */} <input
type="text"
id="hostname"
name="hostname"
value={installOptions.hostname}
onChange={handleInputChange}
/>
</div>
{/* Repeat similar structure for other options */}
</div>
</div>
<p className="u-mb10"> <button className="bg-blue-500 text-white px-4 py-2" onClick={generateInstallCommand}>
Check you are running as the <code>root</code> user, configure the Generate Install Command
options you want below, then run: </button>
</p>
{/* Implement CopyToClipboardInput for second command */}
<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> </div>
{/* Input fields for each option */} <BlogFooter />
{options[option] && ( </div>
<input </CommonLayout>
type="text" );
name={`${option}Value`}
value={inputValues[`${option}Value`]}
onChange={handleInputChange}
placeholder={`Enter value for ${option}`}
/>
)}
</li>
))}
</ul>
{/* 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()}
>
Generate Install Command
</button>
{/* Display the generated command */}
<p>{generateInstallCommand()}</p>
</div>
<BlogFooter />
</div>
</CommonLayout>
);
}; };
export default Install; export default Install;