Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 1 | import React, { useState } from 'react' |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 2 | import { useNavigate } from "react-router-dom" |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 3 | |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 4 | import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material' |
| 5 | import GroupAddRounded from '@mui/icons-material/GroupAddRounded' |
| 6 | import { makeStyles } from '@mui/styles'; |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 7 | import authManager from '../AuthManager' |
| 8 | |
| 9 | const useStyles = makeStyles((theme) => ({ |
| 10 | root: { |
| 11 | '& > *': { |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 12 | //margin: theme.spacing(1), |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 13 | }, |
| 14 | }, |
| 15 | extendedIcon: { |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 16 | //marginRight: theme.spacing(1), |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 17 | }, |
| 18 | wizardCard: { |
| 19 | borderRadius: 8, |
| 20 | maxWidth: 360, |
| 21 | margin: "16px auto" |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 22 | }, |
| 23 | textField: { |
| 24 | //margin: theme.spacing(1), |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 25 | } |
| 26 | })) |
| 27 | |
| 28 | export default function ServerSetup(props) { |
| 29 | const classes = useStyles() |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 30 | const navigate = useNavigate() |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 31 | const [password, setPassword] = useState('') |
| 32 | const [passwordRepeat, setPasswordRepeat] = useState('') |
| 33 | const [loading, setLoading] = useState(false) |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 34 | |
| 35 | const isValid = () => password && password === passwordRepeat |
| 36 | |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 37 | const handleSubmit = e => { |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 38 | e.preventDefault() |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 39 | setLoading(true) |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 40 | if (!isValid()) |
| 41 | return |
Adrien Béraud | e5cad98 | 2021-06-07 10:05:50 -0400 | [diff] [blame] | 42 | authManager.setup(password) |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 43 | } |
| 44 | |
| 45 | return ( |
| 46 | <Container className='message-list'> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 47 | <Card className={classes.wizardCard} disabled={loading}> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 48 | <CardContent component="form" onSubmit={handleSubmit}> |
| 49 | <Typography gutterBottom variant="h5" component="h2"> |
| 50 | Jami Web Node setup |
| 51 | </Typography> |
| 52 | <Typography variant="body2" color="textSecondary" component="p"> |
| 53 | Welcome to the Jami web node setup.<br/> |
| 54 | Let's start by creating a new administrator account to control access to the server configuration. |
| 55 | </Typography> |
| 56 | |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 57 | <Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 58 | <div><Input className={classes.textField} value="admin" name="username" autoComplete="username" disabled /></div> |
| 59 | <div><Input |
| 60 | className={classes.textField} |
| 61 | value={password} |
| 62 | onChange={e => setPassword(e.target.value)} |
| 63 | name="password" |
| 64 | type='password' |
| 65 | placeholder="New password" |
| 66 | autoComplete="new-password" /> |
| 67 | </div> |
| 68 | <div><Input |
| 69 | className={classes.textField} |
| 70 | value={passwordRepeat} |
| 71 | onChange={e => setPasswordRepeat(e.target.value)} |
| 72 | name="password" |
| 73 | error={!!passwordRepeat && !isValid()} |
| 74 | type='password' |
| 75 | placeholder="Repeat password" |
| 76 | autoComplete="new-password" /></div> |
Adrien Béraud | 150b478 | 2021-04-21 19:40:59 -0400 | [diff] [blame] | 77 | </Box> |
| 78 | <Box style={{ textAlign: 'center', marginTop: 24 }}> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 79 | <Fab variant='extended' color='primary' type='submit' disabled={!isValid()}> |
| 80 | <GroupAddRounded className={classes.extendedIcon} /> |
| 81 | Create admin account |
| 82 | </Fab> |
| 83 | </Box> |
| 84 | </CardContent> |
| 85 | </Card> |
| 86 | </Container>) |
| 87 | } |