b4tman/peazyweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: ui refactor + components

Browse Source
This commit is contained in:
Dmitry Belyaev 2025-03-25 16:32:15 +03:00
parent 79a7c71326
commit 807ead7dc7
Signed by: b4tman
GPG Key ID: 41A00BF15EA7E5F3
4 changed files with 100 additions and 67 deletions

28
frontend/src/components/alerts.rs Normal file

@ -0,0 +1,28 @@
use yew::Properties;
use yew::prelude::*;
#[derive(PartialEq, Properties)]
pub struct ErrorAlertProps {
#[prop_or("Error!".into())]
pub title: AttrValue,
#[prop_or("An error occurred.".into())]
pub error: AttrValue,
}
#[function_component(ErrorAlert)]
pub fn error_alert(props: &ErrorAlertProps) -> Html {
html! {
if !props.error.is_empty() {
<br/>
<div class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
<svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">{"Info"}</span>
<div>
<span class="font-medium">{&props.title}</span> {" "} { &props.error }
</div>
</div>
}
}
}

2
frontend/src/components/mod.rs Normal file

@ -0,0 +1,2 @@
pub mod alerts;
pub mod refresh_button;

24
frontend/src/components/refresh_button.rs Normal file

@ -0,0 +1,24 @@
use yew::Properties;
use yew::prelude::*;
#[derive(PartialEq, Properties)]
pub struct RefreshButtonProps {
#[prop_or("Refresh".into())]
pub label: AttrValue,
#[prop_or("button".into())]
pub type_: AttrValue,
pub onclick: Option<Callback<MouseEvent>>,
}
#[function_component(RefreshButton)]
pub fn refresh_button(props: &RefreshButtonProps) -> Html {
html! {
<button
type={&props.type_}
class={classes!("refresh-button", "bg-gray-500", "hover:bg-gray-700", "text-white",
"font-bold", "py-2", "px-4", "rounded", "mb-4")}
onclick={props.onclick.clone()}
> {&props.label}
</button>
}
}

113
frontend/src/main.rs

@ -1,10 +1,10 @@
use base64::{Engine as _, engine::general_purpose};
use gloo::net::http::Request;
use lazy_static::lazy_static;
use serde::{Deserialize, Serialize};
use wasm_bindgen_futures::spawn_local;
use yew::Properties;
use yew::prelude::*;
use lazy_static::lazy_static;
use base64::{Engine as _, engine::general_purpose};
#[derive(Serialize, Deserialize, Clone, Debug)]
struct GenerationRequest {
@ -14,6 +14,11 @@ struct GenerationRequest {
use yew_router::prelude::*;
mod components;
use components::alerts::ErrorAlert;
use components::refresh_button::RefreshButton;
#[derive(Clone, Routable, PartialEq)]
pub enum Route {
#[at("/")]
@ -25,14 +30,15 @@ pub enum Route {
#[at("/dir/:dir_name/:file_name")]
Config { dir_name: String, file_name: String },
#[at("/gen/:dir_name")]
Generate { dir_name: String },
CreateConfig { dir_name: String },
#[not_found]
#[at("/404")]
NotFound,
}
lazy_static! {
static ref API_BASE_URL: String = std::env::var("API_BASE_URL").unwrap_or("http://127.0.0.1:8000/api/v1".into());
static ref API_BASE_URL: String =
std::env::var("API_BASE_URL").unwrap_or("http://127.0.0.1:8000/api/v1".into());
}
pub struct APIEndpoints {}
@ -111,14 +117,14 @@ fn navbar(props: &NavProps) -> Html {
#[function_component(Directories)]
fn directories() -> Html {
let dirs = use_state(Vec::new);
let message = use_state(|| "".to_string());
let error_message = use_state(|| "".to_string());
let get_dirs = {
let dirs = dirs.clone();
let message = message.clone();
let error_message = error_message.clone();
Callback::from(move |_| {
let dirs = dirs.clone();
let message = message.clone();
let error_message = error_message.clone();
spawn_local(async move {
match Request::get(APIEndpoints::get_dirs().as_ref()).send().await {
Ok(response) if response.ok() => match response.json::<Vec<String>>().await {
@ -126,9 +132,9 @@ fn directories() -> Html {
json.sort();
dirs.set(json);
}
_ => message.set("Failed to fetch directories".into()),
_ => error_message.set("Failed to fetch directories".into()),
},
_ => message.set("Failed to fetch directories".into()),
_ => error_message.set("Failed to fetch directories".into()),
}
})
})
@ -144,11 +150,7 @@ fn directories() -> Html {
html! {
<div>
<p><button
onclick={get_dirs.reform(|_| ())}
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mb-4">
{ "Refresh" }
</button></p>
<RefreshButton onclick={get_dirs.reform(|_| ())} />
<h2 class="text-2xl font-bold text-gray-700 mb-2">{"Directories"}</h2>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
@ -170,10 +172,7 @@ fn directories() -> Html {
}) }
</tbody>
</table>
if !message.is_empty() {
<p class="text-green-500 mt-2">{ &*message }</p>
}
<ErrorAlert error={error_message.as_str().to_owned()} />
</div>
}
}
@ -186,16 +185,16 @@ pub struct ConfigsProps {
#[function_component(Configs)]
fn configs(props: &ConfigsProps) -> Html {
let configs = use_state(Vec::new);
let message = use_state(|| "".to_string());
let error_message = use_state(|| "".to_string());
let dir_name = props.dir.clone();
let get_configs = {
let configs = configs.clone();
let message = message.clone();
let error_message = error_message.clone();
Callback::from(move |_| {
let url = APIEndpoints::get_configs(dir_name.clone().as_str());
let configs = configs.clone();
let message = message.clone();
let error_message = error_message.clone();
spawn_local(async move {
match Request::get(&url).send().await {
Ok(response) if response.ok() => match response.json::<Vec<String>>().await {
@ -203,9 +202,9 @@ fn configs(props: &ConfigsProps) -> Html {
json.sort();
configs.set(json);
}
_ => message.set("Failed to fetch configs".into()),
_ => error_message.set("Failed to fetch configs".into()),
},
_ => message.set("Failed to fetch configs".into()),
_ => error_message.set("Failed to fetch configs".into()),
}
})
})
@ -220,12 +219,9 @@ fn configs(props: &ConfigsProps) -> Html {
html! {
<div>
<p><button
onclick={get_configs.reform(|_| ())}
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mb-4">
{ "Refresh" } </button>
<Link<Route> to={Route::Generate { dir_name: props.dir.clone().to_string() }}> <button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
{ "Generate" } </button> </Link<Route>> </p>
<p><RefreshButton onclick={get_configs.reform(|_| ())} />
<Link<Route> to={Route::CreateConfig { dir_name: props.dir.clone().to_string() }}> <button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
{ "Create" } </button> </Link<Route>> </p>
<h2 class="text-2xl font-bold text-gray-700 mb-2">{format!("Configs for {}:", props.dir.clone())}</h2>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
@ -248,9 +244,7 @@ fn configs(props: &ConfigsProps) -> Html {
</tbody>
</table>
if !message.is_empty() {
<p class="text-green-500 mt-2">{ &*message }</p>
}
<ErrorAlert error={error_message.as_str().to_owned()} />
</div>
}
}
@ -306,11 +300,7 @@ fn config(props: &ConfigProps) -> Html {
html! {
<div class="w-full">
<p><button
onclick={get_contents.reform(|_| ())}
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mb-4">
{ "Refresh" }
</button></p>
<RefreshButton onclick={get_contents.reform(|_| ())} />
<div class="mb-2 flex justify-between items-center">
<p class="text-sm font-medium text-gray-900">{"Config "}<b>{&props.file_name}</b>{" for "}<b>{&props.dir}</b>{":"}</p>
</div>
@ -319,7 +309,7 @@ fn config(props: &ConfigProps) -> Html {
<pre><code id="code-block" class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre">{&*contents}</code></pre>
</div>
<div class="absolute top-2 end-2 bg-gray-50 dark:bg-gray-700">
<a href={string_to_base64_data_url(&*contents, "application/octet-stream")} download={&props.file_name}><button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
<a href={string_to_base64_data_url(&contents, "application/octet-stream")} download={&props.file_name}><button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M13 11.15V4a1 1 0 1 0-2 0v7.15L8.78 8.374a1 1 0 1 0-1.56 1.25l4 5a1 1 0 0 0 1.56 0l4-5a1 1 0 1 0-1.56-1.25L13 11.15Z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M9.657 15.874 7.358 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2.358l-2.3 2.874a3 3 0 0 1-4.685 0ZM17 16a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z" clip-rule="evenodd"/>
@ -335,15 +325,15 @@ pub struct GenerateProps {
pub dir: AttrValue,
}
#[function_component(Generate)]
fn generate(props: &GenerateProps) -> Html {
#[function_component(CreateConfig)]
fn create_config(props: &GenerateProps) -> Html {
let dir_name = props.dir.clone();
let config_name = use_state(|| "".to_string());
let result = use_state(|| "".to_string());
let error = use_state(|| "".to_string());
let done = use_state(|| false);
let generate_config = {
let generate_config_request = {
let dir_name = dir_name.clone();
let config_name = config_name.clone();
let done = done.clone();
@ -374,7 +364,7 @@ fn generate(props: &GenerateProps) -> Html {
}
}
_ => {
error.set("Failed to generate config".into());
error.set("Failed to create config".into());
}
}
})
@ -388,7 +378,7 @@ fn generate(props: &GenerateProps) -> Html {
<br/>
<div class="w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
<form class="space-y-6" action="#">
<h5 class="text-xl font-medium text-gray-900 dark:text-white">{format!("Generate config for {}:", props.dir.clone())}</h5>
<h5 class="text-xl font-medium text-gray-900 dark:text-white">{format!("Create a config for {}:", props.dir.clone())}</h5>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="common-name">{"Common Name:"}
</label>
@ -400,30 +390,19 @@ fn generate(props: &GenerateProps) -> Html {
}
})} />
</div>
<button type="button" onclick={generate_config.reform(|_| ())}
<button type="button" onclick={generate_config_request.reform(|_| ())}
class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
{ "Generate" }
{ "Create" }
</button>
</form>
</div>
</div>
if !error.is_empty() {
<br/>
<div class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
<svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">{"Info"}</span>
<div>
<span class="font-medium">{"Error!"}</span> {" "} { &*error }
</div>
</div>
}
<ErrorAlert error={error.as_str().to_owned()} />
} else {
<div class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
<span class="font-medium">{"Success!"}</span>{" Config file successfully created!"}
</div>
<Config dir={dir_name.clone()} file_name={format!("{}.ovpn", config_name.clone().to_string())} contents={result.as_str().to_owned()} />
<Config dir={dir_name} file_name={format!("{}.ovpn", config_name.as_str())} contents={result.as_str().to_owned()} />
}
</>
}
@ -433,7 +412,7 @@ fn switch(routes: Route) -> Html {
match routes.clone() {
Route::Home => html! {
<div>
<Navbar currrent_route={routes.clone()} />
<Navbar currrent_route={routes} />
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
@ -444,20 +423,20 @@ fn switch(routes: Route) -> Html {
</div> },
Route::Directories => html! {
<div>
<Navbar currrent_route={routes.clone()} />
<Navbar currrent_route={routes} />
<Directories />
</div>
},
Route::Configs { dir_name } => html! {
<div>
<Navbar currrent_route={routes.clone()} currrent_dir={dir_name.clone()} />
<Configs dir={dir_name.clone()} />
<Navbar currrent_route={routes} currrent_dir={dir_name.clone()} />
<Configs dir={dir_name} />
</div>
},
Route::Generate { dir_name } => html! {
Route::CreateConfig { dir_name } => html! {
<div>
<Navbar currrent_route={routes.clone()} currrent_dir={dir_name.clone()} />
<Generate dir={dir_name.clone()} />
<Navbar currrent_route={routes} currrent_dir={dir_name.clone()} />
<CreateConfig dir={dir_name} />
</div>
},
Route::Config {
@ -465,8 +444,8 @@ fn switch(routes: Route) -> Html {
file_name,
} => html! {
<div>
<Navbar currrent_route={routes.clone()} currrent_dir={dir_name.clone()} />
<Config dir={dir_name.clone()} file_name={file_name.clone()} />
<Navbar currrent_route={routes} currrent_dir={dir_name.clone()} />
<Config dir={dir_name} file_name={file_name} />
</div>
},
_ => html! {