103 lines
2.2 KiB
TypeScript
103 lines
2.2 KiB
TypeScript
import {
|
|
Anchor,
|
|
Button,
|
|
Container,
|
|
Paper,
|
|
PasswordInput,
|
|
Text,
|
|
TextInput,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import { signUp } from "../utils/auth-client";
|
|
|
|
export const Route = createFileRoute("/signup")({
|
|
component: SignupComponent,
|
|
});
|
|
|
|
function SignupComponent() {
|
|
const navigate = useNavigate();
|
|
const [name, setName] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError("");
|
|
|
|
try {
|
|
const { error } = await signUp.email({
|
|
name,
|
|
email,
|
|
password,
|
|
});
|
|
|
|
if (error) {
|
|
setError(error.message || "Failed to sign up");
|
|
} else {
|
|
navigate({ to: "/admin" });
|
|
}
|
|
} catch {
|
|
setError("An unexpected error occurred");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container size={420} my={40}>
|
|
<Title ta="center">Create an account</Title>
|
|
<Text c="dimmed" size="sm" ta="center" mt={5}>
|
|
Already have an account?{" "}
|
|
<Anchor
|
|
size="sm"
|
|
component="button"
|
|
onClick={() => navigate({ to: "/signin" })}
|
|
>
|
|
Sign in
|
|
</Anchor>
|
|
</Text>
|
|
|
|
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
|
<form onSubmit={handleSubmit}>
|
|
<TextInput
|
|
label="Name"
|
|
placeholder="Your name"
|
|
required
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
<TextInput
|
|
label="Email"
|
|
placeholder="your@email.com"
|
|
required
|
|
mt="md"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<PasswordInput
|
|
label="Password"
|
|
placeholder="Your password"
|
|
required
|
|
mt="md"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
{error && (
|
|
<Text c="red" size="sm" mt="md">
|
|
{error}
|
|
</Text>
|
|
)}
|
|
<Button fullWidth mt="xl" type="submit" loading={loading}>
|
|
Create account
|
|
</Button>
|
|
</form>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
}
|