Implement username change functionality and enhance Telegram bot registration flow

- Added a new endpoint for changing usernames, allowing users to update their login credentials via the API.
- Integrated username change functionality into the settings page, providing a user-friendly interface for this action.
- Enhanced the Telegram bot to support user registration directly through the bot, including username generation and password delivery.
- Updated documentation to reflect the new username change endpoint and registration flow through the Telegram bot.

frontend/src/features/auth/api.ts

@@ -22,6 +22,10 @@ export function changePassword(currentPassword: string, newPassword: string) {
   return apiRequest<void>('/auth/change-password', { method: 'POST', body: { currentPassword, newPassword } })
 }
 
+export function changeUserName(newUserName: string) {
+  return apiRequest<void>('/auth/change-username', { method: 'POST', body: { newUserName } })
+}
+
 export function deleteAccount() {
   return apiRequest<void>('/auth/me', { method: 'DELETE' })
 }

frontend/src/features/settings/ChangeUserNameForm.tsx

@@ -0,0 +1,68 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { z } from 'zod'
+import { toast } from '@/shared/ui/toast-store'
+import { Button } from '@/shared/ui/button'
+import { Input } from '@/shared/ui/input'
+import { Label } from '@/shared/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/ui/card'
+import { HttpError } from '@/shared/api/client'
+import { changeUserName } from '@/features/auth/api'
+import { useAuthStore } from '@/features/auth/store'
+
+const schema = z.object({
+  newUserName: z
+    .string()
+    .min(3)
+    .max(32)
+    .regex(/^[a-zA-Z0-9_.-]+$/),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function ChangeUserNameForm() {
+  const { t } = useTranslation()
+  const user = useAuthStore((s) => s.user)
+  const setUser = useAuthStore((s) => s.setUser)
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ resolver: zodResolver(schema) })
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      await changeUserName(values.newUserName)
+      if (user) setUser({ ...user, userName: values.newUserName })
+      toast.success(t('settings.userNameChanged'))
+      reset()
+    } catch (error) {
+      const message =
+        error instanceof HttpError && error.status === 409 ? t('auth.duplicateUserName') : t('auth.genericError')
+      toast.error(message)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{t('settings.changeUserName')}</CardTitle>
+        {user && <CardDescription>{t('settings.changeUserNameHint', { current: user.userName })}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="newUserName">{t('settings.newUserName')}</Label>
+            <Input id="newUserName" autoComplete="username" {...register('newUserName')} />
+            {errors.newUserName && <p className="text-sm text-red-500">{t('auth.userNameHint')}</p>}
+          </div>
+          <Button type="submit" disabled={isSubmitting} className="self-start">
+            {t('settings.changeUserName')}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/routes/settings.tsx

@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { useRequireAuth } from '@/features/auth/guards'
 import { ChangePasswordForm } from '@/features/settings/ChangePasswordForm'
+import { ChangeUserNameForm } from '@/features/settings/ChangeUserNameForm'
 import { TelegramLinkCard } from '@/features/settings/TelegramLinkCard'
 import { DeleteAccountSection } from '@/features/settings/DeleteAccountSection'
 
@@ -17,6 +18,7 @@ function SettingsPage() {
     <div className="mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10">
       <h1 className="text-2xl font-semibold tracking-tight">{t('nav.settings')}</h1>
       <ChangePasswordForm />
+      <ChangeUserNameForm />
       <TelegramLinkCard />
       <DeleteAccountSection />
     </div>

frontend/src/shared/lib/i18n.ts

@@ -124,6 +124,10 @@ const resources = {
         currentPasswordInvalid: 'Неверный текущий пароль.',
         newPassword: 'Новый пароль',
         passwordChanged: 'Пароль изменён.',
+        changeUserName: 'Сменить логин',
+        changeUserNameHint: 'Текущий логин: {{current}}.',
+        newUserName: 'Новый логин',
+        userNameChanged: 'Логин изменён.',
         telegramHint: 'Привязка Telegram нужна для входа без пароля и восстановления доступа.',
         telegramLinkedStatus: 'Привязан',
         link: 'Привязать Telegram',
@@ -391,6 +395,10 @@ const resources = {
         currentPasswordInvalid: 'Current password is incorrect.',
         newPassword: 'New password',
         passwordChanged: 'Password changed.',
+        changeUserName: 'Change username',
+        changeUserNameHint: 'Current username: {{current}}.',
+        newUserName: 'New username',
+        userNameChanged: 'Username changed.',
         telegramHint: 'Linking Telegram enables passwordless login and account recovery.',
         telegramLinkedStatus: 'Linked',
         link: 'Link Telegram',