diff --git a/backend/src/main.rs b/backend/src/main.rs
index d4fb2b8..4803cd5 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -194,12 +194,10 @@ async fn generate(request: Json<GenerationRequest<'_>>) -> Result<NamedFile, Gen
}
match NamedFile::open(output_file).await {
- Err(e) => {
- return Err(GenerationError::InternalError(format!(
- "Failed to open output file: {}",
- e
- )));
- }
+ Err(e) => Err(GenerationError::InternalError(format!(
+ "Failed to open output file: {}",
+ e
+ ))),
Ok(f) => Ok(f),
}
}
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 23902b3..61c1c19 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -49,7 +49,7 @@ fn navbar(props: &NavProps) -> Html {
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
- <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{"Home"}</span>
+ <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{"PeazyWeb"}</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">{"Open main menu"}</span>
@@ -120,17 +120,27 @@ fn directories() -> Html {
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mb-4">
{ "Refresh" }
</button></p>
- <h1>{"Directories"}</h1>
- <h2 class="text-2xl font-bold text-gray-700 mb-2">{ "Directory List" }</h2>
- <ul class="list-disc pl-5">
- { for (*dirs).iter().map(|dir| {
- html! {
- <li class="mb-2">
- <Link<Route> to={Route::Configs { dir_name: dir.to_string() }}>{dir}</Link<Route>>
- </li>
- }
- }) }
- </ul>
+ <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">
+ <tr>
+ <th scope="col" class="px-6 py-3">
+ {"Directory name"}
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ { for (*dirs).iter().map(|dir| {
+ html! {
+ <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
+ <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ <Link<Route> to={Route::Configs { dir_name: dir.to_string() }}>{dir}</Link<Route>>
+ </th>
+ </tr>
+ }
+ }) }
+ </tbody>
+ </table>
if !message.is_empty() {
<p class="text-green-500 mt-2">{ &*message }</p>
@@ -188,7 +198,6 @@ fn configs(props: &ConfigsProps) -> Html {
{ "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>
- <h1>{ "Configs" }</h1>
<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">
@@ -342,34 +351,38 @@ fn generate(props: &GenerateProps) -> Html {
html! {
<div>
if !*done.clone() {
- <div class="w-full">
- <h2 class="text-2xl font-bold text-gray-700 mb-2">{format!("Generate config for {}:", props.dir.clone())}</h2>
- <form class="mb-2">
- <span><label class="block mb-2 text-sm font-medium px-4 py-2" for="common-name">{"Common Name:"}
- </label> <input type="text" id="common-name" placeholder="enter common name" class="border rounded px-4 py-2 mr-2" oninput={Callback::from({
+ <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>
+ <div>
+ <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="common-name">{"Common Name:"}
+ </label>
+ <input type="text" id="common-name" placeholder="enter common name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required=true oninput={Callback::from({
let config_name = config_name.clone();
move |e: InputEvent| {
let input = e.target_dyn_into::<web_sys::HtmlInputElement>().unwrap();
config_name.set(input.value());
}
- })} /></span>
- </form>
+ })} />
+ </div>
<button onclick={generate_config.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" }
</button>
- if !error.is_empty() {
- <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>
- }
+ </form>
</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>
+ }
} else {
<Config dir={dir_name.clone()} file_name={format!("{}.ovpn", config_name.clone().to_string())} />
}
@@ -382,7 +395,13 @@ fn switch(routes: Route) -> Html {
Route::Home => html! {
<div>
<Navbar currrent_route={routes.clone()} />
- <h1>{ "Home" }</h1> <Link<Route> to={Route::Directories}>{ "Directories" }</Link<Route>>
+
+ <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">
+ <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">{"PeazyWeb"}</h1>
+ <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">{"Your VPN configuration files at your fingertips!"}</p>
+ </div>
+ </section>
</div> },
Route::Directories => html! {
<div>