fix#418 "Outlookを開く"ボタンを追加

sohosai · Jul 28, 2024 · 2a2b4cf · 2a2b4cf
1 parent aaa624b
commit 2a2b4cf
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 10 deletions.
diff --git a/src/assets/SendButton_white.svg b/src/assets/SendButton_white.svg
diff --git a/src/common_components/auth/AuthUI.tsx b/src/common_components/auth/AuthUI.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { FC, PropsWithChildren } from "react";
+import React, { FC, PropsWithChildren, useState } from "react";
 import { Header } from "@/common_components/header/Header";
 import SigninPage from "@/common_components/auth/signin/page";
 import SignupPage from "@/common_components/auth/signup/page";
@@ -17,6 +17,7 @@ export const authModeAtom = atomWithHash<"signIn" | "signUp" | "resetPassword">(
 export const AuthUI: FC<PropsWithChildren> = ({ children }) => {
   const authMode = useAtomValue(authModeAtom);
   const authState = useAuthState();
+  const [userEmail, setUserEmail] = useState<string | null>(null);
 
   const path = usePathname();
   if (path === "/") {
@@ -36,7 +37,7 @@ export const AuthUI: FC<PropsWithChildren> = ({ children }) => {
         return <SigninPage />;
 
       case "signUp":
-        return <SignupPage />;
+        return <SignupPage setUserEmail={setUserEmail} />;
 
       case "resetPassword":
         return <ResetPassword />;
@@ -57,7 +58,7 @@ export const AuthUI: FC<PropsWithChildren> = ({ children }) => {
           <Loading />
         </div>
       ) : authState.user ? (
-        <>{authState.user.emailVerified ? <>{children}</> : <EmailVerification />}</>
+        <>{authState.user.emailVerified ? <>{children}</> : <EmailVerification userEmail={userEmail} />}</>
       ) : (
         <Component />
       )}

diff --git a/src/common_components/auth/EmailVerification.tsx b/src/common_components/auth/EmailVerification.tsx
@@ -1,14 +1,18 @@
 import { center } from "@styled-system/patterns";
 import { css, cx } from "@styled-system/css";
-import SendButton from "@/assets/SendButton.svg?url";
+import SendButton from "@/assets/SendButton_white.svg?url";
 import Image from "next/image";
 import { sendEmailVerification } from "firebase/auth";
 import { useAuthState } from "@/lib/firebase";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { buttonStyle } from "@/recipes/button";
 
-export const EmailVerification = () => {
+interface EmailVerificationProps {
+  userEmail: string | null;
+}
+
+export const EmailVerification: React.FC<EmailVerificationProps> = ({ userEmail }) => {
   const authState = useAuthState();
   const [isSent, setIsSent] = useState(false);
   const handleResend = () => {
@@ -60,7 +64,7 @@ export const EmailVerification = () => {
         <div className={css({ display: "flex", flexDir: "column", gap: 2 })}>
           <button
             className={cx(
-              buttonStyle({ visual: "outline", color: "purple" }),
+              buttonStyle({ visual: "solid", color: "purple" }),
               css({
                 alignSelf: "center",
                 display: "flex!",
@@ -78,6 +82,28 @@ export const EmailVerification = () => {
             <span>確認メールを再送する</span>
             <Image src={SendButton} alt="" width={20} height={20} />
           </button>
+          {userEmail && (
+            <a
+              href={`https://outlook.office.com/mail/${userEmail}/inbox/`}
+              target="_blank"
+              rel="noreferrer noopener"
+              className={cx(
+                buttonStyle({ visual: "outline", color: "purple" }),
+                css({
+                  alignSelf: "center",
+                  display: "flex!",
+                  alignItems: "flex-end",
+                  gap: 2,
+                  _disabled: {
+                    opacity: 0.5,
+                    cursor: "default",
+                    "&:hover": { opacity: 0.5 },
+                  },
+                }),
+              )}>
+              <span>Outlook を開く（外部）</span>
+            </a>
+          )}
           {isSent && (
             <p className={css({ color: "gray.700", fontSize: "sm" })}>
               確認メールを再送しました

diff --git a/src/common_components/auth/signup/SignupForm.tsx b/src/common_components/auth/signup/SignupForm.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/common_components/Button";
 import { getAuth, sendEmailVerification, signInWithEmailAndPassword } from "firebase/auth";
 import { SignupSchema, SignupSchemaType } from "@/lib/valibot";
 import { valibotResolver } from "@hookform/resolvers/valibot";
+import { Dispatch, SetStateAction } from "react";
 
 let labelAndInputStyle = css({
   display: "flex",
@@ -16,7 +17,11 @@ let labelAndInputStyle = css({
   width: "100%",
 });
 
-export const SignupForm = () => {
+interface SignupFormProps {
+  setUserEmail: Dispatch<SetStateAction<string | null>>;
+}
+
+export const SignupForm: React.FC<SignupFormProps> = ({ setUserEmail }) => {
   const {
     register,
     handleSubmit,
@@ -44,6 +49,7 @@ export const SignupForm = () => {
         if (res.status === 201) {
           const auth = getAuth();
           signInWithEmailAndPassword(auth, data.email, data.password).then(() => {
+            setUserEmail(data.email);
             sendEmailVerification(auth.currentUser!);
           });
         } else {
@@ -124,7 +130,9 @@ export const SignupForm = () => {
         <label htmlFor="agreement">
           <a
             href="https://s3.isk01.sakurastorage.jp/sos24-prod/雙峰祭オンラインシステム利用規約.pdf"
-            className={css({ textDecoration: "underline" })}>
+            className={css({ textDecoration: "underline" })}
+            target="_blank"
+            rel="noopener noreferrer">
             利用規約
           </a>
           に同意する

diff --git a/src/common_components/auth/signup/page.tsx b/src/common_components/auth/signup/page.tsx
@@ -8,8 +8,14 @@ import Triangle from "@/assets/Triangle.svg?url";
 import { authModeAtom } from "@/common_components/auth/AuthUI";
 import { useSetAtom } from "jotai";
 import { center } from "@styled-system/patterns";
+import { Dispatch, SetStateAction } from "react";
 
-const SignupPage: NextPage = () => {
+interface SignupPageProps {
+  setUserEmail: Dispatch<SetStateAction<string | null>>;
+}
+
+// const SignupPage: NextPage = (setUserEmail: Dispatch<SetStateAction<string | null>>) => {
+const SignupPage: NextPage<SignupPageProps> = ({ setUserEmail }) => {
   const setAuthMode = useSetAtom(authModeAtom);
 
   return (
@@ -25,7 +31,7 @@ const SignupPage: NextPage = () => {
         })}>
         新規登録
       </h1>
-      <SignupForm />
+      <SignupForm setUserEmail={setUserEmail} />
       <div className={css({ marginTop: 4, display: "flex", gap: 3.5 })}>
         <Image src={Triangle} alt="" />
         <button