Merge pull request 'サインイン処理追加' (#1) from main into develop
Reviewed-on: #1
This commit is contained in:
commit
0fec5d8f3a
|
|
@ -24,3 +24,7 @@ body {
|
|||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.iconify {
|
||||
display: inline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
|
|||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "uwuzu軽量クライアント",
|
||||
title: "uwuzu Light Client",
|
||||
description: "(自称)超軽量uwuzuクライアントです。",
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
"use client";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Cookies from "js-cookie";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
// ログイン済みの場合ホームへ移動
|
||||
const router = useRouter();
|
||||
if (typeof Cookies.get("host") !== "undefined") {
|
||||
router.push("/home");
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
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=""
|
||||
/>
|
||||
<Content
|
||||
name="開発者"
|
||||
icon="material-symbols:terminal"
|
||||
link="/developers/"
|
||||
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/"
|
||||
name="このサイトについて"
|
||||
icon="material-symbols:info"
|
||||
link="/about/"
|
||||
target=""
|
||||
/>
|
||||
</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