add account creation wizard
Change-Id: I27f1fd0c53eb83df0c7bd1de06ba791c3b25962b
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
new file mode 100644
index 0000000..3d795ce
--- /dev/null
+++ b/client/src/components/UsernameChooser.js
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+import usePromise from "react-fetch-hook/usePromise"
+import { InputAdornment, TextField } from '@material-ui/core'
+import { SearchRounded } from '@material-ui/icons'
+import authManager from '../AuthManager'
+
+const isInputValid = input => input && input.length > 2
+
+export default function UsernameChooser(props) {
+ const [query, setQuery] = useState('')
+
+ const { isLoading, data, error } = usePromise(() => isInputValid(query) ? authManager.fetch(`/api/ns/name/${query}`)
+ .then(res => {
+ if (res.status === 200)
+ return res.json()
+ else throw res.status
+ }) : new Promise((res, rej) => rej(400)),
+ [query])
+
+ useEffect(() => {
+ if (!isLoading) {
+ if (error === 404)
+ props.setName(query)
+ else
+ props.setName('')
+ }
+ }, [query, isLoading, data, error])
+
+ const handleChange = event => setQuery(event.target.value)
+
+ return (
+ <TextField
+ className="main-search-input"
+ type="search"
+ placeholder="Register a unique name"
+ error={!error}
+ label={isLoading ? 'Searching...' : (error && error !== 400 ? 'This name is available' : (data && data.address ? 'This name is not available' : ''))}
+ value={query}
+ disabled={props.disabled}
+ onChange={handleChange}
+ InputProps={{
+ startAdornment: (
+ <InputAdornment position="start"><SearchRounded /></InputAdornment>
+ )
+ }}
+ />
+ )
+}