finalizing team support

pages/admin.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import UserListing from "@/components/UserListing";
 import { useUsers } from "@/hooks/store/admin/users";
+import Divider from "@/components/ui/Divider";
 
 interface User extends U {
   subscriptions: {
@@ -88,7 +89,7 @@ export default function Admin() {
         </div>
       </div>
 
-      <div className="divider my-3"></div>
+      <Divider className="my-3" />
 
       {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
         UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)

pages/api/v1/users/[id].ts

@@ -11,6 +11,12 @@ const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const token = await verifyToken({ req });
 
+  const queryId = Number(req.query.id);
+
+  if (!queryId) {
+    return res.status(400).json({ response: "Invalid request." });
+  }
+
   if (typeof token === "string") {
     res.status(401).json({ response: token });
     return null;
@@ -24,12 +30,12 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
   const isServerAdmin = user?.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1);
 
-  const userId = isServerAdmin ? Number(req.query.id) : token.id;
-
-  if (userId !== Number(req.query.id) && !isServerAdmin)
-    return res.status(401).json({ response: "Permission denied." });
+  const userId = token.id;
 
   if (req.method === "GET") {
+    if (userId !== queryId && !isServerAdmin)
+      return res.status(401).json({ response: "Permission denied." });
+
     const users = await getUserById(userId);
     return res.status(users.status).json({ response: users.response });
   }
@@ -59,6 +65,9 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   }
 
   if (req.method === "PUT") {
+    if (userId !== queryId && !isServerAdmin)
+      return res.status(401).json({ response: "Permission denied." });
+
     if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
@@ -74,7 +83,12 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
           "This action is disabled because this is a read-only demo of Linkwarden.",
       });
 
-    const updated = await deleteUserById(userId, req.body, isServerAdmin);
+    const updated = await deleteUserById(
+      userId,
+      req.body,
+      isServerAdmin,
+      queryId
+    );
     return res.status(updated.status).json({ response: updated.response });
   }
 }

pages/api/v1/users/index.ts

@@ -16,10 +16,9 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   } else if (req.method === "GET") {
     const user = await verifyUser({ req, res });
 
-    if (!user || user.id !== Number(process.env.NEXT_PUBLIC_ADMIN || 1))
-      return res.status(401).json({ response: "Unauthorized..." });
+    if (!user) return res.status(401).json({ response: "Unauthorized..." });
 
-    const response = await getUsers();
+    const response = await getUsers(user);
     return res.status(response.status).json({ response: response.response });
   }
 }

pages/member-onboarding.tsx

@@ -8,7 +8,6 @@ import { toast } from "react-hot-toast";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Trans, useTranslation } from "next-i18next";
 import { useUpdateUser, useUser } from "@/hooks/store/user";
-import { useSession } from "next-auth/react";
 
 interface FormData {
   password: string;
@@ -28,8 +27,6 @@ export default function MemberOnboarding() {
   const { data: user = {} } = useUser();
   const updateUser = useUpdateUser();
 
-  const { status } = useSession();
-
   useEffect(() => {
     toast.success(t("accepted_invitation_please_fill"));
   }, []);
@@ -146,7 +143,7 @@ export default function MemberOnboarding() {
             size="full"
             loading={submitLoader}
           >
-            {t("sign_up")}
+            {t("continue_to_dashboard")}
           </Button>
         </div>
       </form>

pages/settings/access-tokens.tsx

@@ -67,10 +67,18 @@ export default function AccessTokens() {
                       )}
                     </td>
                     <td>
-                      {new Date(token.createdAt || "").toLocaleDateString()}
+                      {new Date(token.createdAt).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })}
                     </td>
                     <td>
-                      {new Date(token.expires || "").toLocaleDateString()}
+                      {new Date(token.expires).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })}
                     </td>
                     <td>
                       <button

pages/settings/billing.tsx

@@ -1,8 +1,28 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import InviteModal from "@/components/ModalContent/InviteModal";
+import { User as U } from "@prisma/client";
+import { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUsers } from "@/hooks/store/admin/users";
+import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
+import { useUser } from "@/hooks/store/user";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import clsx from "clsx";
+import { signIn } from "next-auth/react";
+import toast from "react-hot-toast";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type UserModal = {
+  isOpen: boolean;
+  userId: number | null;
+};
 
 export default function Billing() {
   const router = useRouter();
@@ -12,6 +32,25 @@ export default function Billing() {
     if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
   }, []);
 
+  const { data: users = [] } = useUsers();
+  const { data: account } = useUser();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredUsers, setFilteredUsers] = useState<User[]>();
+
+  useEffect(() => {
+    if (users.length > 0) {
+      setFilteredUsers(users);
+    }
+  }, [users]);
+
+  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
+    isOpen: false,
+    userId: null,
+  });
+
+  const [inviteModal, setInviteModal] = useState(false);
+
   return (
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">
@@ -40,6 +79,190 @@ export default function Billing() {
           </a>
         </p>
       </div>
+
+      <div className="flex items-center gap-2 w-full rounded-md h-8 mt-5">
+        <p className="truncate w-full pr-7 text-3xl font-thin">
+          {t("manage_seats")}
+        </p>
+      </div>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex items-center justify-between gap-2 mb-3 relative">
+        <div>
+          <label
+            htmlFor="search-box"
+            className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+          >
+            <i className="bi-search"></i>
+          </label>
+
+          <input
+            id="search-box"
+            type="text"
+            placeholder={t("search_users")}
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+
+              if (users) {
+                setFilteredUsers(
+                  users.filter((user: any) =>
+                    JSON.stringify(user)
+                      .toLowerCase()
+                      .includes(e.target.value.toLowerCase())
+                  )
+                );
+              }
+            }}
+            className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <div
+            onClick={() => setInviteModal(true)}
+            className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 h-[2.15rem] relative"
+          >
+            <p>{t("invite_user")}</p>
+            <i className="bi-plus text-2xl"></i>
+          </div>
+        </div>
+      </div>
+
+      <div className="border rounded-md shadow border-neutral-content">
+        <table className="table bg-base-300 rounded-md">
+          <thead>
+            <tr className="sm:table-row hidden border-b-neutral-content">
+              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                <th>{t("email")}</th>
+              )}
+              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                <th>{t("status")}</th>
+              )}
+              <th>{t("date_added")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredUsers?.map((user, index) => (
+              <tr
+                key={index}
+                className={clsx(
+                  "group border-b-neutral-content duration-100 w-full relative flex flex-col sm:table-row",
+                  user.id !== account.id &&
+                    "hover:bg-neutral-content hover:bg-opacity-30"
+                )}
+              >
+                {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                  <td className="truncate max-w-full" title={user.email || ""}>
+                    <p className="sm:hidden block text-neutral text-xs font-bold mb-2">
+                      {t("email")}
+                    </p>
+                    <p>{user.email}</p>
+                  </td>
+                )}
+                {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                  <td>
+                    <p className="sm:hidden block text-neutral text-xs font-bold mb-2">
+                      {t("status")}
+                    </p>
+                    {user.emailVerified ? (
+                      <p className="font-bold px-2 bg-green-600 text-white rounded-md w-fit">
+                        {t("active")}
+                      </p>
+                    ) : (
+                      <p className="font-bold px-2 bg-neutral-content rounded-md w-fit">
+                        {t("pending")}
+                      </p>
+                    )}
+                  </td>
+                )}
+                <td>
+                  <p className="sm:hidden block text-neutral text-xs font-bold mb-2">
+                    {t("date_added")}
+                  </p>
+                  <p className="whitespace-nowrap">
+                    {new Date(user.createdAt).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })}
+                  </p>
+                </td>
+                {user.id !== account.id && (
+                  <td>
+                    <div
+                      className={`dropdown dropdown-bottom font-normal dropdown-end absolute right-[0.35rem] top-[0.35rem]`}
+                    >
+                      <div
+                        tabIndex={0}
+                        role="button"
+                        onMouseDown={dropdownTriggerer}
+                        className="btn btn-ghost btn-sm btn-square duration-100"
+                      >
+                        <i
+                          className={"bi bi-three-dots text-lg text-neutral"}
+                        ></i>
+                      </div>
+                      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
+                        {!user.emailVerified ? (
+                          <li>
+                            <div
+                              role="button"
+                              tabIndex={0}
+                              onClick={() => {
+                                (
+                                  document?.activeElement as HTMLElement
+                                )?.blur();
+                                signIn("invite", {
+                                  email: user.email,
+                                  callbackUrl: "/member-onboarding",
+                                  redirect: false,
+                                }).then(() =>
+                                  toast.success(t("resend_invite_success"))
+                                );
+                              }}
+                              className="whitespace-nowrap"
+                            >
+                              {t("resend_invite")}
+                            </div>
+                          </li>
+                        ) : undefined}
+                        <li>
+                          <div
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => {
+                              (document?.activeElement as HTMLElement)?.blur();
+                              setDeleteUserModal({
+                                isOpen: true,
+                                userId: user.id,
+                              });
+                            }}
+                            className="whitespace-nowrap"
+                          >
+                            {t("remove_user")}
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-sm text-center font-bold mt-3">
+        {t("seats_purchased", { count: account?.subscription?.quantity })}
+      </p>
+      {inviteModal && <InviteModal onClose={() => setInviteModal(false)} />}
+      {deleteUserModal.isOpen && deleteUserModal.userId && (
+        <DeleteUserModal
+          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
+          userId={deleteUserModal.userId}
+        />
+      )}
     </SettingsLayout>
   );
 }

pages/team.tsx

@@ -1,108 +0,0 @@
-import InviteModal from "@/components/ModalContent/InviteModal";
-import { User as U } from "@prisma/client";
-import Link from "next/link";
-import { useState } from "react";
-import { useTranslation } from "next-i18next";
-import getServerSideProps from "@/lib/client/getServerSideProps";
-import UserListing from "@/components/UserListing";
-import { useUsers } from "@/hooks/store/admin/users";
-
-interface User extends U {
-  subscriptions: {
-    active: boolean;
-  };
-}
-
-type UserModal = {
-  isOpen: boolean;
-  userId: number | null;
-};
-
-export default function Admin() {
-  const { t } = useTranslation();
-
-  const { data: users = [] } = useUsers();
-
-  const [searchQuery, setSearchQuery] = useState("");
-  const [filteredUsers, setFilteredUsers] = useState<User[]>();
-
-  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
-    isOpen: false,
-    userId: null,
-  });
-
-  const [inviteModal, setInviteModal] = useState(false);
-
-  return (
-    <div className="max-w-6xl mx-auto p-5">
-      <div className="flex sm:flex-row flex-col justify-between gap-2">
-        <div className="gap-2 inline-flex items-center">
-          <Link
-            href="/dashboard"
-            className="text-neutral btn btn-square btn-sm btn-ghost"
-          >
-            <i className="bi-chevron-left text-xl"></i>
-          </Link>
-          <p className="capitalize text-3xl font-thin inline">
-            {t("team_management")}
-          </p>
-        </div>
-
-        <div className="flex items-center relative justify-between gap-2">
-          <div>
-            <label
-              htmlFor="search-box"
-              className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
-            >
-              <i className="bi-search"></i>
-            </label>
-
-            <input
-              id="search-box"
-              type="text"
-              placeholder={t("search_users")}
-              value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value);
-
-                if (users) {
-                  setFilteredUsers(
-                    users.filter((user: any) =>
-                      JSON.stringify(user)
-                        .toLowerCase()
-                        .includes(e.target.value.toLowerCase())
-                    )
-                  );
-                }
-              }}
-              className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
-            />
-          </div>
-
-          <div
-            onClick={() => setInviteModal(true)}
-            className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 aspect-square relative"
-          >
-            <i className="bi-plus text-3xl absolute"></i>
-          </div>
-        </div>
-      </div>
-
-      <div className="divider my-3"></div>
-
-      {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
-        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)
-      ) : searchQuery !== "" ? (
-        <p>{t("no_user_found_in_search")}</p>
-      ) : users && users.length > 0 ? (
-        UserListing(users, deleteUserModal, setDeleteUserModal, t)
-      ) : (
-        <p>{t("no_users_found")}</p>
-      )}
-
-      {inviteModal && <InviteModal onClose={() => setInviteModal(false)} />}
-    </div>
-  );
-}
-
-export { getServerSideProps };