add account creation wizard
Change-Id: I27f1fd0c53eb83df0c7bd1de06ba791c3b25962b
diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
deleted file mode 100644
index 594c979..0000000
--- a/client/src/components/AccountList.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
-import ConversationAvatar from './ConversationAvatar'
-
-export default function AccountList(props) {
- return <List>
- {
- props.accounts.map(account => {
- const displayName = account.getDisplayNameNoFallback()
- return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
- <ListItemAvatar>
- <ConversationAvatar displayName={displayName} />
- </ListItemAvatar>
- <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
- </ListItem>
- })
- }
- </List>
-}
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index b9160a1..601fcf6 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,7 +1,9 @@
-import React from 'react';
-import { Avatar } from '@material-ui/core';
+import React from 'react'
+import { Avatar } from '@material-ui/core'
import { PersonRounded } from '@material-ui/icons'
export default function ConversationAvatar(props) {
- return <Avatar>{props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+ return <Avatar>
+ {props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}
+ </Avatar>
}
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
new file mode 100644
index 0000000..8ff17d1
--- /dev/null
+++ b/client/src/components/ListItemLink.js
@@ -0,0 +1,30 @@
+import React, { useMemo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { Link as RouterLink } from 'react-router-dom';
+
+function ListItemLink(props) {
+ const { icon, primary, secondary, to } = props
+
+ const renderLink = useMemo(
+ () => forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
+ [to])
+
+ return (
+ <ListItem button component={renderLink}>
+ {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+ <ListItemText primary={primary} secondary={secondary} />
+ </ListItem>
+ )
+}
+
+ListItemLink.propTypes = {
+ icon: PropTypes.element,
+ primary: PropTypes.string.isRequired,
+ secondary: PropTypes.string,
+ to: PropTypes.string.isRequired,
+}
+
+export default ListItemLink
\ No newline at end of file
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index f4b4f57..ab28177 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -8,9 +8,9 @@
if (message.type == 'text/plain')
return (<div className="message">
<div className="message-avatar">
- <ConversationAvatar name="{message.author}" /></div>
- <Typography className="message-text">{message.body}</Typography>
- </div>)
+ <ConversationAvatar name={message.author} /></div>
+ <Typography className="message-text">{message.body}</Typography>
+ </div>)
else if (message.type == 'contact')
return (<div className="contact-event">
<Typography className="message-text">Contact event</Typography>
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 82ee7af..fa7c0f2 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -37,8 +37,10 @@
const handleSubmit = e => {
e.preventDefault()
- props.onSend(currentMessage)
- setCurrentMessage('')
+ if (currentMessage) {
+ props.onSend(currentMessage)
+ setCurrentMessage('')
+ }
}
const handleInputChange = (event) => setCurrentMessage(event.target.value)
const onEmojiClick = (e, emojiObject) => {
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>
+ )
+ }}
+ />
+ )
+}