Add user creation functionality: implement API endpoint for creating new users, including request handling and response management. Update frontend to support user creation with a new form in the UsersPanel, integrating role selection and input validation. Enhance i18n for new user-related strings.

frontend/src/features/admin/users/UsersPanel.tsx

@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next'
 import { HttpError } from '@/shared/api/client'
 import { Badge } from '@/shared/ui/badge'
 import { Button } from '@/shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card'
 import { Input } from '@/shared/ui/input'
+import { Label } from '@/shared/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { toast } from '@/shared/ui/toast-store'
 import { changeUserRole } from '@/features/admin/roles/api'
 import { listRoles } from '@/features/admin/roles/api'
-import { blockUser, deleteUser, listUsers, unblockUser } from './api'
+import { blockUser, createUser, deleteUser, listUsers, unblockUser } from './api'
 
 const PAGE_SIZE = 20
 
@@ -19,6 +21,9 @@ export function UsersPanel() {
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [roleId, setRoleId] = useState<string>('')
+  const [newUserName, setNewUserName] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [newRoleId, setNewRoleId] = useState('')
 
   const { data: roles } = useQuery({ queryKey: ['admin', 'roles'], queryFn: listRoles })
   const { data, isLoading } = useQuery({
@@ -34,18 +39,90 @@ export function UsersPanel() {
   const unblockMutation = useMutation({ mutationFn: unblockUser, onSuccess: invalidate, onError })
   const deleteMutation = useMutation({ mutationFn: deleteUser, onSuccess: invalidate, onError })
   const changeRoleMutation = useMutation({
-    mutationFn: ({ userId, roleId: newRoleId }: { userId: string; roleId: string }) =>
-      changeUserRole(userId, newRoleId),
+    mutationFn: ({ userId, roleId: nextRoleId }: { userId: string; roleId: string }) =>
+      changeUserRole(userId, nextRoleId),
     onSuccess: invalidate,
     onError,
   })
 
+  // Роль по умолчанию для новой учётки — «user» (если есть), иначе первая роль.
+  const defaultRoleId = roles?.find((r) => r.name === 'user')?.id ?? roles?.[0]?.id ?? ''
+  const effectiveNewRoleId = newRoleId || defaultRoleId
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      createUser({
+        userName: newUserName.trim(),
+        password: newPassword,
+        roleId: effectiveNewRoleId,
+      }),
+    onSuccess: () => {
+      setNewUserName('')
+      setNewPassword('')
+      setNewRoleId('')
+      toast.success(t('admin.users.created'))
+      invalidate()
+    },
+    onError,
+  })
+
+  const canCreate =
+    newUserName.trim().length >= 3 && newPassword.length >= 8 && effectiveNewRoleId !== ''
+
   const totalPages = data ? Math.max(1, Math.ceil(data.total / PAGE_SIZE)) : 1
 
   return (
     <div className="flex flex-col gap-4">
       <h2 className="crt-glow text-xl font-semibold">{t('admin.users.title')}</h2>
 
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('admin.users.createTitle')}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.users.userName')}</Label>
+            <Input
+              className="w-56"
+              value={newUserName}
+              onChange={(e) => setNewUserName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.users.password')}</Label>
+            <Input
+              type="password"
+              className="w-56"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.users.role')}</Label>
+            <Select value={effectiveNewRoleId} onValueChange={setNewRoleId}>
+              <SelectTrigger className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {roles?.map((role) => (
+                  <SelectItem key={role.id} value={role.id}>
+                    {role.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            size="sm"
+            disabled={!canCreate || createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+          >
+            {t('admin.users.create')}
+          </Button>
+          <p className="w-full text-xs text-muted-foreground">{t('admin.users.passwordHint')}</p>
+        </CardContent>
+      </Card>
+
       <div className="flex flex-wrap gap-2">
         <Input
           className="max-w-xs"

frontend/src/features/admin/users/api.ts

@@ -1,5 +1,5 @@
 import { apiRequest } from '@/shared/api/client'
-import type { PagedList, UserSummaryDto } from '@/shared/api/types'
+import type { CreatedIdResponse, PagedList, UserSummaryDto } from '@/shared/api/types'
 
 export type ListUsersParams = {
   page: number
@@ -21,6 +21,10 @@ export function listUsers(params: ListUsersParams) {
   return apiRequest<PagedList<UserSummaryDto>>(`/admin/users?${query.toString()}`)
 }
 
+export function createUser(body: { userName: string; password: string; roleId: string }) {
+  return apiRequest<CreatedIdResponse>('/admin/users', { method: 'POST', body })
+}
+
 export function blockUser(id: string) {
   return apiRequest<void>(`/admin/users/${id}/block`, { method: 'POST' })
 }