Version 3 starter

frontend/src/pages/Setup/index.tsx

@@ -0,0 +1,143 @@
+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;