/ var / www / html / events / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxrwxr-x
AddEvent.js	8.29 KB	-rw-rw-r--
AddUser.js	5.79 KB	-rw-rw-r--
CustomInput.js	3.43 KB	-rw-rw-r--
EventTableRow.js	2.23 KB	-rw-rw-r--
Events.js	3.39 KB	-rw-rw-r--
Home.js	11.2 KB	-rw-rw-r--
Navbar.js	10.61 KB	-rw-rw-r--
NextToast.js	62 B	-rw-rw-r--
PaginateItems.js	2.61 KB	-rw-rw-r--
Provider.js	171 B	-rw-rw-r--
ShowEvent.js	8.95 KB	-rw-rw-r--
ShowHomeEvent.js	3.26 KB	-rw-rw-r--
UpdateEvent.js	10.27 KB	-rw-rw-r--
UpdateUser.js	8.89 KB	-rw-rw-r--
UserTableRow.js	1.64 KB	-rw-rw-r--

Code Editor : AddUser.js

"use client";
import React from "react";
import { useState } from "react";
import { toast } from "react-toastify";
const AddUser = ({ visible, handleCLick }) => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [role, setRole] = useState("admin");
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("active");
  const [password, setPassword] = useState("");

if (!visible) return null;

const handleSubmit = () => {
    const data = {
      firstName: firstName,
      lastName: lastName,
      password: password,
      role: role,
      email: email,
      status: status,
    };

if (
      firstName === "" ||
      password === "" ||
      email === "" ||
      status === "" ||
      role === ""
    ) {
      alert("Please fill all the fields");
      return;
    }
    fetch("http://events.iiitd.edu.in/api/addUser", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
      .then((response) => {
        toast.success("User added!", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "dark",
        });
        handleCLick();
        setFirstName("");
        setLastName("");
        setPassword("");
        setEmail("");
        setStatus("active");
        setRole("admin");
      })
      .catch((error) => {
        toast.error("error adding user!", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
      });
  };
  return (
    <div className="fixed inset-x-72 inset-y-5 bg-slate-200 overflow-auto">
      <div className=" flex justify-center items-center overflow-auto">
        <div className=" w-4/5 flex-col items-center">
          <h1 className="text-black text-2xl font-bold mt-10 mb-3">Add User</h1>

<div>
            <div className="flex flex-col items-center gap-y-2">
              <label className="text-black w-3/5">First Name <span className="text-red-500">*</span></label>
              <input
                className="m-2 rounded-md p-1 w-3/5"
                type="text"
                placeholder="User Name"
                value={firstName}
                onChange={(e) => {
                  setFirstName(e.target.value);
                }}
              />

<label className="text-black w-3/5">Last Name</label>
              <input
                className="m-2 rounded-md p-1 w-3/5"
                type="text"
                placeholder="User Name"
                value={lastName}
                onChange={(e) => {
                  setLastName(e.target.value);
                }}
              />

<label className="text-black w-3/5">Role <span className="text-red-500">*</span></label>

<select
                className="m-2 rounded-md p-1 w-3/5"
                value={role}
                onChange={(e) => {
                  setRole(e.target.value);
                }}
              >
                <option value="admin">Admin</option>
                <option value="coadmin">Co-Admin</option>
              </select>
              <label className="text-black w-3/5">Email <span className="text-red-500">*</span></label>

<input
                className="m-2 rounded-md p-1 w-3/5"
                type="email"
                placeholder="xyz@gmail.com"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                }}
              />

<label className="text-black w-3/5">Password <span className="text-red-500">*</span></label>

<input
                className="m-2 rounded-md p-1 w-3/5"
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
              />
              <label className="text-black w-3/5">Status <span className="text-red-500">*</span></label>

<select
                className="m-2 rounded-md p-1 w-3/5"
                value={status}
                onChange={(e) => {
                  setStatus(e.target.value);
                }}
              >
                <option value="active">Active</option>
                <option value="inactive">Not-Active</option>
              </select>

<div className="flex justify-between w-3/5 mt-3">
                <button
                  className="text-black bg-teal-400 rounded-md p-1 w-1/3 hover:bg-teal-500"
                  onClick={() => {
                    handleSubmit();
                  }}
                >
                  Add User
                </button>
                <button
                  className="text-black bg-teal-400 rounded-md p-1 w-1/3 hover:bg-teal-500"
                  onClick={() => {
                    handleCLick();
                    setFirstName("");
                    setLastName("");
                    setPassword("");
                    setEmail("");
                    setStatus("active");
                    setRole("admin");
                  }}
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddUser;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.