git feature

management/src/components/AccountsTab.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useAuth } from '../auth/AuthContext';
 import { apiAdmin, type EmailDomainItem } from '../api';
+import { useGitHubConnection } from '../hooks/useGitHubConnection';
 
 export function ChangePasswordPage({ forced }: { forced?: boolean }) {
   const { changePassword, logout } = useAuth();
@@ -127,22 +128,23 @@ export function EmailDomainsTab() {
 
 export function MyAccountTab() {
   const { staff, changePassword } = useAuth();
+  const gh = useGitHubConnection();
   const [oldPw, setOldPw] = useState('');
   const [newPw, setNewPw] = useState('');
-  const [msg, setMsg] = useState('');
-  const [err, setErr] = useState('');
+  const [pwMsg, setPwMsg] = useState('');
+  const [pwErr, setPwErr] = useState('');
 
   const submitPw = async (e: React.FormEvent) => {
     e.preventDefault();
-    setErr('');
-    setMsg('');
+    setPwErr('');
+    setPwMsg('');
     try {
       await changePassword(oldPw, newPw);
-      setMsg('Đã đổi mật khẩu');
+      setPwMsg('Đã đổi mật khẩu');
       setOldPw('');
       setNewPw('');
     } catch (e: any) {
-      setErr(e?.message || 'Lỗi');
+      setPwErr(e?.message || 'Lỗi');
     }
   };
 
@@ -152,7 +154,7 @@ export function MyAccountTab() {
     <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>
+        <p className="page-desc">Thông tin đăng nhập, GitHub và bảo mật cá nhân.</p>
       </header>
 
       <div className="card" style={{ padding: '1.25rem' }}>
@@ -161,6 +163,41 @@ export function MyAccountTab() {
         <p style={{ margin: 0, color: 'var(--text-muted)' }}>{staff?.email}</p>
       </div>
 
+      <div className="card account-github-card" style={{ padding: '1.25rem' }}>
+        <h2 className="section-title">GitHub</h2>
+        <p className="page-desc" style={{ marginTop: 0 }}>
+          Kết nối tài khoản GitHub của bạn để đẩy bài nộp phòng thi lên repo riêng. Mỗi giáo viên dùng GitHub của mình — không dùng chung token server.
+        </p>
+        <div className="exam-git-oauth-row">
+          {gh.connected ? (
+            <>
+              <span className="exam-git-connected">
+                Đã kết nối: <strong>@{gh.githubLogin}</strong>
+              </span>
+              <button type="button" className="btn btn-secondary btn-sm" onClick={gh.disconnect}>
+                Ngắt kết nối
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              className="btn btn-primary btn-sm"
+              disabled={gh.connecting}
+              onClick={gh.connect}
+            >
+              {gh.connecting ? 'Đang mở GitHub...' : 'Kết nối GitHub'}
+            </button>
+          )}
+        </div>
+        {gh.error && <div className="login-error">{gh.error}</div>}
+        {gh.message && <div className="login-success">{gh.message}</div>}
+        {!gh.connected && (
+          <p className="exam-git-hint">
+            Sau khi kết nối, vào <strong>Phòng thi</strong> → chọn phòng → tab <strong>Bài nộp</strong> → bấm <strong>Đẩy lên Git</strong>.
+          </p>
+        )}
+      </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 }}>
@@ -172,8 +209,8 @@ export function MyAccountTab() {
             <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>}
+          {pwErr && <div className="login-error">{pwErr}</div>}
+          {pwMsg && <div className="login-success">{pwMsg}</div>}
           <button type="submit" className="btn btn-primary">Lưu</button>
         </form>
       </div>