fix: update password placeholder in ToggleVisibilityInput

Author: zenocross

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Questions?
     url: https://github.com/Dokploy/dokploy/discussions
-    about: Ask your questions here.
+    about: Ask your questions here.

apps/dokploy/components/dashboard/application/advanced/security/handle-security.tsx

@@ -25,6 +25,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { ToggleVisibilityInput } from "../../../../shared/toggle-visibility-input";
 
 const AddSecuritychema = z.object({
 	username: z.string().min(1, "Username is required"),
@@ -151,7 +152,7 @@ export const HandleSecurity = ({
 									<FormItem>
 										<FormLabel>Password</FormLabel>
 										<FormControl>
-											<Input placeholder="test" {...field} />
+											<ToggleVisibilityInput placeholder="password" {...field} />
 										</FormControl>
 
 										<FormMessage />

apps/dokploy/components/dashboard/application/advanced/security/show-security.tsx

@@ -11,11 +11,12 @@ import { api } from "@/utils/api";
 import { LockKeyhole, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { HandleSecurity } from "./handle-security";
-
+import { PASSWORD_RANGE } from "../../../../../pages/register";
 interface Props {
 	applicationId: string;
 }
 
+
 export const ShowSecurity = ({ applicationId }: Props) => {
 	const { data, refetch } = api.application.one.useQuery(
 		{
@@ -69,7 +70,9 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Password</span>
 												<span className="text-sm text-muted-foreground">
-													{security.password}
+													{security.password
+														? "*".repeat(PASSWORD_RANGE)
+														: ""}
 												</span>
 											</div>
 										</div>

apps/dokploy/components/shared/toggle-visibility-input.tsx

@@ -18,6 +18,7 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 		<div className="flex w-full items-center space-x-2">
 			<Input ref={inputRef} type={inputType} {...props} />
 			<Button
+            type="button"
 				variant={"secondary"}
 				onClick={() => {
 					copy(inputRef.current?.value || "");
@@ -26,7 +27,9 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 			>
 				<Clipboard className="size-4 text-muted-foreground" />
 			</Button>
-			<Button onClick={togglePasswordVisibility} variant={"secondary"}>
+			<Button
+            type="button"
+            onClick={togglePasswordVisibility} variant={"secondary"}>
 				{inputType === "password" ? (
 					<EyeIcon className="size-4 text-muted-foreground" />
 				) : (

apps/dokploy/pages/register.tsx

@@ -23,36 +23,39 @@ import { type ReactElement, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+export const MIN_PASSWORD_LENGTH = 8;
+const MINIMUM_REQUIRED_LENGTH = 1;
+const TIMEOUT_DURATION = 2000;
 
 const registerSchema = z
 	.object({
-		name: z.string().min(1, {
+		name: z.string().min(MINIMUM_REQUIRED_LENGTH , {
 			message: "Name is required",
 		}),
 		email: z
 			.string()
-			.min(1, {
+			.min(MINIMUM_REQUIRED_LENGTH, {
 				message: "Email is required",
 			})
 			.email({
 				message: "Email must be a valid email",
 			}),
 		password: z
 			.string()
-			.min(1, {
+			.min(MINIMUM_REQUIRED_LENGTH, {
 				message: "Password is required",
 			})
-			.refine((password) => password === "" || password.length >= 8, {
+			.refine((password) => password === "" || password.length >= MIN_PASSWORD_LENGTH, {
 				message: "Password must be at least 8 characters",
 			}),
 		confirmPassword: z
 			.string()
-			.min(1, {
+			.min(MINIMUM_REQUIRED_LENGTH, {
 				message: "Password is required",
 			})
 			.refine(
 				(confirmPassword) =>
-					confirmPassword === "" || confirmPassword.length >= 8,
+					confirmPassword === "" || confirmPassword.length >= MIN_PASSWORD_LENGTH,
 				{
 					message: "Password must be at least 8 characters",
 				},
@@ -102,7 +105,7 @@ const Register = ({ isCloud }: Props) => {
 			setError(error.message || "An error occurred");
 		} else {
 			toast.success("User registered successfuly", {
-				duration: 2000,
+				duration: TIMEOUT_DURATION,
 			});
 			if (!isCloud) {
 				router.push("/");