MCPX MCP Gateway

import { useAuth } from "@/contexts/useAuth"; export default function EnterpriseLoginScreen() { const { login, loading, error } = useAuth(); return ( <div className="min-h-screen bg-gradient-to-br from-pink-50 via-white to-pink-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> <div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="flex justify-center"> <div className="w-40 h-10 rounded-2xl flex items-center justify-center"> <img src="/image.png" alt="MCPX Logo" className="w-20 h-20" /> </div> </div> <h2 className="mt-8 text-center text-4xl font-bold tracking-tight bg-gradient-to-r from-pink-500 to-pink-500 bg-clip-text text-transparent"> MCPX Control Panel </h2> <p className="mt-2 text-center text-lg font-medium text-black"> by lunar.dev </p> <p className="mt-1 text-center text-sm text-black"> Control Plane Management </p> </div> <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-md"> <div className="bg-white/80 backdrop-blur-sm py-10 px-6 shadow-2xl sm:rounded-2xl sm:px-10 border border-pink-100"> <div className="text-center"> <h3 className="text-2xl font-semibold text-gray-900 mb-2"> Welcome ! </h3> <p className="text-sm text-gray-600 mb-8"> Sign in to access your MCPX control plane dashboard </p> <button onClick={() => login()} disabled={loading} className="w-full flex justify-center items-center px-6 py-4 text-base font-semibold rounded-xl text-lunar-purple border-lunar-purple border-2 hover:bg-lunar-purple hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lunar-purple focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-[1.02] shadow-lg hover:shadow-2xl shadow-lunar-purple/20" > {loading ? ( <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-3" /> ) : ( <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" /> </svg> )} {loading ? "Connecting..." : "Sign in"} </button> {error && ( <p className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2 mt-4"> {error} </p> )} <div className="mt-6 flex items-center justify-center space-x-2 text-xs text-lunar-purple"></div> </div> </div> </div> </div> ); }