Splitting client code
This commit is contained in:
Imbus
parent
c2103071bc
commit
3c48698522
5 changed files with 233 additions and 196 deletions
92
client-solid/src/Login.tsx
Normal file
92
client-solid/src/Login.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { createSignal, useContext } from "solid-js";
|
||||||
|
import { LoginContext, ModalContext } from "./Root";
|
||||||
|
|
||||||
|
export function LoginForm() {
|
||||||
|
const modal_ctx = useContext(ModalContext);
|
||||||
|
const login_ctx = useContext(LoginContext);
|
||||||
|
const [username, setUsername] = createSignal("");
|
||||||
|
const [password, setPassword] = createSignal("");
|
||||||
|
const [waiting, setWaiting] = createSignal(false);
|
||||||
|
const [error, setError] = createSignal(false);
|
||||||
|
|
||||||
|
async function loginFailed() {
|
||||||
|
setError(true);
|
||||||
|
setWaiting(false);
|
||||||
|
setTimeout(() => {
|
||||||
|
setError(false);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text">Username</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="username"
|
||||||
|
value={username()}
|
||||||
|
class="input input-bordered"
|
||||||
|
onChange={(e) => {
|
||||||
|
setUsername(e.target.value);
|
||||||
|
}} />
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text">Password</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="password"
|
||||||
|
value={password()}
|
||||||
|
class="input input-bordered"
|
||||||
|
onChange={(e) => {
|
||||||
|
setPassword(e.target.value);
|
||||||
|
}} />
|
||||||
|
<button
|
||||||
|
class={"btn btn-primary mt-4" + (error() ? " btn-error" : "")}
|
||||||
|
onClick={(b) => {
|
||||||
|
b.preventDefault();
|
||||||
|
setWaiting(true);
|
||||||
|
submitLogin(username(), password()).then((token) => {
|
||||||
|
if (token != "") {
|
||||||
|
setWaiting(false);
|
||||||
|
setError(false);
|
||||||
|
login_ctx?.setUsername(username());
|
||||||
|
setUsername("");
|
||||||
|
setPassword("");
|
||||||
|
login_ctx?.setToken(token);
|
||||||
|
modal_ctx?.setLoginModalOpen(false);
|
||||||
|
} else {
|
||||||
|
loginFailed();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{waiting() ? "Logging in..." : "Login"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This function is responsible for sending the login request to the server
|
||||||
|
// and storing the token in localstorage
|
||||||
|
export async function submitLogin(
|
||||||
|
username: string,
|
||||||
|
password: string
|
||||||
|
): Promise<string> {
|
||||||
|
const response = await fetch("/api/login", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ username, password }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.token && data.username) {
|
||||||
|
localStorage.setItem("token", data.token);
|
||||||
|
localStorage.setItem("username", data.username);
|
||||||
|
return data.token;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
83
client-solid/src/Navbar.tsx
Normal file
83
client-solid/src/Navbar.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { useContext } from "solid-js";
|
||||||
|
import { A } from "@solidjs/router";
|
||||||
|
import { LoginContext } from "./Root";
|
||||||
|
import { ModalContext } from "./Root";
|
||||||
|
import { LoginForm } from "./Login";
|
||||||
|
|
||||||
|
function Menu() {
|
||||||
|
let login_ctx = useContext(LoginContext);
|
||||||
|
return (
|
||||||
|
<ul class="menu menu-horizontal bg-base-200 rounded-box space-x-2">
|
||||||
|
<li>
|
||||||
|
<A href="/" end>
|
||||||
|
Home
|
||||||
|
</A>
|
||||||
|
</li>
|
||||||
|
{login_ctx?.token() != "" ? (
|
||||||
|
<li>
|
||||||
|
<A href="/new" end>
|
||||||
|
New
|
||||||
|
</A>
|
||||||
|
</li>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
let modal_ctx = useContext(ModalContext);
|
||||||
|
let login_ctx = useContext(LoginContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="navbar bg-base-100 max-w-3xl max-w flex justify-around">
|
||||||
|
<a class="btn btn-ghost normal-case text-xl">FrostByte</a>
|
||||||
|
<Menu />
|
||||||
|
<A
|
||||||
|
href="#"
|
||||||
|
class="btn btn-ghost normal-case text-sm"
|
||||||
|
onClick={(b) => {
|
||||||
|
b.preventDefault();
|
||||||
|
if (login_ctx?.token() != "") {
|
||||||
|
localStorage.setItem("token", "");
|
||||||
|
localStorage.setItem("username", "");
|
||||||
|
login_ctx?.setToken("");
|
||||||
|
login_ctx?.setUsername("");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
modal_ctx?.setLoginModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{login_ctx?.token() != "" ? login_ctx?.username() : "Login"}
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is a modal
|
||||||
|
export function Login() {
|
||||||
|
const modal_ctx = useContext(ModalContext);
|
||||||
|
return (
|
||||||
|
<dialog id="login_modal" class="modal" open={modal_ctx?.loginModalOpen()}>
|
||||||
|
<div class="modal-box">
|
||||||
|
<h3 class="font-bold text-lg">Hello!</h3>
|
||||||
|
<p class="py-4">Login to your FrostByte account.</p>
|
||||||
|
<LoginForm />
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
method="dialog"
|
||||||
|
// This backdrop renders choppy on my machine. Likely because of the blur filter or misuse of css transisions
|
||||||
|
class="modal-backdrop backdrop-brightness-50 backdrop-blur-sm backdrop-contrast-100 transition-all transition-300"
|
||||||
|
onsubmit={(e) => {
|
||||||
|
// This is just needed to set the state to false
|
||||||
|
// The modal will close itself without this code, but without setting the state
|
||||||
|
e.preventDefault();
|
||||||
|
modal_ctx?.setLoginModalOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button>close</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
client-solid/src/Posts.tsx
Normal file
39
client-solid/src/Posts.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { createSignal } from "solid-js";
|
||||||
|
import { getPosts } from "./api";
|
||||||
|
import { Post } from "./api";
|
||||||
|
|
||||||
|
export function Posts() {
|
||||||
|
const [posts, setPosts] = createSignal([] as Post[]);
|
||||||
|
const [loading, setLoading] = createSignal(true);
|
||||||
|
|
||||||
|
getPosts().then((posts) => {
|
||||||
|
setPosts(posts as any);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex flex-col space-y-2 w-full md:w-96">
|
||||||
|
{loading() ? (
|
||||||
|
<span class="loading loading-spinner loading-lg self-center"></span>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
{posts().map((post) => {
|
||||||
|
if (post.content == "") return; // Filtering out empty posts, remove this later
|
||||||
|
return <PostSegment post={post}></PostSegment>;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the card container for a post
|
||||||
|
export function PostSegment({ post }: { post: Post; }) {
|
||||||
|
return (
|
||||||
|
<div class="card bg-base-200 shadow-lg compact text-base-content w-full">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="text-base-content break-words">{post.content}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
13
client-solid/src/Primary.tsx
Normal file
13
client-solid/src/Primary.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { Route, Routes } from "@solidjs/router";
|
||||||
|
import { Posts } from "./Posts";
|
||||||
|
import { NewPostInputArea } from "./Root";
|
||||||
|
|
||||||
|
// Primary is the section of the page that holds the main content
|
||||||
|
export function Primary() {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Posts />} />
|
||||||
|
<Route path="/new" element={<NewPostInputArea />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
import { Accessor, createSignal, useContext } from "solid-js";
|
import { Accessor, createSignal, useContext } from "solid-js";
|
||||||
import { createContext } from "solid-js";
|
import { createContext } from "solid-js";
|
||||||
|
|
||||||
import { Route, Routes, A } from "@solidjs/router";
|
|
||||||
|
|
||||||
import { createPost, getPosts } from "./api";
|
import { createPost } from "./api";
|
||||||
import { Post, NewPost } from "./api";
|
import { NewPost } from "./api";
|
||||||
|
import { Navbar } from "./Navbar";
|
||||||
|
import { Primary } from "./Primary";
|
||||||
|
import { Login } from "./Navbar";
|
||||||
|
|
||||||
// Representing the state of varoious modals.
|
// Representing the state of varoious modals.
|
||||||
// So far we only have one modal, but we can add more later
|
// So far we only have one modal, but we can add more later
|
||||||
|
|
@ -55,45 +57,7 @@ function Root() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Navbar() {
|
export function NewPostInputArea() {
|
||||||
let modal_ctx = useContext(ModalContext);
|
|
||||||
let login_ctx = useContext(LoginContext);
|
|
||||||
return (
|
|
||||||
<div class="navbar bg-base-100 max-w-3xl max-w flex justify-evenly">
|
|
||||||
<a class="btn btn-ghost normal-case text-xl">FrostByte</a>
|
|
||||||
<Menu />
|
|
||||||
<A
|
|
||||||
href="#"
|
|
||||||
class="btn btn-ghost normal-case text-sm"
|
|
||||||
onClick={(b) => {
|
|
||||||
b.preventDefault();
|
|
||||||
modal_ctx?.setLoginModalOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{login_ctx?.token() != "" ? login_ctx?.username() : "Login"}
|
|
||||||
</A>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Menu() {
|
|
||||||
return (
|
|
||||||
<ul class="menu menu-horizontal bg-base-200 rounded-box space-x-2 justify-end">
|
|
||||||
<li>
|
|
||||||
<A href="/" end>
|
|
||||||
Home
|
|
||||||
</A>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<A href="/new" end>
|
|
||||||
New
|
|
||||||
</A>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NewPostInputArea() {
|
|
||||||
const [content, setContent] = createSignal("");
|
const [content, setContent] = createSignal("");
|
||||||
const login_ctx = useContext(LoginContext);
|
const login_ctx = useContext(LoginContext);
|
||||||
|
|
||||||
|
|
@ -126,158 +90,4 @@ function NewPostInputArea() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Posts() {
|
|
||||||
const [posts, setPosts] = createSignal([] as Post[]);
|
|
||||||
const [loading, setLoading] = createSignal(true);
|
|
||||||
|
|
||||||
getPosts().then((posts) => {
|
|
||||||
setPosts(posts as any);
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="flex flex-col space-y-2 w-full md:w-96">
|
|
||||||
{loading() ? (
|
|
||||||
<span class="loading loading-spinner loading-lg self-center"></span>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{posts().map((post) => {
|
|
||||||
if (post.content == "") return; // Filtering out empty posts, remove this later
|
|
||||||
return <PostSegment post={post}></PostSegment>;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PostSegment({ post }: { post: Post }) {
|
|
||||||
return (
|
|
||||||
<div class="card bg-base-200 shadow-lg compact text-base-content w-full">
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="text-base-content break-words">{post.content}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Primary() {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<Posts />} />
|
|
||||||
<Route path="/new" element={<NewPostInputArea />} />
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is a modal
|
|
||||||
function Login() {
|
|
||||||
const modal_ctx = useContext(ModalContext);
|
|
||||||
return (
|
|
||||||
<dialog id="login_modal" class="modal" open={modal_ctx?.loginModalOpen()}>
|
|
||||||
<div class="modal-box">
|
|
||||||
<h3 class="font-bold text-lg">Hello!</h3>
|
|
||||||
<p class="py-4">Login to your FrostByte account.</p>
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
<form
|
|
||||||
method="dialog"
|
|
||||||
// This backdrop renders choppy on my machine. Likely because of the blur filter or misuse of css transisions
|
|
||||||
class="modal-backdrop backdrop-brightness-50 backdrop-blur-sm backdrop-contrast-100 transition-all transition-300"
|
|
||||||
onsubmit={(e) => {
|
|
||||||
// This is just needed to set the state to false
|
|
||||||
// The modal will close itself without this code, but without setting the state
|
|
||||||
e.preventDefault();
|
|
||||||
modal_ctx?.setLoginModalOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button>close</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// This function is responsible for sending the login request to the server
|
|
||||||
// and storing the token in localstorage
|
|
||||||
async function submitLogin(
|
|
||||||
username: string,
|
|
||||||
password: string
|
|
||||||
): Promise<string> {
|
|
||||||
const response = await fetch("/api/login", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ username, password }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.token && data.username) {
|
|
||||||
localStorage.setItem("token", data.token);
|
|
||||||
localStorage.setItem("username", data.username);
|
|
||||||
return data.token;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
function LoginForm() {
|
|
||||||
const modal_ctx = useContext(ModalContext);
|
|
||||||
const [username, setUsername] = createSignal("");
|
|
||||||
const [password, setPassword] = createSignal("");
|
|
||||||
const [waiting, setWaiting] = createSignal(false);
|
|
||||||
const [error, setError] = createSignal(false);
|
|
||||||
|
|
||||||
async function loginFailed() {
|
|
||||||
setError(true);
|
|
||||||
setWaiting(false);
|
|
||||||
setTimeout(() => {
|
|
||||||
setError(false);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form class="form-control">
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text">Username</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="username"
|
|
||||||
class="input input-bordered"
|
|
||||||
onChange={(e) => {
|
|
||||||
setUsername(e.target.value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text">Password</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
placeholder="password"
|
|
||||||
class="input input-bordered"
|
|
||||||
onChange={(e) => {
|
|
||||||
setPassword(e.target.value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
class={"btn btn-primary mt-4" + (error() ? " btn-error" : "")}
|
|
||||||
onClick={(b) => {
|
|
||||||
b.preventDefault();
|
|
||||||
setWaiting(true);
|
|
||||||
submitLogin(username(), password()).then((token) => {
|
|
||||||
if (token != "") {
|
|
||||||
setWaiting(false);
|
|
||||||
setError(false);
|
|
||||||
modal_ctx?.setLoginModalOpen(false);
|
|
||||||
} else {
|
|
||||||
loginFailed();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{waiting() ? "Logging in..." : "Login"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Root;
|
export default Root;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue