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