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>
2023-02-03 07:54:56 +01:00
parent b4f14c668d
commit 9414774e89
48 changed files with 552 additions and 190 deletions
--- a/packages/web/src/javascripts/Components/ChallengeModal/U2FPrompt.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/U2FPrompt.tsx
@@ -0,0 +1,62 @@
+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>
+  contextData?: Record<string, unknown>
+}
+
+const U2FPrompt = ({ application, onValueChange, prompt, buttonRef, contextData }: Props) => {
+  const [authenticatorResponse, setAuthenticatorResponse] = useState<Record<string, unknown> | null>(null)
+  const [error, setError] = useState('')
+
+  return (
+    <div className="min-w-76">
+      {error && <div className="text-red-500">{error}</div>}
+      <Button
+        primary
+        fullWidth
+        colorStyle={authenticatorResponse ? 'success' : 'info'}
+        onClick={async () => {
+          if (!contextData || contextData.username === undefined) {
+            setError('No username provided')
+
+            return
+          }
+
+          const authenticatorResponseOrError = await application.getAuthenticatorAuthenticationResponse.execute({
+            username: contextData.username,
+          })
+          if (authenticatorResponseOrError.isFailed()) {
+            setError(authenticatorResponseOrError.getError())
+
+            return
+          }
+          const authenticatorResponse = authenticatorResponseOrError.getValue()
+
+          setAuthenticatorResponse(authenticatorResponse)
+          onValueChange(authenticatorResponse, prompt)
+        }}
+        ref={buttonRef}
+      >
+        {authenticatorResponse ? (
+          <span className="flex items-center justify-center gap-3">
+            <Icon type="check-circle" />
+            Obtained Device Response
+          </span>
+        ) : (
+          'Authenticate Device'
+        )}
+      </Button>
+    </div>
+  )
+}
+
+export default U2FPrompt