remove roomCode in create face

src/main/java/com/attendenceSystem/module/faceid/api/FaceIdApiController.java

@@ -105,13 +105,17 @@ public class FaceIdApiController {
     @GetMapping("/latest")
     public ResponseEntity<LatestFaceResponse> getLatestFace() {
         try {
-            User user = getCurrentUser();
-            FaceProfile faceProfile = faceProfileRepository.findByUser(user)
+            User currentUser = getCurrentUser();
+            FaceProfile faceProfile = faceProfileRepository.findByUser(currentUser)
                     .orElseThrow(() -> new IllegalArgumentException("Chưa đăng ký face"));
 
             return ResponseEntity.ok(LatestFaceResponse.builder()
                     .faceCode(faceProfile.getFaceCode())
                     .imagePath(faceProfile.getThumbnailUrl())
+                    .username(currentUser.getUsername())
+                    .fullName(currentUser.getFullName())
+                    .email(currentUser.getEmail())
+                    .isAccept(faceProfile.getIsAccept())
                     .build());
 
         } catch (IllegalArgumentException e) {

src/main/java/com/attendenceSystem/module/faceid/controller/FaceProfileController.java

@@ -57,7 +57,7 @@ public class FaceProfileController {
             return Views.FaceId.CREATE;
         }
         faceProfileService.createFaceProfile(request);
-        return Routes.REDIRECT + Routes.FaceId.ROOT;
+        return Routes.REDIRECT + Routes.FaceId.ROOT + Routes.Action.CREATE;
     }
 
     @PostMapping(Routes.Action.ACCEPT + "/{id}")

src/main/java/com/attendenceSystem/module/faceid/dto/request/FaceCaptureRequest.java

@@ -15,5 +15,4 @@ import lombok.Setter;
 @Builder
 public class FaceCaptureRequest {
     private List<String> samples;
-    private String roomCode;
-}
+}

src/main/java/com/attendenceSystem/module/faceid/dto/response/LatestFaceResponse.java

@@ -6,5 +6,9 @@ import lombok.Builder;
 public record LatestFaceResponse(
         String faceCode,
         String imagePath,
-        Long sampleId) {
-}
+        Long sampleId,
+        String username,
+        String fullName,
+        String email,
+        Boolean isAccept) {
+}

src/main/resources/static/css/faceID/faceID-create.css

@@ -81,39 +81,6 @@ video {
     font-weight: 700;
 }
 
-.room-code-field {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    margin-bottom: 12px;
-}
-
-.room-code-field label {
-    color: var(--text-light);
-    font-size: 0.9rem;
-    font-weight: 600;
-}
-
-.room-code-field input {
-    padding: 12px 14px;
-    border-radius: 14px;
-    border: 1px solid var(--border);
-    background: var(--bg-form);
-    color: var(--text-white);
-    outline: none;
-    transition: 0.25s;
-}
-
-.room-code-field input:focus {
-    border-color: var(--indigo-06);
-    box-shadow: 0 0 0 4px var(--indigo-15);
-}
-
-.room-code-field small {
-    color: var(--text-gray);
-    font-size: 0.8rem;
-}
-
 .face-sample-summary {
     display: flex;
     align-items: center;
@@ -364,6 +331,135 @@ video {
     box-shadow: 0 10px 25px rgba(99, 102, 241, 0.25);
 }
 
+/* ===================================
+   FACE DETAIL MODAL
+=================================== */
+
+.face-detail-action {
+    margin-top: 12px;
+}
+
+.detail-btn-secondary {
+    width: 100%;
+    padding: 10px 14px;
+    border-radius: 14px;
+    border: 1px solid var(--border);
+    background: var(--bg-table-06);
+    color: var(--text-light);
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.25s;
+    text-align: center;
+}
+
+.detail-btn-secondary:hover {
+    background: var(--indigo-15);
+    border-color: var(--indigo-06);
+    color: white;
+}
+
+.face-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.75);
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.face-modal.show {
+    display: flex;
+}
+
+.face-modal-content {
+    width: 700px;
+    max-width: 90%;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 0 30px rgba(0, 0, 0, .4);
+}
+
+.face-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-white);
+}
+
+.face-modal-header h2 {
+    font-size: 1.1rem;
+    font-weight: 700;
+}
+
+.close-btn {
+    border: none;
+    background: transparent;
+    color: var(--text-white);
+    font-size: 22px;
+    cursor: pointer;
+}
+
+.face-gallery {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1.3fr 1fr;
+    gap: 24px;
+    align-items: start;
+    min-height: 350px;
+}
+
+.face-gallery-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.face-gallery-image img {
+    max-width: 400px;
+    width: 100%;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    object-fit: cover;
+}
+
+.face-detail-panel {
+    display: grid;
+    gap: 14px;
+}
+
+.face-detail-panel .detail-item {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 16px;
+}
+
+.face-detail-panel .detail-item span {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--text-light);
+    margin-bottom: 6px;
+}
+
+.face-detail-panel .detail-item p {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-white);
+}
+
+.face-detail-panel .detail-item p#detailStatus {
+    color: var(--success);
+}
+
 @media (max-width: 1100px) {
     .face-register-grid {
         grid-template-columns: 1fr;

src/main/resources/templates/cms/face-id/faceID-create.html

@@ -45,20 +45,20 @@
                                     <span class="meta-badge">Bắt buộc</span>
                                 </div>
 
-                                <div class="room-code-field">
-                                    <label for="roomCode">Mã phòng</label>
-                                    <input type="text" id="roomCode" placeholder="VD: P101">
-                                    <small>Nhập mã phòng trước khi bật camera và bắt đầu quét.</small>
-                                </div>
-
                                 <div class="face-sample-summary">
                                     <button id="faceSampleCount" class="face-sample-count-btn" type="button">
                                         0 / 5 mẫu
                                     </button>
                                     <span id="faceSampleStatusText">
-                                        Chờ nhập mã phòng để bắt đầu.
+                                        Chưa có mẫu nào.
                                     </span>
                                 </div>
+
+                                <div class="face-detail-action">
+                                    <button id="viewFaceDetailBtn" type="button" class="detail-btn-secondary">
+                                        👤 Xem chi tiết khuôn mặt đã đăng ký
+                                    </button>
+                                </div>
                             </div>
                         </div>
 
@@ -155,6 +155,39 @@
 
     </div>
 
+    <!-- Modal xem chi tiết khuôn mặt đã đăng ký -->
+    <div id="faceDetailModal" class="face-modal">
+        <div class="face-modal-content">
+            <div class="face-modal-header">
+                <h2>Chi tiết khuôn mặt đã đăng ký</h2>
+                <button class="close-btn" onclick="closeFaceDetailModal()">✕</button>
+            </div>
+            <div class="face-gallery">
+                <div class="face-gallery-image">
+                    <img id="detailFaceImage" src="" alt="Face ID">
+                </div>
+                <div class="face-detail-panel">
+                    <div class="detail-item">
+                        <span>Mã sinh viên</span>
+                        <p id="detailUsername">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Họ tên</span>
+                        <p id="detailFullName">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Email</span>
+                        <p id="detailEmail">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Trạng thái</span>
+                        <p id="detailStatus">--</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         const video = document.getElementById("video");
         const canvas = document.getElementById("captureCanvas");
@@ -162,7 +195,7 @@
         const captureBtn = document.getElementById("captureFaceBtn");
         const resetBtn = document.getElementById("resetFaceScanBtn");
         const rescanBtn = document.getElementById("rescanBtn");
-        const roomCodeInput = document.getElementById("roomCode");
+        const viewDetailBtn = document.getElementById("viewFaceDetailBtn");
 
         const sampleCountBtn = document.getElementById("faceSampleCount");
         const sampleStatusText = document.getElementById("faceSampleStatusText");
@@ -296,18 +329,11 @@
         });
 
         captureBtn.addEventListener("click", () => {
-            const roomCode = roomCodeInput.value.trim();
-
             if (!isStreaming) {
                 setMessage("❌ Vui lòng bật camera trước.", "error");
                 return;
             }
 
-            if (!roomCode) {
-                setMessage("❌ Vui lòng nhập mã phòng trước khi chụp.", "error");
-                return;
-            }
-
             if (capturedSamples.length >= 5) {
                 setMessage("✅ Đã đủ 5 mẫu. Đang xử lý đăng ký.", "success");
                 return;
@@ -338,16 +364,7 @@
             updateDetectionStatus("Đang chờ mẫu mới", "#3498db");
         });
 
-        roomCodeInput.addEventListener("input", updateUI);
-
         async function submitSamples() {
-            const roomCode = roomCodeInput.value.trim();
-
-            if (!roomCode) {
-                setMessage("❌ Vui lòng nhập mã phòng", "error");
-                return;
-            }
-
             try {
                 const response = await fetch('/api/face-id/register', {
                     method: 'POST',
@@ -355,7 +372,6 @@
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
-                        roomCode: roomCode,
                         samples: capturedSamples.map(sample => sample.imageBase64)
                     })
                 });
@@ -364,9 +380,7 @@
                     const result = await response.json();
                     if (result.success) {
                         setMessage(`✅ ${result.message}`, "success");
-                        setTimeout(() => {
-                            window.location.href = "/face-id";
-                        }, 2000);
+                        // Không chuyển trang, chỉ hiển thị thành công
                     } else {
                         setMessage(`❌ Lỗi: ${result.message}`, "error");
                     }
@@ -381,14 +395,13 @@
 
         function updateUI() {
             const count = capturedSamples.length;
-            const roomCode = roomCodeInput.value.trim();
 
             sampleCountBtn.textContent = `${count} / 5 mẫu`;
             sampleStatusText.textContent = count === 0
-                ? (roomCode ? "Đã sẵn sàng để thu thập mẫu." : "Chờ nhập mã phòng để bắt đầu.")
+                ? "Chưa có mẫu nào."
                 : `Đã thu thập ${count}/5 mẫu khuôn mặt`;
 
-            captureBtn.disabled = !isStreaming || !roomCode || count >= 5;
+            captureBtn.disabled = !isStreaming || count >= 5;
             resetBtn.disabled = count === 0;
             rescanBtn.disabled = count === 0;
 
@@ -407,6 +420,55 @@
                 : (count === 5 ? "Hoàn tất thu thập" : "Camera đang hoạt động");
         }
 
+        // Xem chi tiết khuôn mặt đã đăng ký
+        viewDetailBtn.addEventListener("click", async () => {
+            try {
+                const response = await fetch('/api/face-id/latest');
+                if (response.ok) {
+                    const data = await response.json();
+                    document.getElementById("detailUsername").textContent = data.username || "--";
+                    document.getElementById("detailFullName").textContent = data.fullName || "--";
+                    document.getElementById("detailEmail").textContent = data.email || "--";
+
+                    // Xác định trạng thái dựa trên isAccept
+                    const statusEl = document.getElementById("detailStatus");
+                    if (data.isAccept === true) {
+                        statusEl.textContent = "Đã duyệt";
+                        statusEl.style.color = "#2ecc71";
+                    } else if (data.isAccept === false) {
+                        statusEl.textContent = "Bị từ chối";
+                        statusEl.style.color = "#e74c3c";
+                    } else {
+                        statusEl.textContent = "Chờ duyệt";
+                        statusEl.style.color = "#f0ad4e";
+                    }
+
+                    document.getElementById("detailFaceImage").src = data.imagePath || "https://i.pinimg.com/736x/6a/5e/fc/6a5efc25bf7c7603afac79d7046f999c.jpg";
+                    openFaceDetailModal();
+                } else {
+                    setMessage("❌ Bạn chưa đăng ký khuôn mặt nào.", "error");
+                }
+            } catch (error) {
+                console.error(error);
+                setMessage("❌ Lỗi kết nối khi lấy thông tin.", "error");
+            }
+        });
+
+        function openFaceDetailModal() {
+            document.getElementById("faceDetailModal").classList.add("show");
+        }
+
+        function closeFaceDetailModal() {
+            document.getElementById("faceDetailModal").classList.remove("show");
+        }
+
+        window.onclick = function (event) {
+            const modal = document.getElementById("faceDetailModal");
+            if (event.target === modal) {
+                closeFaceDetailModal();
+            }
+        };
+
         updateUI();
     </script>