diff options
| author | realtradam <[email protected]> | 2024-07-27 02:00:57 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-07-27 02:00:57 -0400 |
| commit | de3d80ce3ea20a869d700c3238020d44059de099 (patch) | |
| tree | ef849326ea4922530990d5dc29cb8ff3532e82fe /frontend/src/pages | |
| parent | 6b342f97f6a605b7e1fe34584abbbf962ca39b7c (diff) | |
| download | spring-blog-de3d80ce3ea20a869d700c3238020d44059de099.tar.gz spring-blog-de3d80ce3ea20a869d700c3238020d44059de099.zip | |
working login and auth
Diffstat (limited to 'frontend/src/pages')
| -rw-r--r-- | frontend/src/pages/articles/Article.tsx (renamed from frontend/src/pages/Article.tsx) | 0 | ||||
| -rw-r--r-- | frontend/src/pages/articles/New.tsx | 83 | ||||
| -rw-r--r-- | frontend/src/pages/auth/Login.tsx (renamed from frontend/src/pages/Login.tsx) | 44 | ||||
| -rw-r--r-- | frontend/src/pages/auth/Register.tsx (renamed from frontend/src/pages/Register.tsx) | 0 |
4 files changed, 114 insertions, 13 deletions
diff --git a/frontend/src/pages/Article.tsx b/frontend/src/pages/articles/Article.tsx index b367811..b367811 100644 --- a/frontend/src/pages/Article.tsx +++ b/frontend/src/pages/articles/Article.tsx diff --git a/frontend/src/pages/articles/New.tsx b/frontend/src/pages/articles/New.tsx new file mode 100644 index 0000000..3402f22 --- /dev/null +++ b/frontend/src/pages/articles/New.tsx @@ -0,0 +1,83 @@ +import { FormEvent } from "react"; +import { useNavigate } from "react-router-dom"; + +export default function NewArticle () { + const navigate = useNavigate(); + + const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { + e.preventDefault(); //stops submit from happening + + const target = e.target as typeof e.target & { + title: { value: string }; + photoUrl: { value: string }; + content: { value: string }; + }; + + const formData = new FormData(); + formData.append('title', target.title.value); + formData.append('photoUrl', target.photoUrl.value); + formData.append('content', target.content.value); + + const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/article/new`, { + credentials: 'include', + method: 'post', + body: formData, + }); + if(response.ok) { + navigate("/"); + } + else { + console.log(response); + alert("check console for error"); + } + }; + return( + <> +<div className="flex justify-center bg-white p-12"> +<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 border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" + id="title" + type="text" + name="title" + placeholder="Yep"/> + <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"> + Photo URL + </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="photoUrl" + type="text" + name="photoUrl" + placeholder="Doe"/> + <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 className="w-full px-3"> + <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"> + Content + </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="content" + type="text" + name="content" + 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">Create</button> + +</form> +</div> + </> + ); +} diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/auth/Login.tsx index 317fdb9..5a1e858 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/auth/Login.tsx @@ -1,7 +1,10 @@ -import { useState, useEffect } from "react"; -import { useParams, useNavigate } from "react-router-dom"; +import { FormEvent } from "react"; +import { useNavigate } from "react-router-dom"; -export default function Article () { +//type setUser = { setUser: { func: React.Dispatch<React.SetStateAction<string | null>> } }; +type user = { set: React.Dispatch<React.SetStateAction<string | null>>, value: string | null }; + +export default function Login ({user}: {user: user}) { const navigate = useNavigate(); const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { @@ -17,24 +20,39 @@ const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { formData.append('username', target.username.value); formData.append('password', target.password.value); - const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/register`, { + const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/login`, { credentials: 'include', method: 'post', body: formData, + }).then((res) => { + if(res.ok) { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/profile`; + fetch(url, { + credentials: 'include', + method: 'get', + }).then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }).then((response) => { + user.set(response.username); + console.log("USER:"); + console.log(user); + console.log(user.value); + console.log(response.username); + navigate("/"); + }); + } + else { + console.log(response); + alert("check console for error"); + } }); - if(response.ok) { - navigate("/"); - } - else { - alert("error"); - } }; return( <> -<div className="text-xl p-4 bg-black text-red-500">Invalid Username/Password</div> -<div className="text-xl p-4 bg-black text-red-500">You have been logged out</div> - <div className="flex h-full justify-center bg-white p-12"> <form onSubmit={handleSubmit} method="post" className="w-full max-w-lg"> <div className="flex flex-wrap -mx-3 mb-6"> diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/auth/Register.tsx index 14ceea4..14ceea4 100644 --- a/frontend/src/pages/Register.tsx +++ b/frontend/src/pages/auth/Register.tsx |
