Add Admin Button & Ask for E-Mail Address

[dilanurbayraktar]

We don't want to get hacked, do we 🫣

Summary 💻

The admins sign into the admin view via their Tufts logins. But how can we make sure that the person trying to log in is a whitelisted admin? To do this, we want to store all the Tufts emails of the admins who have access in a table named admin. So you will help make a button that asks for the admin's email address we want to add.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Create your endpoint
• Create your frontend endpoint fetch
• See if the data is displayed with your dev server
• Open a PR and request review from @brandondionisio.

Steps 👍

• First, make a component file named add_admin.tsx and add a route in App.tsx to test it (you know the drill).
• In the component, you should make a button styled however you'd like, you have full freedom (but pls don't go too crazy). The button should be blue and labeled "New Admin". Give it some nice hover: classes and make it look nice :)
• When clicked, the button should dropdown an area to enter an email and press a button to submit the email. This button can be a plus or "Add" or whatever you'd like.
• Now, you need to make a function handleSubmit that is called when the submit button is successfully pressed (with onClick). IMPORTANT: in order for the submit to be successful, check that the submitted email ends with "@tufts.edu". Make the function console.log the inputted information so you know it works correctly.
• Since we are putting new data into the admin table in the database, you will need to use a POST request. So, open backend/src/index.ts and create a new POST request with a route URL of "/admin"
• To make sure you can reach your endpoint, make your POST request console.log something and then attempt to fetch the endpoint in your handleSubmit function. If you go to your browser console, you should be able to see your console.log message.
• Now, it's time to post some data! You can use the following format to pass in the email to the endpoint you made: const response = await fetch(http://localhost:3000/admin/${email};`
  You also need to alter your POST request to take in this email so change the route URL to "/admin/:email" and extract the email with const email = req.params.email; Console.log the email to see if it was posted correctly.
• Finally, you can make the drizzle query in your endpoint to add the new row in the admin table. You can use: await db.insert(admin).values( {email} );. Verify that the new row gets put into the database and yay you're done, amazing work.

Tip for success 📈

• Use npx tsx src/index.ts to run the backend server
• Resource on express routing: here
• Use the already created routes and fetches as a template for your own
• Resource on the fetch API: here
• IMPORTANT: emails are unique in the admin table. If you attempt to add a duplicate email, it will throw an error. Make sure that this error is handled correctly and doesn't crash the page.

Where to get help!

Reach out to @dilanurbayraktar and @brandondionisio.