add account web

management/src/components/AccountsTab.tsx

@@ -64,14 +64,9 @@ export function ChangePasswordPage({ forced }: { forced?: boolean }) {
   );
 }
 
-export function AccountsTab() {
-  const { staff, changePassword } = useAuth();
+export function EmailDomainsTab() {
   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();
@@ -95,32 +90,13 @@ export function AccountsTab() {
     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>
+        <h1 className="page-title">Đuôi email</h1>
+        <p className="page-desc">Cấu hình đuôi email được phép đăng ký và đăng nhập.</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 }}>
@@ -145,6 +121,45 @@ export function AccountsTab() {
           ))}
         </ul>
       </div>
+    </div>
+  );
+}
+
+export function MyAccountTab() {
+  const { staff, changePassword } = useAuth();
+  const [oldPw, setOldPw] = useState('');
+  const [newPw, setNewPw] = useState('');
+  const [msg, setMsg] = useState('');
+  const [err, setErr] = useState('');
+
+  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');
+    }
+  };
+
+  const displayName = staff?.fullName?.trim() || staff?.email?.split('@')[0] || 'Tài khoản';
+
+  return (
+    <div className="page-stack">
+      <header className="page-header">
+        <h1 className="page-title">Tài khoản của tôi</h1>
+        <p className="page-desc">Thông tin đăng nhập và bảo mật cá nhân.</p>
+      </header>
+
+      <div className="card" style={{ padding: '1.25rem' }}>
+        <h2 className="section-title">Thông tin</h2>
+        <p style={{ margin: '0 0 0.25rem', fontWeight: 600 }}>{displayName}</p>
+        <p style={{ margin: 0, color: 'var(--text-muted)' }}>{staff?.email}</p>
+      </div>
 
       <div className="card" style={{ padding: '1.25rem' }}>
         <h2 className="section-title">Đổi mật khẩu</h2>