blob: 9152494cf2694b2ef12e7de41b8aa3f349e2bf07 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
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>
);
}
|