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:
Bram Suurd
2024-11-19 22:21:00 +01:00
committed by GitHub
parent 9f80cec2d9
commit 6e71047570
3 changed files with 104 additions and 118 deletions

View File

@@ -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>
);
}