143 lines
3.1 KiB
TypeScript
143 lines
3.1 KiB
TypeScript
import React, { useState, ChangeEvent } from "react";
|
|
|
|
import { createUser } from "api/npm";
|
|
import { SinglePage } from "components";
|
|
import { useAuthState, useHealthState } from "context";
|
|
import styled from "styled-components";
|
|
import { Alert, Button, Container, Form, Card } from "tabler-react";
|
|
|
|
import logo from "../../img/logo-text-vertical-grey.png";
|
|
|
|
const Wrapper = styled(Container)`
|
|
margin: 15px auto;
|
|
max-width: 400px;
|
|
display: block;
|
|
`;
|
|
|
|
const LogoWrapper = styled.div`
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
`;
|
|
|
|
function Setup() {
|
|
const { refreshHealth } = useHealthState();
|
|
const { login } = useAuthState();
|
|
const [loading, setLoading] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
nickname: "",
|
|
email: "",
|
|
password: "",
|
|
});
|
|
|
|
const onSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setErrorMessage("");
|
|
|
|
const { password, ...payload } = {
|
|
...formData,
|
|
...{
|
|
isDisabled: false,
|
|
roles: ["admin"],
|
|
auth: {
|
|
type: "password",
|
|
secret: formData.password,
|
|
},
|
|
},
|
|
};
|
|
|
|
try {
|
|
const response = await createUser({ payload });
|
|
if (response && typeof response.id !== "undefined" && response.id) {
|
|
// Success, Login using creds
|
|
try {
|
|
await login(response.email, password);
|
|
// Trigger a Health change
|
|
refreshHealth();
|
|
|
|
// window.location.reload();
|
|
} catch ({ message }) {
|
|
setErrorMessage(message);
|
|
setLoading(false);
|
|
}
|
|
} else {
|
|
setErrorMessage("Unable to create user!");
|
|
}
|
|
} catch ({ message }) {
|
|
setErrorMessage(message);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
|
setFormData({ ...formData, [target.name]: target.value });
|
|
};
|
|
|
|
const formBody = (
|
|
<>
|
|
<Card.Title>Initial Setup</Card.Title>
|
|
<Form method="post" type="card" onSubmit={onSubmit}>
|
|
{errorMessage ? <Alert type="danger">{errorMessage}</Alert> : null}
|
|
<Form.Group label="Full Name">
|
|
<Form.Input
|
|
onChange={onChange}
|
|
name="name"
|
|
value={formData.name}
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Nickname">
|
|
<Form.Input
|
|
onChange={onChange}
|
|
name="nickname"
|
|
value={formData.nickname}
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Email Address">
|
|
<Form.Input
|
|
onChange={onChange}
|
|
name="email"
|
|
type="email"
|
|
value={formData.email}
|
|
maxLength={150}
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Password">
|
|
<Form.Input
|
|
onChange={onChange}
|
|
name="password"
|
|
type="password"
|
|
value={formData.password}
|
|
minLength={8}
|
|
maxLength={100}
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
</Form.Group>
|
|
<Button color="cyan" loading={loading} block>
|
|
Create Account
|
|
</Button>
|
|
</Form>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<SinglePage>
|
|
<Wrapper>
|
|
<LogoWrapper>
|
|
<img src={logo} alt="Logo" />
|
|
</LogoWrapper>
|
|
<Card body={formBody} />
|
|
</Wrapper>
|
|
</SinglePage>
|
|
);
|
|
}
|
|
|
|
export default Setup;
|