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

feat: create input for toggleable inputs like passwords/connectinstrings

Browse Source
This commit is contained in:
Marius
2024-06-08 11:55:05 +02:00
parent 936cf76a4c
commit d54c6e4ac9
12 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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) => {
<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} />
<ToggleVisiblityInput value={connectionUrl} />
</div>
</div>
)}

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

@@ -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) => {
<div className="flex flex-col gap-2">
<Label>Password</Label>
<div className="flex flex-row gap-4">
<Input
disabled
<ToggleVisibilityInput
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
disabled
<ToggleVisibilityInput
value={data?.databaseRootPassword}
type="password"
/>
</div>
</div>
@@ -58,9 +55,8 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
<div className="flex flex-col gap-2 md:col-span-2">
<Label>Internal Connection URL </Label>
<Input
disabled
value={`mariadb://${data?.databaseUser}:${'*'.repeat(data?.databasePassword.length || 8)}@${data?.appName}:3306/${data?.databaseName}`}
<ToggleVisibilityInput
value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
/>
</div>
</div>