Add login

src/app/@auth/(.)login/page.tsx

@@ -1,3 +1,74 @@
+"use client";
+
+import {
+	LoginForm,
+	loginFormFieldNames,
+	loginFormSchema,
+} from "@/entities/user";
+import { UserService } from "@/entities/user/user";
+import { Modal } from "@/shared/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { mutate } from "swr";
+
 export default function Login() {
-  return <>123</>;
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<LoginForm>({ resolver: zodResolver(loginFormSchema) });
+
+	const router = useRouter();
+
+	const onSubmit: SubmitHandler<LoginForm> = async (data) => {
+		const userInfo = await UserService.Login(data);
+		mutate("user", userInfo);
+		router.back();
+	};
+
+	return (
+		<Modal>
+			<div className="">
+				<form
+					onSubmit={handleSubmit(onSubmit)}
+					className="flex flex-col items-center justify-evenly"
+				>
+					<h2 className="pb-4 text-4xl">.Torrent</h2>
+					{(["username", "password"] as ("username" | "password")[]).map(
+						(field) => (
+							<label
+								className="flex flex-col items-start relative w-64 py-1"
+								key={field}
+							>
+								<input
+									{...register(field)}
+									className="peer/search w-full rounded-lg bg-bg4 px-2 h-10"
+									placeholder=" "
+									autoComplete="off"
+								/>
+								<span
+									className="peer-focus/search:opacity-0 
+                  				peer-[:not(:placeholder-shown)]/search:opacity-0 
+                  				transition-opacity h-0 flex items-center relative bottom-5 left-4
+								text-lg"
+								>
+									{loginFormFieldNames[field]}
+								</span>
+								<p className="text-sm text-err w-full text-center">
+									{errors[field]?.message}
+								</p>
+							</label>
+						)
+					)}
+
+					<input
+						type="submit"
+						value="Войти"
+						className="bg-ac0 mt-2 p-1 px-4 rounded-lg"
+					/>
+				</form>
+			</div>
+		</Modal>
+	);
 }