mirror/lldap
1
0
Fork 0
mirror of https://github.com/nitnelave/lldap.git synced 2023-04-12 14:25:13 +00:00
Code Issues Projects Releases Wiki Activity

app: Add style.css, improve classes

Browse Source 
Also change the server to be able to serve style.css.
This commit is contained in:
Valentin Tolmer 2021-10-15 17:20:37 +09:00 committed by nitnelave
parent 3912d62623
commit f4edb99379
10 changed files with 304 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/index.html
View File

@ -21,6 +21,9 @@
as="style" /> as="style" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>

80
app/src/components/app.rs
View File

@ -7,7 +7,7 @@ use crate::{
group_table::GroupTable, group_table::GroupTable,
login::LoginForm, login::LoginForm,
logout::LogoutButton, logout::LogoutButton,
router::{AppRoute, NavButton}, router::{AppRoute, Link, NavButton},
user_details::UserDetails, user_details::UserDetails,
user_table::UserTable, user_table::UserTable,
}, },
@ -96,9 +96,10 @@ impl Component for App {
let link = self.link.clone(); let link = self.link.clone();
let is_admin = self.is_admin(); let is_admin = self.is_admin();
html! { html! {
<div class="container"> <div class="container shadow-sm py-3">
<h1>{ "LLDAP" }</h1>
{self.view_banner()} {self.view_banner()}
<div class="row justify-content-center">
<div class="shadow-sm py-3" style="max-width: 1000px">
<Router<AppRoute> <Router<AppRoute>
render = Router::render(move |switch: AppRoute| { render = Router::render(move |switch: AppRoute| {
match switch { match switch {
@ -136,6 +137,8 @@ impl Component for App {
}) })
/> />
</div> </div>
</div>
</div>
} }
} }
} }
@ -180,29 +183,72 @@ impl App {
fn view_banner(&self) -> Html { fn view_banner(&self) -> Html {
html! { html! {
<> <header class="p-3 mb-4 border-bottom shadow-sm">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
<h1>{"LLDAP"}</h1>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
{if self.is_admin() { html! { {if self.is_admin() { html! {
<> <>
<div> <li>
<NavButton <Link
classes="btn btn-primary" classes="nav-link px-2 link-dark h4"
route=AppRoute::ListUsers> route=AppRoute::ListUsers>
{"Users"} {"Users"}
</NavButton> </Link>
</div> </li>
<div> <li>
<NavButton <Link
classes="btn btn-primary" classes="nav-link px-2 link-dark h4"
route=AppRoute::ListGroups> route=AppRoute::ListGroups>
{"Groups"} {"Groups"}
</NavButton> </Link>
</div> </li>
</> </>
} } else { html!{} } } } } else { html!{} } }
{if self.user_info.is_some() { html! { </ul>
<div class="dropdown text-end">
<a href="#"
class="d-block link-dark text-decoration-none dropdown-toggle"
id="dropdownUser"
data-bs-toggle="dropdown"
aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
class="bi bi-person-circle"
viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</a>
{if let Some((user_id, _)) = &self.user_info { html! {
<ul
class="dropdown-menu text-small dropdown-menu-lg-end"
aria-labelledby="dropdownUser1"
style="">
<li>
<Link
classes="dropdown-item"
route=AppRoute::UserDetails(user_id.clone())>
{"Profile"}
</Link>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<LogoutButton on_logged_out=self.link.callback(|_| Msg::Logout) /> <LogoutButton on_logged_out=self.link.callback(|_| Msg::Logout) />
}} else { html! {} }} </li>
</> </ul>
} } else { html!{} } }
</div>
</div>
</div>
</header>
} }
} }

22
app/src/components/create_group.rs
View File

@ -106,15 +106,17 @@ impl Component for CreateGroupForm {
fn view(&self) -> Html { fn view(&self) -> Html {
type Field = yew_form::Field<CreateGroupModel>; type Field = yew_form::Field<CreateGroupModel>;
html! { html! {
<> <div class="row justify-content-center">
<form <form class="form shadow-sm py-3" style="max-width: 636px">
class="form"> <div class="row mb-3">
<div class="form-group row"> <h5 class="fw-bold">{"Create a group"}</h5>
</div>
<div class="form-group row mb-3">
<label for="groupname" <label for="groupname"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Group name*:"} {"Group name*:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
field_name="groupname" field_name="groupname"
@ -128,10 +130,10 @@ impl Component for CreateGroupForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row justify-content-center">
<button <button
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-auto col-form-label"
type="button" type="submit"
disabled=self.task.is_some() disabled=self.task.is_some()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
{"Submit"} {"Submit"}
@ -146,7 +148,7 @@ impl Component for CreateGroupForm {
} }
} else { html! {} } } else { html! {} }
} }
</> </div>
} }
} }
} }

56
app/src/components/create_user.rs
View File

@ -199,15 +199,17 @@ impl Component for CreateUserForm {
fn view(&self) -> Html { fn view(&self) -> Html {
type Field = yew_form::Field<CreateUserModel>; type Field = yew_form::Field<CreateUserModel>;
html! { html! {
<> <div class="row justify-content-center">
<form <form class="form shadow-sm py-3" style="max-width: 636px">
class="form"> <div class="row mb-3">
<div class="form-group row"> <h5 class="fw-bold">{"Create a user"}</h5>
</div>
<div class="form-group row mb-3">
<label for="username" <label for="username"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"User name*:"} {"User name*:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
field_name="username" field_name="username"
@ -221,12 +223,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="email" <label for="email"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Email*:"} {"Email*:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
input_type="email" input_type="email"
@ -241,12 +243,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="display-name" <label for="display-name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Display name*:"} {"Display name*:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
autocomplete="name" autocomplete="name"
@ -260,12 +262,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="first-name" <label for="first-name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"First name:"} {"First name:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
autocomplete="given-name" autocomplete="given-name"
@ -279,12 +281,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="last-name" <label for="last-name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Last name:"} {"Last name:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
autocomplete="family-name" autocomplete="family-name"
@ -298,12 +300,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="password" <label for="password"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Password:"} {"Password:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
input_type="password" input_type="password"
@ -318,12 +320,12 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="confirm_password" <label for="confirm_password"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Confirm password:"} {"Confirm password:"}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
form=&self.form form=&self.form
input_type="password" input_type="password"
@ -338,9 +340,9 @@ impl Component for CreateUserForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row justify-content-center">
<button <button
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-auto col-form-label mt-4"
disabled=self.task.is_some() disabled=self.task.is_some()
type="submit" type="submit"
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
@ -356,7 +358,7 @@ impl Component for CreateUserForm {
} }
} else { html! {} } } else { html! {} }
} }
</> </div>
} }
} }
} }

7
app/src/components/group_details.rs
View File

@ -131,8 +131,9 @@ impl GroupDetails {
} }
}; };
html! { html! {
<div> <>
<h3>{"Members"}</h3> <h3>{g.display_name.to_string()}</h3>
<h5 class="fw-bold">{"Members"}</h5>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
@ -156,7 +157,7 @@ impl GroupDetails {
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </>
} }
} }

2
app/src/components/logout.rs
View File

@ -66,7 +66,7 @@ impl Component for LogoutButton {
fn view(&self) -> Html { fn view(&self) -> Html {
html! { html! {
<button <button
class="btn btn-primary" class="dropdown-item"
onclick=self.link.callback(|_| Msg::LogoutRequested)> onclick=self.link.callback(|_| Msg::LogoutRequested)>
{"Logout"} {"Logout"}
</button> </button>

19
app/src/components/user_details.rs
View File

@ -133,8 +133,8 @@ impl UserDetails {
} }
}; };
html! { html! {
<div> <>
<h3>{"Group memberships"}</h3> <h5 class="row m-3 fw-bold">{"Group memberships"}</h5>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
@ -156,7 +156,7 @@ impl UserDetails {
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </>
} }
} }
@ -213,21 +213,22 @@ impl Component for UserDetails {
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>}, (None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
(Some(u), error) => { (Some(u), error) => {
html! { html! {
<div> <>
<h3>{u.id.to_string()}</h3>
<UserDetailsForm <UserDetailsForm
user=u.clone() user=u.clone()
on_error=self.link.callback(Msg::OnError)/> on_error=self.link.callback(Msg::OnError)/>
{self.view_group_memberships(u)} <div class="row justify-content-center">
{self.view_add_group_button(u)}
<div>
<NavButton <NavButton
route=AppRoute::ChangePassword(u.id.clone()) route=AppRoute::ChangePassword(u.id.clone())
classes="btn btn-primary"> classes="btn btn-primary col-auto">
{"Change password"} {"Change password"}
</NavButton> </NavButton>
</div> </div>
{self.view_group_memberships(u)}
{self.view_add_group_button(u)}
{self.view_messages(error)} {self.view_messages(error)}
</div> </>
} }
} }
} }

46
app/src/components/user_details_form.rs
View File

@ -97,23 +97,23 @@ impl Component for UserDetailsForm {
fn view(&self) -> Html { fn view(&self) -> Html {
type Field = yew_form::Field<UserModel>; type Field = yew_form::Field<UserModel>;
html! { html! {
<> <div class="py-3">
<form class="form"> <form class="form">
<div class="form-group row"> <div class="form-group row mb-3">
<label for="userId" <label for="userId"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"User ID: "} {"User ID: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<span id="userId" class="form-constrol-static">{&self.props.user.id}</span> <span id="userId" class="form-constrol-static">{&self.props.user.id}</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="email" <label for="email"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Email*: "} {"Email*: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
class="form-control" class="form-control"
class_invalid="is-invalid has-error" class_invalid="is-invalid has-error"
@ -127,12 +127,12 @@ impl Component for UserDetailsForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="display_name" <label for="display_name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Display Name*: "} {"Display Name*: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
class="form-control" class="form-control"
class_invalid="is-invalid has-error" class_invalid="is-invalid has-error"
@ -146,12 +146,12 @@ impl Component for UserDetailsForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="first_name" <label for="first_name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"First Name: "} {"First Name: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
class="form-control" class="form-control"
form=&self.form form=&self.form
@ -163,12 +163,12 @@ impl Component for UserDetailsForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="last_name" <label for="last_name"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Last Name: "} {"Last Name: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<Field <Field
class="form-control" class="form-control"
form=&self.form form=&self.form
@ -180,19 +180,19 @@ impl Component for UserDetailsForm {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-3">
<label for="creationDate" <label for="creationDate"
class="form-label col-sm-2 col-form-label"> class="form-label col-4 col-form-label">
{"Creation date: "} {"Creation date: "}
</label> </label>
<div class="col-sm-10"> <div class="col-8">
<span id="creationDate" class="form-constrol-static">{&self.props.user.creation_date.date().naive_local()}</span> <span id="creationDate" class="form-constrol-static">{&self.props.user.creation_date.date().naive_local()}</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row justify-content-center">
<button <button
type="button" type="submit"
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-auto col-form-label"
disabled=self.task.is_some() disabled=self.task.is_some()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
{"Update"} {"Update"}
@ -202,7 +202,7 @@ impl Component for UserDetailsForm {
<div hidden=!self.just_updated> <div hidden=!self.just_updated>
<span>{"User successfully updated!"}</span> <span>{"User successfully updated!"}</span>
</div> </div>
</> </div>
} }
} }
} }

12
app/style.css Normal file
View File

@ -0,0 +1,12 @@
header h1 {
font-family: 'Bebas Neue', cursive;
}
.table>tbody {
vertical-align: middle;
}
.table>tbody a {
font-weight: 700;
text-decoration: none;
}

2
server/src/infra/tcp_server.rs
View File

@ -56,7 +56,7 @@ fn http_config<Backend>(
})) }))
// Serve index.html and main.js, and default to index.html. // Serve index.html and main.js, and default to index.html.
.route( .route(
"/{filename:(index\\.html|main\\.js)?}", "/{filename:(index\\.html|main\\.js|style\\.css)?}",
web::get().to(index), web::get().to(index),
) )
.service(web::scope("/auth").configure(auth_service::configure_server::<Backend>)) .service(web::scope("/auth").configure(auth_service::configure_server::<Backend>))