Merge pull request #128 from mariusihring/canary

Updated the database view to hide the password in the connection string

.gitignore

@@ -55,3 +55,4 @@ yarn-error.log*
 
 *.lockb
 *.rdb
+.idea

components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -22,6 +22,7 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -136,7 +137,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 										<div className="flex flex-col gap-3">
 											{/* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */}
 											<Label>External Host</Label>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx

@@ -3,6 +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";
 
 interface Props {
 	mariadbId: string;
@@ -29,20 +30,18 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
-										type="password"
 									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Root Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databaseRootPassword}
-										type="password"
 									/>
 								</div>
 							</div>
@@ -58,7 +57,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
 								/>

components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -1,3 +1,4 @@
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -136,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>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

components/dashboard/mongo/general/show-internal-mongo-credentials.tsx

@@ -3,6 +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";
 
 interface Props {
 	mongoId: string;
@@ -26,10 +27,9 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
-										type="password"
 									/>
 								</div>
 							</div>
@@ -46,7 +46,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
 								/>

components/dashboard/mysql/general/show-external-mysql-credentials.tsx

@@ -1,3 +1,4 @@
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -136,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>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput disabled value={connectionUrl} />
 										</div>
 									</div>
 								)}

components/dashboard/mysql/general/show-internal-mysql-credentials.tsx

@@ -3,6 +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";
 
 interface Props {
 	mysqlId: string;
@@ -29,20 +30,18 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
-										type="password"
 									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Root Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databaseRootPassword}
-										type="password"
 									/>
 								</div>
 							</div>
@@ -58,7 +57,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
 								/>

components/dashboard/postgres/general/show-external-postgres-credentials.tsx

@@ -1,3 +1,4 @@
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -137,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>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

components/dashboard/postgres/general/show-internal-postgres-credentials.tsx

@@ -3,6 +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";
 
 interface Props {
 	postgresId: string;
@@ -29,10 +30,9 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
-										disabled
 										value={data?.databasePassword}
-										type="password"
+										disabled
 									/>
 								</div>
 							</div>
@@ -48,7 +48,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 
 							<div className="flex flex-col gap-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
 								/>

components/dashboard/redis/general/show-external-redis-credentials.tsx

@@ -1,3 +1,4 @@
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -129,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>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

components/dashboard/redis/general/show-internal-redis-credentials.tsx

@@ -3,6 +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";
 
 interface Props {
 	redisId: string;
@@ -25,10 +26,9 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
-										disabled
 										value={data?.databasePassword}
-										type="password"
+										disabled
 									/>
 								</div>
 							</div>
@@ -44,7 +44,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`redis://default:${data?.databasePassword}@${data?.appName}:6379`}
 								/>

components/shared/toggle-visibility-input.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Input, type InputProps } from "../ui/input";
+import { Button } from "../ui/button";
+
+export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+	const togglePasswordVisibility = () => {
+		setIsPasswordVisible((prevVisibility) => !prevVisibility);
+	};
+
+	const inputType = isPasswordVisible ? "text" : "password";
+	return (
+		<div className="flex w-full items-center space-x-2">
+			<Input 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>
+	);
+};