fix: improve biometrics input on mobile webview (#1658)

packages/web/src/javascripts/Components/ChallengeModal/BiometricsPrompt.tsx

@@ -0,0 +1,44 @@
+import { WebApplication } from '@/Application/Application'
+import { ChallengePrompt } from '@standardnotes/services'
+import { RefObject, useState } from 'react'
+import Button from '../Button/Button'
+import Icon from '../Icon/Icon'
+import { InputValue } from './InputValue'
+
+type Props = {
+  application: WebApplication
+  onValueChange: (value: InputValue['value'], prompt: ChallengePrompt) => void
+  prompt: ChallengePrompt
+  buttonRef: RefObject<HTMLButtonElement>
+}
+
+const BiometricsPrompt = ({ application, onValueChange, prompt, buttonRef }: Props) => {
+  const [authenticated, setAuthenticated] = useState(false)
+
+  return (
+    <div className="min-w-76">
+      <Button
+        primary
+        fullWidth
+        colorStyle={authenticated ? 'success' : 'info'}
+        onClick={async () => {
+          const authenticated = await application.mobileDevice.authenticateWithBiometrics()
+          setAuthenticated(authenticated)
+          onValueChange(authenticated, prompt)
+        }}
+        ref={buttonRef}
+      >
+        {authenticated ? (
+          <span className="flex items-center justify-center gap-3">
+            <Icon type="check-circle" />
+            Biometrics successful
+          </span>
+        ) : (
+          'Tap to use biometrics'
+        )}
+      </Button>
+    </div>
+  )
+}
+
+export default BiometricsPrompt

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -1,16 +1,11 @@
-import {
-  ChallengePrompt,
-  ChallengeValidation,
-  MobileDeviceInterface,
-  ProtectionSessionDurations,
-} from '@standardnotes/snjs'
+import { ChallengePrompt, ChallengeValidation, ProtectionSessionDurations } from '@standardnotes/snjs'
 import { FunctionComponent, useEffect, useRef } from 'react'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import { ChallengeModalValues } from './ChallengeModalValues'
-import Button from '../Button/Button'
 import { WebApplication } from '@/Application/Application'
 import { InputValue } from './InputValue'
+import BiometricsPrompt from './BiometricsPrompt'
 
 type Props = {
   application: WebApplication
@@ -87,21 +82,12 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({
           </div>
         </div>
       ) : prompt.validation === ChallengeValidation.Biometric ? (
-        <div className="min-w-76">
-          <Button
-            primary
-            fullWidth
-            onClick={async () => {
-              const authenticated = await (
-                application.deviceInterface as MobileDeviceInterface
-              ).authenticateWithBiometrics()
-              onValueChange(authenticated, prompt)
-            }}
-            ref={biometricsButtonRef}
-          >
-            Tap to use biometrics
-          </Button>
-        </div>
+        <BiometricsPrompt
+          application={application}
+          onValueChange={onValueChange}
+          prompt={prompt}
+          buttonRef={biometricsButtonRef}
+        />
       ) : prompt.secureTextEntry ? (
         <DecoratedPasswordInput
           ref={inputRef}