feat(dev): add u2f ui for managing devices and signing in (#2182)

* feat: add u2f ui for managing devices and signing in

* refactor: change unnecessary useState to derived constant

* fix: modal refactor

* fix(web): hide u2f under feature trunk

* fix(web): jest setup

---------

Co-authored-by: Aman Harwara <amanharwara@protonmail.com>
This commit is contained in:
Karol Sójko
2023-02-03 07:54:56 +01:00
committed by GitHub
parent b4f14c668d
commit 9414774e89
48 changed files with 552 additions and 190 deletions

View File

@@ -180,13 +180,23 @@ const ChallengeModal: FunctionComponent<Props> = ({
}, [application, challenge, onDismiss])
const biometricPrompt = challenge.prompts.find((prompt) => prompt.validation === ChallengeValidation.Biometric)
const authenticatorPrompt = challenge.prompts.find(
(prompt) => prompt.validation === ChallengeValidation.Authenticator,
)
const hasOnlyBiometricPrompt = challenge.prompts.length === 1 && !!biometricPrompt
const wasBiometricInputSuccessful = biometricPrompt && !!values[biometricPrompt.id].value
const hasOnlyAuthenticatorPrompt = challenge.prompts.length === 1 && !!authenticatorPrompt
const wasBiometricInputSuccessful = !!biometricPrompt && !!values[biometricPrompt.id].value
const wasAuthenticatorInputSuccessful = !!authenticatorPrompt && !!values[authenticatorPrompt.id].value
const hasSecureTextPrompt = challenge.prompts.some((prompt) => prompt.secureTextEntry)
const shouldShowSubmitButton = !(hasOnlyBiometricPrompt || hasOnlyAuthenticatorPrompt)
useEffect(() => {
const shouldAutoSubmit = hasOnlyBiometricPrompt && wasBiometricInputSuccessful
const shouldAutoSubmit =
(hasOnlyBiometricPrompt && wasBiometricInputSuccessful) ||
(hasOnlyAuthenticatorPrompt && wasAuthenticatorInputSuccessful)
const shouldFocusSecureTextPrompt = hasSecureTextPrompt && wasBiometricInputSuccessful
if (shouldAutoSubmit) {
submit()
} else if (shouldFocusSecureTextPrompt) {
@@ -195,7 +205,14 @@ const ChallengeModal: FunctionComponent<Props> = ({
) as HTMLInputElement | null
secureTextEntry?.focus()
}
}, [wasBiometricInputSuccessful, hasOnlyBiometricPrompt, submit, hasSecureTextPrompt])
}, [
wasBiometricInputSuccessful,
hasOnlyBiometricPrompt,
submit,
hasSecureTextPrompt,
hasOnlyAuthenticatorPrompt,
wasAuthenticatorInputSuccessful,
])
useEffect(() => {
const removeListener = application.addAndroidBackHandlerEventListener(() => {
@@ -289,12 +306,15 @@ const ChallengeModal: FunctionComponent<Props> = ({
index={index}
onValueChange={onValueChange}
isInvalid={values[prompt.id].invalid}
contextData={prompt.contextData}
/>
))}
</form>
<Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
{isProcessing ? 'Generating Keys...' : 'Submit'}
</Button>
{shouldShowSubmitButton && (
<Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
{isProcessing ? 'Generating Keys...' : 'Submit'}
</Button>
)}
{shouldShowForgotPasscode && (
<Button
className="flex min-w-76 items-center justify-center"