Convert all pages to Typescript
Convert all files in `client/src/pages` to Typescript
Gitlab: #30
Change-Id: I9b5ec5b042487d732bb7d46b584f797049eb068c
diff --git a/client/src/pages/JamiAccountCreation.tsx b/client/src/pages/JamiAccountCreation.tsx
new file mode 100644
index 0000000..8360e06
--- /dev/null
+++ b/client/src/pages/JamiAccountCreation.tsx
@@ -0,0 +1,63 @@
+import { AddRounded } from '@mui/icons-material';
+import { Box, Card, CardActions, CardContent, Container, Fab, Typography } from '@mui/material';
+import { FormEvent, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import authManager from '../AuthManager';
+import UsernameChooser from '../components/UsernameChooser';
+
+export default function JamiAccountDialog() {
+ const [name, setName] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const navigate = useNavigate();
+
+ const onSubmit = async (event: FormEvent) => {
+ event.preventDefault();
+ setLoading(true);
+ const result = await authManager
+ .fetch('/api/accounts', {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ registerName: name }),
+ })
+ .then((res) => res.json())
+ .catch((error) => {
+ setLoading(false);
+ setError(error);
+ });
+ console.log(result);
+ if (result && result.accountId) navigate(`/account/${result.accountId}/settings`);
+ };
+
+ return (
+ <Container>
+ <Card component="form" onSubmit={onSubmit}>
+ <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>
+ <UsernameChooser disabled={loading} setName={setName} />
+ </Box>
+ </CardContent>
+ <CardActions>
+ {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
+ <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
+ <AddRounded />
+ Register name
+ </Fab>
+ </CardActions>
+ </Card>
+ </Container>
+ );
+}