From c0eb1f57c11f2f6df509ec9b9d048a12cfa0e63c Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Sat, 11 Jan 2025 18:43:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=A2=E3=82=A6=E3=83=88?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 functions/src/index.ts                   |  2 +-
 src/Components/Account/LoggedInView.tsx  | 32 +++++++++--------------
 src/Components/NameUpdate/NameUpdate.tsx |  6 ++++-
 src/Components/PWAButton/PWAButton.tsx   |  9 ++++---
 src/app/account/page.tsx                 | 33 ++++++++++++++++++------
 5 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/functions/src/index.ts b/functions/src/index.ts
index 1b239bb9..b2facbe2 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -45,7 +45,7 @@ const verifyAppCheckToken = async (
     console.log("Verified App Check Token:", decodedToken);
     next();
   } catch (error) {
-    console.error("Invalid App Check token:", error);
+    logger.error(`Invalid App Check token with ${appCheckToken}:`, error);
     res.status(401).send("Invalid App Check token.");
   }
 };
diff --git a/src/Components/Account/LoggedInView.tsx b/src/Components/Account/LoggedInView.tsx
index 85ad26ef..dc0513d0 100644
--- a/src/Components/Account/LoggedInView.tsx
+++ b/src/Components/Account/LoggedInView.tsx
@@ -23,6 +23,7 @@ export default function LoggedInView() {
     successRate: 0,
     completed: 0,
   });
+
   const { user } = useUser();
 
   useEffect(() => {
@@ -67,16 +68,20 @@ export default function LoggedInView() {
             ゲストユーザーは閲覧以外の機能は使用できません。
             全ての機能を利用するにはログインが必要です。
           </Typography>
-          <RoundedButton
-            variant="contained"
-            onClick={handleSignOut}
-            sx={{ width: "150px", margin: "0 auto" }}
-          >
-            ログアウト
-          </RoundedButton>
         </>
       )}
 
+      <div className={styles.buttonContainer} style={{ margin: "10px 0" }}>
+        <div>
+          <NameUpdate />
+        </div>
+        <div>
+          <RoundedButton variant="contained" onClick={handleSignOut}>
+            ログアウト
+          </RoundedButton>
+        </div>
+      </div>
+
       {user.loginType !== "Guest" && user.isMailVerified && (
         <>
           <div
@@ -87,19 +92,6 @@ export default function LoggedInView() {
               gap: "5px",
             }}
           >
-            <div
-              className={styles.buttonContainer}
-              style={{ margin: "10px 0" }}
-            >
-              <div>
-                <NameUpdate />
-              </div>
-              <div>
-                <RoundedButton variant="contained" onClick={handleSignOut}>
-                  ログアウト
-                </RoundedButton>
-              </div>
-            </div>
             <Typography level="title-md" sx={{ textAlign: "center" }}>
               連続達成日数: {userStats.streak}日目
             </Typography>
diff --git a/src/Components/NameUpdate/NameUpdate.tsx b/src/Components/NameUpdate/NameUpdate.tsx
index 29cb6bc0..a4fc3968 100644
--- a/src/Components/NameUpdate/NameUpdate.tsx
+++ b/src/Components/NameUpdate/NameUpdate.tsx
@@ -65,7 +65,11 @@ export default function NameUpdate() {
 
   return (
     <>
-      <RoundedButton variant="outlined" onClick={() => setOpen(true)}>
+      <RoundedButton
+        variant="outlined"
+        onClick={() => setOpen(true)}
+        disabled={user?.loginType === "Guest" || !user?.isMailVerified}
+      >
         名前を変更
       </RoundedButton>
 
diff --git a/src/Components/PWAButton/PWAButton.tsx b/src/Components/PWAButton/PWAButton.tsx
index 523e119c..c067c0c7 100644
--- a/src/Components/PWAButton/PWAButton.tsx
+++ b/src/Components/PWAButton/PWAButton.tsx
@@ -16,11 +16,14 @@ declare global {
 
 export const PWAButton = ({
   defaultDisabled = true,
+  PWAReady,
+  setPWAReady,
 }: {
   defaultDisabled?: boolean;
+  PWAReady: boolean;
+  setPWAReady: (value: boolean) => void;
 }) => {
   const deferredPromptRef = useRef<BeforeInstallPromptEvent | null>(null);
-  const [ready, setReady] = useState(false);
   const [isAleadyInstalled, setIsAlreadyInstalled] = useState(false);
 
   useEffect(() => {
@@ -37,7 +40,7 @@ export const PWAButton = ({
     checkIfInstalled();
 
     const beforeInstallPromptHandler = (event: BeforeInstallPromptEvent) => {
-      setReady(true);
+      setPWAReady(true);
       deferredPromptRef.current = event;
     };
 
@@ -78,7 +81,7 @@ export const PWAButton = ({
       ) : (
         <RoundedButton
           variant="outlined"
-          disabled={!ready || defaultDisabled}
+          disabled={!PWAReady || defaultDisabled}
           onClick={handleClickInstall}
         >
           アプリに追加
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index 129ad99a..dffcfb46 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -39,6 +39,7 @@ export default function Account() {
   const { user } = useUser();
   const [isIOS, setIsIOS] = useState(false);
   const [isPWA, setIsPWA] = useState(false);
+  const [PWAReady, setPWAReady] = useState(false);
 
   // iOSか判定
   useEffect(() => {
@@ -83,7 +84,7 @@ export default function Account() {
           </Box>
         </Card>
 
-        {user?.loginType !== "Guest" && user?.isMailVerified && (
+        {user && (
           <Card variant="outlined" sx={{ padding: "25px 20px 30px" }}>
             <Typography
               level="h3"
@@ -95,21 +96,37 @@ export default function Account() {
             </Typography>
             <div className={styles.buttonContainer}>
               <div>
-                <PWAButton defaultDisabled={isIOS || isPWA} />
+                <PWAButton
+                  defaultDisabled={isIOS || isPWA}
+                  PWAReady={PWAReady}
+                  setPWAReady={setPWAReady}
+                />
               </div>
               <div>
-                <NotificationButton defaultDisabled={isIOS && !isPWA} />
+                <NotificationButton
+                  defaultDisabled={
+                    (isIOS && !isPWA) ||
+                    user?.loginType === "Guest" ||
+                    !user?.isMailVerified
+                  }
+                />
               </div>
             </div>
+            {!PWAReady && (
+              <Typography color="danger" textAlign="center">
+                PWAを起動中です。しばらくしてから再度お試しください。
+              </Typography>
+            )}
+            {(user?.loginType === "Guest" || !user?.isMailVerified) && (
+              <Typography color="danger" textAlign="center">
+                通知を利用するには認証が必要です。
+              </Typography>
+            )}
             <Typography>
               アプリに追加をすると、端末のホーム画面やアプリ一覧から起動できるようになります。
-              <br />
-              <br />
-              通知を有効にすると、端末の目標が未達成の場合に期限の5分前に通知を送信します。
-              <br />
             </Typography>
             <Typography color="neutral" level="body-xs">
-              1ユーザー1端末のみ。最後に登録した端末に送信します。
+              1ユーザー1端末のみ通知受信登録をできます。複数登録した場合あ最後に登録した端末に送信します。
               <br />
               通知が受信できない場合はブラウザやサイトの権限を確認してください。
             </Typography>