Skip to content

Commit 22fd16c

Browse files
as7aras7ar
committed
hotfix22222222222222222222222222222222222222222222222222222222222222222222222
1 parent 9d8fb35 commit 22fd16c

1 file changed

Lines changed: 124 additions & 41 deletions

File tree

‎src/pages/callback.astro‎

Lines changed: 124 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,135 @@
11
---
2+
import BaseHeader from "../components/BaseHeader.astro";
3+
import Navigator from "../components/Navigator.astro";
4+
import BaseFooter from "../components/BaseFooter.astro";
5+
import { url } from "../consts.ts";
6+
7+
const redirectUri = `${url}/callback`;
8+
const discordLoginUrl = `https://discord.com/oauth2/authorize?client_id=1358603949015564449&response_type=code&redirect_uri=${encodeURIComponent(
9+
redirectUri
10+
)}&scope=email+identify+openid`;
211
---
312

4-
<html>
13+
<html lang="ko">
514
<head>
6-
<meta charset="UTF-8" />
7-
<title>Login</title>
15+
<BaseHeader />
16+
<title>GrassProject</title>
817
</head>
918
<body>
10-
<p>Logging in...</p>
11-
12-
<script>
13-
import { getDiscordUser } from '../script/DiscordUser';
14-
import Cookies from 'js-cookie';
15-
import {url} from "../consts.ts";
16-
17-
const params = new URLSearchParams(window.location.search);
18-
const code = params.get('code');
19-
20-
const redirectToHome = () => window.location.replace('/');
21-
22-
if (code) {
23-
(async () => {
24-
try {
25-
const redirectUri = `${url}/callback`;
26-
const userInfo = await getDiscordUser(code, redirectUri);
27-
const filteredUser = {
28-
id: userInfo.id,
29-
username: userInfo.username,
30-
global_name: userInfo.global_name,
31-
email: userInfo.email,
32-
locale: userInfo.locale,
33-
banner_color: userInfo.banner_color
34-
};
35-
Cookies.set('user', JSON.stringify(filteredUser), { expires: 7, path: '/' });
36-
Cookies.set('isLoggedIn', 'true', { expires: 7, path: '/' });
37-
redirectToHome();
38-
} catch (err) {
39-
console.error(err);
40-
alert('로그인 처리 중 오류가 발생했습니다.');
41-
redirectToHome();
42-
}
43-
})();
19+
<div class="container" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
20+
<slot />
21+
22+
<Navigator/>
23+
24+
<div class="login" id="login-container"></div>
25+
26+
<BaseFooter/>
27+
</div>
28+
29+
<script type="module">
30+
import Cookies from "js-cookie";
31+
32+
const container = document.getElementById("login-container");
33+
const storedUser = Cookies.get("user");
34+
const storedLoggedIn = Cookies.get("isLoggedIn");
35+
36+
if (storedUser && storedLoggedIn === "true") {
37+
const user = JSON.parse(storedUser);
38+
container.innerHTML = `
39+
<div class="user-info">
40+
<span class="user-text">Welcome, ${user.global_name || "User"}</span>
41+
<button id="logout-btn" class="round-btn logout-btn">
42+
<span class="btn-text">Logout</span>
43+
</button>
44+
</div>
45+
`;
46+
47+
document.getElementById("logout-btn")?.addEventListener("click", () => {
48+
Cookies.remove("user");
49+
Cookies.remove("isLoggedIn");
50+
location.reload();
51+
});
4452
} else {
45-
const error = params.get('error');
46-
const description = params.get('error_description')?.replace(/\+/g, ' ');
47-
if (error && description) alert(error + ': ' + description);
48-
redirectToHome();
53+
container.innerHTML = `
54+
<a href="${discordLoginUrl}" class="round-btn login-btn">
55+
<span class="btn-text">Login</span>
56+
</a>
57+
`;
4958
}
5059
</script>
5160
</body>
5261
</html>
62+
63+
<style>
64+
.container {
65+
min-height: 100vh;
66+
justify-content: space-between;
67+
text-align: center;
68+
font-family: 'Quicksand', system-ui, Avenir, Helvetica, Arial, sans-serif;
69+
}
70+
71+
.login {
72+
margin-top: 2rem;
73+
display: flex;
74+
justify-content: center;
75+
}
76+
77+
.user-info {
78+
display: flex;
79+
flex-direction: column;
80+
align-items: center;
81+
gap: 0.5rem;
82+
}
83+
84+
.user-text {
85+
opacity: 1;
86+
transition: opacity 0.3s ease-in-out;
87+
}
88+
89+
.user-info:hover .user-text {
90+
opacity: 0;
91+
}
92+
93+
.round-btn {
94+
display: inline-flex;
95+
align-items: center;
96+
justify-content: center;
97+
overflow: hidden;
98+
white-space: nowrap;
99+
width: 40px;
100+
height: 40px;
101+
border-radius: 50%;
102+
transition: all 0.3s ease-in-out;
103+
cursor: pointer;
104+
font-size: 0.9rem;
105+
font-weight: 500;
106+
text-decoration: none;
107+
color: #fff;
108+
position: relative;
109+
}
110+
111+
.round-btn:hover {
112+
width: 120px;
113+
border-radius: 20px;
114+
justify-content: center;
115+
}
116+
117+
.btn-text {
118+
opacity: 0;
119+
margin-left: 0.5rem;
120+
transition: opacity 0.2s ease-in-out;
121+
}
122+
123+
.round-btn:hover .btn-text {
124+
opacity: 1;
125+
}
126+
127+
.login-btn {
128+
background: #86bc7b;
129+
}
130+
131+
.logout-btn {
132+
background: #c9f1a4;
133+
color: #242424;
134+
}
135+
</style>

0 commit comments

Comments
 (0)