feat: adding email verification

apps/dashboard/.env

@@ -1,5 +1,5 @@
 # REPLACE THIS IT IS FOR TESTING
-NEXTAUTH_URL=https://c890-2405-201-301c-5b67-89d6-bd56-6afb-6294.ngrok-free.app
+NEXTAUTH_URL=https://6794-2405-201-301c-5b67-5de-971d-2869-bfc4.ngrok-free.app
 NEXTAUTH_SECRET="thisismysecret"
 # 2db7666c39074da4b399e8b5116ef2c6 
 # 2cc1869e52ad47df848a6519b63bb4f4

apps/dashboard/app/profile/page.tsx

@@ -0,0 +1,18 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "./../api/auth/[...nextauth]/route";
+import ContentContainer from "@/components/content-container";
+import { Box } from "@mui/joy";
+import EnableEmail from "@/components/profile-settings/email/email";
+
+export default async function Home() {
+  const session = await getServerSession(authOptions);
+  const totpEnabled = session?.userData.data.me?.totpEnabled;
+  const email = session?.userData.data.me?.email;
+  return (
+    <main>
+      <ContentContainer>
+        <EnableEmail address={email?.address} verified={email?.verified} />
+      </ContentContainer>
+    </main>
+  );
+}

apps/dashboard/components/profile-settings/email/add-email-modal.tsx

@@ -0,0 +1,173 @@
+"use client";
+// Import statements
+import React from "react";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Input,
+  Modal,
+  Sheet,
+  Typography,
+} from "@mui/joy";
+import {
+  emailRegisterInitiateServerAction,
+  emailRegisterValidateServerAction,
+} from "./../server-actions";
+// @ts-ignore
+import { experimental_useFormState as useFormState } from "react-dom";
+// @ts-ignore
+import { experimental_useFormStatus as useFormStatus } from "react-dom";
+
+type emailDataProps = {
+  readonly address?: string | null | undefined;
+  readonly verified?: boolean | null | undefined;
+  modalOpen: boolean;
+  setModalOpen: (modalOpen: boolean) => void;
+};
+
+function EnableEmailModal({
+  address,
+  verified,
+  modalOpen,
+  setModalOpen,
+}: emailDataProps) {
+  const { pending } = useFormStatus();
+  const [initiateState, initiateFormAction] = useFormState(
+    emailRegisterInitiateServerAction,
+    null
+  );
+  const [validateState, validateFormAction] = useFormState(
+    emailRegisterValidateServerAction,
+    null
+  );
+
+  const handleClose = (event: React.SyntheticEvent, reason: string) => {
+    if (reason === "backdropClick") {
+      event.stopPropagation();
+      return;
+    }
+
+    setModalOpen(false);
+  };
+
+  return (
+    <Modal
+      open={modalOpen}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      disableEnforceFocus={true}
+      sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+    >
+      <Sheet
+        variant="outlined"
+        sx={{
+          borderRadius: "md",
+          p: 3,
+          display: "flex",
+          flexDirection: "column",
+          width: "50%",
+        }}
+      >
+        {address && !verified && initiateState?.message !== "success" ? (
+          <form
+            action={initiateFormAction}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1em",
+            }}
+          >
+            {pending ? (
+              <CircularProgress variant="plain" />
+            ) : (
+              <>
+                <Typography level="h4" textAlign="center">
+                  Email Confirmation
+                </Typography>
+                A code will be sent to your email {address}
+                <input name="email" type="hidden" value={address} />
+                <Box sx={{ display: "flex", gap: 1 }}>
+                  <Button onClick={() => setModalOpen(false)} sx={{ flex: 1 }}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" sx={{ flex: 1 }}>
+                    Ok
+                  </Button>
+                </Box>
+              </>
+            )}
+          </form>
+        ) : initiateState?.message === "success" ? (
+          <form
+            action={validateFormAction}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1em",
+            }}
+          >
+            {pending ? (
+              <CircularProgress variant="plain" />
+            ) : (
+              <>
+                <Typography level="h4" textAlign="center">
+                  Validation Code
+                </Typography>
+                <Input name="code" type="text" required placeholder="Code" />
+                <input
+                  name="emailRegistrationId"
+                  type="hidden"
+                  value={
+                    initiateState.data.userEmailRegistrationInitiate
+                      .emailRegistrationId
+                  }
+                />
+                <Box sx={{ display: "flex", gap: 1 }}>
+                  <Button onClick={() => setModalOpen(false)} sx={{ flex: 1 }}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" sx={{ flex: 1 }}>
+                    Submit
+                  </Button>
+                </Box>
+              </>
+            )}
+          </form>
+        ) : (
+          <form
+            action={initiateFormAction}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1em",
+            }}
+          >
+            {pending ? (
+              <CircularProgress variant="plain" />
+            ) : (
+              <>
+                <Typography level="h4" textAlign="center">
+                  Email Entry
+                </Typography>
+                Enter your Email Id
+                <Input name="email" type="email" required placeholder="Email" />
+                <Box sx={{ display: "flex", gap: 1 }}>
+                  <Button onClick={() => setModalOpen(false)} sx={{ flex: 1 }}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" sx={{ flex: 1 }}>
+                    Submit
+                  </Button>
+                </Box>
+              </>
+            )}
+          </form>
+        )}
+      </Sheet>
+    </Modal>
+  );
+}
+
+export default EnableEmailModal;

apps/dashboard/components/profile-settings/email/email.tsx

@@ -0,0 +1,62 @@
+"use client";
+import React, { useState } from "react";
+import { Button, Typography } from "@mui/joy";
+import AddEmailModal from "./add-email-modal";
+import VerifyModal from "./verify-modal";
+
+import { Box } from "@mui/joy";
+
+type EmailDataProps = {
+  readonly address?: string | null | undefined;
+  readonly verified?: boolean | null | undefined;
+};
+
+function EnableEmail({ address, verified }: EmailDataProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  console.log(address, verified);
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "1em",
+        alignItems: "center",
+      }}
+    >
+      <Typography>Email Address</Typography>
+      <>
+        {verified ? (
+          <>{address}</>
+        ) : address ? (
+          <>
+            <VerifyModal
+              modalOpen={modalOpen}
+              setModalOpen={setModalOpen}
+              address={address}
+              verified={verified}
+            />
+            <Button
+              loading={false}
+              onClick={() => {
+                setModalOpen(true);
+              }}
+            >
+              Verify your email
+            </Button>
+          </>
+        ) : (
+          <>
+            <AddEmailModal
+              modalOpen={modalOpen}
+              setModalOpen={setModalOpen}
+              address={address}
+              verified={verified}
+            />
+          </>
+        )}
+      </>
+    </Box>
+  );
+}
+
+export default EnableEmail;