diff options
Diffstat (limited to 'frontend/src/pages/auth/Register.tsx')
| -rw-r--r-- | frontend/src/pages/auth/Register.tsx | 161 |
1 files changed, 89 insertions, 72 deletions
diff --git a/frontend/src/pages/auth/Register.tsx b/frontend/src/pages/auth/Register.tsx index 14ceea4..cf1972a 100644 --- a/frontend/src/pages/auth/Register.tsx +++ b/frontend/src/pages/auth/Register.tsx @@ -1,86 +1,103 @@ import { FormEvent } from "react"; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from "react-router-dom"; -export default function Register () { - const navigate = useNavigate(); +export default function Register() { + const navigate = useNavigate(); -const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { - e.preventDefault(); //stops submit from happening + const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { + e.preventDefault(); //stops submit from happening - const target = e.target as typeof e.target & { - username: { value: string }; - email: { value: string }; - password: { value: string }; - }; + const target = e.target as typeof e.target & { + username: { value: string }; + email: { value: string }; + password: { value: string }; + }; - const formData = new FormData(); - formData.append('username', target.username.value); - formData.append('email', target.email.value); - formData.append('password', target.password.value); + const formData = new FormData(); + formData.append("username", target.username.value); + formData.append("email", target.email.value); + formData.append("password", target.password.value); - const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/register`, { - credentials: 'include', - method: 'post', - body: formData, - }); - if(response.ok) { - navigate("/login"); - } - else { - alert("error"); - } - }; + const response = await fetch( + `${import.meta.env.VITE_API_TITLE}/api/v1/register`, + { + credentials: "include", + method: "post", + body: formData, + }, + ); + if (response.ok) { + navigate("/login"); + } else { + alert("error"); + } + }; - return( - <> -<div className="flex flex-col items-center justify-center bg-white p-12"> - <div className="text-xl w-full text-center mb-8 p-4 bg-black text-red-500">Username or Email already exists</div> - <form onSubmit={handleSubmit} method="post" className="w-full max-w-lg"> - <div className="flex flex-wrap -mx-3 mb-6"> + return ( + <> + <div className="flex flex-col items-center justify-center bg-white p-12"> + <div className="text-xl w-full text-center mb-8 p-4 bg-black text-red-500"> + Username or Email already exists + </div> + <form onSubmit={handleSubmit} method="post" className="w-full max-w-lg"> + <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0"> - <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" - > - Title - </label> - <input className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" - id="username" - type="text" - name="username" - placeholder="Ted"/> - <p className="text-red-500 text-xs italic">Please fill out this field.</p> + <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> + Title + </label> + <input + className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" + id="username" + type="text" + name="username" + placeholder="Ted" + /> + <p className="text-red-500 text-xs italic"> + Please fill out this field. + </p> </div> <div className="w-full md:w-1/2 px-3"> - <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> - Email - </label> - <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" - id="email" - type="text" - name="email" - placeholder="[email protected]"/> - <p className="text-red-500 text-xs italic">Please fill out this field.</p> + <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> + Email + </label> + <input + className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" + id="email" + type="text" + name="email" + placeholder="[email protected]" + /> + <p className="text-red-500 text-xs italic"> + Please fill out this field. + </p> </div> - </div> - <div className="flex flex-wrap -mx-3 mb-6"> + </div> + <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3"> - <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> - Password - </label> - <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" - id="password" - type="password" - name="password" - placeholder="Doe"/> - <p className="text-red-500 text-xs italic">Please fill out this field.</p> + <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> + Password + </label> + <input + className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" + id="password" + type="password" + name="password" + placeholder="Doe" + /> + <p className="text-red-500 text-xs italic"> + Please fill out this field. + </p> </div> - </div> - <div className="flex flex-wrap mb-2"> - </div> - <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Register</button> - - </form> -</div> - </> - ); - + </div> + <div className="flex flex-wrap mb-2"></div> + <button + type="submit" + className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" + > + Register + </button> + </form> + </div> + </> + ); } |