add account creation wizard
Change-Id: I27f1fd0c53eb83df0c7bd1de06ba791c3b25962b
diff --git a/client/package.json b/client/package.json
index 5c4cc03..8fd8540 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-emoji-render": "^1.2.4",
+ "react-fetch-hook": "^1.8.5",
"react-router-dom": "^5.2.0",
"react-sound": "^1.2.0",
"socket.io-client": "^4.0.1"
diff --git a/client/src/App.js b/client/src/App.js
index b500052..bfe707e 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,8 +4,7 @@
License: AGPL-3
*/
import React, { useState, useEffect } from 'react'
-import { Route, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
-import { CircularProgress, Container, CssBaseline } from '@material-ui/core'
+import { Route, Switch, Redirect } from 'react-router-dom'
import authManager from './AuthManager'
//import logo from './logo.svg'
import './App.scss'
@@ -15,12 +14,12 @@
import AccountSettings from "./pages/accountSettings.jsx"
import AccountSelection from "./pages/accountSelection.jsx"
import ServerSetup from "./pages/serverSetup.jsx"
+import AccountCreationDialog from "./pages/accountCreation.jsx"
import NotFoundPage from "./pages/404.jsx"
import LoadingPage from './components/loading'
+import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
const App = (props) => {
- const history = useHistory()
- const { location } = useLocation()
const [state, setState] = useState({
loaded: false,
auth: authManager.getState()
@@ -48,6 +47,8 @@
<Route path="/account/:accountId/conversation/:conversationId" component={JamiMessenger} />
<Route path="/account/:accountId" component={JamiMessenger} />
<Route path="/account" component={AccountSelection} />
+ <Route path="/newAccount/jami" component={JamiAccountDialog} />
+ <Route path="/newAccount" component={AccountCreationDialog} />
<Route component={NotFoundPage} />
</Switch>
{!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index c256d51..d6cc6b6 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -72,6 +72,9 @@
}
if (this.onAuthChanged)
this.onAuthChanged(this.state)
+ }).catch(e => {
+ this.authenticating = false
+ console.log(e)
})
}
@@ -125,6 +128,9 @@
else
task.reject(new Error("Authentication failed"))
}
+ }).catch(e => {
+ this.authenticating = false
+ console.log(e)
})
}
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>
+ )
+ }}
+ />
+ )
+}
diff --git a/client/src/index.scss b/client/src/index.scss
index 19e2639..05a3129 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -25,12 +25,10 @@
display: grid;
height: 100%;
grid-template-columns: 320px 1fr;
- grid-template-rows: 40px 50px 1fr 1fr 92px;
+ grid-template-rows: 40px 50px 1fr;
grid-template-areas:
"h m"
"n m"
- "r m"
- "r m"
"r m";
}
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
new file mode 100644
index 0000000..9fc30cf
--- /dev/null
+++ b/client/src/pages/accountCreation.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { DialerSipRounded, GroupOutlined, RoomRounded } from '@material-ui/icons';
+import ListItemLink from '../components/ListItemLink';
+
+const useStyles = makeStyles((theme) => ({
+ wizardCard: {
+ borderRadius: 8,
+ maxWidth: 360,
+ margin: "16px auto"
+ }
+}))
+
+export default function AccountCreationDialog(props) {
+ const classes = useStyles()
+
+ return (
+ <Container>
+ <Card className={classes.wizardCard}>
+ <CardContent>
+ <Typography gutterBottom variant="h5" component="h2">
+ Create new account
+ </Typography>
+ <Typography variant="body2" color="textSecondary" component="p">
+ Welcome to the Jami web node setup.<br />
+ Let's start by creating a new administrator account to control access to the server configuration.
+ </Typography>
+ </CardContent>
+
+ <List className={classes.root}>
+ <ListItemLink
+ to="/newAccount/rendezVous"
+ icon={<Avatar><RoomRounded /></Avatar>}
+ primary="Rendez-vous point"
+ secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings" />
+ <Divider />
+ <ListItemLink
+ to="/newAccount/jami"
+ icon={<Avatar><GroupOutlined /></Avatar>}
+ primary="Jami account"
+ secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users" />
+ <Divider />
+ <ListItemLink
+ to="/newAccount/sip"
+ icon={<Avatar><DialerSipRounded /></Avatar>}
+ primary="SIP Account"
+ secondary="Connect with standard SIP communication providers or classic telephony services" />
+ </List>
+ </Card>
+ </Container>)
+}
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 40c0750..0cd9e29 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,11 +1,12 @@
import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { Card, CardHeader, Container, CircularProgress } from '@material-ui/core';
+import { Avatar, Card, CardHeader, Container, List } from '@material-ui/core';
import Header from '../components/Header'
-import AccountList from '../components/AccountList';
import authManager from '../AuthManager'
import Account from '../../../model/Account';
import LoadingPage from '../components/loading';
+import ListItemLink from '../components/ListItemLink';
+import ConversationAvatar from '../components/ConversationAvatar';
+import { AddRounded } from '@material-ui/icons';
const AccountSelection = (props) => {
const [state, setState] = useState({
@@ -30,7 +31,7 @@
loaded: true,
error: true
})
- })
+ }).catch(e => console.log(e))
return () => controller.abort()
}, [])
@@ -42,11 +43,21 @@
<Container maxWidth="sm" style={{paddingBottom:32}}>
<Card style={{marginTop:32, marginBottom:32}}>
<CardHeader title="Choose an account" />
- <AccountList accounts={state.accounts} onClick={account => props.history.push(`/account/${account.getId()}/settings`)} />
+ <List>
+ {state.accounts.map(account => <ListItemLink key={account.getId()}
+ icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+ to={`/account/${account.getId()}/settings`}
+ primary={account.getDisplayName()}
+ secondary={account.getDisplayUri()} />)}
+ <ListItemLink
+ icon={<Avatar><AddRounded /></Avatar>}
+ to='/newAccount'
+ primary="Create new account" />
+ </List>
</Card>
</Container>
</React.Fragment>
)
}
-export default withRouter(AccountSelection);
\ No newline at end of file
+export default AccountSelection
\ No newline at end of file
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
new file mode 100644
index 0000000..2bd8ea9
--- /dev/null
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { AddRounded } from '@material-ui/icons';
+import UsernameChooser from '../components/UsernameChooser';
+import authManager from '../AuthManager'
+import { useHistory } from 'react-router';
+
+const useStyles = makeStyles((theme) => ({
+ extendedIcon: {
+ marginRight: theme.spacing(1),
+ },
+ wizardCard: {
+ borderRadius: 8,
+ maxWidth: 360,
+ margin: "16px auto"
+ },
+ actionArea: {
+ textAlign: 'center',
+ display: 'block'
+ },
+ chooser: {
+ marginTop: 16
+ }
+}))
+
+export default function JamiAccountDialog(props) {
+ const classes = useStyles()
+ const [name, setName] = useState('')
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState(false)
+ const history = useHistory()
+
+ const onSubmit = async event => {
+ event.preventDefault()
+ setLoading(true)
+ const result = await authManager.fetch('/api/accounts', {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ 'Account.registeredName': name
+ })
+ })
+ .then(res => res.json())
+ .catch(error => {
+ setLoading(false)
+ setError(error)
+ })
+ console.log(result)
+ if (result && result.accountId)
+ history.replace(`/account/${result.accountId}/settings`)
+ }
+
+ return (
+ <Container>
+ <Card component="form" onSubmit={onSubmit} className={classes.wizardCard}>
+ <CardContent>
+ <Typography gutterBottom variant="h5" component="h2">
+ Create Jami account
+ </Typography>
+ <Typography variant="body2" color="textSecondary" component="p">
+ Welcome to the Jami web node setup.<br />
+ Let's start by creating a new administrator account to control access to the server configuration.
+ </Typography>
+
+ <Box className={classes.chooser} >
+ <UsernameChooser disabled={loading} setName={setName} />
+ </Box>
+ </CardContent>
+ <CardActions className={classes.actionArea}>
+ {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
+ <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
+ <AddRounded className={classes.extendedIcon} />
+ Register name
+ </Fab>
+ </CardActions>
+ </Card>
+ </Container>)
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 0e96882..7a2a6de 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -6,7 +6,6 @@
const __dirname = dirname(__filename);
import dotenv from 'dotenv'
-console.log(resolve(__dirname, '..', '.env'))
dotenv.config({ path: resolve(__dirname, '..', '.env') })
import { resolve } from 'path'
@@ -16,59 +15,66 @@
let entry = [resolve(__dirname, 'src', 'index.js')]
let plugins = [
- new HtmlWebpackPlugin({template: resolve(__dirname, 'src', 'index.ejs')}),
- new CopyWebpackPlugin({
- patterns: [{ from: resolve(__dirname, 'public'), to: resolve(__dirname, 'dist') }]
- })
+ new HtmlWebpackPlugin({ template: resolve(__dirname, 'src', 'index.ejs') }),
+ new CopyWebpackPlugin({
+ patterns: [{ from: resolve(__dirname, 'public'), to: resolve(__dirname, 'dist') }]
+ })
]
let devtool = undefined
let babelLoaderPlugins = ["@babel/plugin-transform-runtime"]
if (mode === 'development') {
- const webpack = (await import('webpack')).default
- const ReactRefreshWebpackPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin')).default
- entry = ['webpack-hot-middleware/client', ...entry]
- plugins = [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), ...plugins]
- babelLoaderPlugins = [...babelLoaderPlugins, "react-refresh/babel"]
- devtool = 'inline-source-map'
+ const webpack = (await import('webpack')).default
+ const ReactRefreshWebpackPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin')).default
+ entry = ['webpack-hot-middleware/client', ...entry]
+ plugins = [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), ...plugins]
+ babelLoaderPlugins = [...babelLoaderPlugins, "react-refresh/babel"]
+ devtool = 'inline-source-map'
}
console.log(`Webpack configured for ${mode}`)
export default {
- entry,
- output: {
- path: resolve(__dirname, 'dist'),
- filename: 'bundle.js',
- publicPath: '/'
- },
- devtool,
- mode,
- module: {
- rules: [
- {
- test: /\.jsx?/,
- resolve: {
- fullySpecified: false
- },
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader',
- options: {
- plugins: babelLoaderPlugins,
- presets: [
- ['@babel/preset-env', {
- useBuiltIns: 'entry',
- corejs:{ version: "3.10", proposals: true },
- }],
- '@babel/preset-react']
- }
- }
- },
- {
- test: /\.s[ac]ss$/i,
- use: ['style-loader', 'css-loader', 'sass-loader'],
- }
- ]
- },
- plugins
+ entry,
+ output: {
+ path: resolve(__dirname, 'dist'),
+ filename: 'bundle.js',
+ publicPath: '/'
+ },
+ devtool,
+ mode,
+ module: {
+ rules: [
+ {
+ test: /\.jsx?/,
+ resolve: {
+ fullySpecified: false
+ },
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ plugins: babelLoaderPlugins,
+ presets: [
+ ['@babel/preset-env', {
+ useBuiltIns: 'entry',
+ corejs: { version: '3.10', proposals: true },
+ }],
+ ['@babel/preset-react', {
+ runtime: 'automatic'
+ }]]
+ }
+ }
+ },
+ {
+ test: /\.s[ac]ss$/i,
+ use: ['style-loader', 'css-loader', 'sass-loader'],
+ },
+ {
+ test: /\.svg$/,
+ type: 'asset',
+ use: 'svgo-loader'
+ }
+ ]
+ },
+ plugins
}
\ No newline at end of file