From 52126923f8fa1e45d1c8e165778917b12e91294f Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Wed, 18 Dec 2024 20:01:56 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3=E8=A9=A6?= =?UTF-8?q?=E8=A1=8C=E4=B8=AD=E3=81=AB=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3?= =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E3=83=AD=E3=83=BC=E3=83=87?= =?UTF-8?q?=E3=82=A3=E3=83=B3=E3=82=B0=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Account/AuthForm.tsx | 91 ++++++++++++++++++++--- src/utils/Auth/signInWithGoogleAccount.ts | 7 +- src/utils/Auth/signInWithMail.ts | 4 +- src/utils/Auth/signUpWithMail.tsx | 4 +- 4 files changed, 92 insertions(+), 14 deletions(-) diff --git a/src/Components/Account/AuthForm.tsx b/src/Components/Account/AuthForm.tsx index 7a38ce6..ab2d6b5 100644 --- 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" /> - - アカウント作成 + + {loading && loadingType === "Mail" ? ( + <> + + アカウント作成 + + ) : ( + "アカウント作成" + )} @@ -133,19 +170,55 @@ export default function AuthForm() { required autoComplete="current-password" /> - - ログイン + + {loading && loadingType === "Mail" ? ( + <> + + ログイン + + ) : ( + "ログイン" + )} )} または - - Googleでログイン + + {loading && loadingType === "Google" ? ( + <> + + Googleアカウントでログイン + + ) : ( + "Googleアカウントでログイン" + )} - - ゲストログイン + + {loading && loadingType === "Guest" ? ( + <> + + ゲストログイン + + ) : ( + "ゲストログイン" + )} ); diff --git a/src/utils/Auth/signInWithGoogleAccount.ts b/src/utils/Auth/signInWithGoogleAccount.ts index a41b7ae..d76be42 100644 --- 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 index 4dee55e..b524a17 100644 --- 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 index 776a803..c5c0ce8 100644 --- 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;