RedactForm.tsx (6379B)
1 import { PureComponent } from "react"; 2 type Props = Record<string, unknown>; 3 type State = { 4 user: string; 5 event: string; 6 limit: string; 7 room: string; 8 roomId?: string; 9 }; 10 class RedactForm extends PureComponent<Props, State> { 11 constructor(props: Props | Readonly<Props>) { 12 super(props); 13 const urlParams = (new URL(window.location.href)).searchParams; 14 const roomId = urlParams.get("room_id") ?? undefined; 15 this.state = { 16 user: "", 17 event: "", 18 room: "", 19 limit: "", 20 roomId: roomId 21 }; 22 } 23 24 handleInputChange(event: { target: { type: string, checked?: boolean, value: string | boolean, name: string; }; }) { 25 const target = event.target; 26 const value = target.type === 'checkbox' ? target.checked : target.value; 27 const name = target.name; 28 this.setState({ 29 [name]: value 30 } as unknown as State); 31 } 32 33 async handleSubmit(ev: { preventDefault: () => void; }) { 34 ev.preventDefault(); 35 36 let command = ""; 37 if (this.state.event !== "" && this.state.user === "" && this.state.room === "" && this.state.limit === "") { 38 command = `!mjolnir redact ${this.state.event}`; 39 } else if (this.state.event === "" && this.state.user !== "" && this.state.room === "" && this.state.limit === "") { 40 command = `!mjolnir redact ${this.state.user}`; 41 } else if (this.state.event === "" && this.state.user !== "" && this.state.room !== "" && this.state.limit === "") { 42 command = `!mjolnir redact ${this.state.user} ${this.state.room}`; 43 } else if (this.state.event === "" && this.state.user !== "" && this.state.room !== "" && this.state.limit !== "") { 44 command = `!mjolnir redact ${this.state.user} ${this.state.room} ${this.state.limit}`; 45 } else if (this.state.event === "" && this.state.user !== "" && this.state.room === "" && this.state.limit !== "") { 46 command = `!mjolnir redact ${this.state.user} ${this.state.limit}`; 47 } else { 48 return; 49 } 50 await window.widget_api.sendRoomEvent("m.room.message", { 51 msgtype: "m.text", 52 body: command, 53 }, this.state.roomId); 54 } 55 56 render() { 57 const { user, room, limit, event } = this.state; 58 return ( 59 <> 60 <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-200 mb-2">Redact</h3> 61 <h4 className="text-gray-900 dark:text-gray-200 text-base font-thin mb-2 w-96 italic">(Note that this goes with the same combinations as the commands. Make sure empty fields are empty when submitting!)</h4> 62 <form onSubmit={this.handleSubmit.bind(this)} className="grid grid-cols-1 gap-4"> 63 <h4 className="text-gray-900 dark:text-gray-200 text-lg font-normal mb-1 w-96">Redacting a user</h4> 64 <label className="block w-96"> 65 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">User ID (required if Event Permalink empty)</span> 66 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 67 <input aria-label="User identifier (required if Event Permalink empty)" aria-disabled={event !== ""} aria-required={event === ""} disabled={event !== ""} required={event === ""} placeholder="User ID (required if Permalink empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="user" value={user} onChange={this.handleInputChange.bind(this)} /> 68 </div> 69 </label> 70 <label className="block w-96"> 71 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Room (optional)</span> 72 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 73 <input aria-label="Room" aria-disabled={event !== ""} aria-required="false" disabled={event !== ""} placeholder="Room (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="room" value={room} onChange={this.handleInputChange.bind(this)} /> 74 </div> 75 </label> 76 <label className="block w-96"> 77 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Limit (optional)</span> 78 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 79 <input aria-label="Limit" aria-disabled={event !== ""} aria-required="false" disabled={event !== ""} placeholder="Limit (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="limit" value={limit} onChange={this.handleInputChange.bind(this)} /> 80 </div> 81 </label> 82 <h4 className="text-gray-900 dark:text-gray-200 text-lg font-normal mb-1 w-96">Redacting an event</h4> 83 <label className="block w-96"> 84 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Event Permalink (required if User ID empty)</span> 85 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 86 <input aria-label="Limit" aria-disabled={user !== ""} aria-required={user === ""} disabled={user !== ""} required={user === ""} placeholder="Event Permalink (required if User ID empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="event" value={event} onChange={this.handleInputChange.bind(this)} /> 87 </div> 88 </label> 89 90 <input className="bg-blue-400 hover:bg-blue-500 cursor-pointer h-10 rounded dark:text-gray-900 text-gray-200 w-96" type="submit" value="Redact" /> 91 </form> 92 </> 93 ); 94 } 95 } 96 97 export default RedactForm;