mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-09-13 07:10:51 +02:00
Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout (#371)
* Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout * Refactor DefaultPassword component to simplify credential handling and enhance code readability with map function * Refactor DefaultSettings component to improve resource display logic and enhance readability using a new ResourceDisplay subcomponent
This commit is contained in:
@@ -4,55 +4,39 @@ import { Separator } from "@/components/ui/separator";
|
||||
import { Script } from "@/lib/types";
|
||||
|
||||
export default function DefaultPassword({ item }: { item: Script }) {
|
||||
const hasDefaultLogin =
|
||||
item.default_credentials.username && item.default_credentials.password;
|
||||
const { username, password } = item.default_credentials;
|
||||
const hasDefaultLogin = username && password;
|
||||
|
||||
if (!hasDefaultLogin) return null;
|
||||
|
||||
const copyCredential = (type: "username" | "password") => {
|
||||
handleCopy(type, item.default_credentials[type] ?? "");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{hasDefaultLogin && (
|
||||
<div className="mt-4 rounded-lg border bg-accent/50">
|
||||
<div className="flex gap-3 px-4 py-2">
|
||||
<h2 className="text-lg font-semibold">Default Login Credentials</h2>
|
||||
<div className="mt-4 rounded-lg border bg-accent/50">
|
||||
<div className="flex gap-3 px-4 py-2">
|
||||
<h2 className="text-lg font-semibold">Default Login Credentials</h2>
|
||||
</div>
|
||||
<Separator className="w-full" />
|
||||
<div className="flex flex-col gap-2 p-4">
|
||||
<p className="mb-2 text-sm">
|
||||
You can use the following credentials to login to the {item.name}{" "}
|
||||
{item.type}.
|
||||
</p>
|
||||
{["username", "password"].map((type) => (
|
||||
<div key={type} className="text-sm">
|
||||
{type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="null"
|
||||
onClick={() => copyCredential(type as "username" | "password")}
|
||||
>
|
||||
{item.default_credentials[type as "username" | "password"]}
|
||||
</Button>
|
||||
</div>
|
||||
<Separator className="w-full"></Separator>
|
||||
<div className="flex flex-col gap-2 p-4">
|
||||
<p className="mb-2 text-sm">
|
||||
You can use the following credentials to login to the {""}
|
||||
{item.name} {item.type}.
|
||||
</p>
|
||||
<div className="text-sm">
|
||||
Username:{" "}
|
||||
<Button
|
||||
variant={"secondary"}
|
||||
size={"null"}
|
||||
onClick={() =>
|
||||
handleCopy(
|
||||
"username",
|
||||
item.default_credentials.username ?? "",
|
||||
)
|
||||
}
|
||||
>
|
||||
{item.default_credentials.username}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Password:{" "}
|
||||
<Button
|
||||
variant={"secondary"}
|
||||
size={"null"}
|
||||
onClick={() =>
|
||||
handleCopy(
|
||||
"password",
|
||||
item.default_credentials.password ?? "",
|
||||
)
|
||||
}
|
||||
>
|
||||
{item.default_credentials.password}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user