221 lines
8.1 KiB
TypeScript
221 lines
8.1 KiB
TypeScript
import formatPhone from "@/shared/lib/formatPhone";
|
|
import { Button } from "@/shared/ui/button";
|
|
import { Input } from "@/shared/ui/input";
|
|
import { Label } from "@/shared/ui/label";
|
|
import clsx from "clsx";
|
|
import { ArrowLeft, Mail, Phone, Save, User } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
export default function EditUser() {
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
|
|
const [formData, setFormData] = useState({
|
|
username: "",
|
|
email: "",
|
|
phone: "+998",
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
|
|
useEffect(() => {
|
|
setFormData({
|
|
username: "john_doe",
|
|
email: "john@example.com",
|
|
phone: "+998901234567",
|
|
});
|
|
}, [id]);
|
|
|
|
const validateForm = () => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!formData.username.trim()) {
|
|
newErrors.username = "Username majburiy";
|
|
} else if (formData.username.length < 3) {
|
|
newErrors.username =
|
|
"Username kamida 3 ta belgidan iborat bo'lishi kerak";
|
|
}
|
|
|
|
if (!formData.email.trim() && !formData.phone.trim()) {
|
|
newErrors.contact = "Email yoki telefon raqami kiritilishi shart";
|
|
}
|
|
|
|
if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
newErrors.email = "Email formati noto'g'ri";
|
|
}
|
|
|
|
if (
|
|
formData.phone &&
|
|
!/^\+998\d{9}$/.test(formData.phone.replace(/\s/g, ""))
|
|
) {
|
|
newErrors.phone = "Telefon raqami formati: +998901234567";
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (validateForm()) {
|
|
navigate("/");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-4 md:p-8">
|
|
<div className="w-full mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigate(-1)}
|
|
className="mb-4 -ml-2 text-slate-400 cursor-pointer hover:text-slate-100 hover:bg-slate-800/50"
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Orqaga
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-700 flex items-center justify-center shadow-lg shadow-emerald-500/20">
|
|
<User className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-100">Tahrirlash</h1>
|
|
<p className="text-slate-400 text-sm">Ma'lumotlarni yangilang</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Card */}
|
|
<div className="bg-slate-900/50 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-800/50 p-6 md:p-8">
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
{/* Username */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="username"
|
|
className="text-slate-300 font-medium text-sm"
|
|
>
|
|
Username <span className="text-red-400">*</span>
|
|
</Label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
|
|
<Input
|
|
id="username"
|
|
value={formData.username}
|
|
onChange={(e) => {
|
|
setFormData((p) => ({ ...p, username: e.target.value }));
|
|
setErrors((p) => ({ ...p, username: "" }));
|
|
}}
|
|
placeholder="john_doe"
|
|
className={clsx(
|
|
"h-11 pl-10 rounded-lg border transition-colors bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
|
|
errors.username
|
|
? "border-red-500/50 focus:border-red-500 bg-red-500/10"
|
|
: "border-slate-700/50 focus:border-emerald-500 hover:border-slate-600/50",
|
|
)}
|
|
/>
|
|
</div>
|
|
{errors.username && (
|
|
<p className="text-xs text-red-400">{errors.username}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="email"
|
|
className="text-slate-300 font-medium text-sm"
|
|
>
|
|
Email
|
|
</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => {
|
|
setFormData((p) => ({ ...p, email: e.target.value }));
|
|
setErrors((p) => ({ ...p, email: "", contact: "" }));
|
|
}}
|
|
placeholder="email@example.com"
|
|
className={clsx(
|
|
"h-11 pl-10 rounded-lg border transition-colors bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
|
|
errors.email
|
|
? "border-red-500/50 focus:border-red-500 bg-red-500/10"
|
|
: "border-slate-700/50 focus:border-emerald-500 hover:border-slate-600/50",
|
|
)}
|
|
/>
|
|
</div>
|
|
{errors.email && (
|
|
<p className="text-xs text-red-400">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="phone"
|
|
className="text-slate-300 font-medium text-sm"
|
|
>
|
|
Telefon raqami
|
|
</Label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
value={formatPhone(formData.phone)}
|
|
onChange={(e) => {
|
|
setFormData((p) => ({ ...p, phone: e.target.value }));
|
|
setErrors((p) => ({ ...p, phone: "", contact: "" }));
|
|
}}
|
|
placeholder="+998 90 123 45 67"
|
|
className={clsx(
|
|
"h-11 pl-10 rounded-lg border transition-colors bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
|
|
errors.phone
|
|
? "border-red-500/50 focus:border-red-500 bg-red-500/10"
|
|
: "border-slate-700/50 focus:border-emerald-500 hover:border-slate-600/50",
|
|
)}
|
|
/>
|
|
</div>
|
|
{errors.phone && (
|
|
<p className="text-xs text-red-400">{errors.phone}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Contact Error */}
|
|
{errors.contact && (
|
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3">
|
|
<p className="text-xs text-amber-400">{errors.contact}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3 pt-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => navigate(-1)}
|
|
className="flex-1 h-11 rounded-lg border-slate-700/50 bg-slate-800/50 hover:bg-slate-700/50 text-slate-300 hover:text-slate-100 font-medium cursor-pointer"
|
|
>
|
|
Bekor qilish
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
className="flex-1 h-11 rounded-lg bg-gradient-to-r cursor-pointer text-md from-emerald-600 to-teal-700 hover:from-emerald-700 hover:to-teal-800 text-white font-medium shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-all"
|
|
>
|
|
<Save className="!w-5 !h-5 mr-2" />
|
|
Yangilash
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|