IdentityStep: lookup the account before proceeding

src/features/ui/components/modals/nostr-signin-modal/components/nostr-extension-indicator.tsx

@@ -19,7 +19,7 @@ const NostrExtensionIndicator: React.FC = () => {
             id='nostr_extension.found'
             defaultMessage='<link>Sign in</link> with browser extension.'
             values={{
-              link: (node) => <button className='underline' onClick={onClick}>{node}</button>,
+              link: (node) => <button type='button' className='underline' onClick={onClick}>{node}</button>,
             }}
           />
         ) : (

src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import { accountLookup } from 'soapbox/actions/accounts';
 import Button from 'soapbox/components/ui/button/button';
+import Form from 'soapbox/components/ui/form/form';
 import FormGroup from 'soapbox/components/ui/form-group/form-group';
 import HStack from 'soapbox/components/ui/hstack/hstack';
 import Input from 'soapbox/components/ui/input/input';
 import Stack from 'soapbox/components/ui/stack/stack';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../components/nostr-extension-indicator';
@@ -16,26 +19,62 @@ interface IIdentityStep {
 }
 
 const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep }) => {
+  const dispatch = useAppDispatch();
+
+  const [loading, setLoading] = useState(false);
+  const [notFound, setNotFound] = useState(false);
+
+  const handleChangeUsername: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setNotFound(false);
+    setUsername(e.target.value);
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+
+    await dispatch(accountLookup(username))
+      .then(() => {
+        setStep(3);
+        setNotFound(false);
+        setLoading(false);
+      })
+      .catch((error) => {
+        if (error.response?.status === 404) {
+          setNotFound(true);
+        }
+        setLoading(false);
+      });
+  };
+
+  const errors: string[] = [];
+  if (notFound) {
+    errors.push('Account not found');
+  }
+
   return (
-    <Stack className='mt-3' space={3}>
+    <Form>
-      <NostrExtensionIndicator />
+      <Stack className='mt-3' space={3}>
+        <NostrExtensionIndicator />
 
-      <EmojiGraphic emoji='🕵️' />
+        <EmojiGraphic emoji='🕵️' />
 
-      <FormGroup labelText='Username'>
+        <FormGroup labelText='Username' errors={errors}>
-        <Input
+          <Input
-          icon={require('@tabler/icons/at.svg')}
+            icon={require('@tabler/icons/at.svg')}
-          placeholder='Username or npub'
+            placeholder='Username or npub'
-          value={username}
+            value={username}
-          onChange={(e) => setUsername(e.target.value)}
+            onChange={handleChangeUsername}
-        />
+            disabled={loading}
-      </FormGroup>
+            autoFocus
+          />
+        </FormGroup>
 
-      <HStack space={2} alignItems='center' justifyContent='between'>
+        <HStack space={2} alignItems='center' justifyContent='between'>
-        <Button theme='transparent' onClick={() => setStep(2)}>Sign up</Button>
+          <Button theme='transparent' onClick={() => setStep(2)} disabled={loading}>Sign up</Button>
-        <Button theme='accent' disabled={!username} onClick={() => setStep(3)}>Next</Button>
+          <Button theme='accent' type='submit' disabled={!username || loading} onClick={handleSubmit}>Next</Button>
-      </HStack>
+        </HStack>
-    </Stack>
+      </Stack>
+    </Form>
   );
 };