Merge pull request #102 from MurakawaTakuya/feat/101-verify-mail

メールアドレスによるアカウント作成の時の認証メールを実装

src/Components/GoalModal/GoalModal.tsx

@@ -80,7 +80,7 @@ export default function GoalModal() {
         color="primary"
         startDecorator={<Add />}
         onClick={() => setOpen(true)}
-        disabled={!user || user?.loginType === "Guest"}
+        disabled={!user || user?.loginType === "Guest" || !user?.isMailVerified}
       >
         Create Goal
       </Button>
@@ -124,7 +124,11 @@ export default function GoalModal() {
                   type="submit"
                   variant="solid"
                   color="primary"
-                  disabled={!user || user?.loginType === "Guest"}
+                  disabled={
+                    !user ||
+                    user?.loginType === "Guest" ||
+                    !user?.isMailVerified
+                  }
                   endDecorator={<SendIcon />}
                 >
                   Create Goal

src/Components/NameUpdate/NameUpdate.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { appCheckToken, functionsEndpoint } from "@/app/firebase";
+import { appCheckToken, auth, functionsEndpoint } from "@/app/firebase";
 import { useUser } from "@/utils/UserContext";
 import {
   DialogContent,
@@ -10,6 +10,7 @@ import {
 } from "@mui/joy";
 import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
+import { updateProfile } from "firebase/auth";
 import React, { useState } from "react";
 
 export default function NameUpdate({
@@ -23,6 +24,7 @@ export default function NameUpdate({
   const { user } = useUser();
   const handleNameUpdate = async (event: React.FormEvent) => {
     event.preventDefault();
+
     const response = await fetch(`${functionsEndpoint}/user/${user?.uid}`, {
       method: "PUT",
       headers: {
@@ -31,6 +33,15 @@ export default function NameUpdate({
       },
       body: JSON.stringify({ name: newName }),
     });
+
+    // Firebase Authentication の displayName を更新
+    if (auth.currentUser) {
+      await updateProfile(auth.currentUser, { displayName: newName });
+      console.log("Firebase displayName updated successfully");
+    } else {
+      console.error("Failed to update displayName: No authenticated user");
+    }
+
     if (!response.ok) {
       console.error("Failed to update name");
     } else {
@@ -39,6 +50,21 @@ export default function NameUpdate({
       setOpen(false);
     }
   };
+
+  // 以下のJoy UIによるエラーを無効化
+  // Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
+  try {
+    const consoleError = console.error;
+    console.error = (...args) => {
+      if (args[0]?.includes("Accessing element.ref was removed")) {
+        return;
+      }
+      consoleError(...args);
+    };
+  } catch {
+    console.error("Failed to disable Joy UI error");
+  }
+
   return (
     <Modal open={open} onClose={() => setOpen(false)} keepMounted disablePortal>
       <ModalDialog

src/Components/PostModal/PostModal.tsx

@@ -131,7 +131,6 @@ export default function PostModal({ goalId }: { goalId: string }) {
         color="primary"
         startDecorator={<Add />}
         onClick={() => setOpen(true)}
-        disabled={!user || user?.loginType === "Guest"}
       >
         写真を撮って完了する
       </JoyButton>
@@ -188,7 +187,6 @@ export default function PostModal({ goalId }: { goalId: string }) {
                   type="submit"
                   variant="solid"
                   color="primary"
-                  disabled={!user || user?.loginType === "Guest"}
                   endDecorator={<SendIcon />}
                   onClick={handleUpload}
                 >

src/Components/Progress/Progress.tsx

@@ -1,6 +1,7 @@
-import { GoalWithId, SuccessResult } from "@/types/types";
+import { GoalWithId, SuccessResult, UserData } from "@/types/types";
 import { fetchUserById } from "@/utils/API/fetchUser";
 import { formatStringToDate } from "@/utils/DateFormatter";
+import { useUser } from "@/utils/UserContext";
 import AppRegistrationRoundedIcon from "@mui/icons-material/AppRegistrationRounded";
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 import CloseIcon from "@mui/icons-material/Close";
@@ -46,6 +47,7 @@ export default function Progress({
   pendingResults = [],
 }: ProgressProps) {
   const [userNames, setUserNames] = useState<Record<string, string>>({}); // <userId, userName>
+  const { user } = useUser();
 
   const fetchUserName = async (userId: string) => {
     if (userNames[userId]) return; // 既に取得済みの場合はキャッシュのように再利用
@@ -90,7 +92,7 @@ export default function Progress({
         if (result.type === "failed")
           return failedStep(result as GoalWithId, userName);
         if (result.type === "pending")
-          return pendingStep(result as GoalWithId, userName);
+          return pendingStep(result as GoalWithId, userName, user as UserData);
         return null;
       })}
     </>
@@ -173,7 +175,7 @@ const failedStep = (result: GoalWithId, userName: string) => {
   );
 };
 
-const pendingStep = (result: GoalWithId, userName: string) => {
+const pendingStep = (result: GoalWithId, userName: string, user: UserData) => {
   return (
     <StepperBlock key={result.goalId} userName={userName} resultType="pending">
       <Step
@@ -189,7 +191,8 @@ const pendingStep = (result: GoalWithId, userName: string) => {
           goalText={result.text}
           resultType="pending"
         />
-        <PostModal goalId={result.goalId} />
+        {/* 自分の作成した目標の場合のみ投稿可能にする */}
+        {result.userId === user?.uid && <PostModal goalId={result.goalId} />}
       </Step>
     </StepperBlock>
   );