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
7df3e0605a
commit
5c96799da9
@ -1,53 +1,59 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, ChangeEvent } from "react";
|
||||
import Head from "@docusaurus/Head";
|
||||
import { BlogFooter } from "@site/src/refine-theme/blog-footer";
|
||||
import { CommonHeader } from "@site/src/refine-theme/common-header";
|
||||
import { CommonLayout } from "@site/src/refine-theme/common-layout";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface InstallOption {
|
||||
value: string | boolean;
|
||||
description: string;
|
||||
options?: string[];
|
||||
}
|
||||
|
||||
type InstallOptions = Record<string, InstallOption>;
|
||||
|
||||
const defaultOptions: InstallOptions = {
|
||||
hostname: { value: "", description: "Set the hostname." },
|
||||
version: { value: "", description: "Set a custom OpenPanel version to be installed." },
|
||||
"skip-requirements": { value: false, description: "Skip the requirements check." },
|
||||
"skip-panel-check": { value: false, description: "Skip checking if existing panels are installed." },
|
||||
"skip-apt-update": { value: false, description: "Skip the APT update." },
|
||||
overlay2: { value: false, description: "Enable overlay2 storage driver instead of device-mapper." },
|
||||
"skip-firewall": { value: false, description: "Skip UFW setup UFW - Only do this if you will set another Firewall manually!" },
|
||||
"skip-images": { value: false, description: "Skip installing openpanel/nginx and openpanel/apache docker images." },
|
||||
"skip-blacklists": { value: false, description: "Do not set up IP sets and blacklists." },
|
||||
"skip-ssl": { value: false, description: "Skip SSL setup." },
|
||||
"with-modsec": { value: false, description: "Enable ModSecurity for Nginx." },
|
||||
ips: { value: "", description: "Whitelist IP addresses of OpenPanel Support Team." },
|
||||
"no-ssh": { value: false, description: "Disable port 22 and whitelist the IP address of user installing the panel." },
|
||||
"enable-ftp": { value: false, description: "Install FTP (experimental)." },
|
||||
"enable-mail": { value: false, description: "Install Mail (experimental)." },
|
||||
"post-install": { value: "", description: "Specify the post install script path." },
|
||||
screenshots: { value: "remote", description: "Set the screenshots API URL.", options: ["local", "remote"] },
|
||||
debug: { value: false, description: "Display debug information during installation." },
|
||||
repair: { value: false, description: "Retry and overwrite everything." },
|
||||
};
|
||||
|
||||
const Install: React.FC = () => {
|
||||
const [installOptions, setInstallOptions] = useState({
|
||||
"hostname": { value: "", description: "Set the hostname." },
|
||||
"version": { value: "", description: "Set a custom OpenPanel version to be installed." },
|
||||
"skip-requirements": { value: false, description: "Skip the requirements check." },
|
||||
"skip-panel-check": { value: false, description: "Skip checking if existing panels are installed." },
|
||||
"skip-apt-update": { value: false, description: "Skip the APT update." },
|
||||
"overlay2": { value: false, description: "Enable overlay2 storage driver instead of device-mapper." },
|
||||
"skip-firewall": { value: false, description: "Skip UFW setup UFW - Only do this if you will set another Firewall manually!" },
|
||||
"skip-images": { value: false, description: "Skip installing openpanel/nginx and openpanel/apache docker images." },
|
||||
"skip-blacklists": { value: false, description: "Do not set up IP sets and blacklists." },
|
||||
"skip-ssl": { value: false, description: "Skip SSL setup." },
|
||||
"with-modsec": { value: false, description: "Enable ModSecurity for Nginx." },
|
||||
"ips": { value: "", description: "Whitelist IP addresses of OpenPanel Support Team." },
|
||||
"no-ssh": { value: false, description: "Disable port 22 and whitelist the IP address of user installing the panel." },
|
||||
"enable-ftp": { value: false, description: "Install FTP (experimental)." },
|
||||
"enable-mail": { value: false, description: "Install Mail (experimental)." },
|
||||
"post-install": { value: "", description: "Specify the post install script path." },
|
||||
"screenshots": { value: "remote", description: "Set the screenshots API URL.", options: ["local", "remote"] }, // select
|
||||
"debug": { value: false, description: "Display debug information during installation." },
|
||||
"repair": { value: false, description: "Retry and overwrite everything." },
|
||||
});
|
||||
|
||||
|
||||
|
||||
const [installOptions, setInstallOptions] = useState<InstallOptions>(defaultOptions);
|
||||
const [latestVersion, setLatestVersion] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://update.openpanel.co/")
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
// Extract the latest version from the plain text
|
||||
setLatestVersion(data.trim());
|
||||
// Set default version to the latest version
|
||||
const version = data.trim();
|
||||
setLatestVersion(version);
|
||||
setInstallOptions(prevState => ({
|
||||
...prevState,
|
||||
version: { ...prevState.version, value: data.trim() },
|
||||
version: { ...prevState.version, value: version },
|
||||
}));
|
||||
})
|
||||
.catch(error => console.error("Error fetching latest version:", error));
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setInstallOptions(prevState => ({
|
||||
...prevState,
|
||||
@ -57,17 +63,17 @@ const Install: React.FC = () => {
|
||||
|
||||
const generateInstallCommand = () => {
|
||||
let command = "bash <(curl -sSL https://get.openpanel.co/)";
|
||||
for (const option in installOptions) {
|
||||
if (option !== "version" || (option === "version" && installOptions[option].value !== latestVersion)) {
|
||||
if (installOptions[option].value || ["version", "hostname", "screenshots", "post-install"].includes(option)) {
|
||||
if (option === "screenshots" && installOptions[option].value === "local") {
|
||||
for (const [option, config] of Object.entries(installOptions)) {
|
||||
if (option !== "version" || (option === "version" && config.value !== latestVersion)) {
|
||||
if (config.value || ["version", "hostname", "screenshots", "post-install"].includes(option)) {
|
||||
if (option === "screenshots" && config.value === "local") {
|
||||
command += ` --screenshots=local`;
|
||||
} else if (option === "screenshots" && installOptions[option].value === "remote") {
|
||||
} else if (option === "screenshots" && config.value === "remote") {
|
||||
command += ``;
|
||||
} else if (installOptions[option].value !== "" && installOptions[option].value !== false) {
|
||||
} else if (config.value !== "" && config.value !== false) {
|
||||
command += ` --${option}`;
|
||||
if (installOptions[option].value !== true) {
|
||||
command += `=${installOptions[option].value}`;
|
||||
if (config.value !== true) {
|
||||
command += `=${config.value}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,11 +82,6 @@ const Install: React.FC = () => {
|
||||
return command;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<CommonLayout>
|
||||
<Head title="Install | OpenPanel">
|
||||
@ -102,49 +103,31 @@ const Install: React.FC = () => {
|
||||
<h2>Advanced Install Settings:</h2>
|
||||
<p className="mt-0">Here you can set what shall be installed and configured when installing OpenPanel:</p>
|
||||
<ul>
|
||||
{/* Input fields for advanced install settings */}
|
||||
{Object.entries(installOptions).map(([key, value]) => (
|
||||
{Object.entries(installOptions).map(([key, config]) => (
|
||||
<li key={key}>
|
||||
<label htmlFor={key}>{key.replace(/-/g, ' ').toUpperCase()}:</label>
|
||||
<span>{value.description}</span>
|
||||
{key === "version" ? (
|
||||
<input
|
||||
type="text"
|
||||
id={key}
|
||||
name={key}
|
||||
value={value.value}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
) : key === "screenshots" ? (
|
||||
{key === "screenshots" ? (
|
||||
<select
|
||||
id={key}
|
||||
name={key}
|
||||
value={value.value}
|
||||
value={config.value as string}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
{value.options.map(option => (
|
||||
{config.options?.map(option => (
|
||||
<option key={option} value={option}>{option}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
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}
|
||||
/>
|
||||
)
|
||||
<input
|
||||
type={typeof config.value === "boolean" ? "checkbox" : "text"}
|
||||
id={key}
|
||||
name={key}
|
||||
checked={typeof config.value === "boolean" ? config.value : undefined}
|
||||
value={typeof config.value === "string" ? config.value : undefined}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
)}
|
||||
<label htmlFor={key}>{key.replace(/-/g, ' ').toUpperCase()} :</label>
|
||||
<span>{config.description}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user