feat(ui): add new ui project

1 files changed, 156 insertions, 0 deletions

diff --git a/packages/ui-new/src/components/login-modal.tsx b/packages/ui-new/src/components/login-modal.tsx
new file mode 100644
index 0000000..9152494
--- /dev/null
+++ b/packages/ui-new/src/components/login-modal.tsx
@@ -0,0 +1,156 @@
+import { Mail, User } from "lucide-react";
+import { useAuthStore } from "@/stores/auth-store";
+
+export function LoginModal() {
+  const authStore = useAuthStore();
+
+  const handleOfflineLogin = () => {
+    if (authStore.offlineUsername.trim()) {
+      authStore.performOfflineLogin();
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleOfflineLogin();
+    }
+  };
+
+  if (!authStore.isLoginModalOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-200 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl max-w-md w-full animate-in fade-in zoom-in-95 duration-200">
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="text-xl font-bold text-white">Login</h3>
+            <button
+              type="button"
+              onClick={() => {
+                authStore.setLoginMode("select");
+                authStore.setOfflineUsername("");
+                authStore.cancelMicrosoftLogin();
+              }}
+              className="text-zinc-400 hover:text-white transition-colors p-1"
+            >
+              ×
+            </button>
+          </div>
+
+          {/* Content based on mode */}
+          {authStore.loginMode === "select" && (
+            <div className="space-y-4">
+              <p className="text-zinc-400 text-sm">
+                Choose your preferred login method
+              </p>
+              <button
+                type="button"
+                onClick={() => authStore.startMicrosoftLogin()}
+                className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
+              >
+                <Mail size={18} />
+                <span className="font-medium">Microsoft Account</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  authStore.loginMode = "offline";
+                }}
+                className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg transition-colors"
+              >
+                <User size={18} />
+                <span className="font-medium">Offline Mode</span>
+              </button>
+            </div>
+          )}
+
+          {authStore.loginMode === "offline" && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="username"
+                  className="block text-sm font-medium text-zinc-300 mb-2"
+                >
+                  Username
+                </label>
+                <input
+                  name="username"
+                  type="text"
+                  value={authStore.offlineUsername}
+                  onChange={(e) => authStore.setOfflineUsername(e.target.value)}
+                  onKeyDown={handleKeyPress}
+                  className="w-full px-4 py-2.5 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                  placeholder="Enter your Minecraft username"
+                />
+              </div>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => {
+                    authStore.loginMode = "select";
+                    authStore.setOfflineUsername("");
+                  }}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium text-zinc-300 hover:text-white bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-colors"
+                >
+                  Back
+                </button>
+                <button
+                  type="button"
+                  onClick={handleOfflineLogin}
+                  disabled={!authStore.offlineUsername.trim()}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
+                >
+                  Login
+                </button>
+              </div>
+            </div>
+          )}
+
+          {authStore.loginMode === "microsoft" && (
+            <div className="space-y-4">
+              {authStore.deviceCodeData && (
+                <div className="bg-zinc-800/50 border border-zinc-700 rounded-lg p-4">
+                  <div className="text-center mb-4">
+                    <div className="text-xs font-mono bg-zinc-900 px-3 py-2 rounded border border-zinc-700 mb-3">
+                      {authStore.deviceCodeData.userCode}
+                    </div>
+                    <p className="text-zinc-300 text-sm font-medium">
+                      Your verification code
+                    </p>
+                  </div>
+                  <p className="text-zinc-400 text-sm text-center">
+                    Visit{" "}
+                    <a
+                      href={authStore.deviceCodeData.verificationUri}
+                      target="_blank"
+                      className="text-indigo-400 hover:text-indigo-300 font-medium"
+                    >
+                      {authStore.deviceCodeData.verificationUri}
+                    </a>{" "}
+                    and enter the code above
+                  </p>
+                </div>
+              )}
+              <div className="text-center">
+                <p className="text-zinc-300 text-sm mb-2">
+                  {authStore.msLoginStatus}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => {
+                    authStore.cancelMicrosoftLogin();
+                    authStore.setLoginMode("select");
+                  }}
+                  className="text-sm text-zinc-400 hover:text-white transition-colors"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}