zxq5/zxq5.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

idk

Browse Source
This commit is contained in:
FantasyPvP
2024-12-10 11:57:08 +00:00
parent 1707309d95
commit fb1c13bfa0
81 changed files with 2900 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/button.rs
+19
View File
@@ -0,0 +1,19 @@
use yew::{function_component, html, Callback, Html, MouseEvent, Properties};
#[derive(PartialEq, Properties)]
pub struct Props {
pub onclick: Callback<MouseEvent>,
pub text: String,
pub class: Option<String>
}
#[function_component(Button)]
pub fn button(props: &Props) -> Html {
html! {
<button
class={props.class.clone().unwrap_or("button".to_string())}
onclick={props.onclick.clone()}>
{props.text.clone()}
</button>
}
}
frontend/src/components/chat.rs
+25 -33
View File
@@ -1,30 +1,30 @@
use gloo::console::log;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
use web_sys::HtmlInputElement;
use chrono::prelude::*;
use crate::hooks::websocket::use_websocket;
use crate::{components::{navbar::Navbar, serverlist::ServerList}, hooks::websocket::use_websocket};
use crate::{WS_URL, API_URL};
#[derive(Clone, Debug, Serialize, Deserialize)]
pub struct RealTimeMessage {
pub message_id: i32,
pub user_id: i32,
pub user_id: String,
pub display_name: String,
pub created_at: i64,
pub content: String,
}
#[function_component(Chat)]
pub fn chat() -> Html {
let ws = use_websocket("ws://localhost:8000/messenger/connect/1");
let input_ref = use_node_ref();
let dark_theme = use_state(|| true);
#[derive(PartialEq, Properties)]
pub struct Props {
pub id: String
}
// let theme_toggle = {
// let dark_theme = dark_theme.clone();
// Callback::from(move |_| {
// dark_theme.set(!*dark_theme);
// })
// };
#[function_component(Chat)]
pub fn chat(props: &Props) -> Html {
let id = props.id.clone();
let ws = use_websocket(format!("{WS_URL}/messenger/connect/1/{id}").as_str());
let input_ref = use_node_ref();
let onsubmit = {
let ws = ws.ws.clone();
@@ -43,30 +43,22 @@ pub fn chat() -> Html {
};
html! {
<div class={classes!("app-container", if *dark_theme { "dark-theme" } else { "light-theme" })}>
<nav class="navbar">
<div class="nav-brand">{"Chat App"}</div>
// <div class="theme-toggle">
// <button onclick={theme_toggle} class="theme-button">
// if *dark_theme {
// {"🌞"}
// } else {
// {"🌙"}
// }
// </button>
// </div>
</nav>
<div class="chat-container">
<div class="ui-layout-horizontal">
// <ServerList/>
<div class="app-container">
<div class="messages-container">
{ws.messages.messages().iter().map(|msg| {
let timestamp = Local.timestamp_millis_opt(msg.created_at).unwrap();
let formatted_time = timestamp.format("%d/%m/%y %H:%M").to_string();
let userid = msg.user_id;
let userid = msg.user_id.clone();
html! {
<div class="message">
// load profile, if not - load fallback / default
<div class="profile-picture" style={ format!(
"background-image: url('http://localhost:8000/static/pfp/{userid}.png')"
"background-image:
url('{API_URL}/static/pfp/{}.png'),
url('{API_URL}/static/public/default_pfp.png')",
userid
)}></div>
<div class="message-bubble">
<div class="message-header">
@@ -84,14 +76,14 @@ pub fn chat() -> Html {
{format!("Error: {}", error)}
</div>
}
<form {onsubmit} class="message-form">
<form {onsubmit} class="ui-layout-horizontal">
<input
type="text"
ref={input_ref}
class="message-input"
class="message-input ui-element-standalone"
placeholder="Type a message..."
/>
<button type="submit" class="send-button">{"Send"}</button>
<button type="submit" class="ui-button ui-element-standalone">{"Send"}</button>
</form>
</div>
</div>
frontend/src/components/incidents.rs
+35
View File
@@ -0,0 +1,35 @@
use yew::{function_component, html, Html, Properties};
use crate::API_URL;
#[derive(PartialEq, Properties)]
pub struct Props {
pub incident: String
}
#[function_component(Incidents)]
pub fn incidents(props: &Props) -> Html {
let content = match props.incident.as_str() {
"boats" => (
"The Boat Incident.",
"the boat incident involved many boats being dropped on panic attack's tower. he then proceedeed to accidentally blow himself up along with all his stuff using a tnt cannon."
),
_ => ("", "")
};
html! {
<div class="app-container">
<div class="meme-license-container" style="min-height: 500px;">
<div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; padding: 2rem; gap: 2rem">
<h1 style="font-size: 4vw; text-align: center">{content.0}</h1>
<div style="display: flex; flex-direction: column; align-items: left; width: max-content; justify-content: center">
<div style="display: flex; flex-direction: row; align-items: center; width: max-content; gap: 1rem">
<p style="text-align: left; width: 50vw; font-size: 1.5vw">{content.1}</p>
// <p style="text-align: left; width: max-content; font-size: 1.5vw">{value}</p>
</div>
</div>
</div>
</div>
</div>
}
}
frontend/src/components/login.rs
+12 -11
View File
@@ -7,6 +7,7 @@ use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local;
use crate::API_URL;
use crate::Route;
#[function_component(Login)]
@@ -32,7 +33,7 @@ pub fn login_page() -> Html {
let login_success = login_success_clone.clone();
spawn_local(async move {
match login(username, password).await {
Ok(_) => navigator.push(&Route::Chat),
Ok(_) => navigator.push(&Route::Chat { id: "test".to_string() }),
Err(_) => login_success.set(false),
}
});
@@ -47,12 +48,12 @@ pub fn login_page() -> Html {
};
html! {
<div class="login-container">
<form {onsubmit} class="login-form">
<h2 class="login-title">{"Login"}</h2>
<div class="form-container">
<form {onsubmit} class="form-form">
<h2 class="form-title">{"Login"}</h2>
<input
ref={username_ref}
class="login-input"
class="form-input"
type="text"
id="username"
name="username"
@@ -60,27 +61,27 @@ pub fn login_page() -> Html {
/>
<input
ref={password_ref}
class="login-input"
class="form-input"
type="password"
id="password"
name="password"
placeholder="Password"
/>
<button class="login-button" type="submit">{"Login"}</button>
<button class="form-button" type="submit">{"Login"}</button>
{
if !(*login_success) {
html! {
<p class="login-error">{"Incorrect username or password"}</p>
<p class="form-error">{"Incorrect username or password"}</p>
}
} else {
html! {}
}
}
<p class="login-text">{"Don't have an account?"}</p>
<p class="form-text">{"Don't have an account?"}</p>
<a onclick={go_to_signup}
href=""
class="login-button"
class="form-button"
>
{"Create Account"}
</a>
@@ -101,7 +102,7 @@ async fn login(username: String, password: String) -> Result<(), String> {
password,
};
match Request::post("http://127.0.0.1:8000/login")
match Request::post(format!("{API_URL}/login").as_str())
.json(&login_request)
.map_err(|e| e.to_string())?
.send()
frontend/src/components/meme_license.rs
+51
View File
@@ -0,0 +1,51 @@
use yew::{function_component, html, Html, Properties};
use crate::API_URL;
#[derive(PartialEq, Properties)]
pub struct Props {
pub username: String
}
#[function_component(MemeLicense)]
pub fn meme_license(props: &Props) -> Html {
html! {
<div class="app-container">
<div class="meme-license-container" style="min-height: 500px;">
<div class="profile-picture" style={ format!(
"background-image:
url('{API_URL}/static/pfp/{}.png'),
url('{API_URL}/static/public/default_pfp.png');
height: 25vw;
max-height: 100%;
width: revert;
aspect-ratio: 1/1;
border-radius: 40px 0px 40px 0px;
flex-shrink: 0;
box-shadow: 0 2px 8px var(--shadow-color);
",
props.username
)}></div>
<div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; padding: 2rem; gap: 2rem">
<h1 style="font-size: 4vw; text-align: center">{"Meme Stealing License"}</h1>
<div style="display: flex; flex-direction: column; align-items: left; width: max-content; justify-content: center">
{[
("Username", props.username.as_str()),
("Valid From", "2024"),
("Expires", "2026"),
("Issuer", "Steven"),
].iter()
.map(|(field, value)| html! {
<div style="display: flex; flex-direction: row; align-items: center; width: max-content; gap: 1rem">
<p style="text-align: left; width: 10vw; font-size: 1.5vw">{field}</p>
<p style="text-align: left; width: max-content; font-size: 1.5vw">{value}</p>
</div>
})
.collect::<Html>()
}
</div>
</div>
</div>
</div>
}
}
frontend/src/components/navbar.rs
+43
View File
@@ -0,0 +1,43 @@
use yew::{function_component, html, use_context, Html, Callback};
use yew_router::hooks::use_navigator;
use crate::{
components::selector::Selector,
hooks::theme::{use_theme, Theme, ThemeManager}, Route
};
#[function_component(Navbar)]
pub fn navbar() -> Html {
let ctx = use_context::<ThemeManager>().unwrap();
let on_select_theme = {
Callback::from(move |selected: Theme| {
ctx.set_theme.emit(selected);
})
};
let go_to_route = {
let navigator = use_navigator().unwrap();
Callback::from(move |selected: Route| {
navigator.push(&selected);
})
};
html! {
<nav class="navbar ui-layout-horizontal">
<div class="nav-brand">{"ZXQ5.Dev"}</div>
<div style="width: 100%;"/>
<Selector<Theme>
text={"Theme".to_string()}
args={vec![Theme::Default, Theme::Light, Theme::Dark]}
onselect={on_select_theme}
/>
<Selector<Route>
text={"My Account".to_string()}
args={vec![Route::Login, Route::Signup]}
onselect={go_to_route}
/>
</nav>
}
}
frontend/src/components/selector.rs
+34
View File
@@ -0,0 +1,34 @@
use std::fmt::Display;
use yew::prelude::*;
use crate::components::button::Button;
#[derive(Properties, PartialEq)]
pub struct Props<T: Display + Clone + PartialEq + 'static> {
pub args: Vec<T>,
pub onselect: Callback<T>,
pub text: String,
}
#[function_component(Selector)]
pub fn selector<T: Display + Clone + PartialEq + 'static>(props: &Props<T>) -> Html {
html! {
<div class="selector">
<div class="selector-label">{&props.text}</div>
<div class="selector-items">
{props.args.iter().map(|arg| {
let onclick = {
let arg = arg.clone();
let onselect = props.onselect.clone();
Callback::from(move |_| {
onselect.emit(arg.clone())
})
};
html! {
<Button class={Some("selector-button".to_string())} text={arg.to_string()} onclick={onclick} />
}
}).collect::<Html>()}
</div>
</div>
}
}
frontend/src/components/serverlist.rs
+68
View File
@@ -0,0 +1,68 @@
use std::fmt::Display;
use gloo_net::http::Request;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
use crate::{components::button::Button, API_URL};
#[derive(Clone, Debug, Serialize, Deserialize)]
struct Server {
id: String,
name: String,
}
#[function_component(ServerList)]
pub fn serverlist() -> Html {
let servers = use_state(|| Vec::<Server>::new());
{
let servers = servers.clone();
use_effect_with((), move |_| {
let servers = servers.clone();
wasm_bindgen_futures::spawn_local(async move {
let fetched = if let Ok(fetched) = Request::get(format!("{API_URL}/servers").as_str())
.send()
.await
{
fetched.json()
.await
.unwrap()
} else {
Vec::new()
};
servers.set(fetched);
});
})
}
let onselect = {
let servers = servers.clone();
Callback::from(move |server: Server| {
servers.set(vec![server]);
})
};
html! {
<div class="ui-server-list">
<p style="text-align: center; padding: 1rem;"> {"Servers"} </p>
{ servers.iter().map(|server| {
html! {
<Button
text={server.name.clone()}
onclick={
let onselect = onselect.clone();
let server = server.clone();
Callback::from(move |_| {
onselect.emit(server.clone());
})
}
class={Some("selector-button".to_string())}
/>
}
}).collect::<Html>() }
</div>
}
}
frontend/src/components/signup.rs
+33 -22
View File
@@ -7,7 +7,7 @@ use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local;
use crate::Route;
use crate::{Route, API_URL};
#[function_component(Signup)]
pub fn signup_page() -> Html {
@@ -15,11 +15,13 @@ pub fn signup_page() -> Html {
let username_ref = use_node_ref();
let password_ref = use_node_ref();
let confirm_password_ref = use_node_ref();
let token_ref = use_node_ref();
let signup_error = use_state(|| None::<String>);
let navigator_clone = navigator.clone();
let username_ref_clone = username_ref.clone();
let password_ref_clone = password_ref.clone();
let token_ref_clone = token_ref.clone();
let confirm_password_ref_clone = confirm_password_ref.clone();
let signup_error_clone = signup_error.clone();
@@ -28,8 +30,9 @@ pub fn signup_page() -> Html {
let username = username_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let password = password_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let confirm_password = confirm_password_ref_clone.cast::<HtmlInputElement>().unwrap().value();
let token = token_ref_clone.cast::<HtmlInputElement>().unwrap().value();
if username.is_empty() || password.is_empty() {
if username.is_empty() || password.is_empty() || token.is_empty() {
signup_error_clone.set(Some("Please fill in all fields".to_string()));
return;
}
@@ -42,8 +45,12 @@ pub fn signup_page() -> Html {
let navigator = navigator_clone.clone();
let signup_error = signup_error_clone.clone();
spawn_local(async move {
match signup(username, password).await {
Ok(_) => navigator.push(&Route::Chat),
match signup(SignupRequest {
username,
password,
token
}).await {
Ok(_) => navigator.push(&Route::Chat { id: "test".to_string() }),
Err(e) => signup_error.set(Some(e)),
}
});
@@ -57,12 +64,12 @@ pub fn signup_page() -> Html {
};
html! {
<div class="login-container">
<form {onsubmit} class="login-form">
<h2 class="login-title">{"Sign Up"}</h2>
<div class="form-container">
<form {onsubmit} class="form-form">
<h2 class="form-title">{"Sign Up"}</h2>
<input
ref={username_ref}
class="login-input"
class="form-input"
type="text"
id="username"
name="username"
@@ -70,7 +77,7 @@ pub fn signup_page() -> Html {
/>
<input
ref={password_ref}
class="login-input"
class="form-input"
type="password"
id="password"
name="password"
@@ -78,27 +85,35 @@ pub fn signup_page() -> Html {
/>
<input
ref={confirm_password_ref}
class="login-input"
class="form-input"
type="password"
id="confirm_password"
name="confirm_password"
placeholder="Confirm Password"
/>
<button class="login-button" type="submit">{"Sign Up"}</button>
<input
ref={token_ref}
class="form-input"
type="password"
id="access_token"
name="access_token"
placeholder="Access Token"
/>
<button class="form-button" type="submit">{"Sign Up"}</button>
{
if let Some(error) = (*signup_error).clone() {
html! {
<p class="login-error">{error}</p>
<p class="form-error">{error}</p>
}
} else {
html! {}
}
}
<p class="login-text">{"Already have an account?"}</p>
<p class="form-text">{"Already have an account?"}</p>
<a onclick={go_to_login}
href=""
class="login-button"
class="form-button"
>
{"Login"}
</a>
@@ -111,16 +126,12 @@ pub fn signup_page() -> Html {
struct SignupRequest {
username: String,
password: String,
token: String,
}
async fn signup(username: String, password: String) -> Result<(), String> {
let signup_request = SignupRequest {
username,
password,
};
match Request::post("http://127.0.0.1:8000/signup")
.json(&signup_request)
async fn signup(req: SignupRequest) -> Result<(), String> {
match Request::post(format!("{API_URL}/signup").as_str())
.json(&req)
.map_err(|e| e.to_string())?
.send()
.await
frontend/src/hooks/theme.rs
+73
View File
@@ -0,0 +1,73 @@
use std::fmt;
use yew::prelude::*;
use web_sys;
use gloo::console::log;
#[derive(Clone, Copy, PartialEq, Debug)]
pub enum Theme {
Default,
Light,
Dark,
}
impl Theme {
pub fn as_str(&self) -> &'static str {
match self {
Theme::Default => "default",
Theme::Light => "light",
Theme::Dark => "dark",
}
}
}
impl fmt::Display for Theme {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
write!(f, "{}", self.as_str())
}
}
#[derive(Clone, PartialEq)]
pub struct ThemeManager {
pub current: Theme,
pub set_theme: Callback<Theme>,
}
impl ThemeManager {
pub fn new(set_theme: Callback<Theme>) -> Self {
Self {
current: Theme::Default,
set_theme,
}
}
}
#[derive(Clone)]
pub struct UseThemeHandle {
pub set_theme: Callback<Theme>,
}
#[hook]
pub fn use_theme(initial: Theme) -> UseThemeHandle {
let theme = use_state(|| initial);
let set_theme = {
let theme = theme.clone();
Callback::from(move |new_theme: Theme| {
if let Some(window) = web_sys::window() {
if let Some(doc) = window.document() {
if let Some(body) = doc.body() {
if let Err(e) = body.set_attribute("theme", new_theme.as_str()) {
log!("Failed to set theme:", e);
}
}
}
}
theme.set(new_theme);
})
};
UseThemeHandle {
set_theme,
}
}
frontend/src/main.rs
+101 -18
View File
@@ -1,21 +1,49 @@
use hooks::theme::{use_theme, Theme, ThemeManager};
use yew::prelude::*;
use yew_router::prelude::*;
use gloo::storage::{LocalStorage, Storage};
use gloo::{console::log, storage::{LocalStorage, Storage}};
#[cfg(debug_assertions)]
pub(crate) const API_URL: &str = "http://localhost:8000";
#[cfg(debug_assertions)]
pub(crate) const WS_URL: &str = "ws://localhost:8000";
#[cfg(not(debug_assertions))]
pub(crate) const API_URL: &str = "https://api.zxq5.dev";
#[cfg(not(debug_assertions))]
pub(crate) const WS_URL: &str = "wss://api.zxq5.dev";
mod hooks {
pub mod websocket;
pub mod theme;
}
mod components {
pub mod chat;
pub mod signup;
pub mod login;
pub mod navbar;
pub mod button;
pub mod selector;
pub mod serverlist;
pub mod meme_license;
pub mod incidents;
pub mod form;
}
use components::{
chat::Chat,
login::Login,
signup::Signup,
navbar::Navbar,
button::Button,
selector::Selector,
serverlist::ServerList,
meme_license::MemeLicense,
incidents::Incidents,
form::Form,
};
#[derive(Clone, Routable, PartialEq)]
@@ -26,35 +54,90 @@ enum Route {
Login,
#[at("/signup")]
Signup,
#[at("/chat")]
Chat,
#[at("/chat/:id")]
Chat { id: String },
#[at("/profile")]
Profile,
#[at("/logout")]
Logout,
#[at("/invite")]
Invite,
#[at("/license/:username")]
MemeLicense { username: String },
#[at("/incidents/:incident")]
Incidents { incident: String },
#[not_found]
#[at("/404")]
NotFound,
}
impl std::fmt::Display for Route {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", match self {
Route::Root => "Home",
Route::Login => "Login",
Route::Signup => "Signup",
Route::Chat { id: _ } => "Chat",
Route::NotFound => "404",
Route::Profile => "Profile",
Route::Logout => "Logout",
Route::Invite => "Invite",
Route::MemeLicense { username: _ } => "Meme License",
Route::Incidents { incident: _ } => "Incidents",
})
}
}
fn switch(route: Route) -> Html {
match route {
Route::Root => html! { <Redirect<Route> to={Route::Login}/> },
Route::Login => html! { <Login /> },
Route::Signup => html! { <Signup /> },
Route::Chat => {
if let Ok(token) = LocalStorage::get::<String>("auth_token") {
html! { <Chat /> }
} else {
html! { <Redirect<Route> to={Route::Login}/> }
}
}
Route::NotFound => html! { <h1>{"404 Not Found"}</h1> },
// // check if user is logged in
// if user not logged in:
// html! {}
html ! {
<div class="base-container">
<Navbar/>
{ match route {
Route::Root => html! { <Redirect<Route> to={Route::Login}/> },
Route::Login => html! { <Login /> },
Route::Signup => html! { <Signup /> },
// Route::Chat { id: token } => {
// if let Ok(token) = LocalStorage::get::<String>("auth-token") {
// html! { <Chat id={token}/> }
// } else {
// html! { <Redirect<Route> to={Route::Login}/> }
// }
// }
Route::Chat { id: token } => html! { <Chat id={token}/> },
Route::Incidents { incident: incident } => html! { <Incidents incident={incident}/> },
Route::MemeLicense { username: username } => html! { <MemeLicense username={username}/> },
_ => html! { <h1>{"404 Not Found"}</h1> },
}}
</div>
}
}
#[function_component(App)]
fn app() -> Html {
let theme_handle = use_theme(Theme::Default);
let ctx = use_state(|| ThemeManager::new(theme_handle.set_theme));
{
let ctx = ctx.clone();
use_effect_with((), move |_| {
ctx.set_theme.emit(Theme::Default);
});
}
html! {
<BrowserRouter>
<Switch<Route> render={switch} />
</BrowserRouter>
<ContextProvider<ThemeManager> context={(*ctx).clone()}>
<BrowserRouter>
<Switch<Route> render={switch} />
</BrowserRouter>
</ContextProvider<ThemeManager>>
}
}