Merge pull request 'サインイン処理追加' (#1) from main into develop

Reviewed-on: #1

src/app/globals.css

@@ -24,3 +24,7 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.iconify {
+  display: inline;
+}

src/app/layout.tsx

@@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "uwuzu軽量クライアント",
+  title: "uwuzu Light Client",
   description: "(自称)超軽量uwuzuクライアントです。",
 };
 

src/app/page.tsx

@@ -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={`

src/app/signin/page.tsx

@@ -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>
+  );
 }

src/components/footer/main.tsx

@@ -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>

test.ts

@@ -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);
+})();