Archived
93 lines
3.9 KiB
JavaScript
93 lines
3.9 KiB
JavaScript
import React, { useRef } from "react"
|
|
import { Link, useHistory } from "react-router-dom"
|
|
|
|
|
|
export const Register = () => {
|
|
const firstName = useRef()
|
|
const lastName = useRef()
|
|
const username = useRef()
|
|
const email = useRef()
|
|
const password = useRef()
|
|
const verifyPassword = useRef()
|
|
const passwordDialog = useRef()
|
|
const history = useHistory()
|
|
|
|
const handleRegister = (e) => {
|
|
e.preventDefault()
|
|
|
|
if (password.current.value === verifyPassword.current.value) {
|
|
const newUser = {
|
|
"username": username.current.value,
|
|
"email": email.current.value,
|
|
"first_name": firstName.current.value,
|
|
"last_name": lastName.current.value,
|
|
"password": password.current.value
|
|
}
|
|
|
|
return fetch("http://127.0.0.1:8000/register", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Accept": "application/json"
|
|
},
|
|
body: JSON.stringify(newUser)
|
|
})
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
if ("token" in res) {
|
|
localStorage.setItem("sf_token", res.token)
|
|
localStorage.setItem("smug_user_id",res.smug_user)
|
|
history.push("/")
|
|
}
|
|
})
|
|
} else {
|
|
passwordDialog.current.showModal()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main style={{ textAlign: "center" }}>
|
|
|
|
<dialog className="dialog dialog--password" ref={passwordDialog}>
|
|
<div>Passwords do not match</div>
|
|
<button className="button--close" onClick={e => passwordDialog.current.close()}>Close</button>
|
|
</dialog>
|
|
|
|
<form className="form--login" onSubmit={handleRegister}>
|
|
<h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
|
|
<fieldset>
|
|
<label htmlFor="firstName"> First Name </label>
|
|
<input ref={firstName} type="text" name="firstName" className="form-control" placeholder="First name" required autoFocus />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label htmlFor="lastName"> Last Name </label>
|
|
<input ref={lastName} type="text" name="lastName" className="form-control" placeholder="Last name" required />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label htmlFor="inputUsername">Username</label>
|
|
<input ref={username} type="text" name="username" className="form-control" placeholder="Username" required />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label htmlFor="inputEmail">Email</label>
|
|
<input ref={email} type="text" name="email" className="form-control" placeholder="Email" required />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label htmlFor="inputPassword"> Password </label>
|
|
<input ref={password} type="password" name="password" className="form-control" placeholder="Password" required />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label htmlFor="verifyPassword"> Verify Password </label>
|
|
<input ref={verifyPassword} type="password" name="verifyPassword" className="form-control" placeholder="Verify password" required />
|
|
</fieldset>
|
|
<fieldset style={{
|
|
textAlign: "center"
|
|
}}>
|
|
<button className="btn btn-1 btn-sep icon-send" type="submit">Register</button>
|
|
</fieldset>
|
|
</form>
|
|
<section className="link--register">
|
|
Already registered? <Link to="/login">Login</Link>
|
|
</section>
|
|
</main>
|
|
)
|
|
} |