Добавление аутентификации логин/пароль (#24) #53
Vendored
+303
@@ -21,6 +21,46 @@ export interface paths {
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/auth/register": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put?: never;
|
||||
/**
|
||||
* Password Register
|
||||
* @description Регистрация по логину (нику) и паролю. Telegram привязывается позже в профиле.
|
||||
*/
|
||||
post: operations["password_register_api_auth_register_post"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/auth/login": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put?: never;
|
||||
/**
|
||||
* Password Login
|
||||
* @description Вход игрока по нику и паролю. Неверная пара — 401, перебор — 429.
|
||||
*/
|
||||
post: operations["password_login_api_auth_login_post"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/auth/telegram": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@@ -122,6 +162,46 @@ export interface paths {
|
||||
patch: operations["update_my_profile_api_users_me_profile_patch"];
|
||||
trace?: never;
|
||||
};
|
||||
"/api/users/me/password": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
/**
|
||||
* Change My Password
|
||||
* @description Задать пароль (первый раз — без текущего) или сменить его (нужен текущий).
|
||||
*/
|
||||
put: operations["change_my_password_api_users_me_password_put"];
|
||||
post?: never;
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/users/me/telegram": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put?: never;
|
||||
/**
|
||||
* Link My Telegram
|
||||
* @description Привязать Telegram к аккаунту. Подпись виджета проверяется так же, как при входе.
|
||||
*/
|
||||
post: operations["link_my_telegram_api_users_me_telegram_post"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/users/me/avatar": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@@ -844,6 +924,26 @@ export interface paths {
|
||||
patch: operations["update_user_api_admin_users__user_id__patch"];
|
||||
trace?: never;
|
||||
};
|
||||
"/api/admin/users/{user_id}/password": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
/**
|
||||
* Set User Password
|
||||
* @description Задать игроку новый пароль — когда он забыл свой. Сам пароль в аудит не пишется.
|
||||
*/
|
||||
put: operations["set_user_password_api_admin_users__user_id__password_put"];
|
||||
post?: never;
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/admin/groups": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@@ -1224,6 +1324,11 @@ export interface components {
|
||||
/** Role */
|
||||
role: string;
|
||||
};
|
||||
/** AdminPasswordSet */
|
||||
AdminPasswordSet: {
|
||||
/** New Password */
|
||||
new_password: string;
|
||||
};
|
||||
/** AdminUserRead */
|
||||
AdminUserRead: {
|
||||
/** Id */
|
||||
@@ -1240,6 +1345,11 @@ export interface components {
|
||||
telegram_id?: number | null;
|
||||
/** Created At */
|
||||
created_at: string;
|
||||
/**
|
||||
* Has Password
|
||||
* @default false
|
||||
*/
|
||||
has_password: boolean;
|
||||
};
|
||||
/** AdminUserUpdate */
|
||||
AdminUserUpdate: {
|
||||
@@ -1887,6 +1997,11 @@ export interface components {
|
||||
* @default []
|
||||
*/
|
||||
groups: components["schemas"]["GroupBrief"][];
|
||||
/**
|
||||
* Has Password
|
||||
* @default false
|
||||
*/
|
||||
has_password: boolean;
|
||||
};
|
||||
/** MemberAdd */
|
||||
MemberAdd: {
|
||||
@@ -1990,6 +2105,27 @@ export interface components {
|
||||
/** Comment */
|
||||
comment?: string | null;
|
||||
};
|
||||
/** PasswordChange */
|
||||
PasswordChange: {
|
||||
/** Current Password */
|
||||
current_password?: string | null;
|
||||
/** New Password */
|
||||
new_password: string;
|
||||
};
|
||||
/** PasswordLogin */
|
||||
PasswordLogin: {
|
||||
/** Nickname */
|
||||
nickname: string;
|
||||
/** Password */
|
||||
password: string;
|
||||
};
|
||||
/** PasswordRegister */
|
||||
PasswordRegister: {
|
||||
/** Nickname */
|
||||
nickname: string;
|
||||
/** Password */
|
||||
password: string;
|
||||
};
|
||||
/** ProfileStats */
|
||||
ProfileStats: {
|
||||
/** User Id */
|
||||
@@ -2198,6 +2334,72 @@ export interface operations {
|
||||
};
|
||||
};
|
||||
};
|
||||
password_register_api_auth_register_post: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody: {
|
||||
content: {
|
||||
"application/json": components["schemas"]["PasswordRegister"];
|
||||
};
|
||||
};
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["MeRead"];
|
||||
};
|
||||
};
|
||||
/** @description Validation Error */
|
||||
422: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["HTTPValidationError"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
password_login_api_auth_login_post: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody: {
|
||||
content: {
|
||||
"application/json": components["schemas"]["PasswordLogin"];
|
||||
};
|
||||
};
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["MeRead"];
|
||||
};
|
||||
};
|
||||
/** @description Validation Error */
|
||||
422: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["HTTPValidationError"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
telegram_login_api_auth_telegram_post: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@@ -2370,6 +2572,72 @@ export interface operations {
|
||||
};
|
||||
};
|
||||
};
|
||||
change_my_password_api_users_me_password_put: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody: {
|
||||
content: {
|
||||
"application/json": components["schemas"]["PasswordChange"];
|
||||
};
|
||||
};
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["MeRead"];
|
||||
};
|
||||
};
|
||||
/** @description Validation Error */
|
||||
422: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["HTTPValidationError"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
link_my_telegram_api_users_me_telegram_post: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody: {
|
||||
content: {
|
||||
"application/json": components["schemas"]["TelegramAuthPayload"];
|
||||
};
|
||||
};
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["MeRead"];
|
||||
};
|
||||
};
|
||||
/** @description Validation Error */
|
||||
422: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["HTTPValidationError"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
upload_my_avatar_api_users_me_avatar_put: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@@ -3789,6 +4057,41 @@ export interface operations {
|
||||
};
|
||||
};
|
||||
};
|
||||
set_user_password_api_admin_users__user_id__password_put: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path: {
|
||||
user_id: number;
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody: {
|
||||
content: {
|
||||
"application/json": components["schemas"]["AdminPasswordSet"];
|
||||
};
|
||||
};
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["AdminUserRead"];
|
||||
};
|
||||
};
|
||||
/** @description Validation Error */
|
||||
422: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["HTTPValidationError"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
list_groups_api_admin_groups_get: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useServerEvents } from "../hooks/useServerEvents";
|
||||
import { BottomBar } from "./BottomBar";
|
||||
import { NotificationBell } from "./NotificationBell";
|
||||
import { NotificationToaster } from "./NotificationToaster";
|
||||
import { SetPasswordDialog } from "./SetPasswordDialog";
|
||||
import { SideMenu } from "./SideMenu";
|
||||
|
||||
const TITLES: Record<string, string> = {
|
||||
@@ -51,6 +52,9 @@ export function AppShell() {
|
||||
|
||||
<SideMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
|
||||
<BottomBar onMenu={() => setMenuOpen(true)} />
|
||||
|
||||
{/* Без пароля дальше не пускаем: логин = ник, пароль нужен для входа. */}
|
||||
{me && !me.has_password && <SetPasswordDialog nickname={me.nickname} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { ApiError } from "../api/client";
|
||||
import { useLogout, useSetPassword } from "../hooks/auth";
|
||||
|
||||
/**
|
||||
* Обязательная установка пароля — для аккаунтов из Telegram и созданных до появления
|
||||
* паролей. Закрыть окно нельзя: только задать пароль или выйти. Кнопка «Позже» есть
|
||||
* лишь в dev-сборке (import.meta.env.DEV) — чтобы тестовые stub-игроки не упирались в окно.
|
||||
*/
|
||||
export function SetPasswordDialog({ nickname }: { nickname: string }) {
|
||||
const setPassword = useSetPassword();
|
||||
const logout = useLogout();
|
||||
const navigate = useNavigate();
|
||||
const [password, setPasswordValue] = useState("");
|
||||
const [repeat, setRepeat] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [skipped, setSkipped] = useState(false);
|
||||
|
||||
if (skipped) return null;
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== repeat) {
|
||||
setError("Пароли не совпадают.");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
// Успех кладёт в кэш профиль с has_password=true — окно исчезает само.
|
||||
await setPassword.mutateAsync({ new_password: password });
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : "Не удалось сохранить пароль");
|
||||
}
|
||||
};
|
||||
|
||||
const doLogout = async () => {
|
||||
await logout.mutateAsync().catch(() => {});
|
||||
navigate("/login", { replace: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<form className="modal" onSubmit={submit}>
|
||||
<div className="modal-title">Задайте пароль</div>
|
||||
<p className="modal-msg">
|
||||
Теперь на сайт входят по логину и паролю. Ваш логин — никнейм <b>{nickname}</b>.
|
||||
Придумайте пароль, чтобы продолжить; вход через Telegram тоже останется.
|
||||
</p>
|
||||
{/* Скрытый логин — чтобы менеджер паролей сохранил пару целиком. */}
|
||||
<input type="text" name="username" autoComplete="username" value={nickname} readOnly hidden />
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="set-password">
|
||||
Пароль (не короче 8 символов)
|
||||
</label>
|
||||
<input
|
||||
id="set-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
autoFocus
|
||||
value={password}
|
||||
onChange={(e) => setPasswordValue(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="set-password-repeat">
|
||||
Повторите пароль
|
||||
</label>
|
||||
<input
|
||||
id="set-password-repeat"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={repeat}
|
||||
onChange={(e) => setRepeat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="error-text">{error}</p>}
|
||||
<div className="modal-actions">
|
||||
{import.meta.env.DEV && (
|
||||
<button type="button" className="btn btn-ghost" onClick={() => setSkipped(true)}>
|
||||
Позже (dev)
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="btn btn-ghost" onClick={doLogout}>
|
||||
Выйти
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={setPassword.isPending || !password}>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -203,6 +203,21 @@ export function useAdminUpdateUser() {
|
||||
});
|
||||
}
|
||||
|
||||
// Новый пароль игроку — когда он забыл свой (почту приложение не хранит).
|
||||
export function useAdminSetPassword() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (args: { userId: number; password: string }) =>
|
||||
unwrap(
|
||||
await api.PUT("/api/admin/users/{user_id}/password", {
|
||||
params: { path: { user_id: args.userId } },
|
||||
body: { new_password: args.password },
|
||||
}),
|
||||
),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: qk.adminUsers }),
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Ачивки (редактор; выдача игрокам — на будущее) ──────────────────────────
|
||||
|
||||
interface AchievementInput {
|
||||
|
||||
@@ -45,6 +45,52 @@ export function useStubLogin() {
|
||||
});
|
||||
}
|
||||
|
||||
// Вход по логину (нику) и паролю. Перебор сервер ограничивает: 429 TOO_MANY_ATTEMPTS.
|
||||
export function usePasswordLogin() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (body: { nickname: string; password: string }) =>
|
||||
unwrap(await api.POST("/api/auth/login", { body })),
|
||||
onSuccess: (me) => {
|
||||
qc.setQueryData(qk.me, me);
|
||||
qc.invalidateQueries();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Регистрация по логину (нику) и паролю; Telegram привязывается позже в профиле.
|
||||
export function useRegister() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (body: { nickname: string; password: string }) =>
|
||||
unwrap(await api.POST("/api/auth/register", { body })),
|
||||
onSuccess: (me) => {
|
||||
qc.setQueryData(qk.me, me);
|
||||
qc.invalidateQueries();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Задать пароль (первый раз — без текущего) или сменить его (нужен текущий).
|
||||
export function useSetPassword() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (body: { new_password: string; current_password?: string }): Promise<Me> =>
|
||||
unwrap(await api.PUT("/api/users/me/password", { body })),
|
||||
onSuccess: (me) => qc.setQueryData(qk.me, me),
|
||||
});
|
||||
}
|
||||
|
||||
// Привязка Telegram к аккаунту: тот же payload виджета, что при входе; ник не меняется.
|
||||
export function useLinkTelegram() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (payload: Record<string, unknown>): Promise<Me> =>
|
||||
unwrap(await api.POST("/api/users/me/telegram", { body: payload as never })),
|
||||
onSuccess: (me) => qc.setQueryData(qk.me, me),
|
||||
});
|
||||
}
|
||||
|
||||
// Вход через Telegram Login Widget: payload виджета проверяется на сервере по HMAC.
|
||||
// При первом входе, если тег занят, бэкенд отдаёт 409 TELEGRAM_NICKNAME_REQUIRED —
|
||||
// тогда вызывается useTelegramRegister с выбранным ником (тот же payload виджета).
|
||||
|
||||
@@ -8,11 +8,16 @@ import { PickerSelect } from "../components/PickerSelect";
|
||||
import { ProfileStatsCard } from "../components/ProfileStatsCard";
|
||||
import { Spinner } from "../components/Spinner";
|
||||
import { Switch } from "../components/Switch";
|
||||
import { TelegramLoginButton } from "../components/TelegramLoginButton";
|
||||
import { useToast } from "../context/ToastContext";
|
||||
import type { Me } from "../domain/types";
|
||||
import {
|
||||
useAuthConfig,
|
||||
useDeleteAvatar,
|
||||
useLinkTelegram,
|
||||
useLogout,
|
||||
useMe,
|
||||
useSetPassword,
|
||||
useUpdateBio,
|
||||
useUpdateFavoriteFaction,
|
||||
useUpdateHistoryPrefs,
|
||||
@@ -218,6 +223,9 @@ export function AccountPage() {
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
<div className="muted small" style={{ marginTop: 6 }}>
|
||||
Никнейм — это и логин для входа: после смены входите под новым.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -256,9 +264,129 @@ export function AccountPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LoginSettingsCard me={me} />
|
||||
|
||||
<button className="btn btn-danger btn-block" onClick={doLogout}>
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Вход в аккаунт: смена пароля и привязка Telegram (ник при привязке не меняется).
|
||||
function LoginSettingsCard({ me }: { me: Me }) {
|
||||
const setPassword = useSetPassword();
|
||||
const linkTelegram = useLinkTelegram();
|
||||
const { data: config } = useAuthConfig();
|
||||
const toast = useToast();
|
||||
const [current, setCurrent] = useState("");
|
||||
const [next, setNext] = useState("");
|
||||
const [repeat, setRepeat] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const changePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (next !== repeat) {
|
||||
setError("Пароли не совпадают.");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
await setPassword.mutateAsync(
|
||||
me.has_password ? { current_password: current, new_password: next } : { new_password: next },
|
||||
);
|
||||
setCurrent("");
|
||||
setNext("");
|
||||
setRepeat("");
|
||||
toast.show(me.has_password ? "Пароль изменён" : "Пароль задан");
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : "Не удалось сохранить пароль");
|
||||
}
|
||||
};
|
||||
|
||||
const onTelegram = async (payload: Record<string, unknown>) => {
|
||||
try {
|
||||
await linkTelegram.mutateAsync(payload);
|
||||
toast.show("Telegram привязан");
|
||||
} catch (err) {
|
||||
toast.show(err instanceof ApiError ? err.message : "Не удалось привязать Telegram");
|
||||
}
|
||||
};
|
||||
|
||||
const telegramReady = !!config?.telegram_bot_username && config.methods.includes("telegram");
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h3>Вход в аккаунт</h3>
|
||||
<form onSubmit={changePassword}>
|
||||
{/* Скрытый логин — чтобы менеджер паролей обновил сохранённую пару. */}
|
||||
<input type="text" name="username" autoComplete="username" value={me.nickname} readOnly hidden />
|
||||
{me.has_password && (
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="current-password">
|
||||
Текущий пароль
|
||||
</label>
|
||||
<input
|
||||
id="current-password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={current}
|
||||
onChange={(e) => setCurrent(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="new-password">
|
||||
Новый пароль (не короче 8 символов)
|
||||
</label>
|
||||
<input
|
||||
id="new-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={next}
|
||||
onChange={(e) => setNext(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="new-password-repeat">
|
||||
Повторите новый пароль
|
||||
</label>
|
||||
<input
|
||||
id="new-password-repeat"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={repeat}
|
||||
onChange={(e) => setRepeat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="error-text">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={setPassword.isPending || !next || (me.has_password && !current)}
|
||||
>
|
||||
{me.has_password ? "Сменить пароль" : "Задать пароль"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="field" style={{ marginTop: 16, marginBottom: 0 }}>
|
||||
<label className="label">Telegram</label>
|
||||
{me.telegram_id != null ? (
|
||||
<div>Привязан — можно входить и через Telegram.</div>
|
||||
) : telegramReady ? (
|
||||
<>
|
||||
<p className="muted small" style={{ marginTop: 0 }}>
|
||||
Привяжите Telegram, чтобы входить и через него. Никнейм не изменится.
|
||||
</p>
|
||||
<TelegramLoginButton
|
||||
botUsername={config?.telegram_bot_username ?? ""}
|
||||
onAuth={(u) => onTelegram(u as unknown as Record<string, unknown>)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="muted small">Вход через Telegram не настроен.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
useCreateDevUser,
|
||||
useDevUsers,
|
||||
useMe,
|
||||
usePasswordLogin,
|
||||
useRegister,
|
||||
useStubLogin,
|
||||
useTelegramLogin,
|
||||
useTelegramRegister,
|
||||
@@ -28,6 +30,7 @@ export function LoginPage() {
|
||||
const [pendingTg, setPendingTg] = useState<PendingTelegram | null>(null);
|
||||
|
||||
const methods = config?.methods ?? [];
|
||||
const hasPassword = methods.includes("password");
|
||||
const hasTelegram = methods.includes("telegram");
|
||||
// Stub-вход показываем только в dev-сборке И если бэкенд его отдаёт (в проде
|
||||
// import.meta.env.DEV === false → блок вырезается из бандла).
|
||||
@@ -72,7 +75,9 @@ export function LoginPage() {
|
||||
onDone={() => navigate("/", { replace: true })}
|
||||
/>
|
||||
) : (
|
||||
hasTelegram && (
|
||||
<>
|
||||
{hasPassword && <PasswordAuthCard onDone={() => navigate("/", { replace: true })} />}
|
||||
{hasTelegram && (
|
||||
<div className="card">
|
||||
<h3>Вход через Telegram</h3>
|
||||
{config?.telegram_bot_username ? (
|
||||
@@ -86,8 +91,13 @@ export function LoginPage() {
|
||||
в .env (бот от @BotFather + /setdomain на ваш домен).
|
||||
</p>
|
||||
)}
|
||||
<p className="muted small" style={{ marginBottom: 0 }}>
|
||||
Аккаунт создан по логину и паролю? Сначала привяжите Telegram в профиле —
|
||||
иначе вход через Telegram создаст новый аккаунт.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{showStub && !pendingTg && <DevLogin onError={setError} />}
|
||||
@@ -98,6 +108,106 @@ export function LoginPage() {
|
||||
);
|
||||
}
|
||||
|
||||
// Основной вход: логин (ник) и пароль, с переключением на регистрацию.
|
||||
function PasswordAuthCard({ onDone }: { onDone: () => void }) {
|
||||
const login = usePasswordLogin();
|
||||
const register = useRegister();
|
||||
const [mode, setMode] = useState<"login" | "register">("login");
|
||||
const [nickname, setNickname] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [repeat, setRepeat] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const isRegister = mode === "register";
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const nick = nickname.trim();
|
||||
if (!nick || !password) {
|
||||
setError("Введите никнейм и пароль.");
|
||||
return;
|
||||
}
|
||||
if (isRegister && password !== repeat) {
|
||||
setError("Пароли не совпадают.");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
if (isRegister) await register.mutateAsync({ nickname: nick, password });
|
||||
else await login.mutateAsync({ nickname: nick, password });
|
||||
onDone();
|
||||
} catch (err) {
|
||||
const fallback = isRegister ? "Не удалось зарегистрироваться" : "Не удалось войти";
|
||||
setError(err instanceof ApiError ? err.message : fallback);
|
||||
}
|
||||
};
|
||||
|
||||
const switchMode = () => {
|
||||
setMode(isRegister ? "login" : "register");
|
||||
setRepeat("");
|
||||
setError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="card" onSubmit={submit}>
|
||||
<h3>{isRegister ? "Регистрация" : "Вход"}</h3>
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="auth-nickname">
|
||||
Никнейм
|
||||
</label>
|
||||
<input
|
||||
id="auth-nickname"
|
||||
name="username"
|
||||
autoComplete="username"
|
||||
autoCapitalize="none"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="auth-password">
|
||||
Пароль
|
||||
</label>
|
||||
<input
|
||||
id="auth-password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete={isRegister ? "new-password" : "current-password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
{isRegister && <div className="muted small">Не короче 8 символов.</div>}
|
||||
</div>
|
||||
{isRegister && (
|
||||
<div className="field">
|
||||
<label className="label" htmlFor="auth-repeat">
|
||||
Повторите пароль
|
||||
</label>
|
||||
<input
|
||||
id="auth-repeat"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={repeat}
|
||||
onChange={(e) => setRepeat(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{error && <p className="error-text">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-block"
|
||||
disabled={login.isPending || register.isPending}
|
||||
>
|
||||
{isRegister ? "Зарегистрироваться" : "Войти"}
|
||||
</button>
|
||||
<button type="button" className="btn btn-ghost btn-block small" style={{ marginTop: 8 }} onClick={switchMode}>
|
||||
{isRegister ? "Уже есть аккаунт? Войти" : "Нет аккаунта? Зарегистрироваться"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
// Выбор ника при регистрации через Telegram, когда тег занят/некорректен.
|
||||
// Повторяет регистрацию тем же payload виджета (подпись на сервере проверяется заново).
|
||||
function TelegramNicknamePicker({
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Pencil } from "lucide-react";
|
||||
import { KeyRound, Pencil } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { ApiError } from "../../api/client";
|
||||
import { Spinner } from "../../components/Spinner";
|
||||
import { useToast } from "../../context/ToastContext";
|
||||
import { useAdminUpdateUser, useAdminUsers } from "../../hooks/admin";
|
||||
import { useAdminSetPassword, useAdminUpdateUser, useAdminUsers } from "../../hooks/admin";
|
||||
// DEV-ТОЛЬКО: удаление аккаунтов. Импорт используется лишь под import.meta.env.DEV,
|
||||
// поэтому в прод/тест-сборке вырезается тришейкингом (как и dev-вход).
|
||||
import { DevDeleteAccountButton } from "./DevDeleteAccountButton";
|
||||
@@ -12,17 +12,40 @@ import { DevDeleteAccountButton } from "./DevDeleteAccountButton";
|
||||
export function AdminAccountsPage() {
|
||||
const { data: users, isLoading } = useAdminUsers();
|
||||
const update = useAdminUpdateUser();
|
||||
const setPassword = useAdminSetPassword();
|
||||
const toast = useToast();
|
||||
const [editId, setEditId] = useState<number | null>(null);
|
||||
const [editName, setEditName] = useState("");
|
||||
// Новый пароль игроку (восстановление забытого): отдельный режим строки, как переименование.
|
||||
const [passwordId, setPasswordId] = useState<number | null>(null);
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
const startEdit = (id: number, nickname: string) => {
|
||||
setPasswordId(null);
|
||||
setEditId(id);
|
||||
setEditName(nickname);
|
||||
};
|
||||
|
||||
const startPassword = (id: number) => {
|
||||
setEditId(null);
|
||||
setPasswordId(id);
|
||||
setNewPassword("");
|
||||
};
|
||||
|
||||
const savePassword = async () => {
|
||||
if (passwordId == null || !newPassword) return;
|
||||
try {
|
||||
await setPassword.mutateAsync({ userId: passwordId, password: newPassword });
|
||||
toast.show("Пароль задан — сообщите его игроку");
|
||||
setPasswordId(null);
|
||||
setNewPassword("");
|
||||
} catch (e) {
|
||||
toast.show(e instanceof ApiError ? e.message : "Не удалось задать пароль");
|
||||
}
|
||||
};
|
||||
|
||||
const saveName = async () => {
|
||||
const name = editName.trim();
|
||||
if (editId == null || !name) return;
|
||||
@@ -73,12 +96,39 @@ export function AdminAccountsPage() {
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
) : passwordId === u.id ? (
|
||||
// Режим «задать пароль».
|
||||
<div className="row">
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
placeholder={`Новый пароль для ${u.nickname}`}
|
||||
value={newPassword}
|
||||
autoFocus
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") savePassword();
|
||||
if (e.key === "Escape") setPasswordId(null);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary small"
|
||||
disabled={setPassword.isPending || !newPassword}
|
||||
onClick={savePassword}
|
||||
>
|
||||
Задать
|
||||
</button>
|
||||
<button className="btn btn-ghost small" onClick={() => setPasswordId(null)}>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row-between">
|
||||
<div>
|
||||
<b>{u.nickname}</b> {u.role === "admin" && <span className="badge">админ</span>}
|
||||
<div className="muted small">
|
||||
#{u.id} · {u.auth_provider} · {u.is_active ? "активен" : "отключён"}
|
||||
{u.role !== "admin" && !u.has_password && " · без пароля"}
|
||||
</div>
|
||||
</div>
|
||||
{u.role !== "admin" && (
|
||||
@@ -90,6 +140,13 @@ export function AdminAccountsPage() {
|
||||
>
|
||||
<Pencil size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost small"
|
||||
title="Задать пароль"
|
||||
onClick={() => startPassword(u.id)}
|
||||
>
|
||||
<KeyRound size={16} />
|
||||
</button>
|
||||
{import.meta.env.DEV && (
|
||||
<DevDeleteAccountButton userId={u.id} nickname={u.nickname} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user