0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00

fix(console): correct sign-in method item state (#2298)

This commit is contained in:
Xiao Yijun 2022-11-02 12:09:44 +08:00 committed by GitHub
parent bf6bd75e0f
commit a4d8d31e98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 35 deletions

View file

@ -14,8 +14,8 @@ import type { SignInMethod } from './types';
type Props = {
signInMethod: SignInMethod;
isPasswordDisabled: boolean;
isVerificationDisabled: boolean;
isPasswordCheckable: boolean;
isVerificationCodeCheckable: boolean;
isDeletable: boolean;
onVerificationStateChange: (
identifier: SignInIdentifier,
@ -28,8 +28,8 @@ type Props = {
const SignInMethodItem = ({
signInMethod: { identifier, password, verificationCode, isPasswordPrimary },
isPasswordDisabled,
isVerificationDisabled,
isPasswordCheckable,
isVerificationCodeCheckable,
isDeletable,
onVerificationStateChange,
onToggleVerificationPrimary,
@ -55,7 +55,7 @@ const SignInMethodItem = ({
<Checkbox
label={t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')}
value={password}
disabled={isPasswordDisabled}
disabled={!isPasswordCheckable}
onChange={(checked) => {
onVerificationStateChange(identifier, 'password', checked);
}}
@ -73,7 +73,7 @@ const SignInMethodItem = ({
<Checkbox
label={t('sign_in_exp.sign_up_and_sign_in.sign_in.verification_code_auth')}
value={verificationCode}
disabled={isVerificationDisabled}
disabled={!isVerificationCodeCheckable}
onChange={(checked) => {
onVerificationStateChange(identifier, 'verificationCode', checked);
}}
@ -83,7 +83,7 @@ const SignInMethodItem = ({
</div>
</div>
<IconButton
disabled={isDeletable}
disabled={!isDeletable}
onClick={() => {
onDelete(identifier);
}}

View file

@ -55,15 +55,12 @@ const SignInMethodEditBox = ({
computeOnSignInMethodAppended(value, {
identifier,
password: getSignInMethodPasswordCheckState(identifier, isSignUpPasswordRequired),
verificationCode: getSignInMethodVerificationCodeCheckState(
identifier,
isSignUpVerificationRequired
),
verificationCode: getSignInMethodVerificationCodeCheckState(identifier),
isPasswordPrimary: true,
})
);
},
[handleChange, value, isSignUpPasswordRequired, isSignUpVerificationRequired]
[handleChange, value, isSignUpPasswordRequired]
);
useEffect(() => {
@ -72,10 +69,7 @@ const SignInMethodEditBox = ({
computeOnSignInMethodAppended(previous, {
identifier: current,
password: getSignInMethodPasswordCheckState(current, isSignUpPasswordRequired),
verificationCode: getSignInMethodVerificationCodeCheckState(
current,
isSignUpVerificationRequired
),
verificationCode: getSignInMethodVerificationCodeCheckState(current),
isPasswordPrimary: true,
}),
signInMethods.current
@ -89,11 +83,7 @@ const SignInMethodEditBox = ({
isSignUpPasswordRequired,
method.password
),
verificationCode: getSignInMethodVerificationCodeCheckState(
method.identifier,
isSignUpVerificationRequired,
method.verificationCode
),
verificationCode: getSignInMethodVerificationCodeCheckState(method.identifier),
}))
);
}, [
@ -138,11 +128,15 @@ const SignInMethodEditBox = ({
>
<SignInMethodItem
signInMethod={signInMethod}
isPasswordDisabled={
signInMethod.identifier === SignInIdentifier.Username || isSignUpPasswordRequired
isPasswordCheckable={
signInMethod.identifier !== SignInIdentifier.Username && !isSignUpPasswordRequired
}
isVerificationDisabled={isSignUpVerificationRequired && !isSignUpPasswordRequired}
isDeletable={requiredSignInIdentifiers.includes(signInMethod.identifier)}
isVerificationCodeCheckable={
(isSignUpPasswordRequired && isSignUpVerificationRequired) ||
// Note: the next line is used to handle the case when the sign-up identifier is `Username`
(isSignUpPasswordRequired && signInMethod.identifier !== SignInIdentifier.Username)
}
isDeletable={!requiredSignInIdentifiers.includes(signInMethod.identifier)}
onVerificationStateChange={(identifier, verification, checked) => {
handleChange(
computeOnVerificationStateChanged(value, identifier, verification, checked)

View file

@ -55,14 +55,6 @@ export const getSignInMethodPasswordCheckState = (
return isSignUpPasswordRequired || originCheckState;
};
export const getSignInMethodVerificationCodeCheckState = (
signInIdentifier: SignInIdentifier,
isSignUpVerificationRequired: boolean,
originCheckState = false
) => {
if (signInIdentifier === SignInIdentifier.Username) {
return false;
}
return isSignUpVerificationRequired || originCheckState;
export const getSignInMethodVerificationCodeCheckState = (signInIdentifier: SignInIdentifier) => {
return signInIdentifier !== SignInIdentifier.Username;
};