simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 1 | import { useState } from 'react'; |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 2 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 3 | import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'; |
| 4 | import GroupAddRounded from '@mui/icons-material/GroupAddRounded'; |
| 5 | import authManager from '../AuthManager'; |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 6 | |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 7 | export default function ServerSetup(props) { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 8 | const [password, setPassword] = useState(''); |
| 9 | const [passwordRepeat, setPasswordRepeat] = useState(''); |
| 10 | const [loading, setLoading] = useState(false); |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 11 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 12 | const isValid = () => password && password === passwordRepeat; |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 13 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 14 | const handleSubmit = (e) => { |
| 15 | e.preventDefault(); |
| 16 | setLoading(true); |
| 17 | if (!isValid()) return; |
| 18 | authManager.setup(password); |
| 19 | }; |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 20 | |
| 21 | return ( |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 22 | <Container className="message-list"> |
idillon | fb2af5b | 2022-09-16 13:40:08 -0400 | [diff] [blame] | 23 | <Card disabled={loading}> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 24 | <CardContent component="form" onSubmit={handleSubmit}> |
| 25 | <Typography gutterBottom variant="h5" component="h2"> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 26 | Jami Web Node setup |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 27 | </Typography> |
| 28 | <Typography variant="body2" color="textSecondary" component="p"> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 29 | Welcome to the Jami web node setup. |
| 30 | <br /> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 31 | Let's start by creating a new administrator account to control access to the server configuration. |
| 32 | </Typography> |
| 33 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 34 | <Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 35 | <div> |
| 36 | <Input value="admin" name="username" autoComplete="username" disabled /> |
| 37 | </div> |
| 38 | <div> |
| 39 | <Input |
| 40 | value={password} |
| 41 | onChange={(e) => setPassword(e.target.value)} |
| 42 | name="password" |
| 43 | type="password" |
| 44 | placeholder="New password" |
| 45 | autoComplete="new-password" |
| 46 | /> |
| 47 | </div> |
| 48 | <div> |
| 49 | <Input |
| 50 | value={passwordRepeat} |
| 51 | onChange={(e) => setPasswordRepeat(e.target.value)} |
| 52 | name="password" |
| 53 | error={!!passwordRepeat && !isValid()} |
| 54 | type="password" |
| 55 | placeholder="Repeat password" |
| 56 | autoComplete="new-password" |
| 57 | /> |
| 58 | </div> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 59 | </Box> |
| 60 | <Box style={{ textAlign: 'center', marginTop: 24 }}> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 61 | <Fab variant="extended" color="primary" type="submit" disabled={!isValid()}> |
| 62 | <GroupAddRounded /> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 63 | Create admin account |
| 64 | </Fab> |
| 65 | </Box> |
| 66 | </CardContent> |
| 67 | </Card> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 68 | </Container> |
| 69 | ); |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 70 | } |