adding validated services? patching forcad_local.py

OmCTF-2025/services/polyphonia/frontend/src/pages/AuthPage.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { MusicalNoteIcon } from "@heroicons/react/24/outline";
+import LoginForm from "../components/auth/LoginForm";
+import RegisterForm from "../components/auth/RegisterForm";
+
+export default function AuthPage() {
+  const [activeTab, setActiveTab] = useState<"login" | "register">("login");
+
+  const handleLoginSuccess = () => {
+    // Navigation will be handled by App.tsx checking auth state
+  };
+
+  const handleRegisterSuccess = () => {
+    setActiveTab("login");
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-md"
+      >
+        <div className="bg-gray-900/80 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-gray-800">
+          <div className="text-center mb-8">
+            <motion.div
+              initial={{ rotate: 0 }}
+              animate={{ rotate: 360 }}
+              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+              className="inline-block"
+            >
+              <MusicalNoteIcon className="h-16 w-16 text-primary-500 mx-auto mb-4" />
+            </motion.div>
+            <h1 className="text-4xl font-bold text-white mb-2">PolyPhonia</h1>
+            <p className="text-gray-400">Mix Tones, Create Magic</p>
+          </div>
+
+          <div className="flex mb-6 bg-gray-800 rounded-lg p-1">
+            <button
+              onClick={() => setActiveTab("login")}
+              className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
+                activeTab === "login"
+                  ? "bg-primary-600 text-white shadow-lg"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              Login
+            </button>
+            <button
+              onClick={() => setActiveTab("register")}
+              className={`flex-1 py-2 px-4 rounded-md font-medium transition-all ${
+                activeTab === "register"
+                  ? "bg-green-600 text-white shadow-lg"
+                  : "text-gray-400 hover:text-white"
+              }`}
+            >
+              Register
+            </button>
+          </div>
+
+          {activeTab === "login" ? (
+            <LoginForm onSuccess={handleLoginSuccess} />
+          ) : (
+            <RegisterForm onSuccess={handleRegisterSuccess} />
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}