feat: add auth
All checks were successful
Docker Build and Push / build-and-push (push) Successful in 15m8s
All checks were successful
Docker Build and Push / build-and-push (push) Successful in 15m8s
This commit is contained in:
@ -5,3 +5,4 @@ npm-debug.log
|
||||
README.md
|
||||
.next
|
||||
.git
|
||||
.env
|
||||
3
app/api/auth/[...all]/route.ts
Normal file
3
app/api/auth/[...all]/route.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { auth } from "@/lib/auth";
|
||||
import { toNextJsHandler } from "better-auth/next-js";
|
||||
export const { POST, GET } = toNextJsHandler(auth);
|
||||
157
app/login/page.tsx
Normal file
157
app/login/page.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { createAuthClient } from "better-auth/client";
|
||||
|
||||
const authClient = createAuthClient();
|
||||
|
||||
export default function LoginPage() {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await authClient.signIn.social({
|
||||
provider: "google",
|
||||
});
|
||||
|
||||
console.log("Google sign-in clicked")
|
||||
} catch (error) {
|
||||
console.error("Sign-in error:", error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-gray-950 text-white">
|
||||
<main className="flex-1 flex flex-col items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<div className="text-center mb-8">
|
||||
<Link href="/" className="inline-block">
|
||||
<h1 className="text-3xl font-bold tracking-tight mb-2">
|
||||
<span className="text-emerald-400">tunnl</span>.live
|
||||
</h1>
|
||||
</Link>
|
||||
<p className="text-gray-400">Sign in to manage your tunnels</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 p-8">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-2xl font-bold mb-2">Welcome Back</h2>
|
||||
<p className="text-gray-400">Sign in to access your tunnel dashboard</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleGoogleSignIn}
|
||||
disabled={isLoading}
|
||||
className="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-100 text-gray-900 font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-gray-900 border-t-transparent"></div>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{isLoading ? "Signing in..." : "Continue with Google"}
|
||||
</button>
|
||||
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-gray-900 text-gray-400">or</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
className="w-full flex items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white font-medium py-3 px-4 rounded-lg transition-colors border border-gray-700"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" x2="21" y1="14" y2="3" />
|
||||
</svg>
|
||||
Continue as Guest
|
||||
</Link>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-800">
|
||||
<p className="text-sm text-gray-400 mb-3">Benefits of signing in:</p>
|
||||
<ul className="space-y-2 text-sm text-gray-300">
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-emerald-400 rounded-full"></div>
|
||||
Save and manage your tunnel configurations
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-emerald-400 rounded-full"></div>
|
||||
View tunnel usage statistics and history
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-emerald-400 rounded-full"></div>
|
||||
Access to premium features and priority support
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-emerald-400 rounded-full"></div>
|
||||
Sync settings across multiple devices
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-6 space-y-2">
|
||||
<p className="text-sm text-gray-400">
|
||||
By signing in, you agree to our{" "}
|
||||
<Link href="/terms" className="text-emerald-400 hover:text-emerald-300 underline">
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link href="/privacy" className="text-emerald-400 hover:text-emerald-300 underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Need help?{" "}
|
||||
<Link href="/support" className="text-emerald-400 hover:text-emerald-300 underline">
|
||||
Contact Support
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-32 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute -bottom-40 -left-32 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
610
app/page.tsx
610
app/page.tsx
@ -1,7 +1,11 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config"
|
||||
import Link from "next/link"
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import UserMenu from "@/components/user-menu"
|
||||
import { redirect, RedirectType } from 'next/navigation'
|
||||
|
||||
const defaultConfig: TunnelConfigType = {
|
||||
type: "http",
|
||||
@ -12,9 +16,612 @@ const defaultConfig: TunnelConfigType = {
|
||||
export default function Home() {
|
||||
const [selectedServer, setSelectedServer] = useState<Server | null>(null)
|
||||
const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
|
||||
type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
|
||||
const [logedin, setLogedin] = useState<SessionData | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const result = await authClient.getSession()
|
||||
if (result.data != null) {
|
||||
setLogedin(result.data.user);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const logout = async() => {
|
||||
await authClient.signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
redirect('/login', RedirectType.replace)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-gray-950 text-white">
|
||||
<header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width={20} height={18} >
|
||||
<path
|
||||
d="M8.52 4c.296.02.574.086.863.164.09.027.18.05.27.074.066.02.066.02.132.035.29.079.578.149.871.211.332.075.66.153.989.235.492.125.984.246 1.48.355.344.078.684.16 1.027.246.11.028.215.051.325.078.402.098.8.196 1.203.297l.953.235c.023.008.05.011.074.02.16.038.32.073.48.109 1.305.285 1.305.285 1.688.52.031.015.059.034.09.054.262.168.422.37.586.637l.047.074c.238.414.187 1.015.187 1.48v1.649c0 .609-.023 1.144-.445 1.613-.39.367-.871.52-1.367.684-.059.02-.118.039-.18.062-.086.027-.168.059-.254.086-.176.059-.348.121-.523.184a8.12 8.12 0 0 1-.52.175c-.164.051-.324.114-.484.172-.102.04-.2.07-.301.102-.262.078-.52.168-.774.261-.652.231-1.308.458-1.964.68-.2.067-.399.133-.598.203a249.724 249.724 0 0 1-1.176.403c-.136.047-.273.093-.41.136-.05.02-.101.036-.156.055-.067.024-.137.047-.207.07-.04.012-.082.028-.121.04-.098.023-.098.023-.211-.016V12.69c.691-.175.691-.175.937-.23.028-.004.055-.012.086-.016.086-.02.176-.039.266-.058l.191-.04c.387-.085.774-.163 1.16-.238.356-.066.707-.144 1.059-.222.352-.078.703-.153 1.059-.215.355-.067.71-.137 1.062-.215.043-.008.086-.02.133-.027.515-.098.515-.098.918-.414.172-.278.152-.59.152-.91V9.98c.004-.09.004-.175.004-.261v-.657c.004-.039.004-.078.004-.117 0-.308-.05-.597-.203-.867-.067-.047-.067-.047-.149-.078l-.082-.04a.575.575 0 0 0-.086-.038l-.082-.04a1.447 1.447 0 0 0-.46-.093c-.036-.004-.07-.004-.106-.008-.039-.004-.074-.008-.113-.008a17.593 17.593 0 0 1-.766-.082c-.336-.043-.672-.062-1.012-.086-.261-.015-.52-.039-.777-.066-.344-.039-.687-.062-1.035-.082-.348-.023-.7-.05-1.047-.086-.332-.031-.668-.047-1-.062a4.771 4.771 0 0 1-.187-.61c-.207-.879-.653-1.832-1.356-2.41-.11-.098-.11-.098-.144-.207V4Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#f4f0ed",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.129 3.652c.035.016.035.016.07.035 1.043.481 1.867 1.415 2.285 2.5.27.743.27.743.196 1.083-.028-.004-.055-.004-.086-.008a49.636 49.636 0 0 0-1.864-.11c-.011-.02-.02-.043-.03-.066-.34-.82-.34-.82-.985-1.395v-.074l-.098-.035a3.2 3.2 0 0 1-.336-.14c-.62-.266-1.363-.243-1.988-.008-.79.332-1.242.941-1.586 1.722-.148.442-.129.934-.129 1.399 0 .066 0 .136-.004.207v.558c0 .2 0 .395-.004.59 0 .371-.004.738-.004 1.11 0 .421-.003.843-.003 1.265l-.012 2.598-.446.094c-.062.011-.062.011-.128.027-.86.176-.86.176-1.227.226-.09-.136-.086-.238-.086-.398V12.059c.004-.391 0-.778 0-1.164V8.53c0-.582.012-1.187.168-1.75.008-.031.016-.058.023-.09a4.958 4.958 0 0 1 1.36-2.23h.074l.04-.113h.108c.012-.024.02-.047.028-.07.058-.106.117-.137.219-.196.144-.086.144-.086.289-.176 1.195-.808 2.879-.836 4.156-.254Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#f2efec",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M12.488 7.957h.14c.13 0 .259.012.392.023a51.951 51.951 0 0 0 .996.07l.53.036.884.059c.093.007.191.011.289.02.133.007.27.019.406.026.043.004.082.008.125.008.059.004.059.004.113.012.051 0 .051 0 .102.004.082.015.082.015.195.094v.074l.113.039c.047.101.043.176.043.289 0 .043.004.086.004.133 0 .203.004.402.004.605 0 .106 0 .211.004.317 0 .156 0 .308.004.46v.145c0 .328 0 .328-.105.484a1.149 1.149 0 0 1-.504.192l-.075.012-.234.035c-.055.008-.113.015-.168.027-.36.055-.723.11-1.082.16-.176.028-.355.051-.531.078-.028.004-.059.012-.086.016-.18.027-.36.055-.54.086-.105.02-.214.035-.323.055-.055.007-.106.02-.16.027-.079.012-.153.027-.231.039-.063.012-.063.012-.133.023-.25.02-.422-.02-.613-.183-.149-.2-.156-.395-.156-.637v-.156c0-.055-.004-.11-.004-.164V8.59c.011-.203.047-.352.175-.508.149-.129.231-.125.426-.125ZM14.523 9.5a.528.528 0 0 0 0 .379c.07.094.07.094.204.125.132.008.132.008.222-.063a.594.594 0 0 0 .098-.363c-.05-.117-.05-.117-.149-.195-.164-.028-.27-.012-.375.117Zm1.114-.078c-.09.11-.078.203-.078.344.007.09.007.09.09.156.128.02.128.02.261 0 .098-.082.11-.137.13-.27-.009-.117-.009-.117-.083-.207-.113-.082-.191-.078-.32-.023Zm-2.317.156c-.043.125-.062.211-.008.34.051.074.051.074.16.16a.518.518 0 0 0 .352-.101c.086-.133.09-.247.059-.399-.055-.101-.055-.101-.149-.156-.187-.031-.289.012-.414.156Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#5aa680",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M9.68 12.77v2.808c-.293.129-.293.129-.414.172-.024.008-.051.016-.079.027-.027.008-.054.02-.082.028l-.09.03a3.392 3.392 0 0 1-.183.063c-.062.024-.125.047-.187.067-.09.031-.18.066-.274.098-.027.007-.055.019-.082.027a.613.613 0 0 1-.41.027v-2.965a7.29 7.29 0 0 1 .695-.183c.028-.008.059-.012.086-.02l.18-.035c.09-.02.18-.035.27-.055l.175-.035c.024-.004.05-.011.078-.015.11-.024.207-.04.317-.04Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#f4f0ee",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M6.703 9.59h3.133c.164.004.234.008.371.117.074.102.074.102.098.219-.024.113-.024.113-.098.195-.16.098-.289.094-.473.09H7.082c-.113 0-.23-.004-.344-.004h-.101c-.176 0-.305-.008-.446-.129-.043-.133-.043-.133-.039-.27.157-.222.305-.222.551-.218Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#f7f5f2",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.145 10.914c.027 0 .058 0 .09-.004h2.097c.094-.004.188 0 .281 0 .043 0 .043 0 .086-.004a.755.755 0 0 1 .446.133c.074.113.074.113.07.25-.031.133-.031.133-.09.2-.133.07-.258.066-.402.066h-.094c-.106 0-.207 0-.313-.004H8.031c-.152-.004-.281-.012-.414-.09-.054-.125-.054-.125-.074-.27.043-.12.078-.171.191-.234.137-.043.266-.047.41-.043Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#edeae7",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.555 8.324H9.949c.13-.004.254-.004.38-.004h.577c.16.032.215.09.313.22.004.12.004.12-.035.23-.09.093-.145.113-.27.128h-.144c-.04.004-.04.004-.079.004H9.02c-.06 0-.118 0-.176.004-.086 0-.168 0-.25-.004h-.145c-.14-.02-.183-.054-.27-.172-.015-.125-.015-.199.044-.312.105-.105.187-.09.332-.094Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#eeebe9",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M10.094 9.77c.062.011.125.023.187.039a.757.757 0 0 1 0 .23.431.431 0 0 1-.265.168c-.094.004-.188.004-.282.004H9.02c-.176 0-.348 0-.52-.004H7.074c-.117-.004-.23-.004-.344-.004H6.45c-.07-.012-.07-.012-.183-.086l3.828-.039v-.117h-.074v-.078h.074V9.77Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#9d9c9b",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.52 4c.335.016.648.105.972.191v.04h-.336c-.004.042-.011.085-.015.128-.024.141-.024.141-.098.22.05.023.098.05.148.073-.023.04-.046.078-.074.118-.031-.036-.058-.07-.094-.106-.039-.043-.082-.09-.12-.137l-.063-.066c-.02-.024-.04-.043-.059-.066-.02-.024-.039-.043-.058-.067a2.522 2.522 0 0 0-.145-.144C8.52 4.117 8.52 4.117 8.52 4Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#d2cfce",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M6.34 9.617c.488-.004.976-.008 1.46-.008.227 0 .454 0 .68-.004h.653c.082 0 .168 0 .25-.003H9.836c.234 0 .234 0 .355.074.028.027.028.027.051.054l-.035.079c-.05-.012-.102-.028-.152-.04v-.078c-1.223-.011-2.45-.023-3.715-.039v-.035Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#d9d5d6",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m13.707 11.324.102.012.074.012c-.2.117-.434.129-.66.164-.082.015-.164.027-.246.043l-.16.023-.145.024c-.14.015-.262 0-.402-.024l-.036-.117c.07.004.07.004.145.004.195 0 .383-.027.574-.059.035-.004.067-.011.102-.015.125-.02.246-.04.37-.07a.97.97 0 0 1 .282.003Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#589275",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.145 10.914h2.558c.152 0 .27.016.402.086-.14.047-.273.043-.421.043H9.473c-.196-.004-.391-.004-.586-.004H7.73c-.011.04-.027.074-.039.113a1.343 1.343 0 0 0-.074-.035c.04-.117.04-.117.113-.164.141-.039.27-.039.415-.039Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#c5c4c3",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M11.145 8.46c.035.04.035.04.074.08-.004.124-.012.202-.098.292-.121.07-.215.066-.351.066H9.387c-.125 0-.25 0-.375-.003H8.44c-.109-.012-.109-.012-.187-.086h2.742c.004-.082.004-.082-.039-.157h.148c.016-.062.028-.125.04-.191Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#bbbab9",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.953 13.117c.027.012.05.024.078.035-.039.016-.074.028-.113.04l.035 2.886c.102-.015.2-.027.3-.039-.1.106-.19.102-.335.113-.063-.062-.043-.144-.043-.23v-.657c0-.175 0-.35.004-.527v-1.585c.027-.012.05-.024.074-.036Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#999896",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M19.7 7.809h.038V9.96H19.7L19.664 8.5h-.039v-.23c.012-.012.023-.028.04-.04.007-.07.015-.14.019-.214.003-.04.007-.079.007-.118.004-.03.008-.058.008-.09Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#ebe6e6",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M13.207 8c.422.023.844.05 1.277.078-.011.035-.023.074-.039.113h-.71c-.012-.039-.028-.074-.04-.113h-.488V8Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#5d8d79",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M12.469 7.957h.12a.753.753 0 0 0 .095.004c.011.027.023.05.035.078-.114.04-.192.04-.309.043-.125.008-.195.016-.293.098a2.451 2.451 0 0 0-.148.203 4.044 4.044 0 0 1-.035-.113c.14-.262.25-.32.535-.313Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#5b957c",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M15.57 8.191h.309c.031 0 .059-.004.09-.004.148 0 .285.004.43.043v.079c-.278.004-.551.004-.829-.04v-.078Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#66a686",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M12.234 11.46h.75v.08c-.097.01-.195.026-.293.038l-.086.012a.654.654 0 0 1-.335-.012l-.036-.117Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#5e9b78",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M.715 14.23H.75c.04.31.043.614.04.922-.028-.011-.052-.023-.075-.035l-.024-.402c0-.035-.003-.074-.007-.113 0-.055 0-.055-.004-.11 0-.035-.004-.066-.004-.101 0-.082 0-.082.039-.16Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#d1d0ce",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M10.094 9.77c.062.011.125.023.187.039v.23l-.148.078a1.826 1.826 0 0 1-.04-.156h-.073v-.078h.074V9.77Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#e1dfde",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M9.457 9.617c.102-.004.207-.008.309-.008.027-.004.058-.004.09-.004.218-.003.218-.003.332.067.019.02.039.039.054.058l-.035.079c-.05-.012-.102-.028-.152-.04v-.078c-.024 0-.047 0-.075.004a2.35 2.35 0 0 1-.523-.043v-.035Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#cccbcb",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m16.398 8.23.223.04c.016.039.027.074.04.113.038.015.073.027.112.039l.036.23c-.11-.035-.11-.035-.164-.129-.07-.117-.122-.14-.247-.175V8.23Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#598871",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M15.309 11.04c.136.01.273.023.414.038v.04a3.446 3.446 0 0 1-.825.073c.09-.09.125-.09.247-.101a.758.758 0 0 0 .093-.008c.024 0 .047-.004.07-.004v-.039Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#528068",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m14.488 11.21.106.013c.023 0 .05.004.078.007v.04c-.266.05-.516.085-.79.078v-.04c.024-.007.048-.011.071-.015a.8.8 0 0 1 .094-.02l.094-.023c.222-.055.222-.055.347-.04Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#54856a",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M13.883 8.078h.601c-.011.035-.023.074-.039.113l-.218-.011-.122-.012c-.109-.016-.109-.016-.222-.09Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#59997b",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M13.734 5.27c.23-.016.418.039.637.113-.113.039-.144.043-.262 0v.078h-.113v-.078h-.074v-.074h-.188v-.04Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b4b1b1",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.879 15.617h.039l.035.461c.102-.015.2-.027.3-.039-.1.106-.19.102-.335.113-.04-.035-.04-.035-.043-.148 0-.047.004-.094.004-.14v-.247Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#8f8e8d",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M17.074 10.809a.325.325 0 0 1 .035.152.746.746 0 0 1-.261.309c-.035-.012-.075-.028-.114-.04l.086-.058c.121-.113.176-.215.254-.363Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#a5a4a2",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M19.7 7.809h.038v.652c-.039.012-.074.027-.113.039v-.23c.012-.012.023-.028.04-.04.007-.07.015-.14.019-.214.003-.04.007-.079.007-.118.004-.03.008-.058.008-.09Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#d9d6d5",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.656 3.96c.219.106.219.106.262.192h-.113c-.012.051-.024.102-.04.157L7.73 4.19a.445.445 0 0 1-.074-.039v-.191Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#cac8c6",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.707 15.883a.647.647 0 0 1-.289.12.8.8 0 0 1-.094.02c-.023.004-.047.012-.07.016.082-.25.242-.187.453-.156Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#bbb4b2",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M10.094 15.23c.074.028.148.051.226.079.024-.028.047-.051.075-.079.05.028.097.051.148.079-.05.02-.105.039-.16.058-.047.016-.047.016-.09.035-.086.02-.086.02-.2-.02v-.152Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b3b1b0",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M16.059 11.46c-.02.013-.043.02-.067.032-.082.04-.082.04-.133.11-.062.05-.062.05-.148.046-.027-.007-.059-.015-.09-.027l-.09-.023c-.035-.012-.035-.012-.07-.02v-.039c.2-.047.39-.09.598-.078Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#acaba9",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M6.266 9.652h.074c.015.051.027.102.039.157-.074.039-.074.039-.149.074l.036.234c-.082-.07-.11-.101-.125-.21a.395.395 0 0 1 .125-.255Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#a8a7a8",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.094 5.809c.035.011.074.023.11.039v.074c.026.016.05.027.077.039a.728.728 0 0 0-.039.078c.016.082.016.082.04.152a1.678 1.678 0 0 1-.266-.308c.027-.024.05-.051.078-.074Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#c2c0bb",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M11.145 8.46c.023.028.05.052.074.08-.016.21-.016.21-.114.308-.035-.016-.074-.028-.109-.04V8.73a.486.486 0 0 1-.039-.078h.148c.016-.062.028-.125.04-.191Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#c5c4c2",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M16.246 7.77h.563c-.036.011-.075.023-.11.039v.113l-.453-.113v-.04Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b8b7b5",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M2.516 4.191c.023.012.046.028.074.04-.027.062-.05.128-.074.19h-.114c-.011.028-.027.052-.039.079-.023-.012-.05-.023-.074-.04.012-.038.023-.073.04-.112h.108c.028-.051.051-.102.079-.157Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#a8a8a6",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m3.64 3.578.075.04c-.024.01-.047.023-.074.034a.717.717 0 0 1-.094.051.717.717 0 0 1-.094.05c-.086.052-.086.052-.113.169-.012-.035-.024-.074-.04-.113-.023-.012-.046-.028-.073-.04.066-.035.136-.066.203-.097.035-.02.074-.04.113-.055a.727.727 0 0 1 .098-.039Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#a3a2a2",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M1.238 15c.125.012.246.023.375.04v.038c-.199.024-.394.05-.601.074.113-.074.113-.074.226-.074V15Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#999998",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M3.527 5.73h.075c-.012.125-.04.157-.133.243-.031.02-.059.043-.09.066v-.156h.074c.024-.051.047-.102.074-.153Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#bbbab9",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m6.004 3.348.18.011.097.008c.098.016.098.016.246.094h-.523v-.113Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b0afac",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M9.367 15.613h.094c.035 0 .035 0 .07.004-.129.086-.222.098-.375.113-.011-.023-.023-.05-.039-.078.09-.043.149-.039.25-.039Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#a9a6a4",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M15.984 9.77c.012.023.024.05.04.078-.036.082-.036.082-.075.152h-.226c-.012-.023-.024-.05-.04-.078l.11-.012c.129-.012.129-.012.191-.14Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#4e7d64",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M12.082 8.04c.023.01.05.023.074.038-.14.262-.14.262-.222.305a.595.595 0 0 1 .148-.344Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#51836d",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M12.047 14.578c.168-.015.168-.015.254.055.015.02.027.039.043.058-.086.028-.172.051-.262.079.012-.051.023-.102.04-.153l-.075-.039Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#aea9a6",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M17.86 12.77c-.13.09-.223.097-.376.113.028-.012.051-.024.078-.035v-.078c.106-.055.184-.024.297 0Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b4b1b0",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M15.496 9.46h.074l-.035.349h-.074c-.031-.114-.047-.172-.004-.282.012-.023.027-.043.04-.066Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#74b698",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="m16.059 9.422-.075.117c-.015-.02-.03-.035-.046-.055a.72.72 0 0 0-.215-.136c.148-.063.21-.012.336.074Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#53866a",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M16.809 8c.05.012.101.023.152.04v.077h.113l.035.153c-.035.02-.035.02-.074.039-.113-.145-.113-.145-.113-.23-.035-.017-.074-.028-.113-.04V8Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#afadab",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M7.953 10.96c-.035.013-.07.02-.11.032a3.353 3.353 0 0 1-.113.047c-.011.04-.027.074-.039.113a1.343 1.343 0 0 0-.074-.035c.04-.117.04-.117.125-.164.102-.031.102-.031.211.008Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#979696",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M9.906 6.152c.149.078.149.078.227.157l-.078.039c-.024.05-.047.101-.075.152-.023-.113-.046-.227-.074-.348Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#b7b5b5",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M10.133 4.383c.152.02.277.035.41.117-.121.027-.121.027-.262.04-.09-.075-.09-.075-.148-.157Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#bab8b7",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M8.594 4.04c.035.01.074.022.113.038.023.078.023.078.035.152-.113 0-.113 0-.187-.039.011-.05.027-.101.039-.152Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#d3d1d1",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M15.309 11.04c.136.01.273.023.414.038v.04c-.137.01-.274.023-.414.034v-.113Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#3f7154",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M13.695 9.383v.039c-.039.012-.082.023-.125.035-.136.035-.136.035-.25.121v-.156c.13-.04.242-.04.375-.04Zm0 0"
|
||||
style={{
|
||||
stroke: "none",
|
||||
fillRule: "nonzero",
|
||||
fill: "#3e6854",
|
||||
fillOpacity: 1,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-emerald-400">tunnl</span>.live
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{logedin != null ? (
|
||||
<UserMenu user={logedin} onSignOut={logout} />
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
Sign In
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex items-center gap-2 text-sm text-gray-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-emerald-400"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 16v-4" />
|
||||
<path d="M12 8h.01" />
|
||||
</svg>
|
||||
<span>Sign in to save configurations & view history</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="flex-1 flex flex-col items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
@ -31,6 +638,7 @@ export default function Home() {
|
||||
onConfigChange={setTunnelConfig}
|
||||
selectedServer={selectedServer}
|
||||
onServerSelect={setSelectedServer}
|
||||
isAuthenticated={logedin != null ? true : false}
|
||||
/>
|
||||
|
||||
<div className="max-w-3xl mx-auto">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps"
|
||||
import Link from "next/link"
|
||||
|
||||
export interface TunnelConfig {
|
||||
type: "http" | "tcp"
|
||||
@ -36,6 +37,7 @@ interface TunnelConfigProps {
|
||||
onConfigChange: (config: TunnelConfig) => void
|
||||
selectedServer: Server | null
|
||||
onServerSelect: (server: Server) => void
|
||||
isAuthenticated?: boolean
|
||||
}
|
||||
|
||||
const fetchServers = async (): Promise<Server[]> => {
|
||||
@ -85,9 +87,10 @@ const fetchServers = async (): Promise<Server[]> => {
|
||||
},
|
||||
portRestrictions: {
|
||||
allowedRanges: [
|
||||
{ min: 10000, max: 50000 },
|
||||
{ min: 8000, max: 8999 },
|
||||
{ min: 9000, max: 9999 },
|
||||
],
|
||||
blockedPorts: [22, 80, 443, 3306, 5432, 6379, 2200],
|
||||
blockedPorts: [8080, 8443, 9000],
|
||||
supportsAutoAssign: true,
|
||||
},
|
||||
},
|
||||
@ -105,10 +108,7 @@ const fetchServers = async (): Promise<Server[]> => {
|
||||
tcp: true,
|
||||
},
|
||||
portRestrictions: {
|
||||
allowedRanges: [
|
||||
{ min: 10000, max: 50000 },
|
||||
],
|
||||
blockedPorts: [22, 80, 443, 3306, 5432, 6379, 2200],
|
||||
blockedPorts: [22, 80, 443, 3306, 5432, 6379],
|
||||
supportsAutoAssign: true,
|
||||
},
|
||||
},
|
||||
@ -198,7 +198,13 @@ const testServerPing = (
|
||||
})
|
||||
}
|
||||
|
||||
export default function TunnelConfig({ config, onConfigChange, selectedServer, onServerSelect }: TunnelConfigProps) {
|
||||
export default function TunnelConfig({
|
||||
config,
|
||||
onConfigChange,
|
||||
selectedServer,
|
||||
onServerSelect,
|
||||
isAuthenticated = false,
|
||||
}: TunnelConfigProps) {
|
||||
const [localConfig, setLocalConfig] = useState<TunnelConfig>({
|
||||
...config,
|
||||
serverPort: config.type === "tcp" ? 0 : config.serverPort,
|
||||
@ -211,6 +217,7 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
const [serverError, setServerError] = useState<string | null>(null)
|
||||
const [portError, setPortError] = useState<string | null>(null)
|
||||
const [pendingServerSelection, setPendingServerSelection] = useState<Server | null>(null)
|
||||
const [showTcpLoginPrompt, setShowTcpLoginPrompt] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const loadServers = async () => {
|
||||
@ -283,8 +290,9 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
(s) =>
|
||||
s.pingStatus === "success" &&
|
||||
s.ping !== null &&
|
||||
s.capabilities.http &&
|
||||
((localConfig.type === "http" && s.capabilities.http) ||
|
||||
(localConfig.type === "tcp" && s.capabilities.tcp)),
|
||||
(localConfig.type === "tcp" && s.capabilities.tcp && isAuthenticated)),
|
||||
)
|
||||
|
||||
if (compatibleServers.length > 0) {
|
||||
@ -293,11 +301,9 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
)
|
||||
setPendingServerSelection(bestServer)
|
||||
} else {
|
||||
const successfulServers = testedServers.filter((s) => s.pingStatus === "success" && s.ping !== null)
|
||||
if (successfulServers.length > 0) {
|
||||
const bestServer = successfulServers.reduce((prev, current) =>
|
||||
prev.ping! < current.ping! ? prev : current,
|
||||
)
|
||||
const httpServers = testedServers.filter((s) => s.pingStatus === "success" && s.capabilities.http)
|
||||
if (httpServers.length > 0) {
|
||||
const bestServer = httpServers.reduce((prev, current) => (prev.ping! < current.ping! ? prev : current))
|
||||
setPendingServerSelection(bestServer)
|
||||
} else if (testedServers.length > 0) {
|
||||
setPendingServerSelection(testedServers[0])
|
||||
@ -312,24 +318,18 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
|
||||
autoTestPings()
|
||||
}
|
||||
}, [servers, isLoadingServers, hasAutoTested, localConfig.type])
|
||||
}, [servers, isLoadingServers, hasAutoTested, localConfig.type, isAuthenticated])
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingServerSelection) {
|
||||
onServerSelect(pendingServerSelection)
|
||||
setPendingServerSelection(null)
|
||||
|
||||
if (localConfig.type === "tcp" && !pendingServerSelection.capabilities.tcp) {
|
||||
if (localConfig.type === "tcp" && (!pendingServerSelection.capabilities.tcp || !isAuthenticated)) {
|
||||
updateConfig({ type: "http", serverPort: 443 })
|
||||
}
|
||||
}
|
||||
}, [pendingServerSelection, onServerSelect, localConfig.type])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedServer && localConfig.type === "tcp" && !selectedServer.capabilities.tcp) {
|
||||
updateConfig({ type: "http", serverPort: 443 })
|
||||
}
|
||||
}, [selectedServer, localConfig.type])
|
||||
}, [pendingServerSelection, onServerSelect, localConfig.type, isAuthenticated])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedServer && localConfig.type === "tcp" && localConfig.serverPort !== 0) {
|
||||
@ -375,6 +375,16 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
onConfigChange(newConfig)
|
||||
}
|
||||
|
||||
const handleTcpSelection = () => {
|
||||
if (!isAuthenticated) {
|
||||
setShowTcpLoginPrompt(true)
|
||||
return
|
||||
}
|
||||
|
||||
updateConfig({ type: "tcp", serverPort: 0 })
|
||||
setShowTcpLoginPrompt(false)
|
||||
}
|
||||
|
||||
const generateCommand = () => {
|
||||
if (!selectedServer) return ""
|
||||
const { serverPort, localPort } = localConfig
|
||||
@ -520,7 +530,7 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
if (localConfig.type === "http" && !server.capabilities.http) {
|
||||
return false
|
||||
}
|
||||
if (localConfig.type === "tcp" && !server.capabilities.tcp) {
|
||||
if (localConfig.type === "tcp" && (!server.capabilities.tcp || !isAuthenticated)) {
|
||||
return false
|
||||
}
|
||||
|
||||
@ -534,6 +544,9 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
if (localConfig.type === "tcp" && !server.capabilities.tcp) {
|
||||
return "TCP not supported"
|
||||
}
|
||||
if (localConfig.type === "tcp" && !isAuthenticated) {
|
||||
return "Sign in required for TCP"
|
||||
}
|
||||
if (localConfig.type === "http" && !server.capabilities.http) {
|
||||
return "HTTP not supported"
|
||||
}
|
||||
@ -543,7 +556,7 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
const getCompatibleServers = () => {
|
||||
return servers.filter((server) => {
|
||||
if (localConfig.type === "http") return server.capabilities.http
|
||||
if (localConfig.type === "tcp") return server.capabilities.tcp
|
||||
if (localConfig.type === "tcp") return server.capabilities.tcp && isAuthenticated
|
||||
return true
|
||||
})
|
||||
}
|
||||
@ -562,6 +575,7 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
}
|
||||
|
||||
const compatibleServers = getCompatibleServers()
|
||||
const hasTcpServers = servers.some((s) => s.capabilities.tcp)
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 p-6 mb-8">
|
||||
@ -619,10 +633,13 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
</svg>
|
||||
<p className="text-yellow-400 font-medium">
|
||||
No servers support {localConfig.type.toUpperCase()} forwarding
|
||||
{!isAuthenticated && localConfig.type === "tcp" && " for guest users"}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-yellow-300 text-sm">
|
||||
Please switch to HTTP/HTTPS forwarding or wait for TCP-compatible servers to come online.
|
||||
{!isAuthenticated && localConfig.type === "tcp"
|
||||
? "Please sign in to access TCP forwarding or switch to HTTP/HTTPS forwarding."
|
||||
: "Please switch to HTTP/HTTPS forwarding or wait for TCP-compatible servers to come online."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -807,12 +824,18 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
<span className="text-xs bg-blue-900 text-blue-300 px-1.5 py-0.5 rounded">HTTP</span>
|
||||
)}
|
||||
{server.capabilities.tcp && (
|
||||
<span className="text-xs bg-purple-900 text-purple-300 px-1.5 py-0.5 rounded">TCP</span>
|
||||
<span
|
||||
className={`text-xs px-1.5 py-0.5 rounded ${
|
||||
isAuthenticated ? "bg-purple-900 text-purple-300" : "bg-gray-700 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
TCP{!isAuthenticated && " 🔒"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{server.capabilities.tcp && (
|
||||
{server.capabilities.tcp && isAuthenticated && (
|
||||
<div className="mb-2">
|
||||
<p className="text-xs text-gray-300">{getPortRestrictionInfo(server)}</p>
|
||||
</div>
|
||||
@ -861,84 +884,88 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium mb-3">Forwarding Type</label>
|
||||
<div className="flex gap-4">
|
||||
<label
|
||||
className={`flex items-center ${
|
||||
servers.some((s) => s.capabilities.http) ? "cursor-pointer" : "cursor-not-allowed opacity-50"
|
||||
}`}
|
||||
>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="forwardingType"
|
||||
value="http"
|
||||
checked={localConfig.type === "http"}
|
||||
onChange={() =>
|
||||
servers.some((s) => s.capabilities.http) && updateConfig({ type: "http", serverPort: 443 })
|
||||
}
|
||||
disabled={!servers.some((s) => s.capabilities.http)}
|
||||
onChange={() => updateConfig({ type: "http", serverPort: 443 })}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${
|
||||
localConfig.type === "http"
|
||||
? "bg-emerald-950 border-emerald-500 text-emerald-400"
|
||||
: servers.some((s) => s.capabilities.http)
|
||||
? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
|
||||
: "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed"
|
||||
: "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
localConfig.type === "http"
|
||||
? "bg-emerald-400"
|
||||
: servers.some((s) => s.capabilities.http)
|
||||
? "bg-gray-500"
|
||||
: "bg-gray-600"
|
||||
}`}
|
||||
className={`w-2 h-2 rounded-full ${localConfig.type === "http" ? "bg-emerald-400" : "bg-gray-500"}`}
|
||||
/>
|
||||
<span className="font-medium">HTTP/HTTPS</span>
|
||||
{!servers.some((s) => s.capabilities.http) && (
|
||||
<span className="text-xs text-gray-500 ml-1">(Unavailable)</span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
className={`flex items-center ${
|
||||
servers.some((s) => s.capabilities.tcp) ? "cursor-pointer" : "cursor-not-allowed opacity-50"
|
||||
}`}
|
||||
>
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="forwardingType"
|
||||
value="tcp"
|
||||
checked={localConfig.type === "tcp"}
|
||||
onChange={() =>
|
||||
servers.some((s) => s.capabilities.tcp) && updateConfig({ type: "tcp", serverPort: 0 })
|
||||
}
|
||||
disabled={!servers.some((s) => s.capabilities.tcp)}
|
||||
onChange={handleTcpSelection}
|
||||
disabled={!isAuthenticated && !hasTcpServers}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${
|
||||
localConfig.type === "tcp"
|
||||
? "bg-emerald-950 border-emerald-500 text-emerald-400"
|
||||
: servers.some((s) => s.capabilities.tcp)
|
||||
? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
|
||||
: "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed"
|
||||
: !isAuthenticated && hasTcpServers
|
||||
? "bg-gray-800 border-gray-700 text-gray-400 cursor-pointer hover:border-yellow-600"
|
||||
: isAuthenticated && hasTcpServers
|
||||
? "bg-gray-800 border-gray-700 text-gray-300 hover:border-gray-600"
|
||||
: "bg-gray-800 border-gray-700 text-gray-500 cursor-not-allowed opacity-50"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
localConfig.type === "tcp"
|
||||
? "bg-emerald-400"
|
||||
: servers.some((s) => s.capabilities.tcp)
|
||||
? "bg-gray-500"
|
||||
: "bg-gray-600"
|
||||
}`}
|
||||
className={`w-2 h-2 rounded-full ${localConfig.type === "tcp" ? "bg-emerald-400" : "bg-gray-500"}`}
|
||||
/>
|
||||
<span className="font-medium">TCP</span>
|
||||
{!servers.some((s) => s.capabilities.tcp) && (
|
||||
<span className="text-xs text-gray-500 ml-1">(Unavailable)</span>
|
||||
{!isAuthenticated && hasTcpServers && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-yellow-400"
|
||||
>
|
||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
)}
|
||||
{isAuthenticated && hasTcpServers && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-emerald-400"
|
||||
>
|
||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 9.9-1" />
|
||||
<path d="m9 16 2 2 4-4" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
@ -947,92 +974,137 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
{localConfig.type === "http"
|
||||
? "Best for web applications and APIs. Uses HTTPS (port 443) or HTTP (port 80)."
|
||||
: "For any TCP service like databases, game servers, or custom applications."}
|
||||
: isAuthenticated
|
||||
? "For any TCP service like databases, game servers, or custom applications."
|
||||
: "TCP forwarding requires authentication for security and abuse prevention."}
|
||||
</p>
|
||||
|
||||
{!servers.some((s) => (localConfig.type === "http" ? s.capabilities.http : s.capabilities.tcp)) && (
|
||||
<div className="mt-3 p-3 bg-yellow-950 rounded-lg border border-yellow-800">
|
||||
<div className="flex items-center gap-2">
|
||||
{showTcpLoginPrompt && !isAuthenticated && (
|
||||
<div className="mt-4 p-4 bg-blue-950 rounded-lg border border-blue-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-yellow-400"
|
||||
className="text-blue-400 mt-0.5 flex-shrink-0"
|
||||
>
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||||
<line x1="12" x2="12" y1="9" y2="13" />
|
||||
<line x1="12" x2="12.01" y1="17" y2="17" />
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<p className="text-yellow-400 text-sm font-medium">
|
||||
No servers currently support {localConfig.type.toUpperCase()} forwarding
|
||||
</p>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-blue-400 font-medium mb-2">TCP Forwarding Requires Sign In</h4>
|
||||
<p className="text-blue-300 text-sm mb-3">
|
||||
To prevent abuse and ensure service quality, TCP forwarding requires user authentication. This
|
||||
helps us maintain a reliable service for everyone.
|
||||
</p>
|
||||
<p className="text-blue-300 text-sm mb-4">
|
||||
TCP forwarding allows you to tunnel any TCP-based service like databases, game servers, SSH, and
|
||||
custom applications.
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium transition-colors text-sm"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
Sign In to Continue
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowTcpLoginPrompt(false)
|
||||
updateConfig({ type: "http", serverPort: 443 })
|
||||
}}
|
||||
className="text-blue-300 hover:text-blue-200 text-sm underline"
|
||||
>
|
||||
Use HTTP Instead
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 mb-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Server Port (Internet Access)</label>
|
||||
{localConfig.type === "http" ? (
|
||||
<select
|
||||
value={localConfig.serverPort}
|
||||
onChange={(e) => updateConfig({ serverPort: Number.parseInt(e.target.value) })}
|
||||
{!showTcpLoginPrompt && (
|
||||
<div className="grid gap-4 md:grid-cols-2 mb-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Server Port (Internet Access)</label>
|
||||
{localConfig.type === "http" ? (
|
||||
<select
|
||||
value={localConfig.serverPort}
|
||||
onChange={(e) => updateConfig({ serverPort: Number.parseInt(e.target.value) })}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono focus:border-emerald-500 focus:outline-none"
|
||||
>
|
||||
<option value={443}>443 (HTTPS)</option>
|
||||
<option value={80}>80 (HTTP)</option>
|
||||
</select>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="number"
|
||||
value={localConfig.serverPort === 0 ? "" : localConfig.serverPort}
|
||||
onChange={(e) => updateConfig({ serverPort: Number.parseInt(e.target.value) || 0 })}
|
||||
className={`w-full bg-gray-800 border rounded-lg px-3 py-2 text-white font-mono focus:outline-none ${
|
||||
portError ? "border-red-500 focus:border-red-400" : "border-gray-700 focus:border-emerald-500"
|
||||
}`}
|
||||
placeholder="0 for auto-assign"
|
||||
min="0"
|
||||
max="65535"
|
||||
/>
|
||||
{portError && <p className="text-xs text-red-400">{portError}</p>}
|
||||
{localConfig.serverPort === 0 && (
|
||||
<p className="text-xs text-blue-400">Server will automatically assign an available port</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{localConfig.type === "http"
|
||||
? "Standard web ports"
|
||||
: localConfig.serverPort === 0
|
||||
? "Server will assign an available port automatically"
|
||||
: "Port accessible from the internet (1024+)"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Local Port (Your Service)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={localConfig.localPort}
|
||||
onChange={(e) => updateConfig({ localPort: Number.parseInt(e.target.value) || 8000 })}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono focus:border-emerald-500 focus:outline-none"
|
||||
>
|
||||
<option value={443}>443 (HTTPS)</option>
|
||||
<option value={80}>80 (HTTP)</option>
|
||||
</select>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="number"
|
||||
value={localConfig.serverPort === 0 ? "" : localConfig.serverPort}
|
||||
onChange={(e) => updateConfig({ serverPort: Number.parseInt(e.target.value) || 0 })}
|
||||
className={`w-full bg-gray-800 border rounded-lg px-3 py-2 text-white font-mono focus:outline-none ${
|
||||
portError ? "border-red-500 focus:border-red-400" : "border-gray-700 focus:border-emerald-500"
|
||||
}`}
|
||||
placeholder="0 for auto-assign"
|
||||
min="0"
|
||||
max="65535"
|
||||
/>
|
||||
{portError && <p className="text-xs text-red-400">{portError}</p>}
|
||||
{localConfig.serverPort === 0 && (
|
||||
<p className="text-xs text-blue-400">Server will automatically assign an available port</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{localConfig.type === "http"
|
||||
? "Standard web ports"
|
||||
: localConfig.serverPort === 0
|
||||
? "Server will assign an available port automatically"
|
||||
: "Port accessible from the internet (1024+)"}
|
||||
</p>
|
||||
placeholder="8000"
|
||||
min="1"
|
||||
max="65535"
|
||||
/>
|
||||
<p className="text-xs text-gray-400 mt-1">Port where your local service is running</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Local Port (Your Service)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={localConfig.localPort}
|
||||
onChange={(e) => updateConfig({ localPort: Number.parseInt(e.target.value) || 8000 })}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white font-mono focus:border-emerald-500 focus:outline-none"
|
||||
placeholder="8000"
|
||||
min="1"
|
||||
max="65535"
|
||||
/>
|
||||
<p className="text-xs text-gray-400 mt-1">Port where your local service is running</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedServer && (
|
||||
{!showTcpLoginPrompt && selectedServer && (
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium mb-2">SSH Command</label>
|
||||
<div className="relative">
|
||||
@ -1081,30 +1153,33 @@ export default function TunnelConfig({ config, onConfigChange, selectedServer, o
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-3 bg-gray-800 rounded-lg border border-gray-700">
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium">Traffic Flow:</span> Internet →{" "}
|
||||
<span className="text-emerald-400 font-mono">
|
||||
{selectedServer ? selectedServer.location : "Server"}:
|
||||
{localConfig.serverPort === 0 ? "auto" : localConfig.serverPort}
|
||||
</span>{" "}
|
||||
→ <span className="text-emerald-400 font-mono">localhost:{localConfig.localPort}</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{localConfig.type === "http" ? (
|
||||
<>
|
||||
Your local service on port {localConfig.localPort} will be accessible via{" "}
|
||||
{localConfig.serverPort === 443 ? "HTTPS" : "HTTP"}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
TCP traffic to server port {localConfig.serverPort === 0 ? "(auto-assigned)" : localConfig.serverPort}{" "}
|
||||
will be forwarded to your localhost:
|
||||
{localConfig.localPort}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{!showTcpLoginPrompt && (
|
||||
<div className="p-3 bg-gray-800 rounded-lg border border-gray-700">
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium">Traffic Flow:</span> Internet →{" "}
|
||||
<span className="text-emerald-400 font-mono">
|
||||
{selectedServer ? selectedServer.location : "Server"}:
|
||||
{localConfig.serverPort === 0 ? "auto" : localConfig.serverPort}
|
||||
</span>{" "}
|
||||
→ <span className="text-emerald-400 font-mono">localhost:{localConfig.localPort}</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{localConfig.type === "http" ? (
|
||||
<>
|
||||
Your local service on port {localConfig.localPort} will be accessible via{" "}
|
||||
{localConfig.serverPort === 443 ? "HTTPS" : "HTTP"}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
TCP traffic to server port{" "}
|
||||
{localConfig.serverPort === 0 ? "(auto-assigned)" : localConfig.serverPort} will be forwarded to
|
||||
your localhost:
|
||||
{localConfig.localPort}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
150
components/user-menu.tsx
Normal file
150
components/user-menu.tsx
Normal file
@ -0,0 +1,150 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface UserMenuProps {
|
||||
user: {
|
||||
name: string
|
||||
email: string
|
||||
image?: string
|
||||
}
|
||||
onSignOut?: () => void
|
||||
}
|
||||
|
||||
export default function UserMenu({ user, onSignOut }: UserMenuProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="relative" ref={menuRef}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex items-center gap-3 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
{user.image ? (
|
||||
<img
|
||||
src={user.image || "/placeholder.svg"}
|
||||
alt={user.name}
|
||||
className="w-9 h-9 rounded-full border-2 border-emerald-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-9 h-9 rounded-full bg-emerald-600 border-2 border-emerald-500 flex items-center justify-center text-white font-medium text-sm">
|
||||
{user.name}
|
||||
</div>
|
||||
)}
|
||||
<div className="hidden md:block text-left">
|
||||
<p className="text-sm font-medium text-white">{user.name}</p>
|
||||
<p className="text-xs text-gray-400">{user.email}</p>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`}
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg border border-gray-700 shadow-xl py-2 z-50">
|
||||
<div className="md:hidden px-4 py-3 border-b border-gray-700">
|
||||
<p className="text-sm font-medium text-white">{user.name}</p>
|
||||
<p className="text-xs text-gray-400">{user.email}</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/dashboard"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex items-center gap-3 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width="7" height="9" x="3" y="3" rx="1" />
|
||||
<rect width="7" height="5" x="14" y="3" rx="1" />
|
||||
<rect width="7" height="9" x="14" y="12" rx="1" />
|
||||
<rect width="7" height="5" x="3" y="16" rx="1" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/settings"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex items-center gap-3 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Settings
|
||||
</Link>
|
||||
|
||||
<div className="border-t border-gray-700 my-2"></div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false)
|
||||
onSignOut?.()
|
||||
}}
|
||||
className="flex items-center gap-3 px-4 py-2 text-sm text-red-400 hover:bg-gray-700 transition-colors w-full"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" x2="9" y1="12" y2="12" />
|
||||
</svg>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
5
lib/auth-client.ts
Normal file
5
lib/auth-client.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createAuthClient } from "better-auth/react"
|
||||
export const authClient = createAuthClient({
|
||||
/** The base URL of the server (optional if you're using the same domain) */
|
||||
baseURL: "http://localhost:3000"
|
||||
})
|
||||
17
lib/auth.ts
Normal file
17
lib/auth.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { betterAuth } from "better-auth";
|
||||
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
||||
import { db } from "@/lib/db";
|
||||
import * as schema from "@/lib/schema/auth"
|
||||
|
||||
export const auth = betterAuth({
|
||||
socialProviders: {
|
||||
google: {
|
||||
clientId: process.env.GOOGLE_CLIENT_ID!,
|
||||
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
|
||||
},
|
||||
},
|
||||
database: drizzleAdapter(db, {
|
||||
provider: "pg",
|
||||
schema: schema
|
||||
})
|
||||
});
|
||||
3
lib/db.ts
Normal file
3
lib/db.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import 'dotenv/config';
|
||||
import { drizzle } from 'drizzle-orm/node-postgres';
|
||||
export const db = drizzle(process.env.DATABASE_URL!);
|
||||
61
lib/schema/auth.ts
Normal file
61
lib/schema/auth.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
|
||||
|
||||
export const user = pgTable("user", {
|
||||
id: text("id").primaryKey(),
|
||||
name: text("name").notNull(),
|
||||
email: text("email").notNull().unique(),
|
||||
emailVerified: boolean("email_verified").default(false).notNull(),
|
||||
image: text("image"),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
});
|
||||
|
||||
export const session = pgTable("session", {
|
||||
id: text("id").primaryKey(),
|
||||
expiresAt: timestamp("expires_at").notNull(),
|
||||
token: text("token").notNull().unique(),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
ipAddress: text("ip_address"),
|
||||
userAgent: text("user_agent"),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
});
|
||||
|
||||
export const account = pgTable("account", {
|
||||
id: text("id").primaryKey(),
|
||||
accountId: text("account_id").notNull(),
|
||||
providerId: text("provider_id").notNull(),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
accessToken: text("access_token"),
|
||||
refreshToken: text("refresh_token"),
|
||||
idToken: text("id_token"),
|
||||
accessTokenExpiresAt: timestamp("access_token_expires_at"),
|
||||
refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
|
||||
scope: text("scope"),
|
||||
password: text("password"),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
});
|
||||
|
||||
export const verification = pgTable("verification", {
|
||||
id: text("id").primaryKey(),
|
||||
identifier: text("identifier").notNull(),
|
||||
value: text("value").notNull(),
|
||||
expiresAt: timestamp("expires_at").notNull(),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
});
|
||||
15
middleware.ts
Normal file
15
middleware.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getSessionCookie } from "better-auth/cookies";
|
||||
export async function middleware(request: NextRequest) {
|
||||
const sessionCookie = getSessionCookie(request);
|
||||
// THIS IS NOT SECURE!
|
||||
// This is the recommended approach to optimistically redirect users
|
||||
// We recommend handling auth checks in each page/route
|
||||
if (sessionCookie) {
|
||||
return NextResponse.redirect(new URL("/", request.url));
|
||||
}
|
||||
return NextResponse.next();
|
||||
}
|
||||
export const config = {
|
||||
matcher: ["/login"], // Specify the routes the middleware applies to
|
||||
};
|
||||
1794
package-lock.json
generated
1794
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -25,7 +25,12 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"better-auth": "^1.3.23",
|
||||
"dotenv": "^17.2.2",
|
||||
"drizzle-orm": "^0.44.5",
|
||||
"net": "^1.0.2",
|
||||
"next": "^15.5.2",
|
||||
"pg": "^8.16.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-simple-maps": "^3.0.0",
|
||||
@ -34,10 +39,13 @@
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/pg": "^8.15.5",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-simple-maps": "^3.0.6",
|
||||
"drizzle-kit": "^0.31.5",
|
||||
"tailwindcss": "^4",
|
||||
"tsx": "^4.20.6",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user