diff options
| -rw-r--r-- | backend/src/main/java/com/blog/web/controllers/ArticleController.java | 19 | ||||
| -rw-r--r-- | frontend/src/components/Layout.tsx | 362 | ||||
| -rw-r--r-- | frontend/src/pages/Home.tsx | 297 | ||||
| -rw-r--r-- | frontend/src/pages/auth/Login.tsx | 137 | ||||
| -rw-r--r-- | frontend/src/routes/index.tsx | 44 |
5 files changed, 523 insertions, 336 deletions
diff --git a/backend/src/main/java/com/blog/web/controllers/ArticleController.java b/backend/src/main/java/com/blog/web/controllers/ArticleController.java index ec8af85..0df26a2 100644 --- a/backend/src/main/java/com/blog/web/controllers/ArticleController.java +++ b/backend/src/main/java/com/blog/web/controllers/ArticleController.java @@ -40,8 +40,14 @@ public class ArticleController { } @GetMapping("/articles") - public HashSet<ArticlePublicDto> listArticles() { - HashSet<ArticlePublicDto> articles = new HashSet<ArticlePublicDto>(articleService.findAllArticles()); + public HashSet<ArticlePublicDto> listArticles(@RequestParam(value = "search", required = false) String search) { + HashSet<ArticlePublicDto> articles; + if(search != null) { + articles = articleService.searchPublicArticles(search); + } + else { + articles = new HashSet<ArticlePublicDto>(articleService.findAllArticles()); + } return articles; } @@ -103,15 +109,6 @@ public class ArticleController { return "redirect:/articles"; } - @GetMapping("/articles/search") - public String searchArticle(@RequestParam(value = "search") String search, Model model) { - //UserEntity user = userService.getLoggedInUser().orElse(new UserEntity()); - //model.addAttribute("user", user); - HashSet<ArticlePublicDto> articles = articleService.searchPublicArticles(search); - //model.addAttribute("articles", articles); - return "index"; - } - @GetMapping("/") public String getArticles() { return "redirect:/articles"; diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index cdd3929..2ebaa79 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,152 +1,246 @@ -import { Outlet } from "react-router-dom"; -import { useState, useEffect } from "react"; - - -export default function Layout() -{ - const [user, setUser] = useState<string | null>(null); +import { Outlet, useNavigate } from "react-router-dom"; +import { useState, useEffect, FormEvent } from "react"; + +type user = { + set: React.Dispatch<React.SetStateAction<string | null>>; + value: string | null; +}; +type articleSearch = user; + +export default function Layout({ + user, + articleSearch, +}: { + user: user; + articleSearch: articleSearch; +}) { + const navigate = useNavigate(); useEffect(() => { 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) => { setUser(response.username); console.log(response.username) }); + 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(response.username); + }); }, [user]); const logout = () => { fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/logout`, { - credentials: 'include', - method: 'get', + credentials: "include", + method: "get", }).then(() => { - setUser(null); + user.set(null); }); - } - - return( - <> -<div className="w-full bg-gray-200 min-h-screen font-sans leading-normal tracking-normal"> - -<nav className="bg-gray-900 p-4 mt-0 w-full"> - <div className="container mx-auto flex items-center"> - <div className="flex text-white font-extrabold"> -{/*th:if="${(user == null || user.username == null)}"*/} -<a className="flex text-white text-base no-underline whitespace-nowrap hover:text-white hover:no-underline" href="#">☕ { user === null ? "Spring!" : user }<span className="hidden w-0 md:w-auto md:block pl-1"></span></a> - </div> - <div className="flex pl-4 text-sm place-content-between w-full"> - <ul className="list-reset flex justify-between flex-1 md:flex-none items-center"> - <li className="mr-2"> - <a className="inline-block py-2 px-2 text-white no-underline" href="/">HOME</a> - </li> - <li className="mr-2"> - <a className="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" href="/article/new">NEW</a> - </li> - <li className="mr-2"> - <a className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="/register">REGISTER</a> - </li> - <li className="mr-2">{ user === null ? - <a className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="/login">LOGIN</a> : - <button className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" onClick={logout} >LOGOUT</button> } - </li> - </ul> - {/*th:action="@{/articles/search}"*/} - <form className="w-full max-w-md"> - <div className="flex flex-wrap -mx-3"> - <div className="w-full px-3"> - <input className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" - id="search" - type="search" - name="search" - placeholder="Search"/> - </div> - </div> - </form> - </div> - </div> -</nav> - -{/*slide in nav*/} -<div id="header" className="bg-white fixed w-full z-10 top-0 hidden animated" style={{opacity: '.95'}}> - <div className="bg-white"> - <div className="flex flex-wrap items-center content-center"> - <div className="flex w-1/2 justify-start text-white font-extrabold"> - <a className="flex text-gray-100 no-underline hover:text-gray-900 hover:no-underline pl-2" href="#"> - 👻 <span className="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span> - </a> - </div> - <div className="flex w-1/2 justify-end content-center"> - <p className="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span className="pr-2">Share this</span> 👉</p> - <a className="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style={{backgroundColor: '#33b1ff'}}> - <svg className="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg> - </a> - <a className="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style={{backgroundColor: '#005e99'}}> - <svg className="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg> - </a> - </div> - </div> + }; - </div> - {/*Progress bar*/} - <div id="progress" className="h-1 bg-white shadow" style={{background: "linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0)"}}></div> -</div> + const search = (e: FormEvent<HTMLFormElement>) => { + e.preventDefault(); -{/*Header*/} -<div className="w-full m-0 p-0 bg-cover bg-bottom" style={{backgroundImage: "url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg')", height: '60vh', maxHeight: '460px'}}> - <div className="container max-w-4xl bg-black bg-opacity-50 pb-16 rounded-b-xl mx-auto pt-16 md:pt-32 text-center break-normal"> - {/*Title*/} - <p className="text-white font-extrabold text-3xl md:text-5xl"> - ☕ Spring! - </p> - <p className="text-xl md:text-2xl text-gray-200">Welcome to my Blog</p> - </div> -</div> + const target = e.target as typeof e.target & { + search: { value: string }; + }; -<Outlet/> + articleSearch.set(target.search.value); -<footer className="bg-gray-900"> - <div className="container max-w-6xl mx-auto flex items-center px-2 py-8"> + navigate("/"); + }; - <div className="w-full mx-auto flex flex-wrap items-center"> - <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"> - <a className="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#"> - <span className="text-base text-gray-200"></span> - </a> - </div> - <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end"> - <ul className="list-reset flex justify-center flex-1 md:flex-none items-center"> - <li> - <a className="inline-block py-2 px-3 text-white no-underline" href="#"></a> - </li> - <li> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a> - </li> - <li> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a> - </li> - <li> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#"></a> - </li> - </ul> - </div> - </div> - - - - </div> -</footer> - -<script src="https://unpkg.com/@popperjs/core@2"></script> -<script src="https://unpkg.com/tippy.js@6"></script> -<script> - //Init tooltips - tippy('.avatar') -</script> -</div> + return ( + <> + <div className="w-full bg-gray-200 min-h-screen font-sans leading-normal tracking-normal"> + <nav className="bg-gray-900 p-4 mt-0 w-full"> + <div className="container mx-auto flex items-center"> + <div className="flex text-white font-extrabold"> + {/*th:if="${(user == null || user.username == null)}"*/} + <a + className="flex text-white text-base no-underline whitespace-nowrap hover:text-white hover:no-underline" + href="#"> + ☕ {user.value === null ? "Spring!" : user.value} + <span className="hidden w-0 md:w-auto md:block pl-1"></span> + </a> + </div> + <div className="flex pl-4 text-sm place-content-between w-full"> + <ul className="list-reset flex justify-between flex-1 md:flex-none items-center"> + <li className="mr-2"> + <a className="inline-block py-2 px-2 text-white no-underline" href="/"> + HOME + </a> + </li> + <li className="mr-2"> + <a + className="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" + href="/article/new"> + NEW + </a> + </li> + <li className="mr-2"> + <a + className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" + href="/register"> + REGISTER + </a> + </li> + <li className="mr-2"> + {user.value === null ? ( + <a + className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" + href="/login"> + LOGIN + </a> + ) : ( + <button + className="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" + onClick={logout}> + LOGOUT + </button> + )} + </li> + </ul> + <form onSubmit={search} className="w-full max-w-md"> + <div className="flex flex-wrap -mx-3"> + <div className="w-full px-3"> + <input + className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" + id="search" + type="search" + name="search" + placeholder="Search" + /> + </div> + </div> + </form> + </div> + </div> + </nav> + + {/*slide in nav*/} + <div + id="header" + className="bg-white fixed w-full z-10 top-0 hidden animated" + style={{ opacity: ".95" }}> + <div className="bg-white"> + <div className="flex flex-wrap items-center content-center"> + <div className="flex w-1/2 justify-start text-white font-extrabold"> + <a + className="flex text-gray-100 no-underline hover:text-gray-900 hover:no-underline pl-2" + href="#"> + 👻{" "} + <span className="hidden w-0 md:w-auto md:block pl-1"> + Ghostwind CSS + </span> + </a> + </div> + <div className="flex w-1/2 justify-end content-center"> + <p className="hidden sm:block mr-3 text-center h-14 p-4 text-xs"> + <span className="pr-2">Share this</span> 👉 + </p> + <a + className="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" + href="https://twitter.com/intent/tweet?url=#" + style={{ backgroundColor: "#33b1ff" }}> + <svg + className="fill-current text-white h-4" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 32 32"> + <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path> + </svg> + </a> + <a + className="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" + href="https://www.facebook.com/sharer/sharer.php?u=#" + style={{ backgroundColor: "#005e99" }}> + <svg + className="fill-current text-white h-4" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 32 32"> + <path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path> + </svg> + </a> + </div> + </div> + </div> + {/*Progress bar*/} + <div + id="progress" + className="h-1 bg-white shadow" + style={{ + background: + "linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0)", + }}></div> + </div> + + {/*Header*/} + <div + className="w-full m-0 p-0 bg-cover bg-bottom" + style={{ + backgroundImage: + "url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg')", + height: "60vh", + maxHeight: "460px", + }}> + <div className="container max-w-4xl bg-black bg-opacity-50 pb-16 rounded-b-xl mx-auto pt-16 md:pt-32 text-center break-normal"> + {/*Title*/} + <p className="text-white font-extrabold text-3xl md:text-5xl"> + ☕ Spring! + </p> + <p className="text-xl md:text-2xl text-gray-200">Welcome to my Blog</p> + </div> + </div> + + <Outlet /> + + <footer className="bg-gray-900"> + <div className="container max-w-6xl mx-auto flex items-center px-2 py-8"> + <div className="w-full mx-auto flex flex-wrap items-center"> + <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"> + <a + className="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" + href="#"> + <span className="text-base text-gray-200"></span> + </a> + </div> + <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end"> + <ul className="list-reset flex justify-center flex-1 md:flex-none items-center"> + <li> + <a + className="inline-block py-2 px-3 text-white no-underline" + href="#"></a> + </li> + <li> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" + href="#"></a> + </li> + <li> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" + href="#"></a> + </li> + <li> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" + href="#"></a> + </li> + </ul> + </div> + </div> + </div> + </footer> + + <script src="https://unpkg.com/@popperjs/core@2"></script> + <script src="https://unpkg.com/tippy.js@6"></script> + <script>//Init tooltips tippy('.avatar')</script> + </div> </> ); } diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index eed745b..682f794 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,123 +1,194 @@ import { useState, useEffect } from "react"; -export default function Home() { - const [articles, setArticles] = useState<any>([]); - +type article = { + id: number; + title: string; + photoUrl: string; + content: string; + createdOn: string; + updateOn: string; +}; +type articleSearch = { + set: React.Dispatch<React.SetStateAction<string | null>>; + value: string | null; +}; + +export default function Home({ + articleSearch, +}: { + articleSearch: articleSearch; +}) { + const [articles, setArticles] = useState<article[]>([]); + const [allArticles, setAllArticles] = useState<any>(null); + + // pull data when new search is given useEffect(() => { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles`; - fetch(url).then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }).then((response) => setArticles(response)); - }, []); - - const allArticles = articles.map((article) => ( - <div className="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink"> - <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"> - {/*th:href="@{/articles/{articleId}(articleId=${article.id})}"*/} - <a className="flex flex-wrap no-underline hover:no-underline"> - {/*th:src="${article.photoUrl}"*/} - <img src={article.photoUrl} className="h-full w-full rounded-t pb-6"/> - {/*th:text="${article.title}"*/} - <div className="w-full font-bold text-xl text-gray-900 px-6">{article.title}</div> - <p className="text-gray-800 font-serif text-base px-6 mb-5"></p> - </a> + let url; + if (articleSearch.value === null) { + //alert("not searched"); + url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles`; + } else { + //alert("searched"); + url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles?search=${ + articleSearch.value + }`; + } + fetch(url) + .then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }) + .then((response) => setArticles(response)); + }, [articleSearch.value]); + + // when new data is pulled update the articles shown + useEffect(() => { + setAllArticles( + articles.map((article) => ( + <div + key={article.id} + className="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink"> + <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"> + {/*th:href="@{/articles/{articleId}(articleId=${article.id})}"*/} + <a className="flex flex-wrap no-underline hover:no-underline"> + <img src={article.photoUrl} className="h-full w-full rounded-t pb-6" /> + <div className="w-full font-bold text-xl text-gray-900 px-6"> + {article.title} + </div> + <p className="text-gray-800 font-serif text-base px-6 mb-5"></p> + </a> {/*th:if="${user.id} == ${article.createdBy.id}"*/} - <div ></div> + <div></div> {/*th:href="@{/articles/edit/{articleId}(articleId=${article.id})}"*/} - <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 ml-4 text-sm rounded">Edit</a> - {/*th:href="@{/articles/delete/{articleId}(articleId=${article.id})}"*/} - <a className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 ml-4 text-sm rounded">Delete</a> - - </div> - <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"> - <div className="flex items-center justify-between"> - <p className="text-gray-600 text-xs md:text-sm"></p> - </div> - </div> - </div> - )); - return( + <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 ml-4 text-sm rounded"> + Edit + </a> + {/*th:href="@{/articles/delete/{articleId}(articleId=${article.id})}"*/} + <a className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 ml-4 text-sm rounded"> + Delete + </a> + </div> + <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"> + <div className="flex items-center justify-between"> + <p className="text-gray-600 text-xs md:text-sm"></p> + </div> + </div> + </div> + )), + ); + }, [articles]); + + return ( <> - {/*Container*/} -<div className="container px-4 md:px-0 max-w-6xl mx-auto -mt-32"> - - <div className="mx-0 sm:mx-6"> - - {/*<!--Nav-->*/} - <nav className="mt-0 w-full"> - <div className="container mx-auto flex items-center"> - - <div className="flex w-1/2 pl-4 text-sm"> - <ul className="list-reset flex justify-between flex-1 md:flex-none items-center"> - <li className="mr-2"> - <a className="inline-block py-2 px-2 text-white no-underline hover:underline" href="post.html">POST</a> - </li> - <li className="mr-2"> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="multimenu post.html">MULTIMENU POST</a> - </li> - <li className="mr-2"> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="#">LINK</a> - </li> - <li className="mr-2"> - <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="post_vue.html">POST_VUE</a> - </li> - </ul> - </div> - - - <div className="flex w-1/2 justify-end content-center"> - <a className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="@twitter_handle" href="https://twitter.com/intent/tweet?url=#"> - <svg className="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg> - </a> - <a className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#"> - <svg className="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg> - </a> - </div> - - </div> - </nav> - - <div className="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t"> - - {/*<!--Lead Card-->*/} - <div className="flex h-full bg-contain rounded overflow-hidden shadow-lg" style={{backgroundImage: "url('/public/abstract-polygonal-banner-background-vector.jpg')"}}> - <a href="post.html" className="flex flex-wrap no-underline hover:no-underline"> - <div className="w-full md:w-2/3 rounded-t"> - </div> - - <div className="w-full md:w-1/3 flex flex-col flex-grow flex-shrink"> - <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"> - <p className="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">Spring Blog</p> - <div className="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome to my Java Spring Blog!</div> - <p className="text-gray-800 font-serif text-base px-6 mb-5"> - This is a blog project I have created with the goal of learning and understand the ins and outs of the Java Spring framework. - </p> - </div> - - <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"> - <div className="flex items-center justify-between"> - <p className="text-gray-600 text-xs md:text-sm"></p> - </div> - </div> - </div> - - </a> - </div> - {/*<!--/Lead Card-->*/} -{/*th:if="${param.success}"*/} - <div className="text-xl p-4 bg-black text-red-500">Successful Registration!</div> - - - {/*<!--Posts Container-->*/} - <div className="flex flex-wrap justify-between pt-12 -mx-6"> - { allArticles } + {/*Container*/} + <div className="container px-4 md:px-0 max-w-6xl mx-auto -mt-32"> + <div className="mx-0 sm:mx-6"> + {/*<!--Nav-->*/} + <nav className="mt-0 w-full"> + <div className="container mx-auto flex items-center"> + <div className="flex w-1/2 pl-4 text-sm"> + <ul className="list-reset flex justify-between flex-1 md:flex-none items-center"> + <li className="mr-2"> + <a + className="inline-block py-2 px-2 text-white no-underline hover:underline" + href="post.html"> + POST + </a> + </li> + <li className="mr-2"> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" + href="multimenu post.html"> + MULTIMENU POST + </a> + </li> + <li className="mr-2"> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" + href="#"> + LINK + </a> + </li> + <li className="mr-2"> + <a + className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" + href="post_vue.html"> + POST_VUE + </a> + </li> + </ul> + </div> + + <div className="flex w-1/2 justify-end content-center"> + <a + className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" + data-tippy-content="@twitter_handle" + href="https://twitter.com/intent/tweet?url=#"> + <svg + className="fill-current h-4" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 32 32"> + <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path> + </svg> + </a> + <a + className="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" + data-tippy-content="#facebook_id" + href="https://www.facebook.com/sharer/sharer.php?u=#"> + <svg + className="fill-current h-4" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 32 32"> + <path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path> + </svg> + </a> + </div> + </div> + </nav> + + <div className="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t"> + {/*<!--Lead Card-->*/} + <div + className="flex h-full bg-contain rounded overflow-hidden shadow-lg" + style={{ + backgroundImage: + "url('/public/abstract-polygonal-banner-background-vector.jpg')", + }}> + <a + href="post.html" + className="flex flex-wrap no-underline hover:no-underline"> + <div className="w-full md:w-2/3 rounded-t"></div> + + <div className="w-full md:w-1/3 flex flex-col flex-grow flex-shrink"> + <div className="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg"> + <p className="w-full text-gray-600 text-xs md:text-sm pt-6 px-6"> + Spring Blog + </p> + <div className="w-full font-bold text-xl text-gray-900 px-6"> + 👋 Welcome to my Java Spring Blog! + </div> + <p className="text-gray-800 font-serif text-base px-6 mb-5"> + This is a blog project I have created with the goal of learning and + understand the ins and outs of the Java Spring framework. + </p> + </div> + + <div className="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6"> + <div className="flex items-center justify-between"> + <p className="text-gray-600 text-xs md:text-sm"></p> + </div> + </div> + </div> + </a> + </div> + <div className="flex flex-wrap justify-between pt-12 -mx-6"> + {allArticles} + </div> + </div> + </div> </div> - </div> - </div> -</div> </> ); } diff --git a/frontend/src/pages/auth/Login.tsx b/frontend/src/pages/auth/Login.tsx index 5a1e858..d064acf 100644 --- a/frontend/src/pages/auth/Login.tsx +++ b/frontend/src/pages/auth/Login.tsx @@ -2,12 +2,15 @@ import { FormEvent } from "react"; import { useNavigate } from "react-router-dom"; //type setUser = { setUser: { func: React.Dispatch<React.SetStateAction<string | null>> } }; -type user = { set: React.Dispatch<React.SetStateAction<string | null>>, value: string | null }; +type user = { + set: React.Dispatch<React.SetStateAction<string | null>>; + value: string | null; +}; -export default function Login ({user}: {user: user}) { +export default function Login({ user }: { user: user }) { const navigate = useNavigate(); -const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { + const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); //stops submit from happening const target = e.target as typeof e.target & { @@ -17,75 +20,85 @@ const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { }; const formData = new FormData(); - formData.append('username', target.username.value); - formData.append('password', target.password.value); + formData.append("username", target.username.value); + formData.append("password", target.password.value); - 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 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 { + 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"); } }); }; - return( + return ( <> -<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"> - <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"/> - </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"> - 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"/> - </div> - </div> - <div className="flex flex-wrap mb-2"> - </div> - <button type="submit" value="Log in" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Log In</button> - - </form> -</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"> + <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" + /> + </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"> + 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" + /> + </div> + </div> + <div className="flex flex-wrap mb-2"></div> + <button + type="submit" + value="Log in" + className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> + Log In + </button> + </form> + </div> </> ); - } diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index e77421c..b46315b 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -7,25 +7,37 @@ import NewArticle from "../pages/articles/New"; import Register from "../pages/auth/Register"; import Login from "../pages/auth/Login"; -type user = { set: React.Dispatch<React.SetStateAction<string | null>>, value: string | null }; +type user = { + set: React.Dispatch<React.SetStateAction<string | null>>; + value: string | null; +}; +type articleSearch = user; -export default function Index() -{ +export default function Index() { const [user, setUser] = useState<string | null>(null); + const [articleSearch, setArticleSearch] = useState<string | null>(null); const userProp: user = { set: setUser, value: user }; + const articleSearchProp: articleSearch = { + set: setArticleSearch, + value: articleSearch, + }; - return (<> - <Router> - <Routes> - <Route path="/" element = {<Layout />}> - <Route index element={<Home />} /> - <Route path="/article/:id" element={<Article />} /> - <Route path="/article/new" element={<NewArticle />} /> - <Route path="register" element={<Register />} /> - <Route path="login" element={<Login user={userProp}/>} /> - </Route> - </Routes> - </Router> - </>); + return ( + <> + <Router> + <Routes> + <Route + path="/" + element={<Layout user={userProp} articleSearch={articleSearchProp} />}> + <Route index element={<Home articleSearch={articleSearchProp} />} /> + <Route path="/article/:id" element={<Article />} /> + <Route path="/article/new" element={<NewArticle />} /> + <Route path="register" element={<Register />} /> + <Route path="login" element={<Login user={userProp} />} /> + </Route> + </Routes> + </Router> + </> + ); } |