diff --git a/src/features/ui/components/modals/nostr-signin-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-signin-modal/components/nostr-extension-indicator.tsx index 4c5333b51..63fddbdc1 100644 --- a/src/features/ui/components/modals/nostr-signin-modal/components/nostr-extension-indicator.tsx +++ b/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='Sign in with browser extension.' values={{ - link: (node) => , + link: (node) => , }} /> ) : ( diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx index 4f499c743..c4a207250 100644 --- a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx +++ b/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 = ({ username, setUsername, setStep }) => { + const dispatch = useAppDispatch(); + + const [loading, setLoading] = useState(false); + const [notFound, setNotFound] = useState(false); + + const handleChangeUsername: React.ChangeEventHandler = (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 ( - - - - - - - setUsername(e.target.value)} - /> - - - - - - - +
+ + + + + + + + + + + + + + +
); };