ログイン試行中にログインボタンをローディングにする

MurakawaTakuya · Dec 19, 2024 · 5212692 · 5212692
1 parent 562e3e7
commit 5212692
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 14 deletions.
diff --git a/src/Components/Account/AuthForm.tsx b/src/Components/Account/AuthForm.tsx
@@ -3,13 +3,14 @@ import { signInWithGoogleAccount } from "@/utils/Auth/signInWithGoogleAccount";
 import { signInWithMail } from "@/utils/Auth/signInWithMail";
 import { signUpWithMail } from "@/utils/Auth/signUpWithMail";
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
 import Divider from "@mui/material/Divider";
 import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { RoundedButton } from "./LoggedInView";
 
 const CenteredToggleButtonGroup = styled(ToggleButtonGroup)({
@@ -23,23 +24,47 @@ export default function AuthForm() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [formMode, setFormMode] = useState<"register" | "login">("register");
+  const [loading, setLoading] = useState(false);
+  const [loadingType, setLoadingType] = useState<
+    "Mail" | "Google" | "Guest" | null
+  >(null);
+
+  useEffect(() => {
+    console.log(loading, loadingType);
+  }, [loading, loadingType]);
 
   const handleRegisterSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    setLoading(true);
+    setLoadingType("Mail");
     await signUpWithMail(email, password, name);
+    setLoading(false);
+    setLoadingType(null);
   };
 
   const handleLoginSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    setLoading(true);
+    setLoadingType("Mail");
     await signInWithMail(email, password);
+    setLoading(false);
+    setLoadingType(null);
   };
 
   const handleGoogleLogin = async () => {
+    setLoading(true);
+    setLoadingType("Google");
     await signInWithGoogleAccount();
+    setLoading(false);
+    setLoadingType(null);
   };
 
   const handleGuestLogin = async () => {
+    setLoading(true);
+    setLoadingType("Guest");
     await signInAsGuest();
+    setLoading(false);
+    setLoadingType(null);
   };
 
   return (
@@ -98,8 +123,20 @@ export default function AuthForm() {
                 required
                 autoComplete="new-password"
               />
-              <RoundedButton type="submit" variant="contained" fullWidth>
-                アカウント作成
+              <RoundedButton
+                type="submit"
+                variant="contained"
+                fullWidth
+                disabled={loading}
+              >
+                {loading && loadingType === "Mail" ? (
+                  <>
+                    <CircularProgress size={24} sx={{ marginRight: 1 }} />
+                    アカウント作成
+                  </>
+                ) : (
+                  "アカウント作成"
+                )}
               </RoundedButton>
             </Box>
           </form>
@@ -133,19 +170,55 @@ export default function AuthForm() {
                 required
                 autoComplete="current-password"
               />
-              <RoundedButton type="submit" variant="contained" fullWidth>
-                ログイン
+              <RoundedButton
+                type="submit"
+                variant="contained"
+                fullWidth
+                disabled={loading}
+              >
+                {loading && loadingType === "Mail" ? (
+                  <>
+                    <CircularProgress size={24} sx={{ marginRight: 1 }} />
+                    ログイン
+                  </>
+                ) : (
+                  "ログイン"
+                )}
               </RoundedButton>
             </Box>
           </form>
         </>
       )}
       <Divider>または</Divider>
-      <RoundedButton fullWidth variant="outlined" onClick={handleGoogleLogin}>
-        Googleでログイン
+      <RoundedButton
+        fullWidth
+        variant="outlined"
+        onClick={handleGoogleLogin}
+        disabled={loading}
+      >
+        {loading && loadingType === "Google" ? (
+          <>
+            <CircularProgress size={24} sx={{ marginRight: 1 }} />
+            Googleアカウントでログイン
+          </>
+        ) : (
+          "Googleアカウントでログイン"
+        )}
       </RoundedButton>
-      <RoundedButton fullWidth variant="outlined" onClick={handleGuestLogin}>
-        ゲストログイン
+      <RoundedButton
+        fullWidth
+        variant="outlined"
+        onClick={handleGuestLogin}
+        disabled={loading}
+      >
+        {loading && loadingType === "Guest" ? (
+          <>
+            <CircularProgress size={24} sx={{ marginRight: 1 }} />
+            ゲストログイン
+          </>
+        ) : (
+          "ゲストログイン"
+        )}
       </RoundedButton>
     </>
   );

diff --git a/src/utils/Auth/signInWithGoogleAccount.ts b/src/utils/Auth/signInWithGoogleAccount.ts
@@ -33,8 +33,13 @@ export const signInWithGoogleAccount = async () => {
   } catch (error) {
     console.error("errorCode:", (error as Error)?.name);
     console.error("errorMessage:", (error as Error)?.message);
+    let message =
+      "Googleアカウントでのログインに失敗しました。ページを更新して再度お試しください。";
+    if ((error as Error)?.message.includes("auth/popup-closed-by-user")) {
+      message = "ログインがキャンセルされました";
+    }
     showSnackBar({
-      message: "Googleアカウントでのログインに失敗しました",
+      message,
       type: "warning",
     });
   }

diff --git a/src/utils/Auth/signInWithMail.ts b/src/utils/Auth/signInWithMail.ts
@@ -9,8 +9,8 @@ import { signInWithEmailAndPassword } from "firebase/auth";
  * @param {string} password
  * @return {*}
  */
-export const signInWithMail = (email: string, password: string) => {
-  signInWithEmailAndPassword(auth, email, password)
+export const signInWithMail = async (email: string, password: string) => {
+  await signInWithEmailAndPassword(auth, email, password)
     .then(() => {
       showSnackBar({
         message: "メールでログインしました",

diff --git a/src/utils/Auth/signUpWithMail.tsx b/src/utils/Auth/signUpWithMail.tsx
@@ -15,13 +15,13 @@ import {
  * @param {string} password
  * @param {string} name
  */
-export const signUpWithMail = (
+export const signUpWithMail = async (
   email: string,
   password: string,
   name: string
 ) => {
   // メールは初回ログインの時のみ成功する、2回目以降はエラーになるので、ログインを使う
-  createUserWithEmailAndPassword(auth, email, password)
+  await createUserWithEmailAndPassword(auth, email, password)
     .then(async (userCredential) => {
       const user = userCredential.user;