Update: Implement delete account feature + package updates

src/components/Account/DeleteAccount.tsx

@@ -0,0 +1,70 @@
+import { Switch } from '@headlessui/react';
+import { useRouter } from 'next/router';
+import { FunctionComponent, useRef, useState } from 'react';
+
+const DeleteAccount: FunctionComponent = () => {
+  const [deleteToggled, setDeleteToggled] = useState(false);
+
+  const deleteRef = useRef<null | HTMLDialogElement>(null);
+  const router = useRouter();
+
+  return (
+    <div className="card w-full space-y-4">
+      <div className="card-body">
+        <div className="flex w-full items-center justify-between space-x-5">
+          <div className="">
+            <h1 className="text-lg font-bold">Delete Your Account</h1>
+            <p>Want to leave? Delete your account here.</p>
+          </div>
+          <div>
+            <Switch
+              className="toggle"
+              id="edit-toggle"
+              checked={deleteToggled}
+              onClick={() => {
+                setDeleteToggled((val) => !val);
+              }}
+            />
+          </div>
+        </div>
+        {deleteToggled && (
+          <>
+            <div className="mt-3">
+              <button
+                className="btn-primary btn w-full"
+                onClick={() => deleteRef.current!.showModal()}
+              >
+                Delete my account
+              </button>
+              <dialog id="delete-modal" className="modal" ref={deleteRef}>
+                <div className="modal-box text-center">
+                  <h3 className="text-lg font-bold">{`You're about to delete your account.`}</h3>
+                  <p className="">This action is permanent and cannot be reversed.</p>
+                  <div className="modal-action flex-col space-x-0 space-y-3">
+                    <button
+                      className="btn-error btn-sm btn w-full"
+                      onClick={async () => {
+                        deleteRef.current!.close();
+                        await router.replace('/api/users/logout');
+                      }}
+                    >
+                      Okay, delete my account
+                    </button>
+                    <button
+                      className="btn-success btn-sm btn w-full"
+                      onClick={() => deleteRef.current!.close()}
+                    >
+                      Go back
+                    </button>
+                  </div>
+                </div>
+              </dialog>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DeleteAccount;

src/components/Account/Security.tsx

@@ -20,7 +20,7 @@ const Security: FunctionComponent = () => {
 
   const onSubmit: SubmitHandler<z.infer<typeof UpdatePasswordSchema>> = async (data) => {
     await sendUpdatePasswordRequest(data);
-    setEditToggled(value => !value)
+    setEditToggled((value) => !value);
     reset();
   };
 

src/components/ui/CustomToast.tsx

@@ -27,9 +27,9 @@ const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
           const alertType = toastToClassName(t.type);
           return (
             <div
-              className={`alert ${alertType} w-11/12 flex-row items-center shadow-lg animate-in fade-in duration-200 lg:w-2/12`}
+              className={`alert ${alertType} w-11/12 flex-row items-center shadow-lg animate-in fade-in duration-200 lg:w-4/12`}
             >
-              <p className='text-sm'>{resolveValue(t.message, t)}</p>
+              <p>{resolveValue(t.message, t)}</p>
               {t.type !== 'loading' && (
                 <div>
                   <button

src/components/ui/Navbar.tsx

@@ -12,7 +12,7 @@ const DesktopLinks: FC = () => {
 
   return (
     <div className="block flex-none">
-      <ul className="menu menu-horizontal p-0">
+      <ul className="menu menu-horizontal menu-sm px-1">
         {pages.map((page) => {
           return (
             <li key={page.slug}>
@@ -43,7 +43,7 @@ const MobileLinks: FC = () => {
         </label>
         <ul
           tabIndex={0}
-          className="dropdown-content menu rounded-box menu-compact mt-3 w-48 bg-base-100 p-2 shadow"
+          className="menu-compact dropdown-content menu rounded-box mt-3 w-48 bg-base-100 p-2 shadow"
         >
           {pages.map((page) => (
             <li key={page.slug}>

src/components/ui/forms/Button.tsx

@@ -14,7 +14,8 @@ const Button: FunctionComponent<FormButtonProps> = ({
   // eslint-disable-next-line react/button-has-type
   <button
     type={type}
-    className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+    className={`btn-primary btn w-full rounded-xl`}
+    disabled={isSubmitting}
   >
     {children}
   </button>

src/pages/account/index.tsx

@@ -7,6 +7,7 @@ import AccountInfo from '@/components/Account/AccountInfo';
 import { useContext } from 'react';
 import UserContext from '@/contexts/UserContext';
 import Security from '@/components/Account/Security';
+import DeleteAccount from '@/components/Account/DeleteAccount';
 
 const AccountPage: NextPage = () => {
   const { user } = useContext(UserContext);
@@ -48,6 +49,7 @@ const AccountPage: NextPage = () => {
                 <Tab.Panel className="h-full space-y-5">
                   <AccountInfo />
                   <Security />
+                  <DeleteAccount />
                 </Tab.Panel>
                 <Tab.Panel>Your posts!</Tab.Panel>
               </Tab.Panels>

src/services/User/sendConfirmationEmail.ts

@@ -5,6 +5,7 @@ import Welcome from '@/emails/Welcome';
 import { render } from '@react-email/render';
 import { z } from 'zod';
 import { BASE_URL } from '@/config/env';
+import { ReactElement } from 'react';
 import GetUserSchema from './schema/GetUserSchema';
 
 type UserSchema = z.infer<typeof GetUserSchema>;
@@ -17,8 +18,10 @@ const sendConfirmationEmail = async ({ id, username, email }: UserSchema) => {
   const url = `${BASE_URL}/users/confirm?token=${confirmationToken}`;
   const address = email;
 
-  const html = render(Welcome({ name, url, subject })!);
-  const text = render(Welcome({ name, url, subject })!, { plainText: true });
+  const component = Welcome({ name, url, subject })! as ReactElement<unknown, string>;
+
+  const html = render(component);
+  const text = render(component, { plainText: true });
 
   await sendEmail({ address, subject, text, html });
 };