feat: phone login, position badge, logout in profile, global search, admin chats
- Login: by phone number instead of username - Position field: shown as badge next to name in members list, search, admin panel - Logout: moved from sidebar to profile modal settings - Sidebar search: global — shows matching users with one-click private chat - Admin panel: new Чаты tab showing all chats with delete, position/phone in user form - Backend: /api/admin/chats endpoint, position column migration, phone login support Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ai
@@ -9,7 +9,7 @@ interface Props {
|
||||
|
||||
export default function LoginPage({ onLogin }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [username, setUsername] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -19,7 +19,7 @@ export default function LoginPage({ onLogin }: Props) {
|
||||
setError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await api.post('/api/auth/login', { username, password });
|
||||
const { data } = await api.post('/api/auth/login', { phone, password });
|
||||
onLogin(data.token, data.user);
|
||||
navigate('/');
|
||||
} catch (err: any) {
|
||||
@@ -43,14 +43,14 @@ export default function LoginPage({ onLogin }: Props) {
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Логин</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Номер телефона</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
||||
placeholder="Введите логин"
|
||||
autoComplete="username"
|
||||
placeholder="+7..."
|
||||
autoComplete="tel"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Search, Edit, LogOut, Settings, Shield, Wifi, WifiOff } from 'lucide-react';
|
||||
import { Search, Edit, Settings, Shield, Wifi, WifiOff, MessageCircle } from 'lucide-react';
|
||||
import { useStore } from '../store';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { wsClient } from '../api/ws';
|
||||
@@ -16,9 +16,10 @@ import { usePushNotifications } from '../hooks/usePushNotifications';
|
||||
import { Chat } from '../types';
|
||||
|
||||
export default function MainLayout() {
|
||||
const { user, chats, activeChat, setActiveChat, connected, logout, onlineUsers, updateChat } = useStore();
|
||||
const { user, chats, activeChat, setActiveChat, connected, onlineUsers, updateChat, setChats } = useStore();
|
||||
const navigate = useNavigate();
|
||||
const [search, setSearch] = useState('');
|
||||
const [searchUsers, setSearchUsers] = useState<any[]>([]);
|
||||
const [showNew, setShowNew] = useState(false);
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
@@ -68,10 +69,32 @@ export default function MainLayout() {
|
||||
setShowInfo(false);
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
wsClient.disconnect();
|
||||
logout();
|
||||
navigate('/login');
|
||||
// Global search: fetch users when query changes
|
||||
useEffect(() => {
|
||||
if (search.trim().length < 1) { setSearchUsers([]); return; }
|
||||
const timer = setTimeout(async () => {
|
||||
try {
|
||||
const { data } = await api.get('/api/users');
|
||||
const q = search.toLowerCase();
|
||||
setSearchUsers(data.filter((u: any) =>
|
||||
(u.displayName || '').toLowerCase().includes(q) ||
|
||||
(u.username || '').toLowerCase().includes(q) ||
|
||||
(u.phone || '').includes(q)
|
||||
));
|
||||
} catch {}
|
||||
}, 200);
|
||||
return () => clearTimeout(timer);
|
||||
}, [search]);
|
||||
|
||||
async function openOrCreatePrivate(userId: string) {
|
||||
try {
|
||||
const { data } = await api.post(`/api/chats/private/${userId}`);
|
||||
const { data: allChats } = await api.get('/api/chats');
|
||||
setChats(allChats);
|
||||
const chat = allChats.find((c: any) => c.id === data.id);
|
||||
if (chat) openChat(chat);
|
||||
setSearch('');
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const filtered = chats.filter(c =>
|
||||
@@ -119,10 +142,6 @@ export default function MainLayout() {
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600" title="Новый чат">
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={handleLogout}
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-red-500" title="Выйти">
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,20 +158,44 @@ export default function MainLayout() {
|
||||
|
||||
{/* Chat List */}
|
||||
<div className="flex-1 overflow-y-auto py-2 px-2 space-y-0.5">
|
||||
{filtered.length === 0 && (
|
||||
<div className="text-center text-gray-400 text-sm py-8">
|
||||
{search ? 'Ничего не найдено' : 'Нет чатов. Создайте новый!'}
|
||||
</div>
|
||||
)}
|
||||
{filtered.map(chat => (
|
||||
<ChatListItem
|
||||
key={chat.id}
|
||||
chat={chat}
|
||||
active={activeChat?.id === chat.id}
|
||||
online={chat.type === 'private' && chat.privateUserId ? onlineUsers.has(chat.privateUserId) : undefined}
|
||||
onClick={() => openChat(chat)}
|
||||
onClick={() => { openChat(chat); setSearch(''); }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Global user search results */}
|
||||
{search && searchUsers.length > 0 && (
|
||||
<>
|
||||
{filtered.length > 0 && <div className="px-2 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wide">Пользователи</div>}
|
||||
{searchUsers.map(u => (
|
||||
<button key={u.id} onClick={() => openOrCreatePrivate(u.id)}
|
||||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 text-left">
|
||||
<Avatar name={u.displayName} color={u.avatarColor} avatar={u.avatar} size="sm"
|
||||
online={onlineUsers.has(u.id)} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium text-gray-900 truncate">{u.displayName}</span>
|
||||
{u.position && <span className="text-xs bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded-full shrink-0">{u.position}</span>}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">@{u.username}</div>
|
||||
</div>
|
||||
<MessageCircle className="w-4 h-4 text-gray-300 shrink-0" />
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{search && filtered.length === 0 && searchUsers.length === 0 && (
|
||||
<div className="text-center text-gray-400 text-sm py-8">Ничего не найдено</div>
|
||||
)}
|
||||
{!search && filtered.length === 0 && (
|
||||
<div className="text-center text-gray-400 text-sm py-8">Нет чатов. Создайте новый!</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user