KickForm.tsx (4433B)
1 import { PureComponent } from "react"; 2 3 type Props = Record<string, unknown>; 4 type State = { 5 user: string; 6 reason: string; 7 roomId?: string; 8 room: string; 9 }; 10 11 class KickForm extends PureComponent<Props, State> { 12 constructor(props: Props | Readonly<Props>) { 13 super(props); 14 const urlParams = (new URL(window.location.href)).searchParams; 15 const roomId = urlParams.get("room_id") ?? undefined; 16 this.state = { 17 user: "", 18 reason: "", 19 roomId: roomId, 20 room: "" 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 const { user, room, reason, roomId } = this.state; 37 38 if (user === "") { 39 // TODO display warning 40 return; 41 } else { 42 if (room === "") { 43 await window.widget_api.sendRoomEvent("m.room.message", { 44 msgtype: "m.text", 45 body: `!mjolnir kick ${user} ${reason}`, 46 }, roomId); 47 } else if (reason === "") { 48 await window.widget_api.sendRoomEvent("m.room.message", { 49 msgtype: "m.text", 50 body: `!mjolnir kick ${user} ${room}`, 51 }, roomId); 52 } else { 53 await window.widget_api.sendRoomEvent("m.room.message", { 54 msgtype: "m.text", 55 body: `!mjolnir kick ${user}`, 56 }, roomId); 57 } 58 } 59 } 60 61 render() { 62 const { user, room, reason } = this.state; 63 return ( 64 <> 65 <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-200 mb-2">Kick</h3> 66 <form onSubmit={this.handleSubmit.bind(this)} className="grid grid-cols-1 gap-4"> 67 <label className="block w-96"> 68 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">User ID</span> 69 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 70 <input aria-label="User identifier" aria-required="true" required placeholder="User ID" 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)} /> 71 </div> 72 </label> 73 <label className="block w-96"> 74 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Room Alias/ID</span> 75 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 76 <input aria-label="Room Alias or Room identifier" aria-required="false" placeholder="Room Alias/ID" 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)} /> 77 </div> 78 </label> 79 <label className="block w-96"> 80 <span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Reason</span> 81 <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full"> 82 <input aria-label="Reason" aria-required="false" placeholder="Reason" 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="reason" value={reason} onChange={this.handleInputChange.bind(this)} /> 83 </div> 84 </label> 85 86 <input className="bg-yellow-400 hover:bg-yellow-500 cursor-pointer h-10 rounded dark:text-gray-900 text-gray-200 w-96" type="submit" value="Kick" /> 87 </form> 88 </> 89 ); 90 } 91 } 92 93 export default KickForm;