refactored email verification

2024-05-16 15:02:22 -04:00
parent db446d450f
commit f68ca100a1
16 changed files with 1285 additions and 135 deletions
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import TextInput from "@/components/TextInput";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+  onSubmit: Function;
+  oldEmail: string;
+  newEmail: string;
+};
+
+export default function EmailChangeVerificationModal({
+  onClose,
+  onSubmit,
+  oldEmail,
+  newEmail,
+}: Props) {
+  const [password, setPassword] = useState("");
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Confirm Password</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-5">
+        <p>
+          Please confirm your password before changing your email address.{" "}
+          {process.env.NEXT_PUBLIC_STRIPE === "true"
+            ? "Updating this field will change your billing email on Stripe as well."
+            : undefined}
+        </p>
+
+        <div>
+          <p>Old Email</p>
+          <p className="text-neutral">{oldEmail}</p>
+        </div>
+
+        <div>
+          <p>New Email</p>
+          <p className="text-neutral">{newEmail}</p>
+        </div>
+
+        <div className="w-full">
+          <p className="mb-2">Password</p>
+          <TextInput
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••••••••"
+            className="bg-base-200"
+            type="password"
+            autoFocus
+          />
+        </div>
+
+        <div className="flex justify-end items-center">
+          <button
+            className="btn btn-accent dark:border-violet-400 text-white"
+            onClick={() => onSubmit(password)}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}