Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: add props to toggle and change colors of button toggle

Browse Source
This commit is contained in:
Mauricio Siu
2024-06-08 13:28:43 -06:00
parent d54c6e4ac9
commit 1a4f5607dc
10 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
interface Props { interface Props {
mariadbId: string; mariadbId: string;
@@ -31,6 +31,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<Label>Password</Label> <Label>Password</Label>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={data?.databasePassword} value={data?.databasePassword}
/> />
</div> </div>
@@ -39,6 +40,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<Label>Root Password</Label> <Label>Root Password</Label>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={data?.databaseRootPassword} value={data?.databaseRootPassword}
/> />
</div> </div>
@@ -56,6 +58,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">
<Label>Internal Connection URL </Label> <Label>Internal Connection URL </Label>
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`} value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
/> />
</div> </div>

4
components/dashboard/mongo/general/show-external-mongo-credentials.tsx
View File

@@ -1,4 +1,4 @@
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -137,7 +137,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
<div className="grid w-full gap-8"> <div className="grid w-full gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<Label>External Host</Label> <Label>External Host</Label>
<ToggleVisibilityInput value={connectionUrl} /> <ToggleVisibilityInput value={connectionUrl} disabled />
</div> </div>
</div> </div>
)} )}

4
components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
interface Props { interface Props {
mongoId: string; mongoId: string;
@@ -28,6 +28,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
<Label>Password</Label> <Label>Password</Label>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={data?.databasePassword} value={data?.databasePassword}
/> />
</div> </div>
@@ -46,6 +47,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">
<Label>Internal Connection URL </Label> <Label>Internal Connection URL </Label>
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`} value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
/> />
</div> </div>

4
components/dashboard/mysql/general/show-external-mysql-credentials.tsx
View File

@@ -1,4 +1,4 @@
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -137,7 +137,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
<div className="grid w-full gap-8"> <div className="grid w-full gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<Label>External Host</Label> <Label>External Host</Label>
<ToggleVisibilityInput value={connectionUrl} /> <ToggleVisibilityInput disabled value={connectionUrl} />
</div> </div>
</div> </div>
)} )}

5
components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
interface Props { interface Props {
mysqlId: string; mysqlId: string;
@@ -31,6 +31,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
<Label>Password</Label> <Label>Password</Label>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={data?.databasePassword} value={data?.databasePassword}
/> />
</div> </div>
@@ -39,6 +40,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
<Label>Root Password</Label> <Label>Root Password</Label>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={data?.databaseRootPassword} value={data?.databaseRootPassword}
/> />
</div> </div>
@@ -56,6 +58,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">
<Label>Internal Connection URL </Label> <Label>Internal Connection URL </Label>
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`} value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
/> />
</div> </div>

4
components/dashboard/postgres/general/show-external-postgres-credentials.tsx
View File

@@ -1,4 +1,4 @@
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -138,7 +138,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
<div className="grid w-full gap-8"> <div className="grid w-full gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<Label>External Host</Label> <Label>External Host</Label>
<ToggleVisibilityInput value={connectionUrl} /> <ToggleVisibilityInput value={connectionUrl} disabled />
</div> </div>
</div> </div>
)} )}

4
components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
interface Props { interface Props {
postgresId: string; postgresId: string;
@@ -32,6 +32,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
value={data?.databasePassword} value={data?.databasePassword}
disabled
/> />
</div> </div>
</div> </div>
@@ -48,6 +49,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Internal Connection URL </Label> <Label>Internal Connection URL </Label>
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`} value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
/> />
</div> </div>

4
components/dashboard/redis/general/show-external-redis-credentials.tsx
View File

@@ -1,4 +1,4 @@
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -130,7 +130,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
<div className="grid w-full gap-8"> <div className="grid w-full gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<Label>External Host</Label> <Label>External Host</Label>
<ToggleVisibilityInput value={connectionUrl} /> <ToggleVisibilityInput value={connectionUrl} disabled />
</div> </div>
</div> </div>
)} )}

4
components/dashboard/redis/general/show-internal-redis-credentials.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input"; import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
interface Props { interface Props {
redisId: string; redisId: string;
@@ -28,6 +28,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<ToggleVisibilityInput <ToggleVisibilityInput
value={data?.databasePassword} value={data?.databasePassword}
disabled
/> />
</div> </div>
</div> </div>
@@ -44,6 +45,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
<div className="flex flex-col gap-2 md:col-span-2"> <div className="flex flex-col gap-2 md:col-span-2">
<Label>Internal Connection URL </Label> <Label>Internal Connection URL </Label>
<ToggleVisibilityInput <ToggleVisibilityInput
disabled
value={`redis://default:${data?.databasePassword}@${data?.appName}:6379`} value={`redis://default:${data?.databasePassword}@${data?.appName}:6379`}
/> />
</div> </div>

41
components/shared/toggle-visibility-input.tsx
View File

@@ -1,22 +1,33 @@
import { useState } from "react"; import { useState } from "react";
import { EyeIcon, EyeOffIcon } from "lucide-react"; import { EyeIcon, EyeOffIcon } from "lucide-react";
import { Input } from "../ui/input"; import { Input, type InputProps } from "../ui/input";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
interface ToggleVisibilityInputProps { interface ToggleVisibilityInputProps extends InputProps {
value: string | undefined value: string | undefined;
} }
export default function ToggleVisibilityInput({ value }: ToggleVisibilityInputProps) { export const ToggleVisibilityInput = ({
const [inputType, setInputType] = useState<'password' | 'text'>('password'); value,
...props
}: ToggleVisibilityInputProps) => {
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const togglePasswordVisibility = () => { const togglePasswordVisibility = () => {
setInputType(prevType => (prevType === 'password' ? 'text' : 'password')); setIsPasswordVisible((prevVisibility) => !prevVisibility);
}; };
return (
<div className="flex w-full items-center space-x-2"> const inputType = isPasswordVisible ? "text" : "password";
<Input value={value} type={inputType} /> return (
<Button onClick={togglePasswordVisibility}>{inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}</Button> <div className="flex w-full items-center space-x-2">
</div> <Input value={value} type={inputType} {...props} />
) <Button onClick={togglePasswordVisibility} variant={"secondary"}>
} {inputType === "password" ? (
<EyeIcon className="size-4 text-muted-foreground" />
) : (
<EyeOffIcon className="size-4 text-muted-foreground" />
)}
</Button>
</div>
);
};