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>
+  )
+}