Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 1 | import React, { useState } from 'react'; |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 2 | import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material'; |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 3 | import { AddRounded } from '@mui/icons-material'; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 4 | import UsernameChooser from '../components/UsernameChooser'; |
| 5 | import authManager from '../AuthManager' |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 6 | import { useNavigate } from 'react-router'; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 7 | |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 8 | export default function JamiAccountDialog(props) { |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 9 | const [name, setName] = useState('') |
| 10 | const [loading, setLoading] = useState(false) |
| 11 | const [error, setError] = useState(false) |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 12 | const navigate = useNavigate() |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 13 | |
| 14 | const onSubmit = async event => { |
| 15 | event.preventDefault() |
| 16 | setLoading(true) |
| 17 | const result = await authManager.fetch('/api/accounts', { |
| 18 | method: 'POST', |
| 19 | headers: { |
| 20 | 'Accept': 'application/json', |
| 21 | 'Content-Type': 'application/json' |
| 22 | }, |
Adrien Béraud | 0561d3c | 2021-05-02 11:23:54 -0400 | [diff] [blame] | 23 | body: JSON.stringify({ registerName: name }) |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 24 | }) |
| 25 | .then(res => res.json()) |
| 26 | .catch(error => { |
| 27 | setLoading(false) |
| 28 | setError(error) |
| 29 | }) |
| 30 | console.log(result) |
| 31 | if (result && result.accountId) |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 32 | navigate(`/account/${result.accountId}/settings`) |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 33 | } |
| 34 | |
| 35 | return ( |
| 36 | <Container> |
idillon | fb2af5b | 2022-09-16 13:40:08 -0400 | [diff] [blame] | 37 | <Card component="form" onSubmit={onSubmit}> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 38 | <CardContent> |
| 39 | <Typography gutterBottom variant="h5" component="h2"> |
| 40 | Create Jami account |
| 41 | </Typography> |
| 42 | <Typography variant="body2" color="textSecondary" component="p"> |
| 43 | Welcome to the Jami web node setup.<br /> |
| 44 | Let's start by creating a new administrator account to control access to the server configuration. |
| 45 | </Typography> |
| 46 | |
idillon | fb2af5b | 2022-09-16 13:40:08 -0400 | [diff] [blame] | 47 | <Box> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 48 | <UsernameChooser disabled={loading} setName={setName} /> |
| 49 | </Box> |
| 50 | </CardContent> |
idillon | fb2af5b | 2022-09-16 13:40:08 -0400 | [diff] [blame] | 51 | <CardActions> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 52 | {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>} |
| 53 | <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}> |
idillon | fb2af5b | 2022-09-16 13:40:08 -0400 | [diff] [blame] | 54 | <AddRounded/> |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 55 | Register name |
| 56 | </Fab> |
| 57 | </CardActions> |
| 58 | </Card> |
| 59 | </Container>) |
| 60 | } |