more details with federation

src/pages/GuestJoin.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio } from 'lucide-react';
+import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio, AlertCircle } from 'lucide-react';
 import BrandLogo from '../components/BrandLogo';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -20,6 +20,7 @@ export default function GuestJoin() {
   const [accessCode, setAccessCode] = useState('');
   const [moderatorCode, setModeratorCode] = useState('');
   const [status, setStatus] = useState({ running: false });
+  const [recordingConsent, setRecordingConsent] = useState(false);
 
   useEffect(() => {
     const fetchRoom = async () => {
@@ -61,6 +62,11 @@ export default function GuestJoin() {
       return;
     }
 
+    if (roomInfo?.allow_recording && !recordingConsent) {
+      toast.error(t('room.guestRecordingConsent'));
+      return;
+    }
+
     setJoining(true);
     try {
       const res = await api.post(`/rooms/${uid}/guest-join`, {
@@ -206,9 +212,28 @@ export default function GuestJoin() {
               </div>
             </div>
 
+            {/* Recording consent notice */}
+            {roomInfo.allow_recording && (
+              <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-3">
+                <div className="flex items-start gap-2">
+                  <AlertCircle size={16} className="text-amber-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-amber-400">{t('room.guestRecordingNotice')}</p>
+                </div>
+                <label className="flex items-center gap-2.5 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={recordingConsent}
+                    onChange={e => setRecordingConsent(e.target.checked)}
+                    className="w-4 h-4 rounded accent-amber-500 cursor-pointer"
+                  />
+                  <span className="text-sm text-th-text">{t('room.guestRecordingConsent')}</span>
+                </label>
+              </div>
+            )}
+
             <button
               type="submit"
-              disabled={joining || (!status.running && !roomInfo.anyone_can_start)}
+              disabled={joining || (!status.running && !roomInfo.anyone_can_start) || (roomInfo.allow_recording && !recordingConsent)}
               className="btn-primary w-full py-3"
             >
               {joining ? (