git feature

2026-06-30 14:46:19 +07:00
parent 251c1b7573
commit 11e5a76977
23 changed files with 1680 additions and 28 deletions
--- a/management/src/components/AccountsTab.tsx
+++ b/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>
--- a/management/src/components/ExamRoomWorkspace.tsx
+++ b/management/src/components/ExamRoomWorkspace.tsx
@@ -7,8 +7,9 @@ import {
  type ExamSubmission,
  type StudentItem,
 } from '../api';
+import { useGitHubConnection } from '../hooks/useGitHubConnection';
+import { navigate, pushNav } from '../navigation';
 import { BASE_APP_SUGGESTIONS, DEFAULT_EXAM_ALLOWED_APPS } from '../constants';
-import { pushNav } from '../navigation';
 import { openStaffChat } from '../chatEvents';
 import { AppPoolModal } from './AppPoolModal';
 import { NavHistoryBar } from './NavHistoryBar';
@@ -49,6 +50,10 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
  const [end, setEnd] = useState('');
  const [allowedApps, setAllowedApps] = useState(DEFAULT_EXAM_ALLOWED_APPS);
  const [quizUrl, setQuizUrl] = useState('');
+  const [gitPublishUrl, setGitPublishUrl] = useState('');
+  const [bundlingSubs, setBundlingSubs] = useState(false);
+  const [publishingGit, setPublishingGit] = useState(false);
+  const gh = useGitHubConnection();
  const [editable, setEditable] = useState(false);
  const [prepEditable, setPrepEditable] = useState(false);
  const [displayStatus, setDisplayStatus] = useState('draft');
@@ -87,6 +92,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
      setEnd(toLocalInput(data.room.endTime));
      setAllowedApps(data.room.allowedApps || DEFAULT_EXAM_ALLOWED_APPS);
      setQuizUrl(data.room.quizUrl || '');
+      setGitPublishUrl(data.room.gitPublishUrl || '');
      setEditable(data.editable);
      setPrepEditable(data.prepEditable ?? data.editable);
      setDisplayStatus(data.displayStatus);
@@ -230,6 +236,39 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
    URL.revokeObjectURL(url);
  };

+  const downloadAllSubs = async () => {
+    setErr(''); setMsg('');
+    setBundlingSubs(true);
+    try {
+      await apiExam.downloadAllSubmissions(examId, roomName || `phong_thi_${examId}`);
+      setMsg('Đã tải ZIP gộp — giải nén sẽ thấy từng folder bài làm theo sinh viên.');
+    } catch (e: any) {
+      setErr(e?.message || 'Tải thất bại');
+    } finally {
+      setBundlingSubs(false);
+    }
+  };
+
+  const publishToGit = async () => {
+    if (!gh.connected) {
+      setErr('Kết nối GitHub trong Tài khoản của tôi (sidebar dưới cùng) trước khi đẩy.');
+      return;
+    }
+    setErr(''); setMsg('');
+    setPublishingGit(true);
+    try {
+      const res = await apiExam.publishSubmissionsGit(examId);
+      const openUrl = res.openUrl || res.gitPublishUrl || res.url;
+      setGitPublishUrl(openUrl);
+      setMsg(res.message || 'Đã đẩy bài nộp lên GitHub');
+      if (openUrl) window.open(openUrl, '_blank', 'noopener,noreferrer');
+    } catch (e: any) {
+      setErr(e?.message || 'Đẩy Git thất bại');
+    } finally {
+      setPublishingGit(false);
+    }
+  };
+
  const handlePublish = async () => {
    setErr(''); setMsg('');
    try {
@@ -408,6 +447,31 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                  <span>Link trắc nghiệm</span>
                  <input value={quizUrl} onChange={(e) => setQuizUrl(e.target.value)} placeholder="https://..." disabled={!editable} />
                </label>
+                <div className="exam-git-settings">
+                  <p className="exam-git-status-line">
+                    GitHub:{' '}
+                    {gh.connected ? (
+                      <strong>@{gh.githubLogin}</strong>
+                    ) : (
+                      <>
+                        <span className="exam-git-not-connected">chưa kết nối</span>
+                        {' — '}
+                        <button type="button" className="link-btn" onClick={() => navigate('profile')}>
+                          Kết nối trong Tài khoản
+                        </button>
+                      </>
+                    )}
+                  </p>
+                  <p className="exam-git-hint">
+                    Bấm <strong>Đẩy lên Git</strong> sẽ tự tạo repo theo tên phòng thi — mỗi sinh viên một folder, giống ZIP tải về.
+                  </p>
+                  {gitPublishUrl && (
+                    <p className="exam-git-last">
+                      Repo gần nhất:{' '}
+                      <a href={gitPublishUrl} target="_blank" rel="noreferrer">{gitPublishUrl}</a>
+                    </p>
+                  )}
+                </div>
                <label className="login-field">
                  <span>Bắt đầu</span>
                  <input type="datetime-local" value={start} onChange={(e) => setStart(e.target.value)} disabled={!editable} />
@@ -766,6 +830,38 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
              </div>
            ) : (
              <div className="session-logs-panel">
+                {submissions.length > 0 && (
+                  <div className="exam-submissions-toolbar">
+                    <button
+                      type="button"
+                      className="btn btn-primary btn-sm"
+                      disabled={bundlingSubs}
+                      onClick={downloadAllSubs}
+                    >
+                      {bundlingSubs ? 'Đang gói ZIP...' : '📦 Tải tất cả (ZIP gộp)'}
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-secondary btn-sm"
+                      disabled={publishingGit || !gh.connected}
+                      onClick={publishToGit}
+                      title={gh.connected ? 'Tạo repo + đẩy từng folder sinh viên lên GitHub' : 'Kết nối GitHub trong Tài khoản trước'}
+                    >
+                      {publishingGit ? 'Đang đẩy Git...' : '🔗 Đẩy lên Git'}
+                    </button>
+                    {!gh.connected && (
+                      <span className="exam-submissions-toolbar-hint">
+                        <button type="button" className="link-btn" onClick={() => navigate('profile')}>
+                          Kết nối GitHub
+                        </button>
+                        {' '}trong Tài khoản của tôi trước khi đẩy.
+                      </span>
+                    )}
+                    <span className="exam-submissions-toolbar-hint">
+                      ZIP gộp: mỗi sinh viên một folder — giải nén là chấm ngay.
+                    </span>
+                  </div>
+                )}
                <div className="attendance-table-scroll table-wrapper" style={{ border: 'none' }}>
                  {submissions.length === 0 ? (
                    <div className="empty-state" style={{ minHeight: '300px' }}>