ログアウトボタンの位置を修正

MurakawaTakuya · Jan 11, 2025 · c0eb1f5 · c0eb1f5
1 parent c15cb88
commit c0eb1f5
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>