add page to create admin user

Author: KJunWei

UserService/src/index.ts

@@ -6,7 +6,8 @@ import cors from "cors";
 // import { firebaseConfig } from "./firebase/firebase.config";
 // import { Socket, Server } from 'socket.io';
 // import { Server as ServerHttp } from 'http';
-import { handleCreateUser, handleGetUser, handleUpdateUser } from "./user/user.controller";
+
+import { handleCreateUser, handleGetUser, handleUpdateUser, handleCreateAdminUser } from "./user/user.controller";
 const app = express();
 const port = 3004;
 app.use(cors());
@@ -23,6 +24,7 @@ app.get("/", (req, res) => {
 // const db = getFirestore();
 
 app.post("/user", handleCreateUser);
+app.post("/useradmin", handleCreateAdminUser);
 app.get("/user", handleGetUser);
 app.put("/user", handleUpdateUser);
 

UserService/src/user/user.controller.ts

@@ -1,5 +1,6 @@
 import { Request, Response } from "express";
-import { createUser, getUser, updateUser } from "./user.service";
+
+import { createAdminUser, createUser, getUser, updateUser } from "./user.service";
 
 export async function handleCreateUser(req: Request, res: Response) {
   try {
@@ -13,6 +14,18 @@ export async function handleCreateUser(req: Request, res: Response) {
   }
 }
 
+export async function handleCreateAdminUser(req: Request, res: Response) {
+  try {
+    const { email } = req.body;
+    console.log(`creating admin user ${email}`);
+    const user = await createAdminUser(email);
+    res.status(200).send(user);
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(error);
+  }
+}
+
 export async function handleGetUser(req: Request, res: Response) {
   try {
     console.log(req.query.email);

UserService/src/user/user.service.ts

@@ -37,6 +37,29 @@ export async function createUser(email: string): Promise<User> {
   }
 }
 
+export async function createAdminUser(email: string): Promise<User> {
+  try {
+    await setDoc(doc(db, "users", email), {
+      email: email,
+      name: "-",
+      year: "-",
+      major: "-",
+      role: "admin",
+      completed: 0,
+    });
+    return Promise.resolve({
+      email: email,
+      name: "-",
+      year: "-",
+      major: "-",
+      role: "admin",
+      completed: 0,
+    });
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
 export async function getUser(email: string): Promise<User> {
   try {
     const data = await getDoc(doc(db, "users", email));

frontend/src/api/user/data.ts

@@ -5,6 +5,9 @@ import { UserModel, Values } from "./model";
 export const createUser = (email: string) =>
   UserHttpClient.post<UserModel>("/user", { email: email });
 
+export const createAdminUser = (email: string) =>
+  UserHttpClient.post<UserModel>("/useradmin", { email: email });
+
 export const getUser = (email: string) =>
   UserHttpClient.get<UserModel>("/user", { params: { email: email } });
 

frontend/src/auth/MaintainerGuard.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./auth.context";
+
+interface AuthGuardProps {
+  children: ReactNode;
+}
+
+export default function MaintainerGuard({ children }: AuthGuardProps) {
+  const { user } = useAuth();
+  if (!(user?.role == 'maintainer')) {
+    return <Navigate to="/login" />;
+  }
+  return <>{children}</>;
+}

frontend/src/auth/auth.context.tsx

@@ -11,13 +11,14 @@ import { registerUser, signIn, signOut } from "../api/auth";
 import { useLocalStorage } from "./useLocalStorage";
 import { useNavigate } from "react-router-dom";
 import { AxiosError } from "axios";
-import { createUser, getUser, UserModel } from "../api/user";
+import { createAdminUser, createUser, getUser, UserModel } from "../api/user";
 
 interface AuthContextData {
   user: UserModel | undefined;
   setUser: any | undefined,
   error: string;
   signUp: (email: string, password: string) => void;
+  signUpAdmin: (email: string, password: string) => void;
   login: (email: string, password: string) => void;
   logout: () => void;
 }
@@ -31,6 +32,7 @@ const AuthContext = createContext<AuthContextData>({
   setUser: undefined,
   error: "",
   signUp: (email: string, password: string) => undefined,
+  signUpAdmin: (email: string, password: string) => undefined,
   login: (email: string, password: string) => undefined,
   logout: () => undefined,
 });
@@ -64,6 +66,33 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     [setUser]
   );
 
+  const signUpAdmin = useCallback(
+    async (email: string, password: string) => {
+      try {
+        const response = await registerUser({
+          email: email,
+          password: password,
+        });
+        const u: User = response.data.user;
+        if (!u.email) {
+          throw new Error("user returned without email");
+        }
+        console.log('creating admin')
+        const fetchedUser = await createAdminUser(u.email);
+        console.log('admin created')
+        // setActiveUser(u)
+        // setUser(fetchedUser.data);
+      } catch (e) {
+        if (e instanceof AxiosError && e.response) {
+          setError(e.response.data.code);
+        } else if (e instanceof Error) {
+          setError(e.message);
+        }
+      }
+    },
+    [setUser]
+  );
+
   const login = useCallback(
     async (email: string, password: string) => {
       try {
@@ -103,8 +132,8 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
   }, [setUser, navigate]);
 
   const authContextProviderValue = useMemo(
-    () => ({ user, setUser, error, signUp, login, logout }),
-    [user, setUser, error, signUp, login, logout]
+    () => ({ user, setUser, error, signUp, signUpAdmin, login, logout }),
+    [user, setUser, error, signUp, signUpAdmin, login, logout]
   );
 
   return (

frontend/src/components/Navbar.tsx

@@ -51,12 +51,16 @@ export default function Navbar() {
     setAnchorElUser(null);
   };
 
-  const settings = [
+  var settings = [
     { name: "Profile", onclick: () => navigate("/profile", { replace: true }) },
     { name: "Account", onclick: handleCloseUserMenu },
     { name: "Dashboard", onclick: handleCloseUserMenu },
     { name: "Logout", onclick: logout },
   ];
+  if (user?.role == 'maintainer') {
+    // settings = settings.concat({name: "Create", onclick: test})
+    settings = settings.concat({name: "Create Admin", onclick: () => navigate("/createadmin", { replace: true })})
+  }
 
   return (
     <AppBar position="static">

frontend/src/index.tsx

@@ -13,6 +13,8 @@ import ProblemSolver from "./pages/ProblemSolver";
 
 import Landing from "./pages/landing";
 import Profile from "./pages/profile";
+import CreateAdmin from "./pages/createAdmin";
+import MaintainerGuard from "./auth/MaintainerGuard";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -65,6 +67,14 @@ root.render(
                 </AuthGuard>
               }
             />
+            <Route
+              path="/createadmin"
+              element={
+                <MaintainerGuard>
+                  <CreateAdmin />
+                </MaintainerGuard>
+              }
+            />
           </Routes>
         </DataContextProvider>
       </AuthContextProvider>

frontend/src/pages/createAdmin.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  CssBaseline,
+  Link,
+  TextField,
+  Typography,
+} from "@mui/material";
+import CenteredContainer from "../components/CenteredContainer";
+import Navbar from "../components/Navbar";
+import PasswordField from "../components/PasswordField";
+import { useAuth } from "../auth/auth.context";
+
+export default function CreateAdmin() {
+  const { user, error, signUpAdmin } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [creation, setCreation] = useState(false);
+
+
+  const handleClickSignUp = async () => {
+    await signUpAdmin(email, password);
+    setCreation(true);
+  }
+  return (
+    <Box height="100vh">
+      <CssBaseline />
+      <Navbar />
+      <CenteredContainer>
+        <Typography variant="h4" align="center" paddingBottom={5}>
+          Create Admin User
+        </Typography>
+        <TextField
+          sx={{ width: "25ch" }}
+          label="email"
+          variant="outlined"
+          value={email}
+          onChange={(e) => setEmail(e.currentTarget.value)}
+        />
+        <PasswordField password={password} setPassword={setPassword} />
+        <Button variant="contained" onClick={handleClickSignUp}>
+          Create
+        </Button>
+        {error && <Typography>{error}</Typography>}
+        {creation && (
+          <Typography>
+            Admin account created!
+          </Typography>
+        )}
+      </CenteredContainer>
+    </Box>
+  );
+}