fix language selection and missing locales

src/pages/GuestJoin.jsx

@@ -3,9 +3,11 @@ import { useParams, Link } from 'react-router-dom';
 import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio } from 'lucide-react';
 import api from '../services/api';
 import toast from 'react-hot-toast';
+import { useLanguage } from '../contexts/LanguageContext';
 
 export default function GuestJoin() {
   const { uid } = useParams();
+  const { t } = useLanguage();
   const [roomInfo, setRoomInfo] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -22,7 +24,7 @@ export default function GuestJoin() {
         setRoomInfo(res.data.room);
         setStatus({ running: res.data.running });
       } catch (err) {
-        setError(err.response?.data?.error || 'Raum nicht gefunden');
+        setError(err.response?.data?.error || t('room.guestRoomNotFound'));
       } finally {
         setLoading(false);
       }
@@ -44,7 +46,7 @@ export default function GuestJoin() {
   const handleJoin = async (e) => {
     e.preventDefault();
     if (!name.trim()) {
-      toast.error('Name ist erforderlich');
+      toast.error(t('room.guestNameRequired'));
       return;
     }
 
@@ -59,7 +61,7 @@ export default function GuestJoin() {
         window.location.href = res.data.joinUrl;
       }
     } catch (err) {
-      toast.error(err.response?.data?.error || 'Beitritt fehlgeschlagen');
+      toast.error(err.response?.data?.error || t('room.guestJoinFailed'));
     } finally {
       setJoining(false);
     }
@@ -87,10 +89,10 @@ export default function GuestJoin() {
             <div className="w-16 h-16 bg-th-error/15 rounded-full flex items-center justify-center mx-auto mb-4">
               <Video size={28} className="text-th-error" />
             </div>
-            <h2 className="text-xl font-bold text-th-text mb-2">Zugang nicht möglich</h2>
+            <h2 className="text-xl font-bold text-th-text mb-2">{t('room.guestAccessDenied')}</h2>
             <p className="text-sm text-th-text-s mb-6">{error}</p>
             <Link to="/login" className="btn-primary inline-flex">
-              Zum Login
+              {t('auth.login')}
             </Link>
           </div>
         </div>
@@ -124,7 +126,7 @@ export default function GuestJoin() {
           <div className="text-center mb-6">
             <h2 className="text-xl font-bold text-th-text mb-1">{roomInfo.name}</h2>
             <p className="text-sm text-th-text-s">
-              Erstellt von <span className="font-medium text-th-text">{roomInfo.owner_name}</span>
+              {t('room.guestCreatedBy')} <span className="font-medium text-th-text">{roomInfo.owner_name}</span>
             </p>
             <div className="mt-3 inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium"
               style={{
@@ -133,14 +135,14 @@ export default function GuestJoin() {
               }}
             >
               {status.running ? <Radio size={10} className="animate-pulse" /> : <Users size={12} />}
-              {status.running ? 'Meeting läuft' : 'Noch nicht gestartet'}
+              {status.running ? t('room.guestMeetingRunning') : t('room.guestMeetingNotStarted')}
             </div>
           </div>
 
           {/* Join form */}
           <form onSubmit={handleJoin} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-th-text mb-1.5">Ihr Name *</label>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestYourName')} *</label>
               <div className="relative">
                 <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
                 <input
@@ -148,7 +150,7 @@ export default function GuestJoin() {
                   value={name}
                   onChange={e => setName(e.target.value)}
                   className="input-field pl-11"
-                  placeholder="Max Mustermann"
+                  placeholder={t('room.guestNamePlaceholder')}
                   required
                   autoFocus
                 />
@@ -157,7 +159,7 @@ export default function GuestJoin() {
 
             {roomInfo.has_access_code && (
               <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">Zugangscode</label>
+                <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.guestAccessCode')}</label>
                 <div className="relative">
                   <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
                   <input
@@ -165,7 +167,7 @@ export default function GuestJoin() {
                     value={accessCode}
                     onChange={e => setAccessCode(e.target.value)}
                     className="input-field pl-11"
-                    placeholder="Code eingeben"
+                    placeholder={t('room.guestAccessCodePlaceholder')}
                   />
                 </div>
               </div>
@@ -173,8 +175,8 @@ export default function GuestJoin() {
 
             <div>
               <label className="block text-sm font-medium text-th-text mb-1.5">
-                Moderator-Code
-                <span className="text-th-text-s font-normal ml-1">(optional)</span>
+                {t('room.guestModeratorCode')}
+                <span className="text-th-text-s font-normal ml-1">{t('room.guestModeratorOptional')}</span>
               </label>
               <div className="relative">
                 <Shield size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
@@ -183,7 +185,7 @@ export default function GuestJoin() {
                   value={moderatorCode}
                   onChange={e => setModeratorCode(e.target.value)}
                   className="input-field pl-11"
-                  placeholder="Nur wenn Sie Moderator sind"
+                  placeholder={t('room.guestModeratorPlaceholder')}
                 />
               </div>
             </div>
@@ -197,7 +199,7 @@ export default function GuestJoin() {
                 <Loader2 size={18} className="animate-spin" />
               ) : (
                 <>
-                  Meeting beitreten
+                  {t('room.guestJoinButton')}
                   <ArrowRight size={18} />
                 </>
               )}
@@ -205,14 +207,14 @@ export default function GuestJoin() {
 
             {!status.running && (
               <p className="text-xs text-th-text-s text-center">
-                Das Meeting wurde noch nicht gestartet. Bitte warten Sie, bis der Moderator es startet.
+                {t('room.guestWaitingMessage')}
               </p>
             )}
           </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">
-              Haben Sie ein Konto? <span className="text-th-accent font-medium">Anmelden</span>
+              {t('room.guestHasAccount')} <span className="text-th-accent font-medium">{t('room.guestSignIn')}</span>
             </Link>
           </div>
         </div>