Improved login admin page.

admin/src/pages/LoginScreen.tsx

@@ -1,13 +1,23 @@
-import {useState} from "react";
 import {useStore} from "../store/store.ts";
 import {useNavigate} from "react-router-dom";
+import {SubmitHandler, useForm} from "react-hook-form";
+import {Eye, EyeOff} from "lucide-react";
+import {useState} from "react";
+
+type Inputs = {
+    username: string
+    password: string
+}
 
 export const LoginScreen = ()=>{
     const navigate = useNavigate()
-    const [username, setUsername] = useState('')
-    const [password, setPassword] = useState('')
+    const [passwordVisible, setPasswordVisible] = useState<boolean>(false)
 
-    const login = ()=>{
+    const {
+        register,
+        handleSubmit} = useForm<Inputs>()
+
+    const login: SubmitHandler<Inputs> = ({username,password})=>{
         fetch('/admin-auth/', {
             method: 'POST',
             headers:{
@@ -28,17 +38,24 @@ export const LoginScreen = ()=>{
         })
     }
 
-    return <div className="login-background">
-        <div className="login-box">
-            <h1 className="login-title">Login Etherpad</h1>
-            <div className="login-inner-box">
+    return <div className="login-background login-page">
+        <div className="login-box login-form">
+            <h1 className="login-title">Etherpad</h1>
+            <form className="login-inner-box input-control" onSubmit={handleSubmit(login)}>
                 <div>Username</div>
-                <input className="login-textinput" type="text" name="username" value={username} onChange={v => setUsername(v.target.value)} placeholder="Username"/>
+                <input {...register('username', {
+                    required: true
+                })} className="login-textinput input-control" type="text" placeholder="Username"/>
                 <div>Passwort</div>
-                <input className="login-textinput" type="password" name="password" value={password}
-                       onChange={v => setPassword(v.target.value)} placeholder="Password"/>
-                <input type="button" value="Login" onClick={login} className="login-button"/>
-            </div>
+                <span className="icon-input">
+                        <input {...register('password', {
+                            required: true
+                        })} className="login-textinput" type={passwordVisible?"text":"password"} placeholder="Password"/>
+                    {passwordVisible? <Eye onClick={()=>setPasswordVisible(!passwordVisible)}/> :
+                        <EyeOff onClick={()=>setPasswordVisible(!passwordVisible)}/>}
+                    </span>
+                <input type="submit" value="Login" className="login-button"/>
+            </form>
         </div>
     </div>
 }