feat: email verification

apps/dashboard/app/globals.css

@@ -14,8 +14,10 @@
   --orange: #ff7e1c;
   --sky: #c3ccff;
   --primary: #fc5805;
-  --primary3: #fd800b;
+  --primaryColorDisabled: #c54404;
+  --primary3: #010101;
   --primary4: #fe990d;
+  --primary4Disabled: #b36800;
   --primary5: #ffad0d;
   --blue5: #4453e2;
   --grey0: #3a3c51;
@@ -33,11 +35,17 @@
 }
 
 [data-joy-color-scheme="light"] {
-  --inputColor: var(--black);
+  --logoInputColor: var(--black);
+  --inputColor: var(--white);
   --primaryColor: var(--primary);
+  --primaryColorDisabled: var(--primaryColorDisabled);
+
 }
 
 [data-joy-color-scheme="dark"] {
-  --inputColor: var(--white);
+  --logoInputColor: var(--white);
+  --inputColor: var(--black);
   --primaryColor: var(--primary4);
+  --primaryColorDisabled: var(--primary4Disabled);
+
 }

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

@@ -0,0 +1,130 @@
+"use client"
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
+
+import {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-next-line no-implicit-any error
+  experimental_useFormState as useFormState,
+} from "react-dom"
+
+import {
+  Box,
+  Button,
+  Input,
+  FormControl,
+  FormHelperText,
+  Typography,
+  Card,
+} from "@mui/joy"
+import InfoOutlined from "@mui/icons-material/InfoOutlined"
+import Link from "next/link"
+
+import { emailRegisterInitiateServerAction } from "../../server-actions"
+
+import FormSubmitButton from "@/components/form-submit-button"
+
+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",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "30em",
+          gap: "1.5em",
+        }}
+      >
+        <Typography level="h2">Add Your Email Address</Typography>
+        <Box>
+          <Typography>A verification code was sent to this email.</Typography>
+        </Box>
+        <FormControl
+          sx={{
+            width: "90%",
+          }}
+          error={state.error}
+        >
+          <form action={formAction}>
+            <Input
+              name="email"
+              type="email"
+              sx={{
+                padding: "0.6em",
+                width: "100%",
+              }}
+              placeholder="Please Enter Your Email"
+            />
+            {state.error ? (
+              <FormHelperText>
+                <InfoOutlined />
+                {state.message}
+              </FormHelperText>
+            ) : null}
+
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center",
+              }}
+            >
+              <Link href={"/security"} style={{ width: "49%" }}>
+                <Button
+                  type="submit"
+                  name="submit"
+                  color="danger"
+                  variant="outlined"
+                  sx={{
+                    marginTop: "1em",
+                    display: "flex",
+                    gap: "1em",
+                    width: "100%",
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Link>
+              <FormSubmitButton
+                type="submit"
+                name="submit"
+                sx={{
+                  marginTop: "1em",
+                  display: "flex",
+                  gap: "1em",
+                  width: "49%",
+                }}
+              >
+                Send Code <ArrowForwardIcon></ArrowForwardIcon>
+              </FormSubmitButton>
+            </Box>
+          </form>
+        </FormControl>
+        <Card
+          sx={{
+            width: "90%",
+            textAlign: "center",
+          }}
+        >
+          <Typography>This email can be used to log in to your account.</Typography>
+        </Card>
+      </Box>
+    </main>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { getServerSession } from "next-auth"
+import { redirect } from "next/navigation"
+
+import VerifyEmailForm from "./verify-form"
+
+import {
+  deleteEmail,
+  emailRegistrationInitiate,
+} from "@/services/graphql/mutations/email"
+import { authOptions } from "@/app/api/auth/[...nextauth]/route"
+import { UserEmailRegistrationInitiateMutation } from "@/services/graphql/generated"
+
+type VerifyEmailProp = {
+  emailRegistrationId: string | null | undefined
+}
+
+export default async function VerifyEmail({
+  searchParams,
+}: {
+  searchParams: VerifyEmailProp
+}) {
+  let { emailRegistrationId } = searchParams
+  const session = await getServerSession(authOptions)
+  const token = session?.accessToken
+
+  // this is if user has address but not verified
+  const email = session?.userData.data.me?.email?.address
+  if (!email || typeof email !== "string") {
+    redirect("/security")
+  }
+
+  if (!token || typeof token !== "string") {
+    redirect("/security")
+  }
+
+  if (!emailRegistrationId || typeof emailRegistrationId !== "string") {
+    await deleteEmail(token)
+    let data: UserEmailRegistrationInitiateMutation | null | undefined
+    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 (
+    <VerifyEmailForm
+      email={email}
+      emailRegistrationId={emailRegistrationId}
+    ></VerifyEmailForm>
+  )
+}

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

@@ -0,0 +1,146 @@
+"use client"
+
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
+import {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-next-line no-implicit-any error
+  experimental_useFormState as useFormState,
+} from "react-dom"
+
+import {
+  Box,
+  Button,
+  Input,
+  FormControl,
+  FormHelperText,
+  Card,
+  Typography,
+} from "@mui/joy"
+import InfoOutlined from "@mui/icons-material/InfoOutlined"
+import Link from "next/link"
+
+import { emailRegisterValidateServerAction } from "../../server-actions"
+
+import FormSubmitButton from "@/components/form-submit-button"
+
+type VerifyEmailFormProps = {
+  emailRegistrationId: string
+  email: string
+}
+export default function VerifyEmailForm({
+  emailRegistrationId,
+  email,
+}: VerifyEmailFormProps) {
+  const [state, formAction] = useFormState(emailRegisterValidateServerAction, {
+    error: null,
+    message: null,
+    responsePayload: {},
+  })
+
+  return (
+    <main
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: "4em",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "30em",
+          gap: "1.5em",
+        }}
+      >
+        <Typography level="h2">Email Verification Code</Typography>
+        <Box>
+          <Typography>Enter the verification code sent to your email.</Typography>
+          <Typography
+            sx={{
+              textAlign: "center",
+            }}
+            level="h4"
+          >
+            {email}{" "}
+          </Typography>
+        </Box>
+        <FormControl
+          sx={{
+            width: "90%",
+          }}
+          error={state.error}
+        >
+          <form action={formAction}>
+            <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",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center",
+              }}
+            >
+              <Link href={"/security"} style={{ width: "49%" }}>
+                <Button
+                  type="submit"
+                  name="submit"
+                  color="danger"
+                  variant="outlined"
+                  sx={{
+                    marginTop: "1em",
+                    display: "flex",
+                    gap: "1em",
+                    width: "100%",
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Link>
+              <FormSubmitButton
+                type="submit"
+                name="submit"
+                sx={{
+                  marginTop: "1em",
+                  display: "flex",
+                  gap: "1em",
+                  width: "49%",
+                }}
+              >
+                Confirm <ArrowForwardIcon></ArrowForwardIcon>
+              </FormSubmitButton>
+            </Box>
+          </form>
+        </FormControl>
+        <Card
+          sx={{
+            width: "90%",
+            textAlign: "center",
+          }}
+        >
+          <Typography>This email can be used to log in to your account.</Typography>
+        </Card>
+      </Box>
+    </main>
+  )
+}