サインイン処理追加
This commit is contained in:
parent
61669a1179
commit
767dd7a822
|
|
@ -24,3 +24,7 @@ body {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconify {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "uwuzu軽量クライアント",
|
title: "uwuzu Light Client",
|
||||||
description: "(自称)超軽量uwuzuクライアントです。",
|
description: "(自称)超軽量uwuzuクライアントです。",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,17 @@
|
||||||
"use client";
|
"use client";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
// ログイン済みの場合ホームへ移動
|
||||||
|
const router = useRouter();
|
||||||
|
if (typeof Cookies.get("host") !== "undefined") {
|
||||||
|
router.push("/home");
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`
|
className={`
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,231 @@
|
||||||
export default function SignIn() {
|
"use client";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
function asterisks(num: number) {
|
||||||
|
let result: string = "";
|
||||||
|
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
result+= "*";
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SignIn() {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
// ログイン済みの場合ホームへ移動
|
||||||
|
const router = useRouter();
|
||||||
|
if (typeof Cookies.get("host") !== "undefined") {
|
||||||
|
router.push("/home");
|
||||||
|
}
|
||||||
|
|
||||||
|
const Submit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
|
||||||
|
// データを変数に代入
|
||||||
|
const host: string = e.currentTarget.host.value;
|
||||||
|
const token: string = e.currentTarget.token.value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// APIテスト
|
||||||
|
const test = await (await fetch(
|
||||||
|
`https://${host}/api/me/?token=${token}`
|
||||||
|
)).json();
|
||||||
|
|
||||||
|
if (typeof test.error_code !== "undefined") {
|
||||||
|
alert(`
|
||||||
|
トークンが誤っています。
|
||||||
|
`);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
Cookies.set("host", host, { expires: 999 });
|
||||||
|
Cookies.set("token", token, { expires: 999 });
|
||||||
|
|
||||||
|
alert(`${test.username}へログインしました！`);
|
||||||
|
router.push("/home");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
alert(`
|
||||||
|
サーバーとの通信に失敗しました。
|
||||||
|
プロトコルあるいはホストが誤っている可能性があります。
|
||||||
|
|
||||||
|
|
||||||
|
詳細エラー: ${err}
|
||||||
|
`);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1 className={`
|
||||||
|
text-[2rem]
|
||||||
|
font-bold
|
||||||
|
w-full
|
||||||
|
`}>
|
||||||
|
サインイン
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<form
|
||||||
|
className={`
|
||||||
|
w-full
|
||||||
|
max-w-[40rem]
|
||||||
|
bg-white
|
||||||
|
shadow-md
|
||||||
|
rounded
|
||||||
|
px-8
|
||||||
|
pt-6
|
||||||
|
pb-8
|
||||||
|
mt-4
|
||||||
|
m-[auto]
|
||||||
|
`}
|
||||||
|
onSubmit={Submit}
|
||||||
|
>
|
||||||
|
{loading && (
|
||||||
|
<div className={`
|
||||||
|
mb-[1rem]
|
||||||
|
text-[#000000]
|
||||||
|
`}>
|
||||||
|
<Icon icon="svg-spinners:6-dots-scale" width={32} height={32} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-4 w-full">
|
||||||
|
<label
|
||||||
|
className={`
|
||||||
|
block
|
||||||
|
text-gray-700
|
||||||
|
text-sm
|
||||||
|
font-bold
|
||||||
|
mb-2
|
||||||
|
`}
|
||||||
|
htmlFor="host"
|
||||||
|
>
|
||||||
|
サーバーホスト
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className={`
|
||||||
|
inline-block
|
||||||
|
relative
|
||||||
|
w-[20%]
|
||||||
|
`}>
|
||||||
|
<select
|
||||||
|
className={`
|
||||||
|
block
|
||||||
|
appearance-none
|
||||||
|
text-gray-700
|
||||||
|
bg-white
|
||||||
|
border
|
||||||
|
border-gray-700
|
||||||
|
w-[100%]
|
||||||
|
px-2
|
||||||
|
py-2
|
||||||
|
pr-2
|
||||||
|
rounded
|
||||||
|
shadow
|
||||||
|
leading-tight
|
||||||
|
focus:outline-none
|
||||||
|
focus:shadow-outline
|
||||||
|
`}
|
||||||
|
name="protocol"
|
||||||
|
disabled={true}
|
||||||
|
>
|
||||||
|
<option style={{display: "none"}}>
|
||||||
|
https://
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<input
|
||||||
|
className={`
|
||||||
|
shadow
|
||||||
|
appearance-none
|
||||||
|
border
|
||||||
|
rounded
|
||||||
|
w-[80%]
|
||||||
|
py-2
|
||||||
|
px-3
|
||||||
|
text-gray-700
|
||||||
|
leading-tight
|
||||||
|
focus:outline-none
|
||||||
|
focus:shadow-outline
|
||||||
|
`}
|
||||||
|
name="host"
|
||||||
|
type="text"
|
||||||
|
placeholder="uwuzu.netなど"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="mb-6">
|
||||||
|
<label
|
||||||
|
className={`
|
||||||
|
text-gray-700
|
||||||
|
text-sm
|
||||||
|
font-bold
|
||||||
|
mb-2
|
||||||
|
`}
|
||||||
|
htmlFor="token"
|
||||||
|
>
|
||||||
|
APIトークン
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
className={`
|
||||||
|
shadow
|
||||||
|
appearance-none
|
||||||
|
border
|
||||||
|
rounded
|
||||||
|
w-full
|
||||||
|
py-2
|
||||||
|
px-3
|
||||||
|
text-gray-700
|
||||||
|
mb-3
|
||||||
|
leading-tight
|
||||||
|
focus:outline-none
|
||||||
|
focus:shadow-outline
|
||||||
|
`}
|
||||||
|
name="token"
|
||||||
|
type="password"
|
||||||
|
minLength={62}
|
||||||
|
maxLength={62}
|
||||||
|
placeholder={asterisks(32)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
className={`
|
||||||
|
bg-blue-500
|
||||||
|
hover:bg-blue-700
|
||||||
|
text-white
|
||||||
|
font-bold
|
||||||
|
py-2
|
||||||
|
px-4
|
||||||
|
rounded
|
||||||
|
focus:outline-none
|
||||||
|
focus:shadow-outline
|
||||||
|
m-[auto]
|
||||||
|
`}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
サインイン
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,21 +32,9 @@ export default function Footer() {
|
||||||
target=""
|
target=""
|
||||||
/>
|
/>
|
||||||
<Content
|
<Content
|
||||||
name="開発者"
|
name="このサイトについて"
|
||||||
icon="material-symbols:terminal"
|
icon="material-symbols:info"
|
||||||
link="/developers/"
|
link="/about/"
|
||||||
target=""
|
|
||||||
/>
|
|
||||||
<Content
|
|
||||||
name="ソースコード"
|
|
||||||
icon="simple-icons:gitea"
|
|
||||||
link="https://gitea.last2014.com/last2014/uwuzu_light_client"
|
|
||||||
target="_blank"
|
|
||||||
/>
|
|
||||||
<Content
|
|
||||||
name="ライセンス"
|
|
||||||
icon="material-symbols:license"
|
|
||||||
link="/license/"
|
|
||||||
target=""
|
target=""
|
||||||
/>
|
/>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
(async () => {
|
||||||
|
const req = await fetch("https://uwuzu.net/api/me", {
|
||||||
|
method: "POST",
|
||||||
|
cache: "no-store",
|
||||||
|
body: JSON.stringify({
|
||||||
|
token: "RpC9X0BuNUsaOxLkw3Pf5YGMIEHVtgldDnrbWKzhFvjT7eZ4qJ6m81Si2oQcAy",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const res = await req.json();
|
||||||
|
|
||||||
|
console.log(res);
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue