Skip to content

Commit 49ded05

Browse files
MiodecMiodec
committed
split
1 parent 47af31d commit 49ded05

4 files changed

Lines changed: 212 additions & 189 deletions

File tree

‎frontend/src/ts/components/mount.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Modals } from "./modals/Modals";
1313
import { AboutPage } from "./pages/AboutPage";
1414
import { MyProfile } from "./pages/account/MyProfile";
1515
import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
16-
import { LoginPage } from "./pages/LoginPage";
16+
import { LoginPage } from "./pages/login/LoginPage";
1717
import { ProfilePage } from "./pages/profile/ProfilePage";
1818
import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
1919
import { Popups } from "./popups/Popups";

‎frontend/src/ts/components/pages/login/Login.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { createSignal, JSXElement } from "solid-js";
2+
3+
import { signIn, signInWithGitHub, signInWithGoogle } from "../../../auth";
4+
import * as ForgotPasswordModal from "../../../modals/forgot-password";
5+
import * as ConnectionState from "../../../states/connection";
6+
import {
7+
showLoginPageLoader,
8+
hideLoginPageLoader,
9+
disableLoginPageInputs,
10+
enableLoginPageInputs,
11+
getLoginPageInputsEnabled,
12+
} from "../../../stores/login";
13+
import {
14+
showNoticeNotification,
15+
showErrorNotification,
16+
} from "../../../stores/notifications";
17+
import { Separator } from "../../common/Separator";
18+
19+
export function Login(): JSXElement {
20+
const [loginEmail, setLoginEmail] = createSignal("");
21+
const [loginPassword, setLoginPassword] = createSignal("");
22+
const [rememberMe, setRememberMe] = createSignal(true);
23+
24+
const handleSignInWithGoogle = async () => {
25+
if (!ConnectionState.get()) {
26+
showNoticeNotification("You are offline");
27+
return;
28+
}
29+
showLoginPageLoader();
30+
disableLoginPageInputs();
31+
const data = await signInWithGoogle(rememberMe());
32+
hideLoginPageLoader();
33+
if (!data.success) {
34+
showErrorNotification("Failed to sign in with Google: " + data.message);
35+
enableLoginPageInputs();
36+
}
37+
};
38+
39+
const handleSignInWithGitHub = async () => {
40+
if (!ConnectionState.get()) {
41+
showNoticeNotification("You are offline");
42+
return;
43+
}
44+
showLoginPageLoader();
45+
disableLoginPageInputs();
46+
const data = await signInWithGitHub(rememberMe());
47+
hideLoginPageLoader();
48+
if (!data.success) {
49+
showErrorNotification("Failed to sign in with GitHub: " + data.message);
50+
enableLoginPageInputs();
51+
}
52+
};
53+
54+
const handleSignIn = async (e: SubmitEvent) => {
55+
e.preventDefault();
56+
if (!ConnectionState.get()) {
57+
showNoticeNotification("You are offline");
58+
return;
59+
}
60+
if (loginEmail() === "" || loginPassword() === "") {
61+
showNoticeNotification("Please fill in all fields");
62+
return;
63+
}
64+
showLoginPageLoader();
65+
disableLoginPageInputs();
66+
const data = await signIn(loginEmail(), loginPassword(), rememberMe());
67+
hideLoginPageLoader();
68+
if (!data.success) {
69+
showErrorNotification("Failed to sign in: " + data.message);
70+
enableLoginPageInputs();
71+
}
72+
};
73+
74+
return (
75+
<div class="grid grid-cols-1 justify-center gap-2">
76+
<div class="inline-flex items-baseline text-sub">
77+
<i class="fas fa-sign-in-alt mr-[0.5em]"></i>
78+
login
79+
</div>
80+
<div class="grid grid-cols-2 gap-4">
81+
<button
82+
type="button"
83+
disabled={!getLoginPageInputsEnabled()}
84+
onClick={handleSignInWithGoogle}
85+
>
86+
<i class="fab fa-google"></i>
87+
</button>
88+
<button
89+
type="button"
90+
disabled={!getLoginPageInputsEnabled()}
91+
onClick={handleSignInWithGitHub}
92+
>
93+
<i class="fab fa-github"></i>
94+
</button>
95+
</div>
96+
<form class="grid w-full gap-2" onSubmit={handleSignIn}>
97+
<Separator text="or" />
98+
<input
99+
name="current-email"
100+
type="email"
101+
class="w-68"
102+
placeholder="email"
103+
// oxlint-disable-next-line react/no-unknown-property
104+
autocomplete="current-email"
105+
disabled={!getLoginPageInputsEnabled()}
106+
onInput={(e) => setLoginEmail(e.target.value)}
107+
/>
108+
<input
109+
name="current-password"
110+
type="password"
111+
class="w-68"
112+
placeholder="password"
113+
// oxlint-disable-next-line react/no-unknown-property
114+
autocomplete="current-password"
115+
disabled={!getLoginPageInputsEnabled()}
116+
onInput={(e) => setLoginPassword(e.target.value)}
117+
/>
118+
<div>
119+
<label class="flex h-6 cursor-pointer items-center gap-2">
120+
<input
121+
type="checkbox"
122+
checked={rememberMe()}
123+
onChange={(e) => setRememberMe(e.target.checked)}
124+
disabled={!getLoginPageInputsEnabled()}
125+
/>
126+
<div>remember me</div>
127+
</label>
128+
</div>
129+
<button
130+
type="submit"
131+
class="signIn"
132+
disabled={!getLoginPageInputsEnabled()}
133+
>
134+
<i class="fas fa-sign-in-alt"></i>
135+
sign in
136+
</button>
137+
</form>
138+
<button
139+
type="button"
140+
class="text text-xs"
141+
style={{ "justify-content": "right" }}
142+
onClick={() => ForgotPasswordModal.show()}
143+
disabled={!getLoginPageInputsEnabled()}
144+
>
145+
forgot password?
146+
</button>
147+
</div>
148+
);
149+
}

‎frontend/src/ts/components/pages/login/LoginPage.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useQuery } from "@tanstack/solid-query";
2+
import { JSXElement, Show } from "solid-js";
3+
4+
import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
5+
import { getActivePage } from "../../../signals/core";
6+
import { getLoginPageLoader } from "../../../stores/login";
7+
import { Conditional } from "../../common/Conditional";
8+
import { Login } from "./Login";
9+
import { Register } from "./Register";
10+
11+
export function LoginPage(): JSXElement {
12+
const isOpen = () => getActivePage() === "login";
13+
14+
const serverConfig = useQuery(() => getServerConfigurationQueryOptions());
15+
const isSignUpDisabled = (): boolean =>
16+
!(serverConfig.data?.users.signUp ?? true);
17+
18+
return (
19+
<Show when={isOpen()}>
20+
<Show when={getLoginPageLoader()}>
21+
<div class="fixed top-1/2 left-1/2 z-1 -translate-x-1/2 -translate-y-1/2 text-3xl text-main transition-opacity duration-250">
22+
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
23+
</div>
24+
</Show>
25+
<Conditional
26+
if={isSignUpDisabled()}
27+
then={
28+
<div class="grid h-full place-items-center">
29+
<p>
30+
Login/Signup is disabled or the server is down/under maintenance.
31+
</p>
32+
</div>
33+
}
34+
else={
35+
<div class="flex h-full items-center justify-around gap-4">
36+
<Register />
37+
<Login />
38+
</div>
39+
}
40+
/>
41+
</Show>
42+
);
43+
}

0 commit comments

Comments
 (0)