mirror of
https://github.com/nitnelave/lldap.git
synced 2023-04-12 14:25:13 +00:00
app: Add style.css, improve classes
Also change the server to be able to serve style.css.
This commit is contained in:
Valentin Tolmer
parent
3912d62623
commit
6f54f57d20
@ -21,6 +21,9 @@
|
||||
as="style" />
|
||||
<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">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -7,7 +7,7 @@ use crate::{
|
||||
group_table::GroupTable,
|
||||
login::LoginForm,
|
||||
logout::LogoutButton,
|
||||
router::{AppRoute, NavButton},
|
||||
router::{AppRoute, Link, NavButton},
|
||||
user_details::UserDetails,
|
||||
user_table::UserTable,
|
||||
},
|
||||
@ -96,9 +96,10 @@ impl Component for App {
|
||||
let link = self.link.clone();
|
||||
let is_admin = self.is_admin();
|
||||
html! {
|
||||
<div class="container">
|
||||
<h1>{ "LLDAP" }</h1>
|
||||
<div class="container shadow-sm py-3">
|
||||
{self.view_banner()}
|
||||
<div class="row justify-content-center">
|
||||
<div class="shadow-sm py-3" style="max-width: 1000px">
|
||||
<Router<AppRoute>
|
||||
render = Router::render(move |switch: AppRoute| {
|
||||
match switch {
|
||||
@ -136,6 +137,8 @@ impl Component for App {
|
||||
})
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -180,29 +183,72 @@ impl App {
|
||||
|
||||
fn view_banner(&self) -> 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! {
|
||||
<>
|
||||
<div>
|
||||
<NavButton
|
||||
classes="btn btn-primary"
|
||||
<li>
|
||||
<Link
|
||||
classes="nav-link px-2 link-dark h4"
|
||||
route=AppRoute::ListUsers>
|
||||
{"Users"}
|
||||
</NavButton>
|
||||
</div>
|
||||
<div>
|
||||
<NavButton
|
||||
classes="btn btn-primary"
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
classes="nav-link px-2 link-dark h4"
|
||||
route=AppRoute::ListGroups>
|
||||
{"Groups"}
|
||||
</NavButton>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
} } 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) />
|
||||
</li>
|
||||
</ul>
|
||||
} } else { html!{} } }
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -106,15 +106,17 @@ impl Component for CreateGroupForm {
|
||||
fn view(&self) -> Html {
|
||||
type Field = yew_form::Field<CreateGroupModel>;
|
||||
html! {
|
||||
<>
|
||||
<form
|
||||
class="form">
|
||||
<div class="form-group row">
|
||||
<div class="row justify-content-center">
|
||||
<form class="form shadow-sm py-3" style="max-width: 636px">
|
||||
<div class="row mb-3">
|
||||
<h5 class="fw-bold">{"Create a group"}</h5>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="groupname"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Group name*:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
field_name="groupname"
|
||||
@ -128,10 +130,10 @@ impl Component for CreateGroupForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row justify-content-center">
|
||||
<button
|
||||
class="btn btn-primary col-sm-1 col-form-label"
|
||||
type="button"
|
||||
class="btn btn-primary col-auto col-form-label"
|
||||
type="submit"
|
||||
disabled=self.task.is_some()
|
||||
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
||||
{"Submit"}
|
||||
@ -146,7 +148,7 @@ impl Component for CreateGroupForm {
|
||||
}
|
||||
} else { html! {} }
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -199,15 +199,17 @@ impl Component for CreateUserForm {
|
||||
fn view(&self) -> Html {
|
||||
type Field = yew_form::Field<CreateUserModel>;
|
||||
html! {
|
||||
<>
|
||||
<form
|
||||
class="form">
|
||||
<div class="form-group row">
|
||||
<div class="row justify-content-center">
|
||||
<form class="form shadow-sm py-3" style="max-width: 636px">
|
||||
<div class="row mb-3">
|
||||
<h5 class="fw-bold">{"Create a user"}</h5>
|
||||
</div>
|
||||
<div class="form-group row mb-3">
|
||||
<label for="username"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"User name*:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
field_name="username"
|
||||
@ -221,12 +223,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="email"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Email*:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
input_type="email"
|
||||
@ -241,12 +243,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="display-name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Display name*:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
autocomplete="name"
|
||||
@ -260,12 +262,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="first-name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"First name:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
autocomplete="given-name"
|
||||
@ -279,12 +281,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="last-name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Last name:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
autocomplete="family-name"
|
||||
@ -298,12 +300,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="password"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Password:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
input_type="password"
|
||||
@ -318,12 +320,12 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="confirm_password"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Confirm password:"}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
form=&self.form
|
||||
input_type="password"
|
||||
@ -338,9 +340,9 @@ impl Component for CreateUserForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row justify-content-center">
|
||||
<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()
|
||||
type="submit"
|
||||
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
|
||||
@ -356,7 +358,7 @@ impl Component for CreateUserForm {
|
||||
}
|
||||
} else { html! {} }
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,8 +131,9 @@ impl GroupDetails {
|
||||
}
|
||||
};
|
||||
html! {
|
||||
<div>
|
||||
<h3>{"Members"}</h3>
|
||||
<>
|
||||
<h3>{g.display_name.to_string()}</h3>
|
||||
<h5 class="fw-bold">{"Members"}</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -156,7 +157,7 @@ impl GroupDetails {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ impl Component for LogoutButton {
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
class="dropdown-item"
|
||||
onclick=self.link.callback(|_| Msg::LogoutRequested)>
|
||||
{"Logout"}
|
||||
</button>
|
||||
|
||||
@ -133,8 +133,8 @@ impl UserDetails {
|
||||
}
|
||||
};
|
||||
html! {
|
||||
<div>
|
||||
<h3>{"Group memberships"}</h3>
|
||||
<>
|
||||
<h5 class="row m-3 fw-bold">{"Group memberships"}</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -156,7 +156,7 @@ impl UserDetails {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,21 +213,22 @@ impl Component for UserDetails {
|
||||
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
|
||||
(Some(u), error) => {
|
||||
html! {
|
||||
<div>
|
||||
<>
|
||||
<h3>{u.id.to_string()}</h3>
|
||||
<UserDetailsForm
|
||||
user=u.clone()
|
||||
on_error=self.link.callback(Msg::OnError)/>
|
||||
{self.view_group_memberships(u)}
|
||||
{self.view_add_group_button(u)}
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<NavButton
|
||||
route=AppRoute::ChangePassword(u.id.clone())
|
||||
classes="btn btn-primary">
|
||||
classes="btn btn-primary col-auto">
|
||||
{"Change password"}
|
||||
</NavButton>
|
||||
</div>
|
||||
{self.view_group_memberships(u)}
|
||||
{self.view_add_group_button(u)}
|
||||
{self.view_messages(error)}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,23 +97,23 @@ impl Component for UserDetailsForm {
|
||||
fn view(&self) -> Html {
|
||||
type Field = yew_form::Field<UserModel>;
|
||||
html! {
|
||||
<>
|
||||
<div class="py-3">
|
||||
<form class="form">
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="userId"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"User ID: "}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<span id="userId" class="form-constrol-static">{&self.props.user.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="email"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Email*: "}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
class="form-control"
|
||||
class_invalid="is-invalid has-error"
|
||||
@ -127,12 +127,12 @@ impl Component for UserDetailsForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="display_name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Display Name*: "}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
class="form-control"
|
||||
class_invalid="is-invalid has-error"
|
||||
@ -146,12 +146,12 @@ impl Component for UserDetailsForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="first_name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"First Name: "}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
class="form-control"
|
||||
form=&self.form
|
||||
@ -163,12 +163,12 @@ impl Component for UserDetailsForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="last_name"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Last Name: "}
|
||||
</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-8">
|
||||
<Field
|
||||
class="form-control"
|
||||
form=&self.form
|
||||
@ -180,19 +180,19 @@ impl Component for UserDetailsForm {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row mb-3">
|
||||
<label for="creationDate"
|
||||
class="form-label col-sm-2 col-form-label">
|
||||
class="form-label col-4 col-form-label">
|
||||
{"Creation date: "}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="form-group row justify-content-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary col-sm-1 col-form-label"
|
||||
type="submit"
|
||||
class="btn btn-primary col-auto col-form-label"
|
||||
disabled=self.task.is_some()
|
||||
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
|
||||
{"Update"}
|
||||
@ -202,7 +202,7 @@ impl Component for UserDetailsForm {
|
||||
<div hidden=!self.just_updated>
|
||||
<span>{"User successfully updated!"}</span>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
12
app/style.css
Normal file
12
app/style.css
Normal 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;
|
||||
}
|
||||
@ -56,7 +56,7 @@ fn http_config<Backend>(
|
||||
}))
|
||||
// Serve index.html and main.js, and default to index.html.
|
||||
.route(
|
||||
"/{filename:(index\\.html|main\\.js)?}",
|
||||
"/{filename:(index\\.html|main\\.js|style\\.css)?}",
|
||||
web::get().to(index),
|
||||
)
|
||||
.service(web::scope("/auth").configure(auth_service::configure_server::<Backend>))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user