diff --git a/client/layouts/BasicHeader/YourProfile.tsx b/client/layouts/BasicHeader/YourProfile.tsx index 2c10172..84ffb31 100644 --- a/client/layouts/BasicHeader/YourProfile.tsx +++ b/client/layouts/BasicHeader/YourProfile.tsx @@ -1,12 +1,16 @@ import { Button, TextField, View } from '@aws-amplify/ui-react'; import { + confirmUserAttribute, fetchMFAPreference, setUpTOTP, + signOut, updateMFAPreference, + updateUserAttribute, verifyTOTPSetup, } from 'aws-amplify/auth'; import { APP_NAME } from 'common/constants'; import type { UserEntity } from 'common/types/user'; +import { Btn } from 'components/Btn/Btn'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'components/Modal/Modal'; import { Spacer } from 'components/Spacer'; import { useEffect, useState } from 'react'; @@ -15,18 +19,38 @@ export const YourProfile = (props: { user: UserEntity; onClose: () => void }) => const [enabledTotp, setEnabledTotp] = useState(); const [qrCodeUrl, setQrCodeUrl] = useState(''); const [totpCode, setTotpCode] = useState(''); + const [email, setEmail] = useState(props.user.email); const enableTOTP = async () => { const totpSetupDetails = await setUpTOTP(); const setupUri = totpSetupDetails.getSetupUri(APP_NAME); setQrCodeUrl(setupUri.toString()); }; + const disableTOTP = async () => { + await updateMFAPreference({ totp: 'DISABLED' }); + + setEnabledTotp(false); + alert('二要素認証が無効になりました。'); + }; const verifyTOTP = async () => { await verifyTOTPSetup({ code: totpCode }); await updateMFAPreference({ totp: 'PREFERRED' }); alert('二要素認証が有効になりました。'); setQrCodeUrl(''); }; + const saveEmail = async () => { + await updateUserAttribute({ userAttribute: { attributeKey: 'email', value: email } }); + + const confirmationCode = prompt('確認コードを入力してください。'); + + if (confirmationCode === null) return; + + const result = await confirmUserAttribute({ userAttributeKey: 'email', confirmationCode }) + .then(() => true) + .catch(() => false); + + if (result) await signOut(); + }; useEffect(() => { fetchMFAPreference().then((res) => { @@ -40,10 +64,23 @@ export const YourProfile = (props: { user: UserEntity; onClose: () => void }) =>
ユーザー名: {props.user.name}
-
メールアドレス: {props.user.email}
+
+ メールアドレス: + + setEmail(e.target.value)} + /> + + +
{enabledTotp ? ( -
二要素認証: 有効
+ ) : qrCodeUrl ? (

認証アプリでこのQRコードをスキャンしてください