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 Bootstrap classes.

Browse Source
This commit is contained in:
Valentin Tolmer 2021-09-19 19:44:53 +02:00 committed by nitnelave
parent 00efdb42af
commit a952968e9f
11 changed files with 307 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/index.html
View File

@ -5,7 +5,18 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LLDAP Administration</title> <title>LLDAP Administration</title>
<script src="/pkg/bundle.js" defer></script> <script src="/pkg/bundle.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="preload stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" as="style" /> <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="preload stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
as="style" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
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">
</head> </head>
<body> <body>

5
app/src/components/add_user_to_group.rs
View File

@ -195,8 +195,9 @@ impl Component for AddUserToGroupComponent {
</Select> </Select>
</td> </td>
<td> <td>
<button onclick=self.link.callback( <button
|_| Msg::SubmitAddGroup)> class="btn btn-success"
onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
{"Add"} {"Add"}
</button> </button>
</td> </td>

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

@ -93,7 +93,7 @@ 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> <div class="container">
<h1>{ "LLDAP" }</h1> <h1>{ "LLDAP" }</h1>
<Router<AppRoute> <Router<AppRoute>
render = Router::render(move |switch: AppRoute| { render = Router::render(move |switch: AppRoute| {
@ -111,7 +111,7 @@ impl Component for App {
<div> <div>
<LogoutButton on_logged_out=link.callback(|_| Msg::Logout) /> <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
<UserTable /> <UserTable />
<NavButton route=AppRoute::CreateUser>{"Create a user"}</NavButton> <NavButton classes="btn btn-primary" route=AppRoute::CreateUser>{"Create a user"}</NavButton>
</div> </div>
}, },
AppRoute::UserDetails(username) => html! { AppRoute::UserDetails(username) => html! {

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

@ -53,9 +53,9 @@ impl CreateUserForm {
email: get_element("email") email: get_element("email")
.filter(not_empty) .filter(not_empty)
.ok_or_else(|| anyhow!("Missing email"))?, .ok_or_else(|| anyhow!("Missing email"))?,
displayName: get_element("displayname").filter(not_empty), displayName: get_element("display-name").filter(not_empty),
firstName: get_element("firstname").filter(not_empty), firstName: get_element("first-name").filter(not_empty),
lastName: get_element("lastname").filter(not_empty), lastName: get_element("last-name").filter(not_empty),
}, },
}; };
self._task = Some(HostService::graphql_query::<CreateUser>( self._task = Some(HostService::graphql_query::<CreateUser>(
@ -175,39 +175,107 @@ impl Component for CreateUserForm {
fn view(&self) -> Html { fn view(&self) -> Html {
html! { html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })> <>
<div> <form
<label for="username">{"User name:"}</label> class="form"
<input type="text" id="username" required=true /> ref=self.node_ref.clone()
onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })>
<div class="form-group row">
<label for="username"
class="form-label col-sm-2 col-form-label">
{"User name*:"}
</label>
<div class="col-sm-10">
<input
type="text"
id="username"
class="form-control"
autocomplete="username"
required=true />
</div> </div>
<div>
<label for="email">{"Email:"}</label>
<input type="email" id="email" required=true />
</div> </div>
<div> <div class="form-group row">
<label for="displayname">{"Display name:"}</label> <label for="email"
<input type="text" id="displayname" /> class="form-label col-sm-2 col-form-label">
{"Email*:"}
</label>
<div class="col-sm-10">
<input
type="email"
id="email"
class="form-control"
autocomplete="email"
required=true />
</div> </div>
<div>
<label for="firstname">{"First name:"}</label>
<input type="text" id="firstname" />
</div> </div>
<div> <div class="form-group row">
<label for="lastname">{"Last name:"}</label> <label for="display-name"
<input type="text" id="lastname" /> class="form-label col-sm-2 col-form-label">
{"Display name*:"}
</label>
<div class="col-sm-10">
<input
type="text"
autocomplete="name"
class="form-control"
id="display-name" />
</div> </div>
<div>
<label for="password">{"Password:"}</label>
<input type="password" id="password" autocomplete="new-password" minlength="8" />
</div> </div>
<button type="submit">{"Submit"}</button> <div class="form-group row">
<div> <label for="first-name"
{ if let Some(e) = &self.error { class="form-label col-sm-2 col-form-label">
html! { e.to_string() } {"First name:"}
} else { html! {} } </label>
} <div class="col-sm-10">
<input
type="text"
autocomplete="given-name"
class="form-control"
id="first-name" />
</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">
<input
type="text"
autocomplete="family-name"
class="form-control"
id="last-name" />
</div>
</div>
<div class="form-group row">
<label for="password"
class="form-label col-sm-2 col-form-label">
{"Password:"}
</label>
<div class="col-sm-10">
<input
type="password"
id="password"
class="form-control"
autocomplete="new-password"
minlength="8" />
</div>
</div>
<div class="form-group row">
<button
class="btn btn-primary col-sm-1 col-form-label"
type="submit">{"Submit"}</button>
</div> </div>
</form> </form>
{ if let Some(e) = &self.error {
html! {
<div class="alert alert-danger">
{e.to_string() }
</div>
}
} else { html! {} }
}
</>
} }
} }
} }

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

@ -142,17 +142,45 @@ impl Component for LoginForm {
fn view(&self) -> Html { fn view(&self) -> Html {
html! { html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })> <form
<div> ref=self.node_ref.clone()
<label for="username">{"User name:"}</label> class="form center-block col-sm-4 col-offset-4"
<input type="text" id="username" required=true /> onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::Submit })>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="bi-person-fill"/>
</span>
</div> </div>
<div> <input
<label for="password">{"Password:"}</label> type="text"
<input type="password" id="password" required=true autocomplete="current-password" /> class="form-control"
id="username"
placeholder="Username"
required=true />
</div> </div>
<button type="submit">{"Login"}</button> <div class="input-group">
<div> <div class="input-group-prepend">
<span class="input-group-text">
<i class="bi-lock-fill"/>
</span>
</div>
<input
type="password"
class="form-control"
id="password"
required=true
placeholder="Email"
autocomplete="current-password" />
</div>
<div class="form-group">
<button
type="submit"
class="btn btn-primary">
{"Login"}
</button>
</div>
<div class="form-group">
{ if let Some(e) = &self.error { { if let Some(e) = &self.error {
html! { e.to_string() } html! { e.to_string() }
} else { html! {} } } else { html! {} }

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

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

8
app/src/components/remove_user_from_group.rs
View File

@ -102,7 +102,13 @@ impl Component for RemoveUserFromGroupComponent {
<> <>
<td>{&group.display_name}</td> <td>{&group.display_name}</td>
{ if self.props.is_admin { html! { { if self.props.is_admin { html! {
<td><button onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)>{"-"}</button></td> <td>
<button
class="btn btn-danger"
onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)>
<i class="bi-x-circle-fill" aria-label="Remove user from group" />
</button>
</td>
}} else { html!{} } }} else { html!{} }
} }
</> </>

4
app/src/components/router.rs
View File

@ -7,10 +7,10 @@ use yew_router::{
pub enum AppRoute { pub enum AppRoute {
#[to = "/login"] #[to = "/login"]
Login, Login,
#[to = "/users"]
ListUsers,
#[to = "/users/create"] #[to = "/users/create"]
CreateUser, CreateUser,
#[to = "/users"]
ListUsers,
#[to = "/user/{user_id}/password"] #[to = "/user/{user_id}/password"]
ChangePassword(String), ChangePassword(String),
#[to = "/user/{user_id}"] #[to = "/user/{user_id}"]

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

@ -118,18 +118,33 @@ impl UserDetails {
}; };
html! { html! {
<div> <div>
<span>{"Group memberships"}</span> <h3>{"Group memberships"}</h3>
<table> <div class="table-responsive">
<table class="table table-striped">
<thead>
<tr key="headerRow"> <tr key="headerRow">
<th>{"Group"}</th> <th>{"Group"}</th>
{ if self.props.is_admin { html!{ <th></th> }} else { html!{} }} { if self.props.is_admin { html!{ <th></th> }} else { html!{} }}
</tr> </tr>
{u.groups.iter().map(make_group_row).collect::<Vec<_>>()} </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<_>>()}</>}
}}
<hr/>
<tr key="groupToAddRow"> <tr key="groupToAddRow">
{self.view_add_group_button(u)} {self.view_add_group_button(u)}
</tr> </tr>
</tbody>
</table> </table>
</div> </div>
</div>
} }
} }
@ -193,7 +208,11 @@ impl Component for UserDetails {
{self.view_messages(error)} {self.view_messages(error)}
{self.view_group_memberships(u)} {self.view_group_memberships(u)}
<div> <div>
<NavButton route=AppRoute::ChangePassword(u.id.clone())>{"Change password"}</NavButton> <NavButton
route=AppRoute::ChangePassword(u.id.clone())
classes="btn btn-primary">
{"Change password"}
</NavButton>
</div> </div>
</div> </div>
} }

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

@ -1,5 +1,5 @@
use crate::{components::user_details::User, infra::api::HostService}; use crate::{components::user_details::User, infra::api::HostService};
use anyhow::{Error, Result}; use anyhow::{bail, Error, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use validator_derive::Validate; use validator_derive::Validate;
use yew::{ use yew::{
@ -101,45 +101,104 @@ impl Component for UserDetailsForm {
type Field = yew_form::Field<UserModel>; type Field = yew_form::Field<UserModel>;
html! { html! {
<> <>
<form> <form class="form">
<div class="form-group"> <div class="form-group row">
<span>{"User ID: "}</span> <label for="userId"
<span>{&self.props.user.id}</span> 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"> </div>
<label for="email">{"Email: "}</label> <div class="form-group row">
<Field form=&self.form field_name="email" oninput=self.link.callback(|_| Msg::Update) /> <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"> <div class="invalid-feedback">
{&self.form.field_message("email")} {&self.form.field_message("email")}
</div> </div>
</div> </div>
<div class="form-group"> </div>
<label for="display_name">{"Display Name: "}</label> <div class="form-group row">
<Field form=&self.form field_name="display_name" oninput=self.link.callback(|_| Msg::Update) /> <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"> <div class="invalid-feedback">
{&self.form.field_message("display_name")} {&self.form.field_message("display_name")}
</div> </div>
</div> </div>
<div class="form-group"> </div>
<label for="first_name">{"First Name: "}</label> <div class="form-group row">
<Field form=&self.form field_name="first_name" oninput=self.link.callback(|_| Msg::Update) /> <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"> <div class="invalid-feedback">
{&self.form.field_message("first_name")} {&self.form.field_message("first_name")}
</div> </div>
</div> </div>
<div class="form-group"> </div>
<label for="last_name">{"Last Name: "}</label> <div class="form-group row">
<Field form=&self.form field_name="last_name" oninput=self.link.callback(|_| Msg::Update) /> <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"> <div class="invalid-feedback">
{&self.form.field_message("last_name")} {&self.form.field_message("last_name")}
</div> </div>
</div> </div>
<div class="form-group">
<span>{"Creation date: "}</span>
<span>{&self.props.user.creation_date.with_timezone(&chrono::Local)}</span>
</div> </div>
<div class="form-group"> <div class="form-group row">
<button type="button" onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>{"Update"}</button> <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.with_timezone(&chrono::Local)}</span>
</div>
</div>
<div class="form-group row">
<button
type="button"
class="btn btn-primary col-sm-1 col-form-label"
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
<b>{"Update"}</b>
</button>
</div> </div>
</form> </form>
<div hidden=!self.just_updated> <div hidden=!self.just_updated>
@ -160,6 +219,9 @@ impl UserDetailsForm {
} }
fn submit_user_update_form(&mut self) -> Result<bool> { fn submit_user_update_form(&mut self) -> Result<bool> {
if !self.form.validate() {
bail!("Invalid inputs");
}
let base_user = &self.props.user; let base_user = &self.props.user;
let mut user_input = update_user::UpdateUserInput { let mut user_input = update_user::UpdateUserInput {
id: self.props.user.id.clone(), id: self.props.user.id.clone(),

10
app/src/components/user_table.rs
View File

@ -4,7 +4,6 @@ use crate::{
}; };
use anyhow::{anyhow, Result}; use anyhow::{anyhow, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use yew::format::Json;
use yew::prelude::*; use yew::prelude::*;
use yew::services::{fetch::FetchTask, ConsoleService}; use yew::services::{fetch::FetchTask, ConsoleService};
@ -65,7 +64,6 @@ impl Component for UserTable {
match msg { match msg {
Msg::ListUsersResponse(Ok(users)) => { Msg::ListUsersResponse(Ok(users)) => {
self.users = Some(Ok(users.users.into_iter().collect())); self.users = Some(Ok(users.users.into_iter().collect()));
ConsoleService::log(format!("Response: {:?}", Json(&self.users)).as_str());
true true
} }
Msg::ListUsersResponse(Err(e)) => { Msg::ListUsersResponse(Err(e)) => {
@ -94,7 +92,9 @@ impl Component for UserTable {
}; };
let make_table = |users: &Vec<User>| { let make_table = |users: &Vec<User>| {
html! { html! {
<table> <div class="table-responsive">
<table class="table table-striped">
<thead>
<tr> <tr>
<th>{"User ID"}</th> <th>{"User ID"}</th>
<th>{"Email"}</th> <th>{"Email"}</th>
@ -103,8 +103,12 @@ impl Component for UserTable {
<th>{"Last name"}</th> <th>{"Last name"}</th>
<th>{"Creation date"}</th> <th>{"Creation date"}</th>
</tr> </tr>
</thead>
<tbody>
{users.iter().map(make_user_row).collect::<Vec<_>>()} {users.iter().map(make_user_row).collect::<Vec<_>>()}
</tbody>
</table> </table>
</div>
} }
}; };
match &self.users { match &self.users {