elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add JSON validation for unlock steps in admin specials management with tooltip error display

Browse Source
This commit is contained in:
Hördle Bot
2025-12-05 20:56:27 +01:00
parent 616cfec3e7
commit 0d806daf66
4 changed files with 171 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
app/[locale]/admin/page.tsx
View File

@@ -115,6 +115,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
const [newSpecialCurator, setNewSpecialCurator] = useState('');
@@ -124,6 +125,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
const [editSpecialCurator, setEditSpecialCurator] = useState('');
@@ -239,6 +241,25 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
}
};
// Validate JSON for unlock steps
const validateUnlockSteps = (value: string): string | null => {
if (!value.trim()) {
return t('unlockStepsRequired');
}
try {
const parsed = JSON.parse(value);
if (!Array.isArray(parsed)) {
return t('unlockStepsMustBeArray');
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return t('unlockStepsMustBePositiveNumbers');
}
return null;
} catch (e) {
return t('unlockStepsInvalidJson');
}
};
const handleLogout = () => {
localStorage.removeItem('hoerdle_admin_auth');
setIsAuthenticated(false);
@@ -352,6 +373,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const handleCreateSpecial = async (e: React.FormEvent) => {
e.preventDefault();
if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
// Validate unlock steps
const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
if (unlockStepsError) {
setNewSpecialUnlockStepsError(unlockStepsError);
return;
}
setNewSpecialUnlockStepsError(null);
const res = await fetch('/api/specials', {
method: 'POST',
headers: getAuthHeaders(),
@@ -370,12 +400,14 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
setNewSpecialSubtitle({ de: '', en: '' });
setNewSpecialMaxAttempts(7);
setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
setNewSpecialUnlockStepsError(null);
setNewSpecialLaunchDate('');
setNewSpecialEndDate('');
setNewSpecialCurator('');
fetchSpecials();
} else {
alert('Failed to create special');
const errorData = await res.json().catch(() => ({}));
alert(errorData.error || 'Failed to create special');
}
};
@@ -455,6 +487,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
setEditSpecialMaxAttempts(special.maxAttempts);
setEditSpecialUnlockSteps(special.unlockSteps);
setEditSpecialUnlockStepsError(null);
setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
setEditSpecialCurator(special.curator || '');
@@ -462,6 +495,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
const saveEditedSpecial = async () => {
if (editingSpecialId === null) return;
// Validate unlock steps
const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
if (unlockStepsError) {
setEditSpecialUnlockStepsError(unlockStepsError);
return;
}
setEditSpecialUnlockStepsError(null);
const res = await fetch('/api/specials', {
method: 'PUT',
headers: getAuthHeaders(),
@@ -478,9 +520,11 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
});
if (res.ok) {
setEditingSpecialId(null);
setEditSpecialUnlockStepsError(null);
fetchSpecials();
} else {
alert('Failed to update special');
const errorData = await res.json().catch(() => ({}));
alert(errorData.error || 'Failed to update special');
}
};
@@ -1300,8 +1344,38 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
<input type="text" placeholder={t('unlockSteps')} value={newSpecialUnlockSteps} onChange={e => setNewSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
{t('unlockSteps')}
{newSpecialUnlockStepsError && (
<span
title={newSpecialUnlockStepsError}
style={{
color: '#ef4444',
cursor: 'help',
fontSize: '0.875rem'
}}
>
⚠️
</span>
)}
</label>
<input
type="text"
placeholder={t('unlockSteps')}
value={newSpecialUnlockSteps}
onChange={e => {
const value = e.target.value;
setNewSpecialUnlockSteps(value);
const error = validateUnlockSteps(value);
setNewSpecialUnlockStepsError(error);
}}
className="form-input"
title={newSpecialUnlockStepsError || undefined}
style={{
width: '200px',
borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1315,7 +1389,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
<input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
</div>
<button type="submit" className="btn-primary" style={{ height: '38px' }}>{t('addSpecial')}</button>
<button
type="submit"
className="btn-primary"
style={{
height: '38px',
opacity: newSpecialUnlockStepsError ? 0.5 : 1,
cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
}}
disabled={!!newSpecialUnlockStepsError}
>
{t('addSpecial')}
</button>
</div>
</form>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
@@ -1379,8 +1464,37 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
<input type="text" value={editSpecialUnlockSteps} onChange={e => setEditSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
<label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
{t('unlockSteps')}
{editSpecialUnlockStepsError && (
<span
title={editSpecialUnlockStepsError}
style={{
color: '#ef4444',
cursor: 'help',
fontSize: '0.875rem'
}}
>
⚠️
</span>
)}
</label>
<input
type="text"
value={editSpecialUnlockSteps}
onChange={e => {
const value = e.target.value;
setEditSpecialUnlockSteps(value);
const error = validateUnlockSteps(value);
setEditSpecialUnlockStepsError(error);
}}
className="form-input"
title={editSpecialUnlockStepsError || undefined}
style={{
width: '200px',
borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
}}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1394,7 +1508,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
<label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
<input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
</div>
<button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>{t('save')}</button>
<button
onClick={saveEditedSpecial}
className="btn-primary"
style={{
height: '38px',
opacity: editSpecialUnlockStepsError ? 0.5 : 1,
cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
}}
disabled={!!editSpecialUnlockStepsError}
>
{t('save')}
</button>
<button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
</div>
</div>

30
app/api/specials/route.ts
View File

@@ -40,6 +40,21 @@ export async function POST(request: Request) {
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
}
// Validate unlockSteps JSON
if (unlockSteps) {
try {
const parsed = JSON.parse(unlockSteps);
if (!Array.isArray(parsed)) {
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
}
} catch (e) {
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
}
}
// Ensure name is stored as JSON
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
@@ -81,6 +96,21 @@ export async function PUT(request: Request) {
return NextResponse.json({ error: 'ID required' }, { status: 400 });
}
// Validate unlockSteps JSON if provided
if (unlockSteps !== undefined) {
try {
const parsed = JSON.parse(unlockSteps);
if (!Array.isArray(parsed)) {
return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
}
if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
}
} catch (e) {
return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
}
}
const updateData: any = {};
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;

4
messages/de.json
View File

@@ -149,6 +149,10 @@
"subtitle": "Untertitel",
"maxAttempts": "Max. Versuche",
"unlockSteps": "Freischalt-Schritte",
"unlockStepsRequired": "Freischalt-Schritte sind erforderlich",
"unlockStepsInvalidJson": "Ungültiges JSON-Format. Bitte verwende ein Array von Zahlen, z.B. [2,4,7,11,16,30,60]",
"unlockStepsMustBeArray": "Freischalt-Schritte müssen ein Array sein",
"unlockStepsMustBePositiveNumbers": "Alle Werte müssen positive Zahlen sein",
"launchDate": "Startdatum",
"endDate": "Enddatum",
"curator": "Kurator",

4
messages/en.json
View File

@@ -149,6 +149,10 @@
"subtitle": "Subtitle",
"maxAttempts": "Max Attempts",
"unlockSteps": "Unlock Steps",
"unlockStepsRequired": "Unlock steps are required",
"unlockStepsInvalidJson": "Invalid JSON format. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]",
"unlockStepsMustBeArray": "Unlock steps must be an array",
"unlockStepsMustBePositiveNumbers": "All values must be positive numbers",
"launchDate": "Launch Date",
"endDate": "End Date",
"curator": "Curator",