From 1a4f5607dcb60610f471347f24f2d64ea238ab8d Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 8 Jun 2024 13:28:43 -0600
Subject: [PATCH] refactor: add props to toggle and change colors of button
 toggle

---
 .../show-internal-mariadb-credentials.tsx     |  5 ++-
 .../show-external-mongo-credentials.tsx       |  4 +-
 .../show-internal-mongo-credentials.tsx       |  4 +-
 .../show-external-mysql-credentials.tsx       |  4 +-
 .../show-internal-mysql-credentials.tsx       |  5 ++-
 .../show-external-postgres-credentials.tsx    |  4 +-
 .../show-internal-postgres-credentials.tsx    |  4 +-
 .../show-external-redis-credentials.tsx       |  4 +-
 .../show-internal-redis-credentials.tsx       |  4 +-
 components/shared/toggle-visibility-input.tsx | 41 ++++++++++++-------
 10 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
index 60950ac9..869409d5 100644
--- a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
+++ b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 interface Props {
 	mariadbId: string;
@@ -31,6 +31,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
+										disabled
 										value={data?.databasePassword}
 									/>
 								</div>
@@ -39,6 +40,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 								<Label>Root Password</Label>
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
+										disabled
 										value={data?.databaseRootPassword}
 									/>
 								</div>
@@ -56,6 +58,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
+									disabled
 									value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
 								/>
 							</div>
diff --git a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
index 46d0101b..c8a3fa23 100644
--- a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
+++ b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
@@ -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 {
 	Card,
@@ -137,7 +137,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<ToggleVisibilityInput value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}
diff --git a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
index 1c8184c6..9fab4a8a 100644
--- a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
+++ b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 interface Props {
 	mongoId: string;
@@ -28,6 +28,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
+										disabled
 										value={data?.databasePassword}
 									/>
 								</div>
@@ -46,6 +47,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
+									disabled
 									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
 								/>
 							</div>
diff --git a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
index 9e8a2cd9..ce184a98 100644
--- a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
+++ b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
@@ -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 {
 	Card,
@@ -137,7 +137,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<ToggleVisibilityInput value={connectionUrl} />
+											<ToggleVisibilityInput disabled value={connectionUrl} />
 										</div>
 									</div>
 								)}
diff --git a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
index 19208bbf..c48fe95d 100644
--- a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
+++ b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 interface Props {
 	mysqlId: string;
@@ -31,6 +31,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
+										disabled
 										value={data?.databasePassword}
 									/>
 								</div>
@@ -39,6 +40,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 								<Label>Root Password</Label>
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
+										disabled
 										value={data?.databaseRootPassword}
 									/>
 								</div>
@@ -56,6 +58,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
+									disabled
 									value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
 								/>
 							</div>
diff --git a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
index 4355488b..edb128bf 100644
--- a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
+++ b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
@@ -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 {
 	Card,
@@ -138,7 +138,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<ToggleVisibilityInput value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}
diff --git a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
index badeca76..a8b5270d 100644
--- a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
+++ b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 interface Props {
 	postgresId: string;
@@ -32,6 +32,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
 										value={data?.databasePassword}
+										disabled
 									/>
 								</div>
 							</div>
@@ -48,6 +49,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
+									disabled
 									value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
 								/>
 							</div>
diff --git a/components/dashboard/redis/general/show-external-redis-credentials.tsx b/components/dashboard/redis/general/show-external-redis-credentials.tsx
index b74d2b62..ea62d77e 100644
--- a/components/dashboard/redis/general/show-external-redis-credentials.tsx
+++ b/components/dashboard/redis/general/show-external-redis-credentials.tsx
@@ -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 {
 	Card,
@@ -130,7 +130,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<ToggleVisibilityInput value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}
diff --git a/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/components/dashboard/redis/general/show-internal-redis-credentials.tsx
index 6dddfde5..1f798144 100644
--- a/components/dashboard/redis/general/show-internal-redis-credentials.tsx
+++ b/components/dashboard/redis/general/show-internal-redis-credentials.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import ToggleVisibilityInput from "@/components/shared/toggle-visibility-input";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 interface Props {
 	redisId: string;
@@ -28,6 +28,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 								<div className="flex flex-row gap-4">
 									<ToggleVisibilityInput
 										value={data?.databasePassword}
+										disabled
 									/>
 								</div>
 							</div>
@@ -44,6 +45,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
+									disabled
 									value={`redis://default:${data?.databasePassword}@${data?.appName}:6379`}
 								/>
 							</div>
diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx
index d2309f43..697008e5 100644
--- a/components/shared/toggle-visibility-input.tsx
+++ b/components/shared/toggle-visibility-input.tsx
@@ -1,22 +1,33 @@
 import { useState } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { Input } from "../ui/input";
+import { Input, type InputProps } from "../ui/input";
 import { Button } from "../ui/button";
 
-interface ToggleVisibilityInputProps {
-    value: string | undefined
+interface ToggleVisibilityInputProps extends InputProps {
+	value: string | undefined;
 }
 
-export default function ToggleVisibilityInput({ value }: ToggleVisibilityInputProps) {
-    const [inputType, setInputType] = useState<'password' | 'text'>('password');
+export const ToggleVisibilityInput = ({
+	value,
+	...props
+}: ToggleVisibilityInputProps) => {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-    const togglePasswordVisibility = () => {
-        setInputType(prevType => (prevType === 'password' ? 'text' : 'password'));
-    };
-    return (
-        <div className="flex w-full items-center space-x-2">
-            <Input value={value} type={inputType} />
-            <Button onClick={togglePasswordVisibility}>{inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}</Button>
-        </div>
-    )
-}
+	const togglePasswordVisibility = () => {
+		setIsPasswordVisible((prevVisibility) => !prevVisibility);
+	};
+
+	const inputType = isPasswordVisible ? "text" : "password";
+	return (
+		<div className="flex w-full items-center space-x-2">
+			<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>
+	);
+};