Merged in settings-import-users (pull request #65)

Settings import users

src/pages/(admin)/BatchCreateUser.tsx

@@ -0,0 +1,243 @@
+import Button from "@/components/Low/Button";
+import useUsers from "@/hooks/useUsers";
+import { Type as UserType, User } from "@/interfaces/user";
+import axios from "axios";
+import { uniqBy } from "lodash";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useFilePicker } from "use-file-picker";
+import readXlsxFile from "read-excel-file";
+import Modal from "@/components/Modal";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { PermissionType } from "@/interfaces/permissions";
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
+);
+
+type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">
+
+const USER_TYPE_LABELS: {[key in Type]: string} = {
+  student: "Student",
+  teacher: "Teacher",
+  corporate: "Corporate",
+};
+
+const USER_TYPE_PERMISSIONS: {
+  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+} = {
+  student: {
+    perm: "createCodeStudent",
+    list: [],
+  },
+  teacher: {
+    perm: "createCodeTeacher",
+    list: [],
+  },
+  corporate: {
+    perm: "createCodeCorporate",
+    list: ["student", "teacher"],
+  },
+};
+
+export default function BatchCreateUser({ user }: { user: User }) {
+  const [infos, setInfos] = useState<
+    { email: string; name: string; passport_id:string, type: Type, demographicInformation: {
+      country: string,
+      passport_id:string,
+      phone: string
+    }  }[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [type, setType] = useState<Type>("student");
+  const [showHelp, setShowHelp] = useState(false);
+
+  const { users } = useUsers();
+
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
+
+
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        try {
+          const information = uniqBy(
+            rows
+              .map((row) => {
+                const [
+                  firstName,
+                  lastName,
+                  country,
+                  passport_id,
+                  email,
+                  phone,
+                  group
+                ] = row as string[];
+                return EMAIL_REGEX.test(email.toString().trim())
+                  ? {
+                    email: email.toString().trim().toLowerCase(),
+                    name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
+                    type: type,
+                    passport_id: passport_id?.toString().trim() || undefined,
+                    groupName: group,
+                    demographicInformation: {
+                      country: country,
+                      passport_id: passport_id?.toString().trim() || undefined,  
+                      phone,
+                    }
+                    }
+                  : undefined;
+              })
+              .filter((x) => !!x) as typeof infos,
+            (x) => x.email
+          );
+
+          if (information.length === 0) {
+            toast.error(
+              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+            );
+            return clear();
+          }
+
+          setInfos(information);
+        } catch {
+          toast.error(
+            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
+          );
+          return clear();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent]);
+
+  const makeUsers = async () => {
+    const newUsers = infos.filter(
+      (x) => !users.map((u) => u.email).includes(x.email)
+    );
+    const confirmed = confirm(
+        `You are about to add ${newUsers.length}, are you sure you want to continue?`
+    )
+    if (!confirmed)
+      return;
+    if (newUsers.length > 0)
+      {
+        setIsLoading(true);
+        Promise.all(newUsers.map(async (user) => {
+          await axios.post("/api/make_user", user)
+        })).then((res) =>{
+        toast.success(
+          `Successfully added ${newUsers.length} user(s)!`
+        )}).finally(() => {
+          return clear();
+        })
+      }
+    setIsLoading(false);
+    setInfos([]);
+  };
+
+
+  return (
+    <>
+      <Modal
+        isOpen={showHelp}
+        onClose={() => setShowHelp(false)}
+        title="Excel File Format"
+      >
+        <div className="mt-4 flex flex-col gap-2">
+          <span>Please upload an Excel file with the following format:</span>
+          <table className="w-full">
+            <thead>
+              <tr>
+                <th className="border border-neutral-200 px-2 py-1">
+                  First Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Last Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">Country</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Passport/National ID
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Phone Number
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Group Name
+                </th>
+              </tr>
+            </thead>
+          </table>
+          <span className="mt-4">
+            <b>Notes:</b>
+            <ul>
+              <li>- All incorrect e-mails will be ignored;</li>
+              <li>- All already registered e-mails will be ignored;</li>
+              <li>
+                - You may have a header row with the format above, however, it
+                is not necessary;
+              </li>
+              <li>
+                - All of the e-mails in the file will receive an e-mail to join
+                EnCoach with the role selected below.
+              </li>
+            </ul>
+          </span>
+        </div>
+      </Modal>
+      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+        <div className="flex items-end justify-between">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Choose an Excel file
+          </label>
+          <div
+            className="tooltip cursor-pointer"
+            data-tip="Excel File Format"
+            onClick={() => setShowHelp(true)}
+          >
+            <BsQuestionCircleFill />
+          </div>
+        </div>
+        <Button
+          onClick={openFilePicker}
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
+          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+        </Button>
+        <label className="text-mti-gray-dim text-base font-normal">
+          Select the type of user they should be
+        </label>
+        {user && (
+          <select
+            defaultValue="student"
+            onChange={(e) => setType(e.target.value as Type)}
+            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
+          >
+            
+            {Object.keys(USER_TYPE_LABELS)
+              .map((type) => (
+                <option key={type} value={type}>
+                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                </option>
+              ))}
+          </select>
+        )}
+        <Button
+          className="my-auto"
+          onClick={makeUsers}
+          disabled={
+            infos.length === 0
+          }
+        >
+          Create
+        </Button>
+      </div>
+    </>
+  );
+}

src/pages/api/make_user.ts

@@ -0,0 +1,152 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  setDoc,
+  doc,
+  query,
+  collection,
+  where,
+  getDocs,
+  getDoc,
+  deleteDoc,
+  limit,
+  updateDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import {v4} from "uuid";
+import {Group} from "@/interfaces/user";
+import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+
+const DEFAULT_DESIRED_LEVELS = {
+	reading: 9,
+	listening: 9,
+	writing: 9,
+	speaking: 9,
+};
+
+const DEFAULT_LEVELS = {
+	reading: 0,
+	listening: 0,
+	writing: 0,
+	speaking: 0,
+};
+
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  
+  if (req.method === "POST") return post(req, res);
+
+  return res.status(404).json({ ok: false });
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  const maker = req.session.user;
+  if (!maker) {
+    return res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to make user!" });
+  }
+  const { email, passport_id, type, groupName } = req.body as {
+    email: string;
+    passport_id: string;
+    type: string,
+    groupName: string
+  };
+  // cleaning data
+  delete req.body.passport_id;
+  delete req.body.groupName;
+
+  await createUserWithEmailAndPassword(auth, email.toLowerCase(), passport_id)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
+
+      const user = {
+        ...req.body,
+        bio: "",
+        type: type,
+        focus: "academic",
+        status: "paymentDue",
+        desiredLevels: DEFAULT_DESIRED_LEVELS,
+        levels: DEFAULT_LEVELS,
+        isFirstLogin: false,
+        isVerified: true
+      };
+      await setDoc(doc(db, "users", userId), user);
+      if (type === "corporate") {
+        const defaultTeachersGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Teachers",
+          participants: [],
+          disableEditing: true,
+        };
+
+        const defaultStudentsGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Students",
+          participants: [],
+          disableEditing: true,
+        };
+
+        const defaultCorporateGroup: Group = {
+          admin: userId,
+          id: v4(),
+          name: "Corporate",
+          participants: [],
+          disableEditing: true,
+        };
+
+
+        await setDoc(doc(db, "groups", defaultTeachersGroup.id), defaultTeachersGroup);
+        await setDoc(doc(db, "groups", defaultStudentsGroup.id), defaultStudentsGroup);
+        await setDoc(doc(db, "groups", defaultCorporateGroup.id), defaultCorporateGroup);
+      }
+      
+      if(typeof groupName === 'string' && groupName.trim().length > 0){
+        
+        const q = query(collection(db, "groups"), where("admin", "==", maker.id),  where("name", "==", groupName.trim()), limit(1))
+        const snapshot = await getDocs(q)
+        
+        if(snapshot.empty){
+          const values = {
+            id: v4(),
+            admin: maker.id,
+            name: groupName.trim(),
+            participants: [userId],
+            disableEditing: false,
+          }
+          
+          await setDoc(doc(db, "groups", values.id) , values)
+          
+
+        }else{
+          
+
+          const doc = snapshot.docs[0]
+          const participants : string[] = doc.get('participants');
+          
+
+          if(!participants.includes(userId)){
+            
+
+            updateDoc(doc.ref, {
+              participants: [...participants, userId]
+            })
+          }
+        }
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      return res.status(401).json({error});
+    });
+  return res.status(200).json({ ok: true });
+
+}

src/pages/settings.tsx

@@ -13,10 +13,10 @@ import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ExamGenerator from "./(admin)/ExamGenerator";
+import BatchCreateUser from "./(admin)/BatchCreateUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
-
 	if (!user || !user.isVerified) {
 		return {
 			redirect: {
@@ -59,10 +59,11 @@ export default function Admin() {
 				<Layout user={user} className="gap-6">
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
 						<ExamLoader />
+					  <BatchCreateUser user={user} />
 						{user.type !== "teacher" && (
 							<>
-								<CodeGenerator user={user} />
+							  <CodeGenerator user={user} />
-								<BatchCodeGenerator user={user} />
+							  <BatchCodeGenerator user={user} />
 							</>
 						)}
 					</section>

src/utils/permissions.ts

@@ -42,4 +42,4 @@ export function getTypesOfUser(types: Type[]) {
     return userTypes.filter((userType) => {
         return !types.includes(userType);
     })
-}
+}