initial commit, login page

2026-01-25 12:35:28 +00:00 · 2022-11-19 17:30:58 +01:00
commit 41b49d6306
35 changed files with 4674 additions and 0 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -0,0 +1,20 @@
+import { type AppType } from "next/dist/shared/lib/utils";
+
+import "../styles/globals.css";
+import { QueryClient } from "@tanstack/query-core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { AuthRedirect } from "../components/AuthRedirect";
+
+const queryClient = new QueryClient();
+
+const MyApp: AppType = ({ Component, pageProps }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthRedirect>
+        <Component {...pageProps} />
+      </AuthRedirect>
+    </QueryClientProvider>
+  );
+};
+
+export default MyApp;
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -0,0 +1,27 @@
+import { type NextPage } from "next";
+import Head from "next/head";
+import { Button } from "../components/Button";
+import { useLogoutMutation } from "../services/hooks";
+
+const Home: NextPage = () => {
+  const { mutate: logout } = useLogoutMutation();
+  const handleLogout = () => {
+    logout();
+  };
+  return (
+    <>
+      <Head>
+        <title>Todolist</title>
+        <meta name="description" content="Incubator todolist" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <header>
+        <h1>Todolist</h1>
+        <Button onClick={handleLogout}>Logout</Button>
+      </header>
+      <main>Hello</main>
+    </>
+  );
+};
+
+export default Home;
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import type { NextPage } from "next";
+import { Input } from "../components/Input";
+import { Button } from "../components/Button";
+import { useLoginMutation } from "../services/hooks";
+import { useRouter } from "next/router";
+import { useQueryClient } from "@tanstack/react-query";
+
+const Login: NextPage = () => {
+  const { mutateAsync: login } = useLoginMutation();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [remember, setRemember] = React.useState(true);
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handleRememberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRemember(e.target.checked);
+  };
+
+  const handleSubmit = () => {
+    login({
+      email,
+      password,
+      rememberMe: remember,
+    }).then(() => {
+      queryClient.invalidateQueries(["me"]);
+      router.push("/");
+    });
+  };
+
+  return (
+    <div className={"flex h-screen items-center justify-center"}>
+      <div className={"flex w-52 flex-col gap-3"}>
+        <label className={"flex flex-col gap-1"}>
+          Email
+          <Input value={email} onChange={handleEmailChange} type="email" />
+        </label>
+
+        <label className={"flex flex-col gap-1"}>
+          Password
+          <Input
+            type="password"
+            value={password}
+            onChange={handlePasswordChange}
+          />
+        </label>
+
+        <label className={"flex items-center gap-2"}>
+          <input
+            type={"checkbox"}
+            checked={remember}
+            onChange={handleRememberChange}
+          />
+          Remember me
+        </label>
+        <Button className={"w-full"} onClick={handleSubmit}>
+          Login
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Login;