feat: create input for toggleable inputs like passwords/connectinstrings

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

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