Add sharing rooms

src/pages/GuestJoin.jsx

@@ -4,15 +4,18 @@ import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio } from 'lu
 import api from '../services/api';
 import toast from 'react-hot-toast';
 import { useLanguage } from '../contexts/LanguageContext';
+import { useAuth } from '../contexts/AuthContext';
 
 export default function GuestJoin() {
   const { uid } = useParams();
   const { t } = useLanguage();
+  const { user } = useAuth();
+  const isLoggedIn = !!user;
   const [roomInfo, setRoomInfo] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [joining, setJoining] = useState(false);
-  const [name, setName] = useState('');
+  const [name, setName] = useState(user?.name || '');
   const [accessCode, setAccessCode] = useState('');
   const [moderatorCode, setModeratorCode] = useState('');
   const [status, setStatus] = useState({ running: false });
@@ -162,11 +165,12 @@ export default function GuestJoin() {
                 <input
                   type="text"
                   value={name}
-                  onChange={e => setName(e.target.value)}
-                  className="input-field pl-11"
+                  onChange={e => !isLoggedIn && setName(e.target.value)}
+                  readOnly={isLoggedIn}
+                  className={`input-field pl-11 ${isLoggedIn ? 'opacity-70 cursor-not-allowed' : ''}`}
                   placeholder={t('room.guestNamePlaceholder')}
                   required
-                  autoFocus
+                  autoFocus={!isLoggedIn}
                 />
               </div>
             </div>
@@ -226,11 +230,13 @@ export default function GuestJoin() {
             )}
           </form>
 
-          <div className="mt-6 pt-4 border-t border-th-border text-center">
-            <Link to="/login" className="text-sm text-th-text-s hover:text-th-accent transition-colors">
-              {t('room.guestHasAccount')} <span className="text-th-accent font-medium">{t('room.guestSignIn')}</span>
-            </Link>
-          </div>
+          {!isLoggedIn && (
+            <div className="mt-6 pt-4 border-t border-th-border text-center">
+              <Link to="/login" className="text-sm text-th-text-s hover:text-th-accent transition-colors">
+                {t('room.guestHasAccount')} <span className="text-th-accent font-medium">{t('room.guestSignIn')}</span>
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </div>