feat: initial commit

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

@@ -0,0 +1,60 @@
+import React from "react";
+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";
+
+interface Props {
+	mongoId: string;
+}
+export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
+	const { data } = api.mongo.one.useQuery({ mongoId });
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Internal Credentials</CardTitle>
+					</CardHeader>
+					<CardContent className="flex w-full flex-row gap-4">
+						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
+							<div className="flex flex-col gap-2">
+								<Label>User</Label>
+								<Input disabled value={data?.databaseUser} />
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Password</Label>
+								<div className="flex flex-row gap-4">
+									<Input
+										disabled
+										value={data?.databasePassword}
+										type="password"
+									/>
+								</div>
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Internal Port (Container)</Label>
+								<Input disabled value="27017" />
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Internal Host</Label>
+								<Input disabled value={data?.appName} />
+							</div>
+
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<Label>Internal Connection URL </Label>
+								<Input
+									disabled
+									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};