feat: add login page

2026-02-14 16:56:43 +03:00
parent 7e4dbd7e56
commit 4712604171
5 changed files with 297 additions and 37 deletions
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,79 @@
+export default function Login() {
+  const handleGitHubLogin = () => {
+    window.location.href = "/api/v1/auth/github";
+  };
+
+  return (
+    <div className="flex items-center justify-center px-4 py-12 md:py-0 md:min-h-[calc(100vh-200px)]">
+      <div className="max-w-md w-full">
+        {/* ASCII Art Header */}
+        <pre className="text-center mb-8 text-[10px] sm:text-xs lg:text-sm opacity-80 font-mono leading-tight select-none">
+          {`
+    ██╗      ██████╗  ██████╗ ██╗███╗   ██╗
+    ██║     ██╔═══██╗██╔════╝ ██║████╗  ██║
+    ██║     ██║   ██║██║  ███╗██║██╔██╗ ██║
+    ██║     ██║   ██║██║   ██║██║██║╚██╗██║
+    ███████╗╚██████╔╝╚██████╔╝██║██║ ╚████║
+    ╚══════╝ ╚═════╝  ╚═════╝ ╚═╝╚═╝  ╚═══╝
+
+    ╔════════════════════════════════════╗
+    ║     Secure GitHub Authentication   ║
+    ╚════════════════════════════════════╝
+`}
+        </pre>
+
+        {/* Login Card */}
+        <div className="border border-gray-700 rounded-lg p-6 sm:p-8 bg-black/30 backdrop-blur-sm shadow-xl">
+          <h1 className="text-xl sm:text-2xl font-bold mb-2 text-center">
+            Welcome Back
+          </h1>
+          <p className="text-gray-400 text-center mb-6 sm:mb-8 text-sm">
+            Sign in to continue to your account
+          </p>
+
+          {/* GitHub Login Button */}
+          <button
+            onClick={handleGitHubLogin}
+            className="w-full bg-white text-black hover:bg-gray-200 active:scale-95 transition-all duration-300 py-3 sm:py-4 px-6 rounded-lg font-semibold flex items-center justify-center gap-3 group shadow-lg hover:shadow-xl"
+          >
+            <svg
+              className="w-5 h-5 sm:w-6 sm:h-6 group-hover:scale-110 transition-transform"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="text-sm sm:text-base">Login via GitHub</span>
+          </button>
+
+          {/* Divider */}
+          <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-xs">
+              <span className="bg-black/30 px-2 text-gray-500">
+                secure authentication
+              </span>
+            </div>
+          </div>
+
+          {/* Footer note */}
+          <p className="text-gray-500 text-xs text-center">
+            By signing in, you agree to our{" "}
+            <a
+              href="/terms"
+              className="text-[hsl(270,73%,63%)] hover:underline"
+            >
+              terms of service
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}