When a new user logs in with Apple, they are prompted to add their name & pfp since Apple does not provide that.

2024-08-08 15:46:27 -05:00
parent 17486bd00c
commit 40130b65e5
19 changed files with 1755 additions and 272 deletions
--- a/src/components/auth/FirstSignInForm.tsx
+++ b/src/components/auth/FirstSignInForm.tsx
@@ -0,0 +1,125 @@
+"use client"
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "~/components/ui/alert-dialog"
+import { Button } from "~/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "~/components/ui/form"
+import { Input } from "~/components/ui/input"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { useEffect, useState } from "react"
+
+const formSchema = z.object({
+  users_name: z.string().min(2, {
+    message: "Really? Your name is one letter? You expect me to believe that?",
+  }),
+  users_profile_image: z.string().url().optional(),
+});
+
+export default function First_Sign_In_Form({ users_name, users_email }: { users_name: string, users_email: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  const update_users_name = async (users_name: string, users_email: string) => {
+    try {
+      const res = await fetch("/api/users/set_username_by_email", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          users_name: users_name,
+          users_email: users_email,
+        }),
+      });
+      if (!res.ok) {
+        throw new Error("Failed to update user's name");
+      }
+    } catch (error) {
+      console.error("Could not update user's name", error);
+    }
+  };
+
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    await update_users_name(data.users_name, users_email);
+    setIsOpen(false);
+};
+
+  useEffect(() => {
+    if (users_name === "New User") {
+      setIsOpen(true);
+    }
+  }, [users_name]);
+
+
+  if (users_name === "New User") {
+    return (
+      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Welcome to the Tenant Portal</AlertDialogTitle>
+            <AlertDialogDescription>
+              Please fill out the form to complete your account setup.
+            </AlertDialogDescription>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <FormField
+                  control={form.control}
+                  name="users_name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Enter your name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="First & Last Name" {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                >
+                </FormField>
+                <FormField
+                  control={form.control}
+                  name="users_profile_image"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Enter a URL path to your profile picture</FormLabel>
+                      <FormControl>
+                        <Input placeholder="https://example.com/profile.jpg" {...field} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                >
+                </FormField>
+                <div className="w-full flex justify-end">
+                  <Button type="submit" variant="secondary"
+                    className="mt-2"
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </AlertDialogHeader>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  } else {
+    return (
+      <div/>
+    );
+  }
+};