Improved login admin page.

admin/package.json

@@ -17,6 +17,7 @@
     "lucide-react": "^0.356.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.0",
     "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.3",
     "zustand": "^4.5.2"

admin/src/index.css

@@ -367,6 +367,8 @@ pre {
 
 .login-background {
     background-image: url("/fond.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -374,6 +376,15 @@ pre {
     background-color: #f0f0f0;
 }
 
+.login-inner-box div {
+    margin-top: 1rem;
+}
+
+.login-inner-box [type=submit]{
+    margin-top: 2rem;
+}
+
+
 
 .login-textinput {
     width: 100%;
@@ -387,7 +398,7 @@ pre {
 .login-box {
     width: 20%;
     padding: 20px;
-    border-radius: 5px;
+    border-radius: 40px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
 }
@@ -398,8 +409,12 @@ pre {
 }
 
 .login-title {
+    padding: 0;
+    margin: 0;
+    text-align: center;
     color: var(--etherpad-color);
-    font-size: 2em;
+    font-size: 4rem;
+    font-weight: 1000;
 }
 
 .login-button {
@@ -619,7 +634,7 @@ table tbody tr {
     border-bottom: 1px solid #dddddd;
 }
 
-table tr:nth-child(even) td{
+table tr:nth-child(even) td {
     background-color: lightgray;
 }
 
@@ -671,3 +686,42 @@ table tbody tr.active-row {
 .pad-pagination >span {
     font-size: 20px;
 }
+
+
+.login-page .login-form .input-control input[type=text], .login-page .login-form .input-control input[type=email], .login-page .login-form .input-control input[type=password], .login-page .signup-form .input-control input[type=text], .login-page .signup-form .input-control input[type=email], .login-page .signup-form .input-control input[type=password], .login-page .forgot-form .input-control input[type=text], .login-page .forgot-form .input-control input[type=email], .login-page .forgot-form .input-control input[type=password] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border-bottom: 2px solid #ccc;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-radius: 5px;
+    font-size: 14px;
+    color: #666;
+    background-color: #f8f8f8;
+    -webkit-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+input, button, select, optgroup, textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+.icon-input {
+    position: relative;
+}
+
+.icon-input svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    color: #666;
+}

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>
 }