Refactor AuthElectronApple and AuthElectronGoogle components for impr…

…oved authentication flow
Jun-Murakami · Oct 4, 2024 · 6d37fad · 6d37fad
1 parent 3e837d6
commit 6d37fad
Show file tree

Hide file tree

Showing 11 changed files with 993 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
+    "electron": "^32.1.2",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",

diff --git a/src/features/app/AuthElectronApple.tsx b/src/features/app/AuthElectronApple.tsx
@@ -11,7 +11,9 @@ export const AuthElectronApple = () => {
         const credential = OAuthProvider.credentialFromResult(result);
         const url = '/auth/redirect?credential=' + JSON.stringify(credential);
         localStorage.removeItem('auth_provider');
-        window.location.href = url;
+        if (window.location.href.startsWith(`https://${import.meta.env.VITE_AUTH_DOMAIN}`)) {
+          window.location.href = url;
+        }
       }
     });
     if (authProvider === 'apple') {

diff --git a/src/features/app/AuthElectronGoogle.tsx b/src/features/app/AuthElectronGoogle.tsx
@@ -11,7 +11,9 @@ export const AuthElectronGoogle = () => {
         const credential = GoogleAuthProvider.credentialFromResult(result);
         const url = '/auth/redirect?credential=' + JSON.stringify(credential);
         localStorage.removeItem('auth_provider');
-        window.location.href = url;
+        if (window.location.href.startsWith(`https://${import.meta.env.VITE_AUTH_DOMAIN}`)) {
+          window.location.href = url;
+        }
       }
     });
     if (authProvider === 'google') {

diff --git a/src/features/homepage/HomePage.tsx b/src/features/homepage/HomePage.tsx
@@ -32,6 +32,7 @@ export function HomePage() {
     handleEmailLogin,
     handleSignup,
     handleResetPassword,
+    handleChangeEmail,
     handleLogout,
     handleDeleteAccount,
   } = useAuth();
@@ -45,7 +46,7 @@ export function HomePage() {
           // ログイン後のメイン画面
           <>
             <QuickMemo />
-            <ResponsiveDrawer handleLogout={async () => await handleLogout()} />
+            <ResponsiveDrawer handleLogout={handleLogout} handleChangeEmail={handleChangeEmail} />
             <Box
               sx={{
                 flexGrow: 1,

diff --git a/src/features/homepage/components/MenuSettings.tsx b/src/features/homepage/components/MenuSettings.tsx
@@ -12,8 +12,9 @@ import {
   ListItemButton,
   ListItemText,
 } from '@mui/material';
-import { Settings, Logout, Upload, Download, DeleteForever } from '@mui/icons-material';
+import { Settings, Logout, Upload, Download, DeleteForever, Email } from '@mui/icons-material';
 import { ListItemIcon } from '@mui/material';
+import { getAuth } from 'firebase/auth';
 import { useAppStateManagement } from '@/hooks/useAppStateManagement';
 import { useTreeManagement } from '@/hooks/useTreeManagement';
 import { useAppStateStore } from '@/store/appStateStore';
@@ -22,7 +23,12 @@ import { useDialogStore } from '@/store/dialogStore';
 import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { Capacitor } from '@capacitor/core';
 
-export function MenuSettings({ handleLogout }: { handleLogout: () => void }) {
+interface MenuSettingsProps {
+  handleLogout: () => Promise<void>;
+  handleChangeEmail: () => Promise<void>;
+}
+
+export function MenuSettings({ handleLogout, handleChangeEmail }: MenuSettingsProps) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const isOffline = useAppStateStore((state) => state.isOffline);
@@ -32,6 +38,8 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) {
   const setIsWaitingForDelete = useAppStateStore((state) => state.setIsWaitingForDelete);
   const currentTree = useTreeStateStore((state) => state.currentTree);
 
+  const isNotOAuthLogiin = getAuth().currentUser?.providerData.some((provider) => provider.providerId !== 'password');
+
   const { saveAppSettings } = useAppStateManagement();
   const { handleDownloadAllTrees, handleFileUpload, handleDownloadTreeState } = useTreeManagement();
 
@@ -202,6 +210,16 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) {
                 アカウント削除
               </MenuItem>
             </Tooltip>
+            {isNotOAuthLogiin && (
+              <Tooltip title='メールアドレスの変更' placement='right'>
+                <MenuItem onClick={handleChangeEmail}>
+                  <ListItemIcon>
+                    <Email fontSize='small' />
+                  </ListItemIcon>
+                  メールアドレスの変更
+                </MenuItem>
+              </Tooltip>
+            )}
             <Divider />
           </Box>
         )}

diff --git a/src/features/homepage/components/MessagePaper.tsx b/src/features/homepage/components/MessagePaper.tsx
@@ -1,15 +1,78 @@
-import { Paper, Typography, Stack, Button } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { Paper, Typography, Stack, Button, Divider } from '@mui/material';
+import { useAppStateStore } from '@/store/appStateStore';
+
+const isElectron = navigator.userAgent.indexOf('Electron') >= 0;
 
 export const MessagePaper = () => {
+  const [currentVersion, setCurrentVersion] = useState('');
+  const [latestVersion, setLatestVersion] = useState('');
+  const [updateMessage, setUpdateMessage] = useState('');
+  const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
+
+  const isLoggedIn = useAppStateStore((state) => state.isLoggedIn); // ログイン状態
+
   const currentUrl = window.location.href;
-  const shouldDisplay =
+  const isWeb =
     currentUrl.startsWith('http://localhost:') ||
     currentUrl.startsWith('https://tasktree-s.web.app') ||
     currentUrl.startsWith('https://tasktrees-fb.web.app');
 
+  // アプリバージョン情報の取得
+  useEffect(() => {
+    if (!isElectron) return;
+
+    // 現在のアプリバージョンを取得
+    const fetchCurrentVersion = async () => {
+      // @ts-expect-error ElectronAPI
+      const version = await window.electron.getAppVersion();
+      setCurrentVersion(version);
+    };
+
+    // 最新バージョン情報を取得
+    const fetchLatestVersion = async () => {
+      try {
+        const repoUrl = 'https://api.github.com/repos/Jun-Murakami/TaskTrees-Electron/releases/latest';
+        const response = await fetch(repoUrl);
+        const data = await response.json();
+        if (!data) {
+          console.error('データが見つかりません');
+        }
+        setLatestVersion(data.tag_name.replace('v', ''));
+        setUpdateMessage(data.body);
+      } catch (error) {
+        setLatestVersion('※バージョン情報の取得に失敗しました。' + error);
+      }
+    };
+
+    fetchCurrentVersion();
+    fetchLatestVersion();
+  }, [isLoggedIn]);
+
+  // 新しいバージョンがあるかどうかを判定
+  useEffect(() => {
+    if (!isElectron) return;
+
+    if (currentVersion && latestVersion) {
+      const currentVersionArray = currentVersion.split('.').map((v) => parseInt(v));
+      const latestVersionArray = latestVersion.split('.').map((v) => parseInt(v));
+      if (currentVersionArray[0] < latestVersionArray[0]) {
+        setIsNewVersionAvailable(true);
+      } else if (currentVersionArray[0] === latestVersionArray[0]) {
+        if (currentVersionArray[1] < latestVersionArray[1]) {
+          setIsNewVersionAvailable(true);
+        } else if (currentVersionArray[1] === latestVersionArray[1]) {
+          if (currentVersionArray[2] < latestVersionArray[2]) {
+            setIsNewVersionAvailable(true);
+          }
+        }
+      }
+    }
+  }, [currentVersion, latestVersion]);
+
   return (
     <Stack sx={{ width: '100%', maxWidth: 400, margin: 'auto', marginTop: 4 }}>
-      {shouldDisplay && (
+      {isWeb && (
         <>
           <Paper>
             <Typography variant='body2' sx={{ textAlign: 'left', p: 2 }} gutterBottom>
@@ -28,10 +91,40 @@ export const MessagePaper = () => {
             variant='outlined'
             sx={{ width: '100%', maxWidth: '90vw', mt: 2 }}
           >
-            PC/スマホアプリのダウンロード
+            PC/スマホ版アプリのダウンロード
           </Button>
         </>
       )}
+      {isElectron && (
+        <Paper sx={{ maxWidth: 400, margin: 'auto', marginTop: 4 }}>
+          <Typography variant='body2' sx={{ textAlign: 'left', p: 2 }} gutterBottom>
+            ver{currentVersion}
+          </Typography>
+          {isNewVersionAvailable ? (
+            <>
+              <Divider />
+              <Typography variant='body2' sx={{ textAlign: 'left', p: 2 }} gutterBottom>
+                {`最新バージョン: ${latestVersion} が利用可能です。`}
+                <br />
+                <a href='https://jun-murakami.web.app/#tasktrees' target='_blank' rel='noreferrer'>
+                  ダウンロード
+                </a>
+                <br />
+                <br />＞ {updateMessage}
+              </Typography>
+            </>
+          ) : (
+            <>
+              <Divider />
+              <Typography variant='body2' sx={{ textAlign: 'left', p: 2 }} gutterBottom>
+                最新バージョン: {latestVersion}
+                <br />
+                {!latestVersion.includes('※バージョン情報の取得に失敗しました。') && 'お使いのバージョンは最新です。'}
+              </Typography>
+            </>
+          )}
+        </Paper>
+      )}
       <Typography variant='caption' sx={{ width: '100%', minWidth: '100%', mt: 1, textAlign: 'center' }}>
         <a href='https://jun-murakami.web.app/' target='_blank' rel='noreferrer'>
           ©{new Date().getFullYear()} Jun Murakami

diff --git a/src/features/homepage/components/ResponsiveDrawer.tsx b/src/features/homepage/components/ResponsiveDrawer.tsx
@@ -30,7 +30,12 @@ import { MenuSettings } from './MenuSettings';
 
 const drawerWidth = 300;
 
-export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void }) {
+interface ResponsiveDrawerProps {
+  handleLogout: () => Promise<void>;
+  handleChangeEmail: () => Promise<void>;
+}
+
+export function ResponsiveDrawer({ handleLogout, handleChangeEmail }: ResponsiveDrawerProps) {
   const [drawerState, setDrawerState] = useState(false);
 
   const darkMode = useAppStateStore((state) => state.darkMode);
@@ -221,7 +226,7 @@ export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void })
         </List>
         <Divider />
         <List sx={{ py: 0.6 }}>
-          <MenuSettings handleLogout={handleLogout} />
+          <MenuSettings handleLogout={handleLogout} handleChangeEmail={handleChangeEmail} />
         </List>
       </Box>
     </>