Show/allow unicode domain name

src/app/[orgId]/settings/resources/[resourceId]/CustomDomainInput.tsx

@@ -9,6 +9,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@/components/ui/select";
+import { toUnicode } from "punycode";
 
 interface DomainOption {
     baseDomain: string;
@@ -91,7 +92,7 @@ export default function CustomDomainInput({
                                 key={option.domainId}
                                 value={option.domainId}
                             >
-                                .{option.baseDomain}
+                                .{toUnicode(option.baseDomain)}
                             </SelectItem>
                         ))}
                     </SelectContent>

src/app/[orgId]/settings/resources/[resourceId]/ResourceInfoBox.tsx

@@ -12,15 +12,19 @@ import {
 } from "@app/components/InfoSection";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
+import { toUnicode } from 'punycode';
 
 type ResourceInfoBoxType = {};
 
-export default function ResourceInfoBox({}: ResourceInfoBoxType) {
+export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
     const { resource, authInfo } = useResourceContext();
 
     const t = useTranslations();
 
-    const fullUrl = `${resource.ssl ? "https" : "http"}://${resource.fullDomain}`;
+
+    const fullUrl = `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`;
+
+
 
     return (
         <Alert>
@@ -34,9 +38,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
                                     {authInfo.password ||
-                                    authInfo.pincode ||
-                                    authInfo.sso ||
-                                    authInfo.whitelist ? (
+                                        authInfo.pincode ||
+                                        authInfo.sso ||
+                                        authInfo.whitelist ? (
                                         <div className="flex items-start space-x-2 text-green-500">
                                             <ShieldCheck className="w-4 h-4 mt-0.5" />
                                             <span>{t("protected")}</span>

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -54,6 +54,8 @@ import DomainPicker from "@app/components/DomainPicker";
 import { Globe } from "lucide-react";
 import { build } from "@server/build";
 import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
+import { DomainRow } from "../../../domains/DomainsTable";
+import { toUnicode } from "punycode";
 
 export default function GeneralForm() {
     const [formKey, setFormKey] = useState(0);
@@ -155,7 +157,11 @@ export default function GeneralForm() {
                 });
 
             if (res?.status === 200) {
-                const domains = res.data.data.domains;
+                const rawDomains = res.data.data.domains as DomainRow[];
+                const domains = rawDomains.map((domain) => ({
+                    ...domain,
+                    baseDomain: toUnicode(domain.baseDomain), 
+                }));
                 setBaseDomains(domains);
                 setFormKey((key) => key + 1);
             }
@@ -319,10 +325,10 @@ export default function GeneralForm() {
                                                                                 .target
                                                                                 .value
                                                                                 ? parseInt(
-                                                                                      e
-                                                                                          .target
-                                                                                          .value
-                                                                                  )
+                                                                                    e
+                                                                                        .target
+                                                                                        .value
+                                                                                )
                                                                                 : undefined
                                                                         )
                                                                     }

src/app/[orgId]/settings/resources/create/page.tsx

@@ -89,6 +89,8 @@ import { isTargetValid } from "@server/lib/validators";
 import { ListTargetsResponse } from "@server/routers/target";
 import { DockerManager, DockerState } from "@app/lib/docker";
 import { parseHostTarget } from "@app/lib/parseHostTarget";
+import { toUnicode } from 'punycode';
+import { DomainRow } from "../../domains/DomainsTable";
 
 const baseResourceFormSchema = z.object({
     name: z.string().min(1).max(255),
@@ -469,7 +471,11 @@ export default function Page() {
                     });
 
                 if (res?.status === 200) {
-                    const domains = res.data.data.domains;
+                    const rawDomains = res.data.data.domains as DomainRow[];
+                    const domains = rawDomains.map((domain) => ({
+                        ...domain,
+                        baseDomain: toUnicode(domain.baseDomain),
+                    }));
                     setBaseDomains(domains);
                     // if (domains.length) {
                     //     httpForm.setValue("domainId", domains[0].domainId);

src/app/[orgId]/settings/resources/page.tsx

@@ -14,6 +14,7 @@ import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { getTranslations } from "next-intl/server";
 import { pullEnv } from "@app/lib/pullEnv";
+import { toUnicode } from "punycode";
 
 type ResourcesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -75,7 +76,9 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
             id: resource.resourceId,
             name: resource.name,
             orgId: params.orgId,
-            domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
+
+
+            domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
             protocol: resource.protocol,
             proxyPort: resource.proxyPort,
             http: resource.http,