340 lines
14 KiB
TypeScript
340 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { EditableText } from '@/components/EditableText';
|
|
import { VoteOption, VoteOptionConfig } from '@/lib/survey';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
|
|
// Special layout for iframe embedding - no header/footer
|
|
|
|
export default function IframePage() {
|
|
return (
|
|
<Suspense fallback={<LoadingComponent />}>
|
|
<IframePageContent />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function LoadingComponent() {
|
|
return <div>Lädt...</div>;
|
|
}
|
|
|
|
function IframePageContent() {
|
|
const searchParams = useSearchParams();
|
|
const token = searchParams.get('token');
|
|
|
|
// Login state
|
|
const [memberNumber, setMemberNumber] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isLoginLoading, setIsLoginLoading] = useState(false);
|
|
const [loginError, setLoginError] = useState<string | null>(null);
|
|
const [isLoginEnabled, setIsLoginEnabled] = useState(true);
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
|
|
// Vote state
|
|
const [voteOptions, setVoteOptions] = useState<VoteOptionConfig[]>([]);
|
|
const [selectedOption, setSelectedOption] = useState<VoteOption | null>(null);
|
|
const [comment, setComment] = useState('');
|
|
const [isVoteLoading, setIsVoteLoading] = useState(false);
|
|
const [voteError, setVoteError] = useState<string | null>(null);
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
const [voteToken, setVoteToken] = useState<string | null>(token);
|
|
|
|
// Check if member authentication is enabled
|
|
useEffect(() => {
|
|
const checkSettings = async () => {
|
|
try {
|
|
const response = await fetch('/api/member-login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ memberNumber: '', password: '' }),
|
|
});
|
|
|
|
if (response.status === 403) {
|
|
setIsLoginEnabled(false);
|
|
}
|
|
} catch {
|
|
// Silently fail, assume enabled
|
|
}
|
|
};
|
|
|
|
checkSettings();
|
|
}, []);
|
|
|
|
// Fetch vote options
|
|
useEffect(() => {
|
|
const fetchVoteOptions = async () => {
|
|
try {
|
|
const response = await fetch('/api/editable-text');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.texts && Array.isArray(data.texts)) {
|
|
const voteOptionsEntry = data.texts.find((text: { id: string }) => text.id === 'vote-options');
|
|
if (voteOptionsEntry && Array.isArray(voteOptionsEntry.content)) {
|
|
setVoteOptions(voteOptionsEntry.content);
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching vote options:', error);
|
|
// Use default options if fetch fails
|
|
setVoteOptions([
|
|
{ id: 'yes', label: 'Ja, ich stimme zu' },
|
|
{ id: 'no', label: 'Nein, ich stimme nicht zu' },
|
|
{ id: 'abstain', label: 'Ich enthalte mich' }
|
|
]);
|
|
}
|
|
};
|
|
|
|
fetchVoteOptions();
|
|
}, []);
|
|
|
|
// If token is provided in URL, consider user as logged in
|
|
useEffect(() => {
|
|
if (token) {
|
|
setIsLoggedIn(true);
|
|
setVoteToken(token);
|
|
}
|
|
}, [token]);
|
|
|
|
const handleLoginSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!memberNumber || !password) {
|
|
setLoginError('Bitte geben Sie Ihre Mitgliedsnummer und Ihr Passwort ein');
|
|
return;
|
|
}
|
|
|
|
setIsLoginLoading(true);
|
|
setLoginError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/member-login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ memberNumber, password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Anmeldung fehlgeschlagen');
|
|
}
|
|
|
|
// Set the token and mark as logged in
|
|
setVoteToken(data.token);
|
|
setIsLoggedIn(true);
|
|
} catch (err) {
|
|
setLoginError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoginLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleVoteSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!selectedOption) {
|
|
setVoteError('Bitte wähle eine Option');
|
|
return;
|
|
}
|
|
|
|
setIsVoteLoading(true);
|
|
setVoteError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/submit-vote', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
token: voteToken,
|
|
vote: selectedOption,
|
|
comment: comment.trim() || undefined,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Übermitteln der Stimme');
|
|
}
|
|
|
|
setIsSubmitted(true);
|
|
} catch (err) {
|
|
setVoteError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsVoteLoading(false);
|
|
}
|
|
};
|
|
|
|
// Login form
|
|
if (!isLoggedIn) {
|
|
if (!isLoginEnabled) {
|
|
return (
|
|
<div className="px-4 py-4">
|
|
<div className="mb-4">
|
|
<div className="ssvc-main-content">
|
|
<div className="text-center p-4">
|
|
<div className="mb-4 text-red-600">
|
|
Die Mitgliederanmeldung ist derzeit deaktiviert.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-4">
|
|
<div className="mb-4">
|
|
<div className="ssvc-main-content">
|
|
<div className="mb-4">
|
|
<EditableText id="current-vote-text" />
|
|
</div>
|
|
|
|
<form onSubmit={handleLoginSubmit} className="space-y-3">
|
|
<div>
|
|
<label htmlFor="memberNumber" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Mitgliedsnummer
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="memberNumber"
|
|
value={memberNumber}
|
|
onChange={(e) => setMemberNumber(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Passwort
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{loginError && (
|
|
<div className="text-red-500 text-sm">{loginError}</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoginLoading}
|
|
className="ssvc-button w-full disabled:opacity-50"
|
|
>
|
|
{isLoginLoading ? 'Anmelden...' : 'Anmelden'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Vote form
|
|
if (isSubmitted) {
|
|
return (
|
|
<div className="px-4 py-4">
|
|
<div className="ssvc-main-content text-center">
|
|
<div className="mb-4">
|
|
<div className="w-12 h-12 bg-[#e6f0fa] flex items-center justify-center mx-auto mb-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-[#0057a6]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-xl font-bold text-[#0057a6] mb-2">Vielen Dank!</h2>
|
|
<p className="text-gray-600">
|
|
Deine Stimme wurde erfolgreich übermittelt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-4">
|
|
<div className="mb-4">
|
|
<div className="ssvc-main-content">
|
|
<form onSubmit={handleVoteSubmit} className="space-y-4">
|
|
<div>
|
|
<div className="text-lg font-bold text-[#0057a6] mb-3">
|
|
<EditableText id="vote-question" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{voteOptions.map((option) => (
|
|
<label
|
|
key={option.id}
|
|
className="flex items-center p-2 border border-gray-200 cursor-pointer hover:bg-[#e6f0fa] transition-colors"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="vote"
|
|
value={option.id}
|
|
checked={selectedOption === option.id}
|
|
onChange={() => setSelectedOption(option.id)}
|
|
className="h-4 w-4 text-[#0057a6] border-gray-300"
|
|
/>
|
|
<span className="ml-2 text-gray-800">{option.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3 bg-[#f0f7ff] border border-[#cce0ff] rounded-lg">
|
|
<label htmlFor="comment" className="flex items-center text-sm font-medium text-[#0057a6] mb-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
|
</svg>
|
|
Kommentare oder Vorschläge (Optional)
|
|
</label>
|
|
<div>
|
|
<textarea
|
|
id="comment"
|
|
name="comment"
|
|
rows={3}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="Dein Kommentar..."
|
|
className="w-full px-3 py-2 border-2 border-gray-300 rounded-md bg-[#e6f0fa] focus:outline-none focus:border-[#0057a6] focus:ring-2 focus:ring-[#0057a6]/20 transition-all duration-200 shadow-sm"
|
|
/>
|
|
</div>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Bitte kurz fassen und auf konkretes Feedback beschränken.
|
|
</p>
|
|
</div>
|
|
|
|
{voteError && (
|
|
<div className="text-red-500 text-sm">{voteError}</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isVoteLoading}
|
|
className="ssvc-button w-full disabled:opacity-50"
|
|
>
|
|
{isVoteLoading ? 'Wird übermittelt...' : 'Stimme abgeben'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|