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" />
<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>

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

@ -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,45 +96,48 @@ impl Component for App {
let link = self.link.clone();
let is_admin = self.is_admin();
html! {
<div class="container">
<h1>{ "LLDAP" }</h1>
{self.view_banner()}
<Router<AppRoute>
render = Router::render(move |switch: AppRoute| {
match switch {
AppRoute::Login => html! {
<LoginForm on_logged_in=link.callback(Msg::Login)/>
},
AppRoute::CreateUser => html! {
<CreateUserForm/>
},
AppRoute::Index | AppRoute::ListUsers => html! {
<div>
<UserTable />
<NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
</div>
},
AppRoute::CreateGroup => html! {
<CreateGroupForm/>
},
AppRoute::ListGroups => html! {
<div>
<GroupTable />
<NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>{"Create a group"}</NavButton>
</div>
},
AppRoute::GroupDetails(group_id) => html! {
<GroupDetails group_id=group_id />
},
AppRoute::UserDetails(username) => html! {
<UserDetails username=username.clone() is_admin=is_admin />
},
AppRoute::ChangePassword(username) => html! {
<ChangePasswordForm username=username.clone() is_admin=is_admin />
}
}
})
/>
<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 {
AppRoute::Login => html! {
<LoginForm on_logged_in=link.callback(Msg::Login)/>
},
AppRoute::CreateUser => html! {
<CreateUserForm/>
},
AppRoute::Index | AppRoute::ListUsers => html! {
<div>
<UserTable />
<NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
</div>
},
AppRoute::CreateGroup => html! {
<CreateGroupForm/>
},
AppRoute::ListGroups => html! {
<div>
<GroupTable />
<NavButton classes="btn btn-primary" route=AppRoute::CreateGroup>{"Create a group"}</NavButton>
</div>
},
AppRoute::GroupDetails(group_id) => html! {
<GroupDetails group_id=group_id />
},
AppRoute::UserDetails(username) => html! {
<UserDetails username=username.clone() is_admin=is_admin />
},
AppRoute::ChangePassword(username) => html! {
<ChangePasswordForm username=username.clone() is_admin=is_admin />
}
}
})
/>
</div>
</div>
</div>
}
}
@ -180,29 +183,72 @@ impl App {
fn view_banner(&self) -> Html {
html! {
<>
{if self.is_admin() { html! {
<>
<div>
<NavButton
classes="btn btn-primary"
route=AppRoute::ListUsers>
{"Users"}
</NavButton>
<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! {
<>
<li>
<Link
classes="nav-link px-2 link-dark h4"
route=AppRoute::ListUsers>
{"Users"}
</Link>
</li>
<li>
<Link
classes="nav-link px-2 link-dark h4"
route=AppRoute::ListGroups>
{"Groups"}
</Link>
</li>
</>
} } else { 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>
<NavButton
classes="btn btn-primary"
route=AppRoute::ListGroups>
{"Groups"}
</NavButton>
</div>
</>
} } else { html!{} } }
{if self.user_info.is_some() { html! {
<LogoutButton on_logged_out=self.link.callback(|_| Msg::Logout) />
}} else { html! {} }}
</>
</div>
</div>
</header>
}
}

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

@ -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>
}
}
}

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

@ -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>
}
}
}

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

@ -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>
</>
}
}

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

@ -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>

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

@ -133,30 +133,30 @@ impl UserDetails {
}
};
html! {
<div>
<h3>{"Group memberships"}</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr key="headerRow">
<th>{"Group"}</th>
{ if self.props.is_admin { html!{ <th></th> }} else { html!{} }}
</tr>
</thead>
<tbody>
{if u.groups.is_empty() {
html! {
<tr key="EmptyRow">
<td>{"Not member of any group"}</td>
</tr>
}
} else {
html! {<>{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}</>}
}}
</tbody>
</table>
</div>
</div>
<>
<h5 class="row m-3 fw-bold">{"Group memberships"}</h5>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr key="headerRow">
<th>{"Group"}</th>
{ if self.props.is_admin { html!{ <th></th> }} else { html!{} }}
</tr>
</thead>
<tbody>
{if u.groups.is_empty() {
html! {
<tr key="EmptyRow">
<td>{"Not member of any group"}</td>
</tr>
}
} else {
html! {<>{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}</>}
}}
</tbody>
</table>
</div>
</>
}
}
@ -213,21 +213,22 @@ impl Component for UserDetails {
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
(Some(u), error) => {
html! {
<div>
<UserDetailsForm
user=u.clone()
on_error=self.link.callback(Msg::OnError)/>
{self.view_group_memberships(u)}
{self.view_add_group_button(u)}
<div>
<NavButton
route=AppRoute::ChangePassword(u.id.clone())
classes="btn btn-primary">
{"Change password"}
</NavButton>
</div>
{self.view_messages(error)}
<>
<h3>{u.id.to_string()}</h3>
<UserDetailsForm
user=u.clone()
on_error=self.link.callback(Msg::OnError)/>
<div class="row justify-content-center">
<NavButton
route=AppRoute::ChangePassword(u.id.clone())
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)}
</>
}
}
}

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

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