Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(experience): add missing button loading state (#6599)

Browse source
This commit is contained in:
Xiao Yijun 2024-09-20 14:49:53 +08:00 committed by GitHub
parent 918f8503fd
commit c61dd50e60
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/experience-legacy/src/containers/SocialLinkAccount/index.tsx
View file

@ -1,6 +1,7 @@
import { SignInIdentifier, SignInMode } from '@logto/schemas'; import { SignInIdentifier, SignInMode } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import type { TFuncKey } from 'i18next'; import type { TFuncKey } from 'i18next';
import { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Button from '@/components/Button'; import Button from '@/components/Button';
@ -44,6 +45,8 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
const { signUpMethods, signInMode } = useSieMethods(); const { signUpMethods, signInMode } = useSieMethods();
const bindSocialRelatedUser = useBindSocialRelatedUser(); const bindSocialRelatedUser = useBindSocialRelatedUser();
const [isBindingUser, setIsBindingUser] = useState(false);
const registerWithSocial = useSocialRegister(connectorId); const registerWithSocial = useSocialRegister(connectorId);
const actionText = getCreateAccountActionText(signUpMethods); const actionText = getCreateAccountActionText(signUpMethods);
@ -57,11 +60,14 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
<Button <Button
title="action.bind" title="action.bind"
i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }} i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }}
onClick={() => { isLoading={isBindingUser}
void bindSocialRelatedUser({ onClick={async () => {
setIsBindingUser(true);
await bindSocialRelatedUser({
connectorId, connectorId,
...(type === 'email' ? { email: value } : { phone: value }), ...(type === 'email' ? { email: value } : { phone: value }),
}); });
setIsBindingUser(false);
}} }}
/> />

2
packages/experience-legacy/src/hooks/use-webauthn-operation.ts
View file

@ -67,7 +67,7 @@ const useWebAuthnOperation = () => {
/** /**
* Assert type manually to get the correct type * Assert type manually to get the correct type
*/ */
void sendMfaPayload( await sendMfaPayload(
isAuthenticationResponseJSON(response) isAuthenticationResponseJSON(response)
? { ? {
flow: UserMfaFlow.MfaVerification, flow: UserMfaFlow.MfaVerification,

10
packages/experience/src/containers/SocialLinkAccount/index.tsx
View file

@ -1,6 +1,7 @@
import { SignInIdentifier, SignInMode } from '@logto/schemas'; import { SignInIdentifier, SignInMode } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import type { TFuncKey } from 'i18next'; import type { TFuncKey } from 'i18next';
import { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Button from '@/components/Button'; import Button from '@/components/Button';
@ -45,6 +46,8 @@ const SocialLinkAccount = ({ connectorId, verificationId, className, relatedUser
const { signUpMethods, signInMode } = useSieMethods(); const { signUpMethods, signInMode } = useSieMethods();
const bindSocialRelatedUser = useBindSocialRelatedUser(); const bindSocialRelatedUser = useBindSocialRelatedUser();
const [isBindingUser, setIsBindingUser] = useState(false);
const registerWithSocial = useSocialRegister(connectorId); const registerWithSocial = useSocialRegister(connectorId);
const actionText = getCreateAccountActionText(signUpMethods); const actionText = getCreateAccountActionText(signUpMethods);
@ -58,8 +61,11 @@ const SocialLinkAccount = ({ connectorId, verificationId, className, relatedUser
<Button <Button
title="action.bind" title="action.bind"
i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }} i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }}
onClick={() => { isLoading={isBindingUser}
void bindSocialRelatedUser(verificationId); onClick={async () => {
setIsBindingUser(true);
await bindSocialRelatedUser(verificationId);
setIsBindingUser(false);
}} }}
/> />

2
packages/experience/src/hooks/use-webauthn-operation.ts
View file

@ -70,7 +70,7 @@ const useWebAuthnOperation = () => {
/** /**
* Assert type manually to get the correct type * Assert type manually to get the correct type
*/ */
void sendMfaPayload( await sendMfaPayload(
isAuthenticationResponseJSON(response) isAuthenticationResponseJSON(response)
? { ? {
flow: UserMfaFlow.MfaVerification, flow: UserMfaFlow.MfaVerification,