blob: ba85aeba8e984d453288258df486a096fa0ab957 (
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
|
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { ExitIcon, UserIcon, LoginIcon } from "../images/Images";
import { UserProfile } from "@customTypes/Profile";
import { API } from "@api/Api";
interface LoginProps {
setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
profile?: UserProfile;
setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
isOpen: boolean;
}
const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile, isOpen }) => {
const navigate = useNavigate();
const _login = () => {
window.location.href = "/api/v1/login";
};
const _logout = () => {
setProfile(undefined);
setToken(undefined);
API.delete_token();
navigate("/");
};
return (
<>
{profile ? (
<>
{profile.profile ? (
<>
<Link to="/profile" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
<button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
<img
className="rounded-[50px]"
src={profile.avatar_link}
alt=""
/>
<span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">{profile.user_name}</span>
</button>
<button className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent" onClick={_logout}>
<img src={ExitIcon} alt="" />
<span />
</button>
</Link>
</>
) : (
<>
<Link to="/" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
<button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
<img
className="rounded-[50px]"
src={profile.avatar_link}
alt=""
/>
<span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">Loading Profile...</span>
</button>
<button disabled className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent hidden" onClick={_logout}>
<img src={ExitIcon} alt="" />
<span />
</button>
</Link>
</>
)}
</>
) : (
<Link to="/api/v1/login" tabIndex={-1}>
<button
className={`${
isOpen
? "grid grid-cols-[50px_auto] place-items-start pl-[11px]"
: "flex items-center justify-center"
} text-left bg-inherit cursor-pointer border-none w-[310px] h-16 rounded-[20px] py-[0.3em] px-0 transition-all duration-300 ${isOpen ? "text-white" : "text-gray-400"}`}
onClick={_login}
>
<span className={`font-[--font-barlow-semicondensed-regular] text-lg h-12 leading-7 transition-opacity duration-100 ${isOpen ? " overflow-hidden" : ""}`}>
{isOpen ? (
<div className="bg-neutral-800 p-2 rounded-lg w-64 flex flex-row items-center justifyt-start gap-2 font-semibold">
<LoginIcon />
<span>
Login with Steam
</span>
</div>
) : (
<div className="bg-neutral-800 p-2 rounded-lg w-">
<LoginIcon />
</div>
)}
</span>
</button>
</Link>
)}
</>
);
};
export default Login;
|