feat: PIN gate on Λειτουργίες settings tab (code: 4034)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,54 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
import { PHASE2_FEATURE_DEFS, isFeatureEnabled, setFeatureEnabled, usePhase2Features } from '../../../hooks/usePhase2Features'
|
import { PHASE2_FEATURE_DEFS, isFeatureEnabled, setFeatureEnabled, usePhase2Features } from '../../../hooks/usePhase2Features'
|
||||||
|
|
||||||
|
const SECRET = '4034'
|
||||||
|
|
||||||
|
function PinGate({ onUnlock }) {
|
||||||
|
const [pin, setPin] = useState('')
|
||||||
|
const [error, setError] = useState(false)
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
if (pin === SECRET) {
|
||||||
|
onUnlock()
|
||||||
|
} else {
|
||||||
|
setError(true)
|
||||||
|
setPin('')
|
||||||
|
setTimeout(() => setError(false), 1500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-5 py-16 max-w-xs mx-auto">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-2xl">🔒</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="font-semibold text-slate-800">Περιορισμένη πρόσβαση</p>
|
||||||
|
<p className="text-sm text-slate-400 mt-1">Εισάγετε τον κωδικό για να συνεχίσετε</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-3 w-full">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={pin}
|
||||||
|
onChange={e => setPin(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === 'Enter' && submit()}
|
||||||
|
autoFocus
|
||||||
|
maxLength={8}
|
||||||
|
placeholder="••••"
|
||||||
|
className={`w-full text-center text-xl tracking-[0.4em] border rounded-xl px-4 py-3 outline-none transition-colors ${
|
||||||
|
error ? 'border-red-400 bg-red-50 text-red-600' : 'border-slate-200 focus:border-sky-400'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
{error && <p className="text-xs text-red-500 font-medium">Λάθος κωδικός</p>}
|
||||||
|
<button
|
||||||
|
onClick={submit}
|
||||||
|
className="w-full rounded-xl bg-slate-900 text-white font-semibold py-2.5 text-sm hover:bg-slate-700 transition-colors"
|
||||||
|
>
|
||||||
|
Είσοδος
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function Toggle({ checked, onChange }) {
|
function Toggle({ checked, onChange }) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -22,8 +71,11 @@ function Toggle({ checked, onChange }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Phase2FeaturesTab() {
|
export default function Phase2FeaturesTab() {
|
||||||
|
const [unlocked, setUnlocked] = useState(false)
|
||||||
const features = usePhase2Features()
|
const features = usePhase2Features()
|
||||||
|
|
||||||
|
if (!unlocked) return <PinGate onUnlock={() => setUnlocked(true)} />
|
||||||
|
|
||||||
const allOn = features.every(f => f.enabled)
|
const allOn = features.every(f => f.enabled)
|
||||||
const allOff = features.every(f => !f.enabled)
|
const allOff = features.every(f => !f.enabled)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user