From b312b1d7e08a579b9a42827aaea775adcc07defc Mon Sep 17 00:00:00 2001 From: Marius Date: Fri, 7 Jun 2024 12:45:33 +0200 Subject: [PATCH 1/7] Updated the database view to hide the password in the connection string --- .../mariadb/general/show-internal-mariadb-credentials.tsx | 2 +- .../dashboard/mongo/general/show-internal-mongo-credentials.tsx | 2 +- .../dashboard/mysql/general/show-internal-mysql-credentials.tsx | 2 +- .../postgres/general/show-internal-postgres-credentials.tsx | 2 +- .../dashboard/redis/general/show-internal-redis-credentials.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx index 7dc61772d..5bc37f499 100644 --- a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx +++ b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx @@ -60,7 +60,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => { diff --git a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx index a57933fe2..21c4e4015 100644 --- a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx +++ b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx @@ -48,7 +48,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => { diff --git a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx index 80a71bfef..16c724a3e 100644 --- a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx +++ b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx @@ -60,7 +60,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => { diff --git a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx index def7f9c0c..8140dde5a 100644 --- a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx +++ b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx @@ -50,7 +50,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => { diff --git a/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/components/dashboard/redis/general/show-internal-redis-credentials.tsx index 3f44b37a9..3cc0770d0 100644 --- a/components/dashboard/redis/general/show-internal-redis-credentials.tsx +++ b/components/dashboard/redis/general/show-internal-redis-credentials.tsx @@ -46,7 +46,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => { From 65254f168614c86c1562cae925f0585e978ac732 Mon Sep 17 00:00:00 2001 From: Marius Date: Fri, 7 Jun 2024 12:57:46 +0200 Subject: [PATCH 2/7] feat: Update the external database view to hide the password --- .../mariadb/general/show-external-mariadb-credentials.tsx | 2 +- .../dashboard/mongo/general/show-external-mongo-credentials.tsx | 2 +- .../dashboard/mysql/general/show-external-mysql-credentials.tsx | 2 +- .../postgres/general/show-external-postgres-credentials.tsx | 2 +- .../dashboard/redis/general/show-external-redis-credentials.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx index 83f730fa7..2b9200e15 100644 --- a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx +++ b/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx @@ -78,7 +78,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; + return `mariadb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx index 772188578..318bda237 100644 --- a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx +++ b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}`; + return `mongodb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx index ab9388cda..8f6a9499a 100644 --- a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx +++ b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mysql://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; + return `mysql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx index 215356cee..5c69730ba 100644 --- a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx +++ b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx @@ -80,7 +80,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; + return `postgresql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/redis/general/show-external-redis-credentials.tsx b/components/dashboard/redis/general/show-external-redis-credentials.tsx index aaf4d0b7e..5f854f855 100644 --- a/components/dashboard/redis/general/show-external-redis-credentials.tsx +++ b/components/dashboard/redis/general/show-external-redis-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `redis://default:${data?.databasePassword}@${hostname}:${port}`; + return `redis://default:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); From 936cf76a4cd81334917002b6e0becebdc8c5993d Mon Sep 17 00:00:00 2001 From: Marius Date: Fri, 7 Jun 2024 13:04:30 +0200 Subject: [PATCH 3/7] fix: fix undefined error for database length --- .../mariadb/general/show-external-mariadb-credentials.tsx | 2 +- .../mariadb/general/show-internal-mariadb-credentials.tsx | 2 +- .../dashboard/mongo/general/show-external-mongo-credentials.tsx | 2 +- .../dashboard/mongo/general/show-internal-mongo-credentials.tsx | 2 +- .../dashboard/mysql/general/show-external-mysql-credentials.tsx | 2 +- .../dashboard/mysql/general/show-internal-mysql-credentials.tsx | 2 +- .../postgres/general/show-external-postgres-credentials.tsx | 2 +- .../postgres/general/show-internal-postgres-credentials.tsx | 2 +- .../dashboard/redis/general/show-external-redis-credentials.tsx | 2 +- .../dashboard/redis/general/show-internal-redis-credentials.tsx | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx index 2b9200e15..7ebcda6bc 100644 --- a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx +++ b/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx @@ -78,7 +78,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mariadb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; + return `mariadb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx index 5bc37f499..e28400755 100644 --- a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx +++ b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx @@ -60,7 +60,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => { diff --git a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx index 318bda237..b188a8556 100644 --- a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx +++ b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mongodb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}`; + return `mongodb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx index 21c4e4015..9ae1faaf0 100644 --- a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx +++ b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx @@ -48,7 +48,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => { diff --git a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx index 8f6a9499a..b9b03d6fd 100644 --- a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx +++ b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mysql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; + return `mysql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx index 16c724a3e..724c977e0 100644 --- a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx +++ b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx @@ -60,7 +60,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => { diff --git a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx index 5c69730ba..c5e066cdd 100644 --- a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx +++ b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx @@ -80,7 +80,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `postgresql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}/${data?.databaseName}`; + return `postgresql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx index 8140dde5a..8ed82a982 100644 --- a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx +++ b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx @@ -50,7 +50,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => { diff --git a/components/dashboard/redis/general/show-external-redis-credentials.tsx b/components/dashboard/redis/general/show-external-redis-credentials.tsx index 5f854f855..0bf027872 100644 --- a/components/dashboard/redis/general/show-external-redis-credentials.tsx +++ b/components/dashboard/redis/general/show-external-redis-credentials.tsx @@ -79,7 +79,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `redis://default:${'*'.repeat(data?.databasePassword.length)}@${hostname}:${port}`; + return `redis://default:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); diff --git a/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/components/dashboard/redis/general/show-internal-redis-credentials.tsx index 3cc0770d0..792774ffb 100644 --- a/components/dashboard/redis/general/show-internal-redis-credentials.tsx +++ b/components/dashboard/redis/general/show-internal-redis-credentials.tsx @@ -46,7 +46,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => { From d54c6e4ac907348c6d5a429c2fa073f497eb5555 Mon Sep 17 00:00:00 2001 From: Marius Date: Sat, 8 Jun 2024 11:55:05 +0200 Subject: [PATCH 4/7] feat: create input for toggleable inputs like passwords/connectinstrings --- .gitignore | 1 + .../show-external-mariadb-credentials.tsx | 5 +++-- .../show-internal-mariadb-credentials.tsx | 14 +++++------- .../show-external-mongo-credentials.tsx | 5 +++-- .../show-internal-mongo-credentials.tsx | 10 ++++----- .../show-external-mysql-credentials.tsx | 5 +++-- .../show-internal-mysql-credentials.tsx | 14 +++++------- .../show-external-postgres-credentials.tsx | 5 +++-- .../show-internal-postgres-credentials.tsx | 10 ++++----- .../show-external-redis-credentials.tsx | 5 +++-- .../show-internal-redis-credentials.tsx | 10 ++++----- components/shared/toggle-visibility-input.tsx | 22 +++++++++++++++++++ 12 files changed, 60 insertions(+), 46 deletions(-) create mode 100644 components/shared/toggle-visibility-input.tsx diff --git a/.gitignore b/.gitignore index 61e009710..4e788d919 100644 --- a/.gitignore +++ b/.gitignore @@ -55,3 +55,4 @@ yarn-error.log* *.lockb *.rdb +.idea diff --git a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx index 7ebcda6bc..0a5fb3859 100644 --- a/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx +++ b/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 ToggleVisiblityInput from "@/components/shared/toggle-visibility-input" const DockerProviderSchema = z.object({ externalPort: z.preprocess((a) => { @@ -78,7 +79,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mariadb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; + return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); @@ -136,7 +137,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
{/* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */} - +
)} diff --git a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx b/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx index e28400755..60950ac90 100644 --- a/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx +++ b/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,16 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
-
-
@@ -58,9 +55,8 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
-
diff --git a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx index b188a8556..46d0101b1 100644 --- a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx +++ b/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, @@ -79,7 +80,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mongodb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}`; + return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); @@ -136,7 +137,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
- +
)} diff --git a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx index 9ae1faaf0..1c8184c67 100644 --- a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx +++ b/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,8 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
-
@@ -46,9 +45,8 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
-
diff --git a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx index b9b03d6fd..9e8a2cd98 100644 --- a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx +++ b/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, @@ -79,7 +80,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `mysql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; + return `mysql://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); @@ -136,7 +137,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
- +
)} diff --git a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx index 724c977e0..19208bbf2 100644 --- a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx +++ b/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,16 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
-
-
@@ -58,9 +55,8 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
-
diff --git a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx index c5e066cdd..4355488b5 100644 --- a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx +++ b/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, @@ -80,7 +81,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `postgresql://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}/${data?.databaseName}`; + return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`; }; setConnectionUrl(buildConnectionUrl()); @@ -137,7 +138,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
- +
)} diff --git a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx index 8ed82a982..badeca76e 100644 --- a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx +++ b/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,8 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
-
@@ -48,9 +47,8 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
-
diff --git a/components/dashboard/redis/general/show-external-redis-credentials.tsx b/components/dashboard/redis/general/show-external-redis-credentials.tsx index 0bf027872..b74d2b62a 100644 --- a/components/dashboard/redis/general/show-external-redis-credentials.tsx +++ b/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, @@ -79,7 +80,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => { const hostname = window.location.hostname; const port = form.watch("externalPort") || data?.externalPort; - return `redis://default:${'*'.repeat(data?.databasePassword.length || 8)}@${hostname}:${port}`; + return `redis://default:${data?.databasePassword}@${hostname}:${port}`; }; setConnectionUrl(buildConnectionUrl()); @@ -129,7 +130,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
- +
)} diff --git a/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/components/dashboard/redis/general/show-internal-redis-credentials.tsx index 792774ffb..6dddfde5d 100644 --- a/components/dashboard/redis/general/show-internal-redis-credentials.tsx +++ b/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,8 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
-
@@ -44,9 +43,8 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
-
diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx new file mode 100644 index 000000000..d2309f43e --- /dev/null +++ b/components/shared/toggle-visibility-input.tsx @@ -0,0 +1,22 @@ +import { useState } from "react"; +import { EyeIcon, EyeOffIcon } from "lucide-react"; +import { Input } from "../ui/input"; +import { Button } from "../ui/button"; + +interface ToggleVisibilityInputProps { + value: string | undefined +} + +export default function ToggleVisibilityInput({ value }: ToggleVisibilityInputProps) { + const [inputType, setInputType] = useState<'password' | 'text'>('password'); + + const togglePasswordVisibility = () => { + setInputType(prevType => (prevType === 'password' ? 'text' : 'password')); + }; + return ( +
+ + +
+ ) +} 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 5/7] 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 60950ac90..869409d59 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) => {
@@ -39,6 +40,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
@@ -56,6 +58,7 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
diff --git a/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/components/dashboard/mongo/general/show-external-mongo-credentials.tsx index 46d0101b1..c8a3fa230 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) => {
- +
)} diff --git a/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx b/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx index 1c8184c67..9fab4a8a8 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) => {
@@ -46,6 +47,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
diff --git a/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/components/dashboard/mysql/general/show-external-mysql-credentials.tsx index 9e8a2cd98..ce184a983 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) => {
- +
)} diff --git a/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx b/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx index 19208bbf2..c48fe95da 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) => {
@@ -39,6 +40,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
@@ -56,6 +58,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
diff --git a/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/components/dashboard/postgres/general/show-external-postgres-credentials.tsx index 4355488b5..edb128bf9 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) => {
- +
)} diff --git a/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx b/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx index badeca76e..a8b5270d1 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) => {
@@ -48,6 +49,7 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
diff --git a/components/dashboard/redis/general/show-external-redis-credentials.tsx b/components/dashboard/redis/general/show-external-redis-credentials.tsx index b74d2b62a..ea62d77e0 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) => {
- +
)} diff --git a/components/dashboard/redis/general/show-internal-redis-credentials.tsx b/components/dashboard/redis/general/show-internal-redis-credentials.tsx index 6dddfde5d..1f798144f 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) => {
@@ -44,6 +45,7 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index d2309f43e..697008e5f 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 ( -
- - -
- ) -} + const togglePasswordVisibility = () => { + setIsPasswordVisible((prevVisibility) => !prevVisibility); + }; + + const inputType = isPasswordVisible ? "text" : "password"; + return ( +
+ + +
+ ); +}; From 44a592f7a740e551c1d6fc369283bdb4e66c1aee Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Sat, 8 Jun 2024 13:36:02 -0600 Subject: [PATCH 6/7] refactor: simplify props --- components/shared/toggle-visibility-input.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx index 697008e5f..d3a2b5e3e 100644 --- a/components/shared/toggle-visibility-input.tsx +++ b/components/shared/toggle-visibility-input.tsx @@ -3,14 +3,7 @@ import { EyeIcon, EyeOffIcon } from "lucide-react"; import { Input, type InputProps } from "../ui/input"; import { Button } from "../ui/button"; -interface ToggleVisibilityInputProps extends InputProps { - value: string | undefined; -} - -export const ToggleVisibilityInput = ({ - value, - ...props -}: ToggleVisibilityInputProps) => { +export const ToggleVisibilityInput = ({ ...props }: InputProps) => { const [isPasswordVisible, setIsPasswordVisible] = useState(false); const togglePasswordVisibility = () => { @@ -20,7 +13,7 @@ export const ToggleVisibilityInput = ({ const inputType = isPasswordVisible ? "text" : "password"; return (
- +
)}