63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
|
import { useEffect, useState } from "react"
|
||
|
|
import { useLtoContext } from "../context/LtoContext"
|
||
|
|
import useLocalStorage from "use-local-storage"
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export const LoginWidget = () => {
|
||
|
|
const {loggedIn, login, logout} = useLtoContext()
|
||
|
|
|
||
|
|
const [username, setUsername] = useLocalStorage("input_username","", {syncData: false})
|
||
|
|
const [password, setPassword] = useState("")
|
||
|
|
return <>
|
||
|
|
<div className="flex flex-col border border-gray-400">
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div className="flex flex-row bg-blue-400">
|
||
|
|
<span className="text-white pb-1 pl-2 m-y-1">
|
||
|
|
account
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row flex-wrap gap-1 p-2 justify-center">
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
onChange={(e)=>{
|
||
|
|
setUsername(e.target.value)
|
||
|
|
}}
|
||
|
|
value={username}
|
||
|
|
placeholder="username" className="w-32 pl-2 pb-1 border border-gray-600"/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
onChange={(e)=>{
|
||
|
|
setPassword(e.target.value)
|
||
|
|
}}
|
||
|
|
value={password}
|
||
|
|
type="password" placeholder="password" className="w-32 pl-2 pb-1 border border-gray-600"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row p-2 justify-center gap-4">
|
||
|
|
<button
|
||
|
|
onClick={async ()=>{
|
||
|
|
login(username,password).catch((e)=>{
|
||
|
|
alert(e.toString())
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
className="border border-gray-600 px-2 py-1 hover:bg-blue-200">
|
||
|
|
login
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={()=>{
|
||
|
|
logout()
|
||
|
|
return
|
||
|
|
}}
|
||
|
|
disabled={!loggedIn} className="border border-gray-600 px-2 py-1 hover:bg-red-200 disabled:border-gray-400 disabled:text-gray-300 disabled:bg-white ">
|
||
|
|
logout
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
|
||
|
|
|