initial layout

2026-01-19 23:19:58 +03:00
parent 749fda017c
commit 4688f65c5a
81 changed files with 4343 additions and 16 deletions
@@ -0,0 +1,114 @@
+"use client"
+
+import type { JSX } from "react"
+
+import { FunctionComponent } from "react"
+import { useForm } from "react-hook-form"
+
+import { useHookFormMask } from "use-mask-input"
+
+import api from "@shared/api"
+import { Button, Form, TextField } from "@shared/ui"
+
+import { IRegisterPageProps } from "../model/RegisterPage.d"
+import styles from "./RegisterPage.module.scss"
+
+interface IRegisterFormData {
+	username: string
+	email: string
+	password: string
+	first_name: string
+	last_name: string
+	phone_number?: string
+	avatar?: string
+}
+
+export const RegisterPage: FunctionComponent<
+	IRegisterPageProps
+> = (): JSX.Element => {
+	const { mutate, isPending } = api.useMutation("post", "/auth/register", {
+		onSuccess: (data) => {
+			console.log("Register successful:", data)
+		},
+		onError: (error) => {
+			console.error("Register failed:", error)
+		},
+	})
+
+	const { register, handleSubmit } = useForm<IRegisterFormData>()
+	const registerWithMask = useHookFormMask(register)
+
+	const onSubmit = (data: IRegisterFormData): void => {
+		const phone = data.phone_number?.trim()
+		const avatar = data.avatar?.trim()
+
+		mutate({
+			body: {
+				username: data.username,
+				email: data.email,
+				password: data.password,
+				first_name: data.first_name,
+				last_name: data.last_name,
+				phone_number: phone || undefined,
+				avatar: avatar || undefined,
+			},
+		})
+	}
+
+	return (
+		<div className={styles.root} data-testid="RegisterPage">
+			<Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+				<h1 className={styles.title}>Регистрация</h1>
+				<div className={styles.fields}>
+					<TextField
+						id="username"
+						label="Имя пользователя"
+						placeholder="Ваш никнейм"
+						{...register("username")}
+					/>
+					<TextField
+						id="email"
+						label="Email"
+						placeholder="you@example.com"
+						type="email"
+						{...register("email")}
+					/>
+					<TextField
+						id="password"
+						label="Пароль"
+						placeholder="Придумайте пароль"
+						type="password"
+						{...register("password")}
+					/>
+					<TextField
+						id="first_name"
+						label="Имя"
+						placeholder="Ваше имя"
+						{...register("first_name")}
+					/>
+					<TextField
+						id="last_name"
+						label="Фамилия"
+						placeholder="Ваша фамилия"
+						{...register("last_name")}
+					/>
+					<TextField
+						id="phone_number"
+						label="Номер телефона"
+						placeholder="+7 (___) ___-__-__"
+						{...registerWithMask("phone_number", "+7 (999) 999-99-99")}
+					/>
+					<TextField
+						id="avatar"
+						label="Аватар"
+						placeholder="Ссылка на изображение"
+						{...register("avatar")}
+					/>
+				</div>
+				<Button type="submit" variant="primary" disabled={isPending}>
+					Создать аккаунт
+				</Button>
+			</Form>
+		</div>
+	)
+}