feat: added email registration

apps/dashboard/app/security/email/add/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../../api/auth/[...nextauth]/route";
+import ContentContainer from "@/components/content-container";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+// @ts-ignore-next-line no-implicit-any error
+import { experimental_useFormState as useFormState } from "react-dom";
+import { emailRegisterInitiateServerAction } from "../../server-actions";
+
+import {
+  Box,
+  Button,
+  Input,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Card,
+  Typography,
+  Link as MuiLink,
+} from "@mui/joy";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import { CheckBox } from "@mui/icons-material";
+import Link from "next/link";
+export default function AddEmail() {
+  const [state, formAction] = useFormState(emailRegisterInitiateServerAction, {
+    error: null,
+    message: null,
+    responsePayload: {},
+  });
+
+  return (
+    <main
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: "4em",
+      }}
+    >
+      <Card
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "30em",
+        }}
+      >
+        <Typography level="h3">Add Email Address</Typography>
+        <FormControl
+          sx={{
+            width: "90%",
+          }}
+          error={state.error}
+        >
+          <form action={formAction}>
+            <FormLabel>Email</FormLabel>
+            <Input
+              name="email"
+              type="email"
+              sx={{
+                padding: "0.6em",
+                width: "100%",
+              }}
+              placeholder="Please Enter Your Email"
+            />
+            {state.error ? (
+              <FormHelperText>
+                <InfoOutlined />
+                Opps! something is wrong.
+              </FormHelperText>
+            ) : null}
+
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center",
+              }}
+            >
+              <Link href={"/security"}> Cancel</Link>
+              <Button
+                type="submit"
+                name="submit"
+                sx={{
+                  marginTop: "2em",
+                  display: "flex",
+                  gap: "1em",
+                  backgroundColor: "orange",
+                  color: "black",
+                }}
+              >
+                Send Code <ArrowForwardIcon></ArrowForwardIcon>
+              </Button>
+            </Box>
+          </form>
+        </FormControl>
+      </Card>
+    </main>
+  );
+}

apps/dashboard/app/security/email/verify/page.tsx

@@ -0,0 +1,58 @@
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import VerfiyEmailForm from "./verify-form";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import {
+  deleteEmail,
+  emailRegistrationInitiate,
+} from "@/services/graphql/mutations/email";
+
+type VerifyEmailProp = {
+  emailRegistrationId: string | null | undefined;
+};
+
+export default async function VerfiyEmail({
+  searchParams,
+}: {
+  searchParams: VerifyEmailProp;
+}) {
+  let { emailRegistrationId } = searchParams;
+
+  const session = await getServerSession(authOptions);
+  const token = session?.accessToken;
+
+
+  // this is if user has address but not verified 
+  if (!emailRegistrationId || typeof emailRegistrationId !== "string") {
+    const email = session?.userData.data.me?.email?.address;
+    if (!email || typeof email !== "string" || !token) {
+      redirect("/security");
+    }
+
+    await deleteEmail(token);
+    let data;
+    try {
+      data = await emailRegistrationInitiate(email, token);
+    } catch (err) {
+      console.log("error in emailRegistrationInitiate ", err);
+      redirect("/security");
+    }
+
+    if (data?.userEmailRegistrationInitiate.errors.length) {
+      redirect("/security");
+    }
+
+    emailRegistrationId =
+      data?.userEmailRegistrationInitiate.emailRegistrationId;
+  }
+
+  if (!emailRegistrationId && typeof emailRegistrationId !== "string") {
+    redirect("/security");
+  }
+
+  return (
+    <VerfiyEmailForm
+      emailRegistrationId={emailRegistrationId}
+    ></VerfiyEmailForm>
+  );
+}

apps/dashboard/app/security/email/verify/verify-form.tsx

@@ -0,0 +1,114 @@
+"use client";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../../api/auth/[...nextauth]/route";
+import ContentContainer from "@/components/content-container";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+// @ts-ignore-next-line no-implicit-any error
+import { experimental_useFormState as useFormState } from "react-dom";
+import { emailRegisterValidateServerAction } from "../../server-actions";
+
+import {
+  Box,
+  Button,
+  Input,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Card,
+  Typography,
+} from "@mui/joy";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import { CheckBox } from "@mui/icons-material";
+import Link from "next/link";
+
+type VerfiyEmailFormProps = {
+  emailRegistrationId: string;
+};
+export default function VerfiyEmailForm({
+  emailRegistrationId,
+}: VerfiyEmailFormProps) {
+  const [state, formAction] = useFormState(emailRegisterValidateServerAction, {
+    error: null,
+    message: null,
+    responsePayload: {},
+  });
+
+  return (
+    <main
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: "4em",
+      }}
+    >
+      <Card
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "30em",
+        }}
+      >
+        <Typography level="h3">Verification Code</Typography>
+        <FormControl
+          sx={{
+            width: "90%",
+          }}
+          error={state.error}
+        >
+          <form action={formAction}>
+            <FormLabel>Code</FormLabel>
+            <input
+              type="hidden"
+              name="emailRegistrationId"
+              value={emailRegistrationId}
+            />
+            <Input
+              name="code"
+              type="code"
+              sx={{
+                padding: "0.6em",
+                width: "100%",
+              }}
+              placeholder="Please Enter Verification Code"
+            />
+
+            {state.error ? (
+              <FormHelperText>
+                <InfoOutlined />
+                {state.message}
+              </FormHelperText>
+            ) : null}
+
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center",
+              }}
+            >
+              <Link href={"/security"}>Cancel</Link>
+              <Button
+                type="submit"
+                name="submit"
+                sx={{
+                  marginTop: "2em",
+                  display: "flex",
+                  gap: "1em",
+                  backgroundColor: "orange",
+                  color: "black",
+                }}
+              >
+                Confirm <ArrowForwardIcon></ArrowForwardIcon>
+              </Button>
+            </Box>
+          </form>
+        </FormControl>
+      </Card>
+    </main>
+  );
+}

apps/dashboard/app/security/page.tsx

@@ -0,0 +1,27 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import ContentContainer from "@/components/content-container";
+import EmailSettings from "@/components/security/email/email";
+import { Box } from "@mui/joy";
+
+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 (
+    <ContentContainer>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          maxWidth: "90em",
+          margin: "0 auto",
+          width: "100%",
+        }}
+      >
+        {email ? <EmailSettings emailData={email}></EmailSettings> : null}
+      </Box>
+    </ContentContainer>
+  );
+}