\n Library Management System\n

\n {isLogin ? \"Sign in to your account\" : \"Create a new account\"}\n

\n\n {/* Demo Credentials */}\n {isLogin && (\n

Demo Credentials:

\n Admin: admin@library.com / admin123\n

\n )}\n\n {/* Error/Success Messages */}\n {error && (\n

{error}

\n )}\n\n {success && (\n

{success}

\n )}\n\n {/* Login Form */}\n {isLogin ? (\n

\n \n Email Address\n \n setLoginForm(prev => ({ ...prev, email: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Enter your email\"\n />\n

\n\n

\n \n Password\n \n setLoginForm(prev => ({ ...prev, password: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Enter your password\"\n />\n

\n\n \n {loading ? (\n

\n Signing in...\n

\n ) : (\n \"Sign In\"\n )}\n \n \n ) : (\n /* Register Form */\n

\n \n Full Name\n \n setRegisterForm(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Your full name\"\n />\n

\n\n

\n \n Role\n \n setRegisterForm(prev => ({ ...prev, role: e.target.value as \"member\" | \"librarian\" }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n >\n \n \n \n

\n\n

\n \n Email Address\n \n setRegisterForm(prev => ({ ...prev, email: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"your.email@example.com\"\n />\n

\n\n

\n \n Password\n \n setRegisterForm(prev => ({ ...prev, password: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Create a strong password\"\n />\n

\n\n

\n \n Phone (Optional)\n \n setRegisterForm(prev => ({ ...prev, phone: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Your phone number\"\n />\n

\n\n

\n \n Address (Optional)\n \n setRegisterForm(prev => ({ ...prev, address: e.target.value }))}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all\"\n placeholder=\"Your address\"\n rows={3}\n />\n

\n\n \n {loading ? (\n

\n Creating account...\n

\n ) : (\n \"Create Account\"\n )}\n \n \n )}\n\n {/* Toggle Form */}\n

\n {\n setIsLogin(!isLogin);\n setError(null);\n setSuccess(null);\n }}\n className=\"text-blue-600 hover:text-blue-800 font-medium transition-colors\"\n >\n {isLogin ? \"Need an account? Sign up\" : \"Already have an account? Sign in\"}\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/priyanshu2307/untitled-7020/code/frontend/components/Login.tsx","extension","actionData","errors"]