import React, { useState, useContext } from 'react'; import { SparklesIcon } from '../components/icons'; import { AuthContext } from '../context/AuthContext'; import { KOFI_PAGE_URL } from '../config'; const LoginView: React.FC = () => { const { login } = useContext(AuthContext); const [name, setName] = useState(''); const [secret, setSecret] = useState(''); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const handleLogin = (e: React.FormEvent) => { e.preventDefault(); setError(''); setIsLoading(true); setTimeout(() => { const success = login(name, secret); if (!success) { setError('Invalid credentials. Please check your login name and secret password.'); } // On success, the App component will automatically switch views. setIsLoading(false); }, 500); // Artificial delay for better UX }; return (

Welcome to Yuki

Enter the credentials you received after your purchase.

setName(e.target.value)} className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6" placeholder="Login Name" required />
setSecret(e.target.value)} className="block w-full rounded-md border-0 py-2.5 px-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6" placeholder="Secret Password" required />
{error &&

{error}

}

Don't have access?{' '} Purchase on Ko-fi .

); }; export default LoginView;