tam chat
This commit is contained in:
167
management/src/components/AccountsTab.tsx
Normal file
167
management/src/components/AccountsTab.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { apiAdmin, type EmailDomainItem } from '../api';
|
||||
|
||||
export function ChangePasswordPage({ forced }: { forced?: boolean }) {
|
||||
const { changePassword, logout } = useAuth();
|
||||
const [oldPassword, setOldPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirm, setConfirm] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
if (newPassword.length < 8) {
|
||||
setError('Mật khẩu mới tối thiểu 8 ký tự');
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirm) {
|
||||
setError('Xác nhận mật khẩu không khớp');
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
await changePassword(oldPassword, newPassword);
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Đổi mật khẩu thất bại');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-screen">
|
||||
<div className="login-card">
|
||||
<h1 className="login-heading">{forced ? 'Đổi mật khẩu bắt buộc' : 'Đổi mật khẩu'}</h1>
|
||||
{forced && <p className="login-hint">Lần đăng nhập đầu tiên — vui lòng đặt mật khẩu mới trước khi tiếp tục.</p>}
|
||||
<form onSubmit={submit} className="login-form">
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu hiện tại</span>
|
||||
<input type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} required />
|
||||
</label>
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu mới</span>
|
||||
<input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
|
||||
</label>
|
||||
<label className="login-field">
|
||||
<span>Xác nhận mật khẩu mới</span>
|
||||
<input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required minLength={8} />
|
||||
</label>
|
||||
{error && <div className="login-error">{error}</div>}
|
||||
<button type="submit" className="btn btn-primary login-submit" disabled={busy}>
|
||||
{busy ? 'Đang lưu...' : 'Lưu mật khẩu'}
|
||||
</button>
|
||||
{!forced && (
|
||||
<button type="button" className="link-btn" style={{ marginTop: '0.5rem' }} onClick={logout}>
|
||||
Đăng xuất
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AccountsTab() {
|
||||
const { staff, changePassword } = useAuth();
|
||||
const [domains, setDomains] = useState<EmailDomainItem[]>([]);
|
||||
const [newDomain, setNewDomain] = useState('');
|
||||
const [oldPw, setOldPw] = useState('');
|
||||
const [newPw, setNewPw] = useState('');
|
||||
const [msg, setMsg] = useState('');
|
||||
const [err, setErr] = useState('');
|
||||
|
||||
const load = async () => {
|
||||
const res = await apiAdmin.listEmailDomains();
|
||||
setDomains(res.data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load().catch(console.error);
|
||||
}, []);
|
||||
|
||||
const addDomain = async () => {
|
||||
if (!newDomain.trim()) return;
|
||||
await apiAdmin.addEmailDomain(newDomain.trim());
|
||||
setNewDomain('');
|
||||
await load();
|
||||
};
|
||||
|
||||
const removeDomain = async (id: number) => {
|
||||
if (!confirm('Xóa đuôi email này?')) return;
|
||||
await apiAdmin.deleteEmailDomain(id);
|
||||
await load();
|
||||
};
|
||||
|
||||
const submitPw = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErr('');
|
||||
setMsg('');
|
||||
try {
|
||||
await changePassword(oldPw, newPw);
|
||||
setMsg('Đã đổi mật khẩu');
|
||||
setOldPw('');
|
||||
setNewPw('');
|
||||
} catch (e: any) {
|
||||
setErr(e?.message || 'Lỗi');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<header className="page-header">
|
||||
<h1 className="page-title">Tài khoản & bảo mật</h1>
|
||||
<p className="page-desc">Quản lý đuôi email được phép và đổi mật khẩu.</p>
|
||||
</header>
|
||||
|
||||
<div className="card" style={{ padding: '1.25rem' }}>
|
||||
<h2 className="section-title">Tài khoản hiện tại</h2>
|
||||
<p style={{ margin: 0, color: 'var(--text-muted)' }}>{staff?.email}</p>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ padding: '1.25rem' }}>
|
||||
<h2 className="section-title">Đuôi email được phép</h2>
|
||||
<p className="page-desc" style={{ marginTop: 0 }}>
|
||||
Nếu chưa có bản ghi nào, hệ thống chấp nhận mọi đuôi email. Thêm đuôi để giới hạn truy cập.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
|
||||
<input
|
||||
placeholder="vd: rikkeiacademy.com"
|
||||
value={newDomain}
|
||||
onChange={(e) => setNewDomain(e.target.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<button type="button" className="btn btn-primary" onClick={addDomain}>Thêm</button>
|
||||
</div>
|
||||
<ul className="domain-list">
|
||||
{domains.length === 0 && <li className="domain-empty">Chưa cấu hình — chấp nhận tất cả đuôi email</li>}
|
||||
{domains.map((d) => (
|
||||
<li key={d.id} className="domain-item">
|
||||
<span>@{d.domain}</span>
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => removeDomain(d.id)}>Xóa</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ padding: '1.25rem' }}>
|
||||
<h2 className="section-title">Đổi mật khẩu</h2>
|
||||
<form onSubmit={submitPw} className="login-form" style={{ maxWidth: 400 }}>
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu hiện tại</span>
|
||||
<input type="password" value={oldPw} onChange={(e) => setOldPw(e.target.value)} required />
|
||||
</label>
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu mới</span>
|
||||
<input type="password" value={newPw} onChange={(e) => setNewPw(e.target.value)} required minLength={8} />
|
||||
</label>
|
||||
{err && <div className="login-error">{err}</div>}
|
||||
{msg && <div className="login-success">{msg}</div>}
|
||||
<button type="submit" className="btn btn-primary">Lưu</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
231
management/src/components/ChatWidget.tsx
Normal file
231
management/src/components/ChatWidget.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { apiChat, type ChatConversation, type ChatMessage, type ChatStudent } from '../api';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
|
||||
export function ChatWidget() {
|
||||
const { staff } = useAuth();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [students, setStudents] = useState<ChatStudent[]>([]);
|
||||
const [conversations, setConversations] = useState<ChatConversation[]>([]);
|
||||
const [active, setActive] = useState<ChatStudent | null>(null);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [draft, setDraft] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
const activeRef = useRef<ChatStudent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
activeRef.current = active;
|
||||
}, [active]);
|
||||
|
||||
const scrollBottom = () => {
|
||||
requestAnimationFrame(() => {
|
||||
if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
|
||||
});
|
||||
};
|
||||
|
||||
const totalUnread = conversations.reduce((n, c) => n + (c.unread || 0), 0);
|
||||
|
||||
const loadConversations = useCallback(async () => {
|
||||
const res = await apiChat.listConversations();
|
||||
setConversations(res.data);
|
||||
}, []);
|
||||
|
||||
const loadMessages = useCallback(async (studentRkId: number) => {
|
||||
const res = await apiChat.listMessages(studentRkId);
|
||||
setMessages(res.data);
|
||||
scrollBottom();
|
||||
await loadConversations();
|
||||
}, [loadConversations]);
|
||||
|
||||
const searchStudents = useCallback(async (q: string) => {
|
||||
const res = await apiChat.searchStudents(q);
|
||||
setStudents(res.data);
|
||||
}, []);
|
||||
|
||||
const pickStudent = async (s: ChatStudent) => {
|
||||
setActive(s);
|
||||
setPickerOpen(false);
|
||||
setQuery('');
|
||||
await loadMessages(s.studentRkId);
|
||||
};
|
||||
|
||||
const pickFromConversation = async (c: ChatConversation) => {
|
||||
await pickStudent({
|
||||
studentRkId: c.studentRkId,
|
||||
fullName: c.fullName,
|
||||
studentCode: c.studentCode,
|
||||
email: '',
|
||||
online: false,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !staff?.id) return;
|
||||
loadConversations().catch(console.error);
|
||||
searchStudents('').catch(console.error);
|
||||
}, [open, staff?.id, loadConversations, searchStudents]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!staff?.id) return;
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.hostname}:8080/ws?role=teacher&staffId=${staff.id}`;
|
||||
const ws = new WebSocket(wsUrl);
|
||||
ws.onmessage = (ev) => {
|
||||
try {
|
||||
const payload = JSON.parse(ev.data);
|
||||
if (payload.event !== 'chat:message') return;
|
||||
const msg = payload.data as ChatMessage;
|
||||
loadConversations().catch(console.error);
|
||||
const current = activeRef.current;
|
||||
if (current && msg.studentRkId === current.studentRkId) {
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === msg.id)) return prev;
|
||||
return [...prev, msg];
|
||||
});
|
||||
scrollBottom();
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
return () => ws.close();
|
||||
}, [staff?.id, loadConversations]);
|
||||
|
||||
const send = async () => {
|
||||
if (!active || !draft.trim()) return;
|
||||
setSending(true);
|
||||
try {
|
||||
const res = await apiChat.sendMessage(active.studentRkId, draft.trim());
|
||||
setMessages((prev) => [...prev, res.data]);
|
||||
setDraft('');
|
||||
scrollBottom();
|
||||
await loadConversations();
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!staff) return null;
|
||||
|
||||
const dock = (
|
||||
<div className="chat-dock">
|
||||
{!open ? (
|
||||
<button type="button" className="chat-fab" onClick={() => setOpen(true)} title="Tin nhắn">
|
||||
💬
|
||||
{totalUnread > 0 && (
|
||||
<span className="chat-fab-badge">{totalUnread > 9 ? '9+' : totalUnread}</span>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="chat-messenger">
|
||||
<header className="chat-messenger-head">
|
||||
<strong>Tin nhắn</strong>
|
||||
<div className="chat-head-actions">
|
||||
<button type="button" className="chat-icon-btn" onClick={() => setPickerOpen((v) => !v)} title="Tin mới">
|
||||
✏️
|
||||
</button>
|
||||
<button type="button" className="chat-icon-btn" onClick={() => { setOpen(false); setActive(null); setPickerOpen(false); }} title="Đóng">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="chat-messenger-body">
|
||||
<aside className="chat-sidebar">
|
||||
<div className="chat-sidebar-search">
|
||||
<input
|
||||
placeholder="Tìm sinh viên..."
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
searchStudents(e.target.value).catch(console.error);
|
||||
}}
|
||||
onFocus={() => setPickerOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
{pickerOpen && (
|
||||
<ul className="chat-picker-list">
|
||||
{students.map((s) => (
|
||||
<li key={s.studentRkId}>
|
||||
<button type="button" onClick={() => pickStudent(s)}>
|
||||
<span className="chat-conv-name">{s.fullName}</span>
|
||||
<span className="chat-conv-meta">{s.studentCode}{s.online ? ' · online' : ''}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{students.length === 0 && <li className="chat-empty-hint">Không tìm thấy sinh viên</li>}
|
||||
</ul>
|
||||
)}
|
||||
<ul className="chat-conv-list">
|
||||
{conversations.map((c) => (
|
||||
<li key={c.studentRkId}>
|
||||
<button
|
||||
type="button"
|
||||
className={active?.studentRkId === c.studentRkId ? 'active' : ''}
|
||||
onClick={() => pickFromConversation(c)}
|
||||
>
|
||||
<div className="chat-conv-row">
|
||||
<span className="chat-conv-name">{c.fullName}</span>
|
||||
{c.unread > 0 && <span className="chat-conv-unread">{c.unread}</span>}
|
||||
</div>
|
||||
<span className="chat-conv-preview">{c.lastMessage || '—'}</span>
|
||||
<span className="chat-conv-meta">{c.studentCode}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{conversations.length === 0 && !pickerOpen && (
|
||||
<li className="chat-empty-hint">Chưa có hội thoại — bấm ✏️ để nhắn sinh viên</li>
|
||||
)}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<section className="chat-thread">
|
||||
{!active ? (
|
||||
<div className="chat-thread-empty">
|
||||
<p>Chọn hội thoại bên trái hoặc tìm sinh viên để bắt đầu chat</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="chat-thread-head">
|
||||
<div>
|
||||
<strong>{active.fullName}</strong>
|
||||
<div className="chat-sub">{active.studentCode}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-messages" ref={listRef}>
|
||||
{messages.map((m) => (
|
||||
<div key={m.id} className={`chat-bubble chat-bubble--${m.senderRole}`}>
|
||||
<div className="chat-bubble-body">{m.body}</div>
|
||||
<div className="chat-bubble-time">
|
||||
{new Date(m.createdAt).toLocaleString('vi-VN', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{messages.length === 0 && <div className="chat-empty-hint">Chưa có tin nhắn</div>}
|
||||
</div>
|
||||
<div className="chat-compose">
|
||||
<input
|
||||
placeholder="Nhập tin nhắn..."
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
|
||||
/>
|
||||
<button type="button" className="btn btn-primary btn-sm" disabled={sending || !draft.trim()} onClick={send}>
|
||||
Gửi
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return createPortal(dock, document.body);
|
||||
}
|
||||
@@ -58,17 +58,14 @@ export const ClassWorkspace: React.FC<ClassWorkspaceProps> = ({ classId, sourceT
|
||||
setLoading(true);
|
||||
|
||||
// Fetch specific class detail directly
|
||||
const targetClassRes = await fetch(`http://127.0.0.1:8080/api/classes/${classId}`);
|
||||
if (targetClassRes.ok) {
|
||||
const classData = await targetClassRes.json();
|
||||
setClassInfo(classData);
|
||||
pushNav({
|
||||
kind: 'class',
|
||||
tab: sourceTab,
|
||||
classId,
|
||||
label: classData.name || `Lớp ${classId}`,
|
||||
});
|
||||
}
|
||||
const classData = await api.getClass(classId);
|
||||
setClassInfo(classData);
|
||||
pushNav({
|
||||
kind: 'class',
|
||||
tab: sourceTab,
|
||||
classId,
|
||||
label: classData.name || `Lớp ${classId}`,
|
||||
});
|
||||
|
||||
// Fetch students roster
|
||||
const studentsRes = await apiFetchClassStudents(classId);
|
||||
|
||||
114
management/src/components/LoginPage.tsx
Normal file
114
management/src/components/LoginPage.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
|
||||
type Mode = 'login' | 'provision' | 'forgot' | 'reset';
|
||||
|
||||
export function LoginPage() {
|
||||
const { login, provision, forgotPassword, resetPassword } = useAuth();
|
||||
const [mode, setMode] = useState<Mode>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [resetToken, setResetToken] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setMessage('');
|
||||
setBusy(true);
|
||||
try {
|
||||
if (mode === 'login') {
|
||||
await login(email, password);
|
||||
} else if (mode === 'provision') {
|
||||
const msg = await provision(email);
|
||||
setMessage(msg);
|
||||
setMode('login');
|
||||
} else if (mode === 'forgot') {
|
||||
const msg = await forgotPassword(email);
|
||||
setMessage(msg);
|
||||
setMode('reset');
|
||||
} else if (mode === 'reset') {
|
||||
await resetPassword(resetToken, newPassword);
|
||||
setMessage('Đã đặt lại mật khẩu. Vui lòng đăng nhập.');
|
||||
setMode('login');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Có lỗi xảy ra');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-screen">
|
||||
<div className="login-card">
|
||||
<div className="login-brand">
|
||||
<img src="/logo.jpeg" alt="Simple Care" className="brand-logo-img" />
|
||||
<div>
|
||||
<div className="login-brand-title">Simple Care</div>
|
||||
<div className="login-brand-sub">Quản lý giám sát — Rikkei Education</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="login-heading">
|
||||
{mode === 'login' && 'Đăng nhập'}
|
||||
{mode === 'provision' && 'Truy cập lần đầu'}
|
||||
{mode === 'forgot' && 'Quên mật khẩu'}
|
||||
{mode === 'reset' && 'Đặt lại mật khẩu'}
|
||||
</h1>
|
||||
<p className="login-hint">
|
||||
{mode === 'provision'
|
||||
? 'Nhập email tổ chức. Hệ thống gửi mật khẩu tạm nếu đuôi email được phép.'
|
||||
: 'Chỉ email có đuôi tổ chức được phép truy cập.'}
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} className="login-form">
|
||||
{(mode === 'login' || mode === 'provision' || mode === 'forgot') && (
|
||||
<label className="login-field">
|
||||
<span>Email</span>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoComplete="email" />
|
||||
</label>
|
||||
)}
|
||||
{mode === 'login' && (
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu</span>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoComplete="current-password" />
|
||||
</label>
|
||||
)}
|
||||
{mode === 'reset' && (
|
||||
<>
|
||||
<label className="login-field">
|
||||
<span>Mã từ email</span>
|
||||
<input value={resetToken} onChange={(e) => setResetToken(e.target.value)} required />
|
||||
</label>
|
||||
<label className="login-field">
|
||||
<span>Mật khẩu mới</span>
|
||||
<input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
{error && <div className="login-error">{error}</div>}
|
||||
{message && <div className="login-success">{message}</div>}
|
||||
<button type="submit" className="btn btn-primary login-submit" disabled={busy}>
|
||||
{busy ? 'Đang xử lý...' : mode === 'login' ? 'Đăng nhập' : mode === 'provision' ? 'Gửi mật khẩu' : mode === 'forgot' ? 'Gửi mã' : 'Đặt lại mật khẩu'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="login-links">
|
||||
{mode === 'login' && (
|
||||
<>
|
||||
<button type="button" className="link-btn" onClick={() => setMode('provision')}>Truy cập lần đầu</button>
|
||||
<button type="button" className="link-btn" onClick={() => setMode('forgot')}>Quên mật khẩu?</button>
|
||||
</>
|
||||
)}
|
||||
{mode !== 'login' && (
|
||||
<button type="button" className="link-btn" onClick={() => setMode('login')}>← Quay lại đăng nhập</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user