74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { useMutation } from '@apollo/client'
|
|
import React, { FormEvent } from 'react'
|
|
import { Redirect, Link } from 'react-router-dom'
|
|
|
|
import { REGISTER } from '../../apollo'
|
|
import { MutationRegisterArgs, ServerAnswer } from '../../apollo/typeDefs.gen'
|
|
import styles from '../Login/main.module.css'
|
|
import meme from './meme.jpg'
|
|
|
|
interface IRegisterMutation {
|
|
register: ServerAnswer
|
|
}
|
|
|
|
const Register: React.FC = () => {
|
|
const [doRegister, { data, loading, error }] = useMutation<
|
|
IRegisterMutation,
|
|
MutationRegisterArgs
|
|
>(REGISTER)
|
|
|
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
try {
|
|
await doRegister({
|
|
variables: {
|
|
email: formData.get('email') as string,
|
|
name: formData.get('name') as string,
|
|
},
|
|
})
|
|
} catch (err) {}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.formCard}>
|
|
<img
|
|
className={styles.img}
|
|
src={meme}
|
|
alt='Questionform says: "Is mailbox a password?"'
|
|
/>
|
|
<form className={styles.form} onSubmit={handleSubmit}>
|
|
<h1 className={styles.header}>
|
|
Register / <Link to="/login">Log In</Link>
|
|
</h1>
|
|
<input
|
|
required
|
|
className={styles.input}
|
|
type="email"
|
|
name="email"
|
|
placeholder="email"
|
|
/>
|
|
<input
|
|
required
|
|
className={styles.input}
|
|
type="text"
|
|
name="name"
|
|
placeholder="username"
|
|
/>
|
|
{loading ? (
|
|
'Loading...'
|
|
) : (
|
|
<input className={styles.button} type="submit" value="Submit" />
|
|
)}
|
|
{error && <p className={styles.errorMsg}>{error.message}</p>}
|
|
{data?.register.success && <Redirect to="/" />}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Register
|