74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button, Input } from "antd";
|
|
import { useCreateUser } from "../../hooks/useCreateUser";
|
|
import { useNavigate } from "react-router";
|
|
|
|
export const SignUp = () => {
|
|
const [username, setUsername] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [repeatPassword, setRepeatPassword] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
const { createUser, isLoading, error } = useCreateUser();
|
|
|
|
return (
|
|
<div className="Box Small">
|
|
<div className="Section">
|
|
<div className="Section">
|
|
<Input
|
|
type="email"
|
|
placeholder="Email"
|
|
name="Email"
|
|
onChange={(ev) => setEmail(ev.target.value)}
|
|
/>
|
|
<Input
|
|
placeholder="Username"
|
|
name="User"
|
|
onChange={(ev) => setUsername(ev.target.value)}
|
|
/>
|
|
<Input.Password
|
|
placeholder="Password"
|
|
name="Password"
|
|
onChange={(ev) => setPassword(ev.target.value)}
|
|
/>
|
|
<Input.Password
|
|
placeholder="Repeat password"
|
|
name="PasswordRep"
|
|
onChange={(ev) => setRepeatPassword(ev.target.value)}
|
|
/>
|
|
<Button
|
|
style={{ width: "100%" }}
|
|
onClick={async () =>
|
|
await createUser({ email, password, username })
|
|
}
|
|
name="Signup"
|
|
loading={isLoading}
|
|
disabled={
|
|
email === "" ||
|
|
username === "" ||
|
|
password === "" ||
|
|
password !== repeatPassword
|
|
}
|
|
>
|
|
Sign up
|
|
</Button>
|
|
<Button
|
|
style={{ width: "100%" }}
|
|
onClick={() =>
|
|
navigate("/login")
|
|
}
|
|
>
|
|
Login
|
|
</Button>
|
|
{error ? (
|
|
<div className="Disconnected">{error}</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|