From d54c6e4ac907348c6d5a429c2fa073f497eb5555 Mon Sep 17 00:00:00 2001 From: Marius Date: Sat, 8 Jun 2024 11:55:05 +0200 Subject: [PATCH] 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 61e00971..4e788d91 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 7ebcda6b..0a5fb385 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 e2840075..60950ac9 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 b188a855..46d0101b 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 9ae1faaf..1c8184c6 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 b9b03d6f..9e8a2cd9 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 724c977e..19208bbf 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 c5e066cd..4355488b 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 8ed82a98..badeca76 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 0bf02787..b74d2b62 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 792774ff..6dddfde5 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 00000000..d2309f43 --- /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 ( +
+ + +
+ ) +}