-
- {phone.length > 0 &&
- t('auth.entered_digits', { count: phone.length })}
-
+ {/* Digit counter / complete hint */}
+
+
+ {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+
{phone.length === 9 && (
-
- ✓ {t('auth.full')}
+
+ ✓ To‘liq
)}
+
{error}
)}
-
+
- {/* DIVIDER */}
-
-
-
-
-
-
- Ro‘yhatdan o‘tish
-
-
+ {/* Divider */}
+
+
+
+ yoki
+
+
+
+ {/* Register hint */}
+
+ Hisobingiz yo‘qmi?
+
+ Ro‘yxatdan o‘tish
+
+
diff --git a/src/features/auth/login/ui/index.ts b/src/features/auth/login/ui/index.ts
index f905d91..8d518e4 100644
--- a/src/features/auth/login/ui/index.ts
+++ b/src/features/auth/login/ui/index.ts
@@ -1,2 +1,2 @@
// Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
-export { MotionWrapper } from './motion';
+export { LoginForm } from './form';
diff --git a/src/features/auth/model.tsx b/src/features/auth/model.tsx
new file mode 100644
index 0000000..cbdb802
--- /dev/null
+++ b/src/features/auth/model.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { AnimatePresence } from 'framer-motion';
+import { LoginForm } from './login/ui';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
+import { RegisterForm } from './register/ui';
+function AuthModals() {
+ const openLoginModal = useLoginModal((state) => state.openLoginModal);
+ const openRegisterModal = useRegisterModal(
+ (state) => state.openRegisterModal,
+ );
+ return (
+
+
+ {openLoginModal && }{' '}
+ {openRegisterModal && }
+
+
+ );
+}
+
+export { AuthModals };
diff --git a/src/features/auth/register/lib/registerZustand.ts b/src/features/auth/register/lib/registerZustand.ts
new file mode 100644
index 0000000..d9dbe9c
--- /dev/null
+++ b/src/features/auth/register/lib/registerZustand.ts
@@ -0,0 +1,41 @@
+import { create } from 'zustand';
+
+export interface Registertype {
+ name: string;
+ surname: string;
+ phone: string;
+ oferta?: boolean;
+}
+
+interface RegisterZustandType {
+ registerData: Registertype;
+ setItem: (key: keyof Registertype, value: string) => void;
+ setOferta: (value: boolean) => void;
+ setRegisterData: (data: Registertype) => void;
+ clearRegisterData: () => void;
+}
+
+const INITIAL: Registertype = {
+ name: '',
+ surname: '',
+ phone: '',
+ oferta: false,
+};
+
+export const useRegisterZustand = create
((set) => ({
+ registerData: INITIAL,
+
+ setItem: (key, value) =>
+ set((state) => ({
+ registerData: { ...state.registerData, [key]: value },
+ })),
+
+ setOferta: (value) =>
+ set((state) => ({
+ registerData: { ...state.registerData, oferta: value },
+ })),
+
+ setRegisterData: (data) => set({ registerData: data }),
+
+ clearRegisterData: () => set({ registerData: INITIAL }),
+}));
diff --git a/src/features/auth/register/lib/useRegisterForm.ts b/src/features/auth/register/lib/useRegisterForm.ts
new file mode 100644
index 0000000..9a3a3c3
--- /dev/null
+++ b/src/features/auth/register/lib/useRegisterForm.ts
@@ -0,0 +1,64 @@
+import { useCallback, useState } from 'react';
+import { useRegisterZustand } from './registerZustand';
+import { validateRegister, RegisterErrors } from './validateRegister';
+
+export function useRegisterForm() {
+ const { registerData, setItem, setOferta, clearRegisterData } =
+ useRegisterZustand();
+ const [errors, setErrors] = useState({});
+ const [loading, setLoading] = useState(false);
+ const [success, setSuccess] = useState(false);
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setItem(name as keyof typeof registerData, value);
+ // clear the error for this field on change
+ setErrors((prev) => ({ ...prev, [name]: undefined }));
+ },
+ [setItem],
+ );
+
+ const handleOferta = useCallback(
+ (e: React.ChangeEvent) => {
+ setOferta(e.target.checked);
+ setErrors((prev) => ({ ...prev, oferta: undefined }));
+ },
+ [setOferta],
+ );
+
+ const handleSubmit = useCallback(
+ async (e: React.FormEvent) => {
+ e.preventDefault();
+ const validationErrors = validateRegister(registerData);
+ if (Object.keys(validationErrors).length > 0) {
+ setErrors(validationErrors);
+ return;
+ }
+
+ setLoading(true);
+ try {
+ // Replace with your real API call:
+ // await api.post('/register', registerData);
+ await new Promise((r) => setTimeout(r, 1200)); // simulated delay
+ setSuccess(true);
+ clearRegisterData();
+ } catch {
+ setErrors({ name: 'Something went wrong. Please try again.' });
+ } finally {
+ setLoading(false);
+ }
+ },
+ [registerData, clearRegisterData],
+ );
+
+ return {
+ registerData,
+ errors,
+ loading,
+ success,
+ handleChange,
+ handleOferta,
+ handleSubmit,
+ };
+}
diff --git a/src/features/auth/register/lib/validateRegister.ts b/src/features/auth/register/lib/validateRegister.ts
new file mode 100644
index 0000000..898b29a
--- /dev/null
+++ b/src/features/auth/register/lib/validateRegister.ts
@@ -0,0 +1,40 @@
+export interface RegisterErrors {
+ name?: string;
+ surname?: string;
+ phone?: string;
+ oferta?: string;
+}
+
+export function validateRegister(data: {
+ name: string;
+ surname: string;
+ phone: string;
+ oferta?: boolean;
+}): RegisterErrors {
+ const errors: RegisterErrors = {};
+
+ if (!data.name.trim()) {
+ errors.name = 'Name is required';
+ } else if (data.name.trim().length < 2) {
+ errors.name = 'Name must be at least 2 characters';
+ }
+
+ if (!data.surname.trim()) {
+ errors.surname = 'Surname is required';
+ } else if (data.surname.trim().length < 2) {
+ errors.surname = 'Surname must be at least 2 characters';
+ }
+
+ const digits = data.phone.replace(/\D/g, '');
+ if (!digits) {
+ errors.phone = 'Phone is required';
+ } else if (digits.length !== 9) {
+ errors.phone = 'Enter a valid 9-digit phone number';
+ }
+
+ if (!data.oferta) {
+ errors.oferta = 'You must accept the terms to continue';
+ }
+
+ return errors;
+}
diff --git a/src/features/auth/register/ui/form.tsx b/src/features/auth/register/ui/form.tsx
new file mode 100644
index 0000000..9db4a5f
--- /dev/null
+++ b/src/features/auth/register/ui/form.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import { useRegisterForm } from '../lib/useRegisterForm';
+import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';
+import PhonePrefix from '@/shared/ui/phonePrefix';
+
+function Field({
+ id,
+ label,
+ type = 'text',
+ placeholder,
+ value,
+ name,
+ onChange,
+ error,
+}: {
+ id: string;
+ label: string;
+ type?: string;
+ placeholder?: string;
+ value: string;
+ name: string;
+ onChange: (e: React.ChangeEvent) => void;
+ error?: string;
+}) {
+ return (
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ );
+}
+
+export function RegisterFormUI() {
+ const {
+ registerData,
+ errors,
+ loading,
+ success,
+ handleChange,
+ handleOferta,
+ handleSubmit,
+ } = useRegisterForm();
+ const [phone, setPhone] = React.useState(registerData.phone || '');
+ const [isFocused, setIsFocused] = React.useState(false);
+ const handlePhoneChange = useCallback(
+ (e: React.ChangeEvent) => {
+ setPhone(normalizeDigits(e.target.value));
+ },
+ [setPhone],
+ );
+
+ // ── Success state ──────────────────────────────────────
+ if (success) {
+ return (
+
+
+
+ ✓
+
+
+ You‘re registered
+
+
+ We‘ll be in touch shortly.
+
+
+
+ {/* Header */}
+
+ Create account
+
+
+ Register
+
+
+ Fill in your details to get started.
+
+
+
+
+
+
+ {/* Close button */}
+
+
+
+
+
+
+
+
+ {/* ── Header ────────────────────────────────────────────────────── */}
+
+
+
+ Originality Check
+
+
+ Submit Your Document
+
+
+ Upload a document to verify its originality. Results are typically
+ ready within a few minutes.
+
+
+
+ {/* ── Card ──────────────────────────────────────────────────────── */}
+
+ {/* Progress bar accent */}
+
+
+
+
+
+ {/* Footer note */}
+
+ Your document is processed securely and not stored beyond the analysis
+ period.
+
+
+
+
+ {children}
+ {error && (
+
+
+ {error}
+
+ )}
+
+ {icon && {icon}}
+ {value}
+
+ Auto-filled
+
+
+ );
+}
+
+// ─── FileUploadField ─────────────────────────────────────────────────────────
+
+interface FileUploadFieldProps {
+ file: File | null;
+ onFileChange: (file: File | null) => void;
+ hasError?: boolean;
+ accept?: string;
+}
+
+export function FileUploadField({
+ file,
+ onFileChange,
+ hasError,
+ accept = '.pdf,.doc,.docx,.txt',
+}: FileUploadFieldProps) {
+ const inputRef = React.useRef(null);
+
+ const handleChange = (e: React.ChangeEvent) => {
+ const selected = e.target.files?.[0] ?? null;
+ onFileChange(selected);
+ // Reset so the same file can be re-selected after removal
+ e.target.value = '';
+ };
+
+ const handleRemove = () => {
+ onFileChange(null);
+ };
+
+ const formatBytes = (bytes: number) => {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+ };
+
+ return (
+
+
+
+ {!file ? (
+
+ ) : (
+
+
+
+
+
+
+ {file.name}
+
+
{formatBytes(file.size)}
+
+
+
+ )}
+
+
+ {isSuccess ? '✓' : '✕'}
+
+
+ {message}
+
+
+
-
-
- {/* Logo */}
-
+
- © {new Date().getFullYear()} {PRODUCT_INFO.creator}. All rights
+ © {new Date().getFullYear()} Felix IT Solutions. All rights
reserved.
diff --git a/src/widgets/navbar/ui/authButtons.tsx b/src/widgets/navbar/ui/authButtons.tsx
index 8822376..6f4b032 100644
--- a/src/widgets/navbar/ui/authButtons.tsx
+++ b/src/widgets/navbar/ui/authButtons.tsx
@@ -1,5 +1,4 @@
'use client';
-import { useLoginModal } from '@/features/auth/login/lib/togle';
import { Link } from '@/shared/config/i18n/navigation';
import { Button } from '@/shared/ui/button';
import { useUserLogin } from '@/shared/zustand/userLogin';
@@ -11,6 +10,7 @@ import {
} from '@/shared/ui/navigation-menu';
import SubMenuLink from './SubMenuLink';
import { ChangeLang } from './ChangeLang';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
function AuthButtons() {
const auth = {
@@ -24,6 +24,9 @@ function AuthButtons() {
];
const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+ const toggleRegisterModal = useRegisterModal(
+ (state) => state.toggleRegisterModal,
+ );
const user = useUserLogin((state) => state.user);
if (user) {
@@ -49,7 +52,7 @@ function AuthButtons() {
-