Added init

admin/package.json

@@ -11,7 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-switch": "^1.1.0"
+    "@radix-ui/react-switch": "^1.1.0",
+    "react-day-picker": "^9.0.7"
   },
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.1.1",

admin/src/App.tsx

@@ -6,7 +6,7 @@ import {NavLink, Outlet, useNavigate} from "react-router-dom";
 import {useStore} from "./store/store.ts";
 import {LoadingScreen} from "./utils/LoadingScreen.tsx";
 import {Trans, useTranslation} from "react-i18next";
-import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall} from "lucide-react";
+import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall,Paintbrush } from "lucide-react";
 
 const WS_URL = import.meta.env.DEV? 'http://localhost:9001' : ''
 export const App = ()=> {
@@ -93,18 +93,19 @@ export const App = ()=> {
                     <Crown width={40} height={40}/>
                     <h1>Etherpad</h1>
                 </span>
-                <ul>
-                    <li><NavLink to="/plugins"><Cable/><Trans i18nKey="admin_plugins"/></NavLink></li>
-                    <li><NavLink to={"/settings"}><Wrench/><Trans i18nKey="admin_settings"/></NavLink></li>
-                    <li><NavLink to={"/help"}> <Construction/> <Trans i18nKey="admin_plugins_info"/></NavLink></li>
-                    <li><NavLink to={"/pads"}><NotepadText/><Trans
-                        i18nKey="ep_admin_pads:ep_adminpads2_manage-pads"/></NavLink></li>
-                    <li><NavLink to={"/shout"}><PhoneCall/>Communication</NavLink></li>
-                </ul>
+              <ul>
+                <li><NavLink to="/plugins"><Cable/><Trans i18nKey="admin_plugins"/></NavLink></li>
+                <li><NavLink to={"/settings"}><Wrench/><Trans i18nKey="admin_settings"/></NavLink></li>
+                <li><NavLink to={"/help"}> <Construction/> <Trans i18nKey="admin_plugins_info"/></NavLink></li>
+                <li><NavLink to={"/pads"}><NotepadText/><Trans
+                  i18nKey="ep_admin_pads:ep_adminpads2_manage-pads"/></NavLink></li>
+                <li><NavLink to={"/shout"}><PhoneCall/>Communication</NavLink></li>
+                <li><NavLink to={"/cleanup"}><Paintbrush/>Cleanup</NavLink></li>
+              </ul>
             </div>
         </div>
-        <div className="innerwrapper">
-            <Outlet/>
+      <div className="innerwrapper">
+        <Outlet/>
         </div>
     </div>
 }

admin/src/components/DatetimeInput.tsx

@@ -0,0 +1,22 @@
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/style.css";
+import {FC} from "react";
+
+type DatetimeInputProps = {
+  value: Date,
+  onChange: (value: Date) => void
+}
+
+export const DatetimeInput:FC<DatetimeInputProps> = ({
+  onChange,value
+                                                     })=>{
+
+  return (
+    <DayPicker
+      required
+      mode="single"
+      selected={value}
+      onSelect={onChange}
+    />
+  );
+}

admin/src/main.tsx

@@ -13,6 +13,7 @@ import i18n from "./localization/i18n.ts";
 import {PadPage} from "./pages/PadPage.tsx";
 import {ToastDialog} from "./utils/Toast.tsx";
 import {ShoutPage} from "./pages/ShoutPage.tsx";
+import {AuthorCleanupScreen} from "./pages/AuthorCleanupScreen.tsx";
 
 const router = createBrowserRouter(createRoutesFromElements(
     <><Route element={<App/>}>
@@ -22,6 +23,7 @@ const router = createBrowserRouter(createRoutesFromElements(
         <Route path="/help" element={<HelpPage/>}/>
         <Route path="/pads" element={<PadPage/>}/>
         <Route path="/shout" element={<ShoutPage/>}/>
+        <Route path="/cleanup" element={<AuthorCleanupScreen/>}/>
     </Route><Route path="/login">
         <Route index element={<LoginScreen/>}/>
     </Route></>

admin/src/pages/AuthorCleanupScreen.tsx

@@ -0,0 +1,52 @@
+import {useState} from "react";
+import {DatetimeInput} from "../components/DatetimeInput.tsx";
+import {IconButton} from "../components/IconButton.tsx";
+import {PaintRoller} from "lucide-react";
+import * as Dialog from "@radix-ui/react-dialog";
+import {useStore} from "../store/store.ts";
+
+export const AuthorCleanupScreen = ()=>{
+  const [cleanUpBefore, setCleanUpBefore] = useState<Date>()
+  const [openDialog, setOpenDialog] = useState<boolean>(false)
+  const settingsSocket = useStore(state=>state.settingsSocket)
+
+
+  const deleteAuthorsBefore = (date: Date)=>{
+    settingsSocket?.emit('deleteAuthorsBefore', date.getTime())
+  }
+
+  return <div>
+    <Dialog.Root open={openDialog}><Dialog.Portal>
+      <Dialog.Overlay className="dialog-confirm-overlay" />
+      <Dialog.Content  className="dialog-confirm-content">
+        <div className="">
+          <div className=""></div>
+          <div className="">
+            Delete all authors before {cleanUpBefore?.toLocaleString()}?
+          </div>
+          <div className="settings-button-bar">
+            <button onClick={()=>{
+              setOpenDialog(false)
+            }}>Cancel</button>
+            <button onClick={()=>{
+              deleteAuthorsBefore(cleanUpBefore!)
+              setOpenDialog(false)
+            }}>Ok</button>
+          </div>
+        </div>
+      </Dialog.Content>
+    </Dialog.Portal>
+    </Dialog.Root>
+    <h1>Author cleanup</h1>
+
+    <div>
+      <DatetimeInput onChange={(c)=>setCleanUpBefore(c)} value={cleanUpBefore!}/>
+
+      {cleanUpBefore&&<p>All authors before {cleanUpBefore.toLocaleString()} will be deleted</p>}
+
+      <IconButton disabled={cleanUpBefore == undefined} icon={<PaintRoller/>} title="Delete authors?" onClick={()=>{
+        setOpenDialog(true)
+      }}/>
+    </div>
+  </div>
+}