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
|
'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { fetchWithAuth } from '@/utils/api';
export default function Home() {
const [formData, setFormData] = useState({
username: '',
password: '',
url: ''
});
const [error, setError] = useState('');
const [loading, setLoading] = useState(true);
const router = useRouter();
useEffect(() => {
// Check if token and API URL exist
const token = localStorage.getItem('token');
const apiUrl = localStorage.getItem('apiUrl');
if (token && apiUrl) {
// Verify token is still valid
fetchWithAuth('/api/servers')
.then(response => {
if (response.ok) {
router.push('/guilds');
} else {
// Clear invalid token
localStorage.removeItem('token');
localStorage.removeItem('apiUrl');
setLoading(false);
}
})
.catch(() => {
// Error means token is invalid or other issue
localStorage.removeItem('token');
localStorage.removeItem('apiUrl');
setLoading(false);
});
} else {
setLoading(false);
}
}, [router]);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetch(`${formData.url}/api/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: formData.username,
password: formData.password
}),
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || 'Login failed');
}
// Save token and API URL to localStorage
localStorage.setItem('token', data.token);
localStorage.setItem('apiUrl', formData.url);
// Redirect to guilds page
router.push('/guilds');
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
if (loading) {
return (
<main className="flex justify-center items-center h-screen">
<p>Loading...</p>
</main>
);
}
return (
<main className="flex flex-col space-y-5 justify-center items-center h-screen">
<h1 className="text-4xl font-medium">AleeBot</h1>
{error && <p className="text-red-500">{error}</p>}
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-80">
<input
name="username"
type="text"
placeholder="Username"
required
value={formData.username}
onChange={handleChange}
className="p-2 border rounded"
/>
<input
name="password"
type="password"
placeholder="Password"
required
value={formData.password}
onChange={handleChange}
className="p-2 border rounded"
/>
<input
name="url"
type="url"
placeholder="API URL"
required
value={formData.url}
onChange={handleChange}
className="p-2 border rounded"
/>
<button
type="submit"
disabled={loading}
className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded disabled:bg-blue-300"
>
{loading ? 'Logging in...' : 'Login'}
</button>
</form>
</main>
);
}
|
