archive.local
diff --git a/web/src/app/providers.tsx b/web/src/app/providers.tsx
new file mode 100644
index 0000000..7f7dfa6
--- /dev/null
+++ b/web/src/app/providers.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode, useState } from "react";
+
+export const Providers = ({ children }: { children: ReactNode }) => {
+ const [queryClient] = useState(
+ () =>
+ new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ }),
+ );
+
+ return (
+
{children}
+ );
+};
diff --git a/web/src/app/register/RegisterForm.tsx b/web/src/app/register/RegisterForm.tsx
new file mode 100644
index 0000000..51e117b
--- /dev/null
+++ b/web/src/app/register/RegisterForm.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import {
+ RegisterData,
+ useRegisterMutation,
+} from "@/api/auth/useRegisterMutation";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import dayjs from "dayjs";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+
+export const RegisterForm = () => {
+ const router = useRouter();
+ const mutation = useRegisterMutation();
+
+ const form = useForm
({
+ defaultValues: {
+ email: "",
+ password: "",
+ },
+ });
+
+ const onSubmit = form.handleSubmit((data) => {
+ mutation.mutate(data, {
+ onSuccess(resp) {
+ const expDate = dayjs().add(7, "days").toString();
+ document.cookie = `access_token=${resp.access_token}; SameSite=None; Secure; Expires=${expDate}; Path=/`;
+ router.push("/");
+ },
+ });
+ });
+
+ return (
+
+ );
+};
diff --git a/web/src/app/register/page.tsx b/web/src/app/register/page.tsx
new file mode 100644
index 0000000..b3c0779
--- /dev/null
+++ b/web/src/app/register/page.tsx
@@ -0,0 +1,18 @@
+import { RegisterForm } from "@/app/register/RegisterForm";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Register() {
+ const c = await cookies();
+ const token = c.get("access_token");
+ if (token) {
+ throw redirect("/");
+ }
+
+ return (
+
+
archive.local
+
+
+ );
+}
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
new file mode 100644
index 0000000..e17fbdc
--- /dev/null
+++ b/web/src/components/ui/Button.tsx
@@ -0,0 +1,30 @@
+import { clsx } from "clsx";
+import { forwardRef, JSX } from "react";
+
+const sizeClasses = {
+ medium: "py-2 px-4",
+};
+
+export type ButtonProps = JSX.IntrinsicElements["button"] & {
+ size?: keyof typeof sizeClasses;
+};
+
+export const Button = forwardRef(
+ ({ size = "medium", className, children, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+
+Button.displayName = "Button";
diff --git a/web/src/components/ui/Input.tsx b/web/src/components/ui/Input.tsx
new file mode 100644
index 0000000..2718853
--- /dev/null
+++ b/web/src/components/ui/Input.tsx
@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import { forwardRef, JSX, useId } from "react";
+
+export type InputProps = JSX.IntrinsicElements["input"] & {
+ label?: string;
+};
+
+export const Input = forwardRef(
+ ({ label, className, ...props }, ref) => {
+ const id = useId();
+
+ return (
+
+ {label && }
+
+
+ );
+ },
+);
+
+Input.displayName = "Input";
diff --git a/web/src/lib/axios.ts b/web/src/lib/axios.ts
new file mode 100644
index 0000000..2ac0bd2
--- /dev/null
+++ b/web/src/lib/axios.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export const $axios = axios.create({
+ baseURL: "http://localhost:5000",
+ withCredentials: true,
+});
+
+$axios.interceptors.request.use(
+ (config) => {
+ const token = localStorage.getItem("token");
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+ },
+ (error) => {
+ throw error;
+ },
+);