Merge pull request #136 from Dokploy/canary

v0.2.2
Dokploy · Jun 9, 2024 · 2b7c763 · 2b7c763
2 parents 1b7244e + 7db662e
commit 2b7c763
Show file tree

Hide file tree

Showing 47 changed files with 726 additions and 391 deletions.
diff --git a/.gitignore b/.gitignore
@@ -55,3 +55,4 @@ yarn-error.log*
 
 *.lockb
 *.rdb
+.idea
diff --git a/components/dashboard/application/environment/show.tsx b/components/dashboard/application/environment/show.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
 	Card,
 	CardContent,
@@ -19,8 +19,9 @@ import {
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
 import { toast } from "sonner";
-import { Textarea } from "@/components/ui/textarea";
+import { Toggle } from "@/components/ui/toggle";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),
@@ -33,6 +34,7 @@ interface Props {
 }
 
 export const ShowEnvironment = ({ applicationId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } =
 		api.application.saveEnvironment.useMutation();
 
@@ -72,15 +74,50 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				toast.error("Error to add environment");
 			});
 	};
+	useEffect(() => {
+		if (isEnvVisible) {
+			if (data?.env) {
+				const maskedLines = data.env
+					.split("\n")
+					.map((line) => "*".repeat(line.length))
+					.join("\n");
+				form.reset({
+					environment: maskedLines,
+				});
+			} else {
+				form.reset({
+					environment: "",
+				});
+			}
+		} else {
+			form.reset({
+				environment: data?.env || "",
+			});
+		}
+	}, [form.reset, data, form, isEnvVisible]);
 
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your resource.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -97,6 +134,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}
@@ -111,7 +149,12 @@ PORT=3000
 							/>
 
 							<div className="flex flex-row justify-end">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+								<Button
+									disabled={isEnvVisible}
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+								>
 									Save
 								</Button>
 							</div>

diff --git a/components/dashboard/compose/enviroment/show.tsx b/components/dashboard/compose/enviroment/show.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
 	Card,
 	CardContent,
@@ -20,6 +20,8 @@ import {
 import { api } from "@/utils/api";
 import { toast } from "sonner";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { Toggle } from "@/components/ui/toggle";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowEnvironmentCompose = ({ composeId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.compose.update.useMutation();
 
 	const { data, refetch } = api.compose.one.useQuery(
@@ -71,14 +74,50 @@ export const ShowEnvironmentCompose = ({ composeId }: Props) => {
 			});
 	};
 
+	useEffect(() => {
+		if (isEnvVisible) {
+			if (data?.env) {
+				const maskedLines = data.env
+					.split("\n")
+					.map((line) => "*".repeat(line.length))
+					.join("\n");
+				form.reset({
+					environment: maskedLines,
+				});
+			} else {
+				form.reset({
+					environment: "",
+				});
+			}
+		} else {
+			form.reset({
+				environment: data?.env || "",
+			});
+		}
+	}, [form.reset, data, form, isEnvVisible]);
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your resource.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +134,7 @@ export const ShowEnvironmentCompose = ({ composeId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}
@@ -109,7 +149,12 @@ PORT=3000
 							/>
 
 							<div className="flex flex-row justify-end">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+								<Button
+									disabled={isEnvVisible}
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+								>
 									Save
 								</Button>
 							</div>

diff --git 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 { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -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} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

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

diff --git 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,
@@ -136,7 +137,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}

diff --git 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,9 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
-										type="password"
 									/>
 								</div>
 							</div>
@@ -46,7 +46,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
 								/>

diff --git 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,
@@ -136,7 +137,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput disabled value={connectionUrl} />
 										</div>
 									</div>
 								)}

diff --git 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,18 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
 								<div className="flex flex-row gap-4">
-									<Input
+									<ToggleVisibilityInput
 										disabled
 										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
+									<ToggleVisibilityInput
 										disabled
 										value={data?.databaseRootPassword}
-										type="password"
 									/>
 								</div>
 							</div>
@@ -58,7 +57,7 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 
 							<div className="flex flex-col gap-2 md:col-span-2">
 								<Label>Internal Connection URL </Label>
-								<Input
+								<ToggleVisibilityInput
 									disabled
 									value={`mysql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
 								/>

diff --git 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,
@@ -137,7 +138,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 									<div className="grid w-full gap-8">
 										<div className="flex flex-col gap-3">
 											<Label>External Host</Label>
-											<Input disabled value={connectionUrl} />
+											<ToggleVisibilityInput value={connectionUrl} disabled />
 										</div>
 									</div>
 								)}