diff --git a/frontend/src/components/alerts.rs b/frontend/src/components/alerts.rs
new file mode 100644
index 0000000..f21790f
--- /dev/null
+++ b/frontend/src/components/alerts.rs
@@ -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>
+ }
+ }
+}
diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs
new file mode 100644
index 0000000..afea519
--- /dev/null
+++ b/frontend/src/components/mod.rs
@@ -0,0 +1,2 @@
+pub mod alerts;
+pub mod refresh_button;
diff --git a/frontend/src/components/refresh_button.rs b/frontend/src/components/refresh_button.rs
new file mode 100644
index 0000000..0c91c06
--- /dev/null
+++ b/frontend/src/components/refresh_button.rs
@@ -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>
+ }
+}
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index a5565e0..52750f3 100644
--- a/frontend/src/main.rs
+++ b/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! {