feat(api): ручки Фаз(ы) 1 — профиль, серверы, роли, админ инстанса
REST-слой Фазы 1 на huma (OpenAPI 3.1 генерируется из кода):
- профиль: GET/PATCH /users/@me, смена пароля со step-up, публичный профиль,
завершение онбординга (новая миграция 00003 с onboarding_completed_at);
- серверы: создание/изменение/удаление, join/leave, список серверов
пользователя, журнал действий;
- комнаты: список с учётом прав, создание/изменение/удаление;
- участники: список с профилями и ролями, никнейм, тайм-аут, исключение;
- роли: CRUD, выдача/снятие с проверкой иерархии и запретом выдачи прав выше
собственных;
- админ инстанса: публичная информация, настройки, серверы, пользователи,
аудит, выдача прав администратора со step-up; обход лимитов фиксируется в
аудите отдельной записью limits.bypass;
- движок прав: участие в сервере стало обязательным условием (IsMember),
не участник не получает прав роли @user; калькулятор прав общий для API и
Gateway, инвалидация кэша после изменений;
- Gateway: браузерный клиент аутентифицируется cookie на рукопожатии, IDENTIFY
без токена использует её; события GUILD/CHANNEL/MEMBER/ROLE рассылаются из
ручек, USER_UPDATE — адресно;
- ошибки huma отдаются в едином конверте {"error":{"code","message"}}.
Тесты: 8 сценариев API (профиль, жизненный цикл сервера и права, лимиты и
обход админом, иерархия ролей, тайм-аут, скрытие комнаты оверрайдом,
членство в движке прав, cookie-идентификация Gateway).
This commit is contained in:
@@ -0,0 +1,175 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { updateProfile, currentUserQueryKey, type UpdateProfileInput } from '@/api/users';
|
||||
import { ErrorNotice, LoadingNotice } from '@/components/ui/ErrorNotice';
|
||||
import { Field, SelectField, TextAreaField } from '@/components/ui/Field';
|
||||
import { Button, Card } from '@/components/ui/primitives';
|
||||
import { supportedLanguages, type SupportedLanguage } from '@/i18n';
|
||||
import { useCurrentUser } from '@/lib/hooks';
|
||||
import { useSessionStore } from '@/stores/session';
|
||||
import { userStatuses } from '@/api/types';
|
||||
|
||||
/** Профиль: отображаемое имя, «о себе», своё состояние, статус и язык. */
|
||||
export default function ProfileSettingsPage() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const currentUser = useCurrentUser();
|
||||
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const [bio, setBio] = useState('');
|
||||
const [customStatus, setCustomStatus] = useState('');
|
||||
const [customEmoji, setCustomEmoji] = useState('');
|
||||
const [status, setStatus] = useState<string>('online');
|
||||
const [locale, setLocale] = useState<SupportedLanguage>('ru');
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const user = currentUser.data;
|
||||
|
||||
useEffect(() => {
|
||||
if (user === undefined) {
|
||||
return;
|
||||
}
|
||||
setDisplayName(user.display_name);
|
||||
setBio(user.bio);
|
||||
setCustomStatus(user.custom_status);
|
||||
setCustomEmoji(user.custom_status_emoji);
|
||||
setStatus(user.status);
|
||||
setLocale(user.locale === 'en' ? 'en' : 'ru');
|
||||
}, [user]);
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: (input: UpdateProfileInput) => updateProfile(input),
|
||||
onSuccess: (updated) => {
|
||||
queryClient.setQueryData(currentUserQueryKey, updated);
|
||||
useSessionStore.getState().patchUser(updated);
|
||||
setSaved(true);
|
||||
if (updated.locale === 'en' || updated.locale === 'ru') {
|
||||
window.localStorage.setItem('glchat.language', updated.locale);
|
||||
void i18n.changeLanguage(updated.locale);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
|
||||
event.preventDefault();
|
||||
setSaved(false);
|
||||
save.mutate({
|
||||
display_name: displayName.trim(),
|
||||
bio: bio.trim(),
|
||||
custom_status: customStatus.trim(),
|
||||
custom_status_emoji: customEmoji.trim(),
|
||||
status,
|
||||
locale,
|
||||
});
|
||||
};
|
||||
|
||||
if (currentUser.isPending) {
|
||||
return (
|
||||
<Card>
|
||||
<LoadingNotice />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentUser.isError || user === undefined) {
|
||||
return (
|
||||
<Card>
|
||||
<ErrorNotice error={currentUser.error} onRetry={() => void currentUser.refetch()} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold">{t('settings.profile.title')}</h2>
|
||||
<p className="mt-1 text-sm text-fg-muted">{t('settings.profile.description')}</p>
|
||||
|
||||
<form className="mt-4 flex flex-col gap-4" onSubmit={onSubmit} noValidate>
|
||||
<Field
|
||||
label={t('settings.profile.displayName')}
|
||||
name="display_name"
|
||||
value={displayName}
|
||||
maxLength={64}
|
||||
onChange={(event) => setDisplayName(event.target.value)}
|
||||
/>
|
||||
<TextAreaField
|
||||
label={t('settings.profile.bio')}
|
||||
placeholder={t('settings.profile.bioPlaceholder')}
|
||||
name="bio"
|
||||
rows={4}
|
||||
maxLength={512}
|
||||
value={bio}
|
||||
onChange={(event) => setBio(event.target.value)}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-[1fr_6rem]">
|
||||
<Field
|
||||
label={t('settings.profile.customStatus')}
|
||||
placeholder={t('settings.profile.customStatusPlaceholder')}
|
||||
name="custom_status"
|
||||
maxLength={128}
|
||||
value={customStatus}
|
||||
onChange={(event) => setCustomStatus(event.target.value)}
|
||||
/>
|
||||
<Field
|
||||
label={t('settings.profile.customStatusEmoji')}
|
||||
placeholder={t('settings.profile.customStatusEmojiPlaceholder')}
|
||||
name="custom_status_emoji"
|
||||
maxLength={8}
|
||||
value={customEmoji}
|
||||
onChange={(event) => setCustomEmoji(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<SelectField
|
||||
label={t('settings.profile.status')}
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
options={userStatuses.map((value) => ({
|
||||
value,
|
||||
label: t(`user.status.${value}`),
|
||||
}))}
|
||||
/>
|
||||
<SelectField
|
||||
label={t('settings.profile.locale')}
|
||||
value={locale}
|
||||
onChange={(value) => setLocale(value === 'en' ? 'en' : 'ru')}
|
||||
options={supportedLanguages.map((language) => ({
|
||||
value: language,
|
||||
label: t(`language.${language}`),
|
||||
}))}
|
||||
/>
|
||||
|
||||
<dl className="text-sm text-fg-muted">
|
||||
<div className="flex justify-between gap-4 border-b border-border/40 py-2">
|
||||
<dt>{t('settings.profile.username')}</dt>
|
||||
<dd className="font-medium text-fg">{user.username}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 border-b border-border/40 py-2">
|
||||
<dt>{t('settings.profile.userId')}</dt>
|
||||
<dd className="font-mono text-xs text-fg">{user.id}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-2">
|
||||
<dt>{t('settings.profile.badges')}</dt>
|
||||
<dd className="text-fg">
|
||||
{user.badges.length === 0 ? t('settings.profile.noBadges') : user.badges.join(', ')}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
{save.isError ? <ErrorNotice error={save.error} /> : null}
|
||||
{saved && !save.isError ? (
|
||||
<p className="text-sm text-success" role="status">
|
||||
{t('settings.profile.saved')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={save.isPending}>
|
||||
{t(save.isPending ? 'common.saving' : 'common.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user