import React from "react"; import Head from "next/head"; import Link from "next/link"; import { Anchor, Button, Center, Divider, Flex, Paper, PasswordInput, Stack, Text, TextInput, } from "@mantine/core"; import toast from "react-hot-toast"; import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai"; import Layout from "src/layout/Layout"; import { supabase } from "src/lib/api/supabase"; const SignUp = () => { const [loading, setLoading] = React.useState(false); const [done, setDone] = React.useState(false); const [userData, setUserData] = React.useState({ name: "", email: "", password: "", }); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); supabase.auth .signUp({ email: userData.email, password: userData.password, options: { data: { name: userData.name }, }, }) .then(({ error }) => { if (error) return toast.error(error.message); toast.success("Please check your inbox to confirm mail address!", { duration: 7000 }); setDone(true); }) .finally(() => setLoading(false)); }; const handleLoginClick = (provider: "github" | "google") => { supabase.auth.signInWithOAuth({ provider, options: { redirectTo: "https://jsoncrack.com/editor" }, }); }; return ( JSON Crack | Sign Up {done ? ( Registration successul!
Please check your inbox for email confirmation. ) : ( <>
setUserData(d => ({ ...d, name: e.target.value }))} required label="Name" placeholder="John Doe" radius="sm" style={{ color: "black" }} /> setUserData(d => ({ ...d, email: e.target.value }))} type="email" required label="Email" placeholder="hello@jsoncrack.com" radius="sm" style={{ color: "black" }} /> setUserData(d => ({ ...d, password: e.target.value }))} min={6} required label="Password" placeholder="∗∗∗∗∗∗∗∗∗∗" radius="sm" style={{ color: "black" }} /> By signing up, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy . Need help?{" "} Get in touch.
Already have an account?
)} ); }; export default SignUp;