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 15:00:21 +02:00 committed by GitHub
parent a271493881
commit ee3fe806cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 66 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,69 +7,64 @@ import clsx from "clsx";
const Install: React.FC = () => { const Install: React.FC = () => {
const [installOptions, setInstallOptions] = useState({ const [installOptions, setInstallOptions] = useState({
hostname: "", hostname: { value: "", description: "Set the hostname." },
version: "", version: { value: "", description: "Set a custom OpenPanel version to be installed." },
"--skip-requirements": false, skip_requirements: { value: false, description: "Skip the requirements check." },
"--skip-panel-check": false, skip_panel_check: { value: false, description: "Skip checking if existing panels are installed." },
"--skip-apt-update": false, skip_apt_update: { value: false, description: "Skip the APT update." },
overlay2: false, overlay2: { value: false, description: "Enable overlay2 storage driver instead of device-mapper." },
"--skip-firewall": false, skip_firewall: { value: false, description: "Skip UFW setup UFW - Only do this if you will set another Firewall manually!" },
"--skip-images": false, skip_images: { value: false, description: "Skip installing openpanel/nginx and openpanel/apache docker images." },
"--skip-blacklists": false, skip_blacklists: { value: false, description: "Do not set up IP sets and blacklists." },
"--skip-ssl": false, skip_ssl: { value: false, description: "Skip SSL setup." },
"--with-modsec": false, with_modsec: { value: false, description: "Enable ModSecurity for Nginx." },
ips: "", ips: { value: "", description: "Whitelist IP addresses of OpenPanel Support Team." },
"--no-ssh": false, no_ssh: { value: false, description: "Disable port 22 and whitelist the IP address of user installing the panel." },
"--enable-ftp": false, enable_ftp: { value: false, description: "Install FTP (experimental)." },
"--enable-mail": false, enable_mail: { value: false, description: "Install Mail (experimental)." },
"--post-install": "", post_install: { value: "", description: "Specify the post install script path." },
"--screenshots": "local", screenshots: { value: "local", description: "Set the screenshots API URL." },
"--debug": false, debug: { value: false, description: "Display debug information during installation." },
"--repair": false, repair: { value: false, description: "Retry and overwrite everything." },
}); });
const [latestVersion, setLatestVersion] = useState<string>("");
useEffect(() => { useEffect(() => {
fetch("https://update.openpanel.co/") fetch("https://update.openpanel.co/")
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
// Extract the version number from the plain text response // Extract the latest version from the plain text
const latestVersion = data.trim(); setLatestVersion(data.trim());
// Set default version to the latest version
setInstallOptions(prevState => ({ setInstallOptions(prevState => ({
...prevState, ...prevState,
version: latestVersion, version: { ...prevState.version, value: data.trim() },
})); }));
}) })
.catch(error => console.error("Error fetching available version:", error)); .catch(error => console.error("Error fetching latest version:", error));
}, []); }, []);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value, type, checked } = e.target; const { name, value, type, checked } = e.target;
setInstallOptions(prevState => ({ setInstallOptions(prevState => ({
...prevState, ...prevState,
[name]: type === "checkbox" ? checked : value, [name]: { ...prevState[name], value: type === "checkbox" ? checked : value },
})); }));
}; };
const optionDescriptions = { const generateInstallCommand = () => {
hostname: "Set the hostname.", let command = "bash <(curl -sSL https://get.openpanel.co/)";
version: "Set a custom OpenPanel version to be installed.", for (const option in installOptions) {
"--skip-requirements": "Skip the requirements check.", if (installOptions[option].value) {
"--skip-panel-check": "Skip checking if existing panels are installed.", if (typeof installOptions[option].value === "boolean") {
"--skip-apt-update": "Skip the APT update.", command += ` --${option}`;
overlay2: "Enable overlay2 storage driver instead of device-mapper.", } else {
"--skip-firewall": "Skip UFW setup UFW - Only do this if you will set another Firewall manually!", command += ` --${option}=${installOptions[option].value}`;
"--skip-images": "Skip installing openpanel/nginx and openpanel/apache docker images.", }
"--skip-blacklists": "Do not set up IP sets and blacklists.", }
"--skip-ssl": "Skip SSL setup.", }
"--with-modsec": "Enable ModSecurity for Nginx.", return command;
ips: "Whitelist IP addresses of OpenPanel Support Team.",
"--no-ssh": "Disable port 22 and whitelist the IP address of user installing the panel.",
"--enable-ftp": "Install FTP (experimental).",
"--enable-mail": "Install Mail (experimental).",
"--post-install": "Specify the post install script path.",
"--screenshots": "Set the screenshots API URL.",
"--debug": "Display debug information during installation.",
"--repair": "Retry and overwrite everything.",
}; };
return ( return (
@ -85,43 +80,43 @@ const Install: React.FC = () => {
<div className="mb-8"> <div className="mb-8">
<h2>Install Command:</h2> <h2>Install Command:</h2>
<pre> <pre>{generateInstallCommand()}</pre>
{`bash <(curl -sSL https://get.openpanel.co/) ${
Object.entries(installOptions)
.filter(([_, value]) => value !== "")
.map(([key, value]) =>
typeof value === "boolean" ? `--${key}` : `--${key}=${value}`
)
.join(" ")}
`}
</pre>
</div> </div>
<div className="mb-8"> <div className="mb-8">
<h2>Advanced Install Settings:</h2> <h2>Advanced Install Settings:</h2>
<div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Input fields for advanced install settings */}
{Object.entries(installOptions).map(([key, value]) => ( {Object.entries(installOptions).map(([key, value]) => (
<div key={key} className="mb-4"> <div key={key}>
<p> <label htmlFor={key}>{key.replace(/_/g, ' ').toUpperCase()}:</label>
<strong>{key.replace(/-/g, ' ').toUpperCase()}:</strong>{" "} <span>{value.description}</span>
{optionDescriptions[key]} {key === "version" ? (
</p>
{typeof value === "boolean" ? (
<input
type="checkbox"
id={key}
name={key}
checked={value}
onChange={handleInputChange}
/>
) : (
<input <input
type="text" type="text"
id={key} id={key}
name={key} name={key}
value={value} value={latestVersion}
onChange={handleInputChange} readOnly
/> />
) : (
typeof value.value === "boolean" ? (
<input
type="checkbox"
id={key}
name={key}
checked={value.value}
onChange={handleInputChange}
/>
) : (
<input
type="text"
id={key}
name={key}
value={value.value}
onChange={handleInputChange}
/>
)
)} )}
</div> </div>
))} ))}