app: update yew to 0.19

This is a massive change to all the components, since the interface
changed.

There are opportunities to greatly simplify some components by turning
them into functional_components, but this work has tried to stay as
mechanical as possible.
This commit is contained in:
Valentin Tolmer
2023-03-08 18:05:08 +01:00
committed by nitnelave
parent 8d44717588
commit b2cfc0ed03
25 changed files with 893 additions and 1127 deletions

View File

@@ -52,23 +52,25 @@ pub struct Props {
}
impl CommonComponent<AddGroupMemberComponent> for AddGroupMemberComponent {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::UserListResponse(response) => {
self.user_list = Some(response?.users);
self.common.cancel_task();
}
Msg::SubmitAddMember => return self.submit_add_member(),
Msg::SubmitAddMember => return self.submit_add_member(ctx),
Msg::AddMemberResponse(response) => {
response?;
self.common.cancel_task();
let user = self
.selected_user
.as_ref()
.expect("Could not get selected user")
.clone();
// Remove the user from the dropdown.
self.common.on_user_added_to_group.emit(user);
ctx.props().on_user_added_to_group.emit(user);
}
Msg::SelectionChanged(option_props) => {
let was_some = self.selected_user.is_some();
@@ -88,23 +90,25 @@ impl CommonComponent<AddGroupMemberComponent> for AddGroupMemberComponent {
}
impl AddGroupMemberComponent {
fn get_user_list(&mut self) {
fn get_user_list(&mut self, ctx: &Context<Self>) {
self.common.call_graphql::<ListUserNames, _>(
ctx,
list_user_names::Variables { filters: None },
Msg::UserListResponse,
"Error trying to fetch user list",
);
}
fn submit_add_member(&mut self) -> Result<bool> {
fn submit_add_member(&mut self, ctx: &Context<Self>) -> Result<bool> {
let user_id = match self.selected_user.clone() {
None => return Ok(false),
Some(user) => user.id,
};
self.common.call_graphql::<AddUserToGroup, _>(
ctx,
add_user_to_group::Variables {
user: user_id,
group: self.common.group_id,
group: ctx.props().group_id,
},
Msg::AddMemberResponse,
"Error trying to initiate adding the user to a group",
@@ -112,8 +116,8 @@ impl AddGroupMemberComponent {
Ok(true)
}
fn get_selectable_user_list(&self, user_list: &[User]) -> Vec<User> {
let user_groups = self.common.users.iter().collect::<HashSet<_>>();
fn get_selectable_user_list(&self, ctx: &Context<Self>, user_list: &[User]) -> Vec<User> {
let user_groups = ctx.props().users.iter().collect::<HashSet<_>>();
user_list
.iter()
.filter(|u| !user_groups.contains(u))
@@ -126,32 +130,29 @@ impl Component for AddGroupMemberComponent {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut res = Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
user_list: None,
selected_user: None,
};
res.get_user_list();
res.get_user_list(ctx);
res
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update_and_report_error(
self,
ctx,
msg,
self.common.on_error.clone(),
ctx.props().on_error.clone(),
)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = ctx.link();
if let Some(user_list) = &self.user_list {
let to_add_user_list = self.get_selectable_user_list(user_list);
let to_add_user_list = self.get_selectable_user_list(ctx, user_list);
#[allow(unused_braces)]
let make_select_option = |user: User| {
html_nested! {

View File

@@ -64,16 +64,18 @@ pub struct Props {
}
impl CommonComponent<AddUserToGroupComponent> for AddUserToGroupComponent {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::GroupListResponse(response) => {
self.group_list = Some(response?.groups.into_iter().map(Into::into).collect());
self.common.cancel_task();
}
Msg::SubmitAddGroup => return self.submit_add_group(),
Msg::SubmitAddGroup => return self.submit_add_group(ctx),
Msg::AddGroupResponse(response) => {
response?;
self.common.cancel_task();
// Adding the user to the group succeeded, we're not in the process of adding a
// group anymore.
let group = self
@@ -82,7 +84,7 @@ impl CommonComponent<AddUserToGroupComponent> for AddUserToGroupComponent {
.expect("Could not get selected group")
.clone();
// Remove the group from the dropdown.
self.common.on_user_added_to_group.emit(group);
ctx.props().on_user_added_to_group.emit(group);
}
Msg::SelectionChanged(option_props) => {
let was_some = self.selected_group.is_some();
@@ -102,22 +104,24 @@ impl CommonComponent<AddUserToGroupComponent> for AddUserToGroupComponent {
}
impl AddUserToGroupComponent {
fn get_group_list(&mut self) {
fn get_group_list(&mut self, ctx: &Context<Self>) {
self.common.call_graphql::<GetGroupList, _>(
ctx,
get_group_list::Variables,
Msg::GroupListResponse,
"Error trying to fetch group list",
);
}
fn submit_add_group(&mut self) -> Result<bool> {
fn submit_add_group(&mut self, ctx: &Context<Self>) -> Result<bool> {
let group_id = match &self.selected_group {
None => return Ok(false),
Some(group) => group.id,
};
self.common.call_graphql::<AddUserToGroup, _>(
ctx,
add_user_to_group::Variables {
user: self.common.username.clone(),
user: ctx.props().username.clone(),
group: group_id,
},
Msg::AddGroupResponse,
@@ -126,8 +130,8 @@ impl AddUserToGroupComponent {
Ok(true)
}
fn get_selectable_group_list(&self, group_list: &[Group]) -> Vec<Group> {
let user_groups = self.common.groups.iter().collect::<HashSet<_>>();
fn get_selectable_group_list(&self, props: &Props, group_list: &[Group]) -> Vec<Group> {
let user_groups = props.groups.iter().collect::<HashSet<_>>();
group_list
.iter()
.filter(|g| !user_groups.contains(g))
@@ -139,32 +143,29 @@ impl AddUserToGroupComponent {
impl Component for AddUserToGroupComponent {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut res = Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
group_list: None,
selected_group: None,
};
res.get_group_list();
res.get_group_list(ctx);
res
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update_and_report_error(
self,
ctx,
msg,
self.common.on_error.clone(),
ctx.props().on_error.clone(),
)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = ctx.link();
if let Some(group_list) = &self.group_list {
let to_add_group_list = self.get_selectable_group_list(group_list);
let to_add_group_list = self.get_selectable_group_list(ctx.props(), group_list);
#[allow(unused_braces)]
let make_select_option = |group: Group| {
html_nested! {

View File

@@ -9,7 +9,7 @@ use crate::{
logout::LogoutButton,
reset_password_step1::ResetPasswordStep1Form,
reset_password_step2::ResetPasswordStep2Form,
router::{AppRoute, Link, NavButton},
router::{AppRoute, Link, Redirect},
user_details::UserDetails,
user_table::UserTable,
},
@@ -17,21 +17,31 @@ use crate::{
};
use gloo_console::error;
use yew::{prelude::*, services::fetch::FetchTask};
use yew::{
function_component,
html::Scope,
prelude::{html, Component, Html},
Context,
};
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
router::Router,
service::RouteService,
prelude::{History, Location},
scope_ext::RouterScopeExt,
BrowserRouter, Switch,
};
#[function_component(AppContainer)]
pub fn app_container() -> Html {
html! {
<BrowserRouter>
<App />
</BrowserRouter>
}
}
pub struct App {
link: ComponentLink<Self>,
user_info: Option<(String, bool)>,
redirect_to: Option<AppRoute>,
route_dispatcher: RouteAgentDispatcher,
password_reset_enabled: Option<bool>,
task: Option<FetchTask>,
}
pub enum Msg {
@@ -44,9 +54,8 @@ impl Component for App {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
let mut app = Self {
link,
fn create(ctx: &Context<Self>) -> Self {
let app = Self {
user_info: get_cookie("user_id")
.unwrap_or_else(|e| {
error!(&e.to_string());
@@ -60,48 +69,40 @@ impl Component for App {
None
})
}),
redirect_to: Self::get_redirect_route(),
route_dispatcher: RouteAgentDispatcher::new(),
redirect_to: Self::get_redirect_route(ctx),
password_reset_enabled: None,
task: None,
};
app.task = Some(
HostService::probe_password_reset(
app.link.callback_once(Msg::PasswordResetProbeFinished),
)
.unwrap(),
);
app.apply_initial_redirections();
ctx.link().send_future(async move {
Msg::PasswordResetProbeFinished(HostService::probe_password_reset().await)
});
app.apply_initial_redirections(ctx);
app
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
let history = ctx.link().history().unwrap();
match msg {
Msg::Login((user_name, is_admin)) => {
self.user_info = Some((user_name.clone(), is_admin));
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(
self.redirect_to.take().unwrap_or_else(|| {
if is_admin {
AppRoute::ListUsers
} else {
AppRoute::UserDetails(user_name.clone())
}
}),
)));
history.push(self.redirect_to.take().unwrap_or_else(|| {
if is_admin {
AppRoute::ListUsers
} else {
AppRoute::UserDetails {
user_id: user_name.clone(),
}
}
}));
}
Msg::Logout => {
self.user_info = None;
self.redirect_to = None;
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(AppRoute::Login)));
history.push(AppRoute::Login);
}
Msg::PasswordResetProbeFinished(Ok(enabled)) => {
self.task = None;
self.password_reset_enabled = Some(enabled);
}
Msg::PasswordResetProbeFinished(Err(err)) => {
self.task = None;
self.password_reset_enabled = Some(false);
error!(&format!(
"Could not probe for password reset support: {err:#}"
@@ -111,24 +112,20 @@ impl Component for App {
true
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
let link = self.link.clone();
fn view(&self, ctx: &Context<Self>) -> Html {
let link = ctx.link().clone();
let is_admin = self.is_admin();
let password_reset_enabled = self.password_reset_enabled;
html! {
<div>
{self.view_banner()}
{self.view_banner(ctx)}
<div class="container py-3 bg-kug">
<div class="row justify-content-center" style="padding-bottom: 80px;">
<div class="py-3" style="max-width: 1000px">
<Router<AppRoute>
render={Router::render(move |s| Self::dispatch_route(s, &link, is_admin, password_reset_enabled))}
<main class="py-3" style="max-width: 1000px">
<Switch<AppRoute>
render={Switch::render(move |routes| Self::dispatch_route(routes, &link, is_admin, password_reset_enabled))}
/>
</div>
</main>
</div>
{self.view_footer()}
</div>
@@ -138,59 +135,50 @@ impl Component for App {
}
impl App {
fn get_redirect_route() -> Option<AppRoute> {
let route_service = RouteService::<()>::new();
let current_route = route_service.get_path();
if current_route.is_empty()
|| current_route == "/"
|| current_route.contains("login")
|| current_route.contains("reset-password")
{
None
} else {
use yew_router::Switch;
AppRoute::from_route_part::<()>(current_route, None).0
}
// Get the page to land on after logging in, defaulting to the index.
fn get_redirect_route(ctx: &Context<Self>) -> Option<AppRoute> {
let route = ctx.link().history().unwrap().location().route::<AppRoute>();
route.filter(|route| {
!matches!(
route,
AppRoute::Index
| AppRoute::Login
| AppRoute::StartResetPassword
| AppRoute::FinishResetPassword { token: _ }
)
})
}
fn apply_initial_redirections(&mut self) {
let route_service = RouteService::<()>::new();
let current_route = route_service.get_path();
if current_route.contains("reset-password") {
if self.password_reset_enabled == Some(false) {
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(AppRoute::Login)));
}
return;
}
match &self.user_info {
None => {
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(AppRoute::Login)));
}
Some((user_name, is_admin)) => match &self.redirect_to {
Some(url) => {
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(url.clone())));
fn apply_initial_redirections(&self, ctx: &Context<Self>) {
let history = ctx.link().history().unwrap();
let route = history.location().route::<AppRoute>();
let redirection = match (route, &self.user_info, &self.redirect_to) {
(
Some(AppRoute::StartResetPassword | AppRoute::FinishResetPassword { token: _ }),
_,
_,
) if self.password_reset_enabled == Some(false) => Some(AppRoute::Login),
(None, _, _) | (_, None, _) => Some(AppRoute::Login),
// User is logged in, a URL was given, don't redirect.
(_, Some(_), Some(_)) => None,
(_, Some((user_name, is_admin)), None) => {
if *is_admin {
Some(AppRoute::ListUsers)
} else {
Some(AppRoute::UserDetails {
user_id: user_name.clone(),
})
}
None => {
if *is_admin {
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(AppRoute::ListUsers)));
} else {
self.route_dispatcher
.send(RouteRequest::ReplaceRoute(Route::from(
AppRoute::UserDetails(user_name.clone()),
)));
}
}
},
}
};
if let Some(redirect_to) = redirection {
history.push(redirect_to);
}
}
fn dispatch_route(
switch: AppRoute,
link: &ComponentLink<Self>,
switch: &AppRoute,
link: &Scope<Self>,
is_admin: bool,
password_reset_enabled: Option<bool>,
) -> Html {
@@ -204,10 +192,10 @@ impl App {
AppRoute::Index | AppRoute::ListUsers => html! {
<div>
<UserTable />
<NavButton classes="btn btn-primary" route={AppRoute::CreateUser}>
<Link classes="btn btn-primary" to={AppRoute::CreateUser}>
<i class="bi-person-plus me-2"></i>
{"Create a user"}
</NavButton>
</Link>
</div>
},
AppRoute::CreateGroup => html! {
@@ -216,41 +204,40 @@ impl App {
AppRoute::ListGroups => html! {
<div>
<GroupTable />
<NavButton classes="btn btn-primary" route={AppRoute::CreateGroup}>
<Link classes="btn btn-primary" to={AppRoute::CreateGroup}>
<i class="bi-plus-circle me-2"></i>
{"Create a group"}
</NavButton>
</Link>
</div>
},
AppRoute::GroupDetails(group_id) => html! {
<GroupDetails group_id={group_id} />
AppRoute::GroupDetails { group_id } => html! {
<GroupDetails group_id={*group_id} />
},
AppRoute::UserDetails(username) => html! {
<UserDetails username={username} is_admin={is_admin} />
AppRoute::UserDetails { user_id } => html! {
<UserDetails username={user_id.clone()} is_admin={is_admin} />
},
AppRoute::ChangePassword(username) => html! {
<ChangePasswordForm username={username} is_admin={is_admin} />
AppRoute::ChangePassword { user_id } => html! {
<ChangePasswordForm username={user_id.clone()} is_admin={is_admin} />
},
AppRoute::StartResetPassword => match password_reset_enabled {
Some(true) => html! { <ResetPasswordStep1Form /> },
Some(false) => {
App::dispatch_route(AppRoute::Login, link, is_admin, password_reset_enabled)
html! { <Redirect to={AppRoute::Login}/> }
}
None => html! {},
},
AppRoute::FinishResetPassword(token) => match password_reset_enabled {
Some(true) => html! { <ResetPasswordStep2Form token={token} /> },
AppRoute::FinishResetPassword { token } => match password_reset_enabled {
Some(true) => html! { <ResetPasswordStep2Form token={token.clone()} /> },
Some(false) => {
App::dispatch_route(AppRoute::Login, link, is_admin, password_reset_enabled)
html! { <Redirect to={AppRoute::Login}/> }
}
None => html! {},
},
}
}
fn view_banner(&self) -> Html {
let link = &self.link;
fn view_banner(&self, ctx: &Context<Self>) -> Html {
html! {
<header class="p-2 mb-3 border-bottom">
<div class="container">
@@ -265,7 +252,7 @@ impl App {
<li>
<Link
classes="nav-link px-2 link-dark h6"
route={AppRoute::ListUsers}>
to={AppRoute::ListUsers}>
<i class="bi-people me-2"></i>
{"Users"}
</Link>
@@ -273,7 +260,7 @@ impl App {
<li>
<Link
classes="nav-link px-2 link-dark h6"
route={AppRoute::ListGroups}>
to={AppRoute::ListGroups}>
<i class="bi-collection me-2"></i>
{"Groups"}
</Link>
@@ -281,55 +268,59 @@ impl App {
</>
} } else { html!{} } }
</ul>
{
if let Some((user_id, _)) = &self.user_info {
html! {
<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>
<span class="ms-2">
{user_id}
</span>
</a>
<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())}>
{"View details"}
</Link>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<LogoutButton on_logged_out={link.callback(|_| Msg::Logout)} />
</li>
</ul>
</div>
}
} else { html!{} }
}
{ self.view_user_menu(ctx) }
</div>
</div>
</header>
}
}
fn view_user_menu(&self, ctx: &Context<Self>) -> Html {
if let Some((user_id, _)) = &self.user_info {
let link = ctx.link();
html! {
<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>
<span class="ms-2">
{user_id}
</span>
</a>
<ul
class="dropdown-menu text-small dropdown-menu-lg-end"
aria-labelledby="dropdownUser1"
style="">
<li>
<Link
classes="dropdown-item"
to={AppRoute::UserDetails{ user_id: user_id.clone() }}>
{"View details"}
</Link>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<LogoutButton on_logged_out={link.callback(|_| Msg::Logout)} />
</li>
</ul>
</div>
}
} else {
html! {}
}
}
fn view_footer(&self) -> Html {
html! {
<footer class="text-center text-muted fixed-bottom bg-light py-2">

View File

@@ -1,21 +1,18 @@
use crate::{
components::router::{AppRoute, NavButton},
components::router::{AppRoute, Link},
infra::{
api::HostService,
common_component::{CommonComponent, CommonComponentParts},
},
};
use anyhow::{anyhow, bail, Context, Result};
use anyhow::{anyhow, bail, Result};
use gloo_console::error;
use lldap_auth::*;
use validator_derive::Validate;
use yew::prelude::*;
use yew_form::Form;
use yew_form_derive::Model;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
};
use yew_router::{prelude::History, scope_ext::RouterScopeExt};
#[derive(PartialEq, Eq, Default)]
enum OpaqueData {
@@ -57,7 +54,6 @@ pub struct ChangePasswordForm {
common: CommonComponentParts<Self>,
form: Form<FormModel>,
opaque_data: OpaqueData,
route_dispatcher: RouteAgentDispatcher,
}
#[derive(Clone, PartialEq, Eq, Properties)]
@@ -76,15 +72,20 @@ pub enum Msg {
}
impl CommonComponent<ChangePasswordForm> for ChangePasswordForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
use anyhow::Context;
match msg {
Msg::FormUpdate => Ok(true),
Msg::Submit => {
if !self.form.validate() {
bail!("Check the form for errors");
}
if self.common.is_admin {
self.handle_msg(Msg::SubmitNewPassword)
if ctx.props().is_admin {
self.handle_msg(ctx, Msg::SubmitNewPassword)
} else {
let old_password = self.form.model().old_password;
if old_password.is_empty() {
@@ -96,14 +97,14 @@ impl CommonComponent<ChangePasswordForm> for ChangePasswordForm {
.context("Could not initialize login")?;
self.opaque_data = OpaqueData::Login(login_start_request.state);
let req = login::ClientLoginStartRequest {
username: self.common.username.clone(),
username: ctx.props().username.clone(),
login_start_request: login_start_request.message,
};
self.common.call_backend(
HostService::login_start,
req,
ctx,
HostService::login_start(req),
Msg::AuthenticationStartResponse,
)?;
);
Ok(true)
}
}
@@ -122,7 +123,7 @@ impl CommonComponent<ChangePasswordForm> for ChangePasswordForm {
}
_ => panic!("Unexpected data in opaque_data field"),
};
self.handle_msg(Msg::SubmitNewPassword)
self.handle_msg(ctx, Msg::SubmitNewPassword)
}
Msg::SubmitNewPassword => {
let mut rng = rand::rngs::OsRng;
@@ -131,15 +132,15 @@ impl CommonComponent<ChangePasswordForm> for ChangePasswordForm {
opaque::client::registration::start_registration(&new_password, &mut rng)
.context("Could not initiate password change")?;
let req = registration::ClientRegistrationStartRequest {
username: self.common.username.clone(),
username: ctx.props().username.clone(),
registration_start_request: registration_start_request.message,
};
self.opaque_data = OpaqueData::Registration(registration_start_request.state);
self.common.call_backend(
HostService::register_start,
req,
ctx,
HostService::register_start(req),
Msg::RegistrationStartResponse,
)?;
);
Ok(true)
}
Msg::RegistrationStartResponse(res) => {
@@ -159,22 +160,20 @@ impl CommonComponent<ChangePasswordForm> for ChangePasswordForm {
registration_upload: registration_finish.message,
};
self.common.call_backend(
HostService::register_finish,
req,
ctx,
HostService::register_finish(req),
Msg::RegistrationFinishResponse,
)
);
}
_ => panic!("Unexpected data in opaque_data field"),
}?;
};
Ok(false)
}
Msg::RegistrationFinishResponse(response) => {
self.common.cancel_task();
if response.is_ok() {
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(
AppRoute::UserDetails(self.common.username.clone()),
)));
ctx.link().history().unwrap().push(AppRoute::UserDetails {
user_id: ctx.props().username.clone(),
});
}
response?;
Ok(true)
@@ -191,26 +190,21 @@ impl Component for ChangePasswordForm {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
ChangePasswordForm {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
form: yew_form::Form::<FormModel>::new(FormModel::default()),
opaque_data: OpaqueData::None,
route_dispatcher: RouteAgentDispatcher::new(),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let is_admin = self.common.is_admin;
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let is_admin = ctx.props().is_admin;
let link = ctx.link();
type Field = yew_form::Field<FormModel>;
html! {
<>
@@ -305,12 +299,12 @@ impl Component for ChangePasswordForm {
<i class="bi-save me-2"></i>
{"Save changes"}
</button>
<NavButton
<Link
classes="btn btn-secondary ms-2 col-auto col-form-label"
route={AppRoute::UserDetails(self.common.username.clone())}>
to={AppRoute::UserDetails{user_id: ctx.props().username.clone()}}>
<i class="bi-arrow-return-left me-2"></i>
{"Back"}
</NavButton>
</Link>
</div>
</form>
</>

View File

@@ -8,10 +8,7 @@ use graphql_client::GraphQLQuery;
use validator_derive::Validate;
use yew::prelude::*;
use yew_form_derive::Model;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
};
use yew_router::{prelude::History, scope_ext::RouterScopeExt};
#[derive(GraphQLQuery)]
#[graphql(
@@ -24,7 +21,6 @@ pub struct CreateGroup;
pub struct CreateGroupForm {
common: CommonComponentParts<Self>,
route_dispatcher: RouteAgentDispatcher,
form: yew_form::Form<CreateGroupModel>,
}
@@ -41,7 +37,11 @@ pub enum Msg {
}
impl CommonComponent<CreateGroupForm> for CreateGroupForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::SubmitForm => {
@@ -53,6 +53,7 @@ impl CommonComponent<CreateGroupForm> for CreateGroupForm {
name: model.groupname,
};
self.common.call_graphql::<CreateGroup, _>(
ctx,
req,
Msg::CreateGroupResponse,
"Error trying to create group",
@@ -64,8 +65,7 @@ impl CommonComponent<CreateGroupForm> for CreateGroupForm {
"Created group '{}'",
&response?.create_group.display_name
));
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(AppRoute::ListGroups)));
ctx.link().history().unwrap().push(AppRoute::ListGroups);
Ok(true)
}
}
@@ -80,24 +80,19 @@ impl Component for CreateGroupForm {
type Message = Msg;
type Properties = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
common: CommonComponentParts::<Self>::create(props, link),
route_dispatcher: RouteAgentDispatcher::new(),
common: CommonComponentParts::<Self>::create(),
form: yew_form::Form::<CreateGroupModel>::new(CreateGroupModel::default()),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = ctx.link();
type Field = yew_form::Field<CreateGroupModel>;
html! {
<div class="row justify-content-center">

View File

@@ -5,17 +5,14 @@ use crate::{
common_component::{CommonComponent, CommonComponentParts},
},
};
use anyhow::{bail, Context, Result};
use anyhow::{bail, Result};
use gloo_console::log;
use graphql_client::GraphQLQuery;
use lldap_auth::{opaque, registration};
use validator_derive::Validate;
use yew::prelude::*;
use yew_form_derive::Model;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
};
use yew_router::{prelude::History, scope_ext::RouterScopeExt};
#[derive(GraphQLQuery)]
#[graphql(
@@ -28,7 +25,6 @@ pub struct CreateUser;
pub struct CreateUserForm {
common: CommonComponentParts<Self>,
route_dispatcher: RouteAgentDispatcher,
form: yew_form::Form<CreateUserModel>,
}
@@ -73,7 +69,11 @@ pub enum Msg {
}
impl CommonComponent<CreateUserForm> for CreateUserForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::SubmitForm => {
@@ -93,6 +93,7 @@ impl CommonComponent<CreateUserForm> for CreateUserForm {
},
};
self.common.call_graphql::<CreateUser, _>(
ctx,
req,
Msg::CreateUserResponse,
"Error trying to create user",
@@ -122,12 +123,11 @@ impl CommonComponent<CreateUserForm> for CreateUserForm {
registration_start_request: message,
};
self.common
.call_backend(HostService::register_start, req, move |r| {
.call_backend(ctx, HostService::register_start(req), move |r| {
Msg::RegistrationStartResponse((state, r))
})
.context("Error trying to create user")?;
});
} else {
self.update(Msg::SuccessfulCreation);
self.update(ctx, Msg::SuccessfulCreation);
}
Ok(false)
}
@@ -143,22 +143,19 @@ impl CommonComponent<CreateUserForm> for CreateUserForm {
server_data: response.server_data,
registration_upload: registration_upload.message,
};
self.common
.call_backend(
HostService::register_finish,
req,
Msg::RegistrationFinishResponse,
)
.context("Error trying to register user")?;
self.common.call_backend(
ctx,
HostService::register_finish(req),
Msg::RegistrationFinishResponse,
);
Ok(false)
}
Msg::RegistrationFinishResponse(response) => {
response?;
self.handle_msg(Msg::SuccessfulCreation)
self.handle_msg(ctx, Msg::SuccessfulCreation)
}
Msg::SuccessfulCreation => {
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(AppRoute::ListUsers)));
ctx.link().history().unwrap().push(AppRoute::ListUsers);
Ok(true)
}
}
@@ -173,24 +170,19 @@ impl Component for CreateUserForm {
type Message = Msg;
type Properties = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
common: CommonComponentParts::<Self>::create(props, link),
route_dispatcher: RouteAgentDispatcher::new(),
common: CommonComponentParts::<Self>::create(),
form: yew_form::Form::<CreateUserModel>::new(CreateUserModel::default()),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
type Field = yew_form::Field<CreateUserModel>;
html! {
<div class="row justify-content-center">

View File

@@ -39,16 +39,21 @@ pub enum Msg {
}
impl CommonComponent<DeleteGroup> for DeleteGroup {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::ClickedDeleteGroup => {
self.modal.as_ref().expect("modal not initialized").show();
}
Msg::ConfirmDeleteGroup => {
self.update(Msg::DismissModal);
self.update(ctx, Msg::DismissModal);
self.common.call_graphql::<DeleteGroupQuery, _>(
ctx,
delete_group_query::Variables {
group_id: self.common.group.id,
group_id: ctx.props().group.id,
},
Msg::DeleteGroupResponse,
"Error trying to delete group",
@@ -58,12 +63,8 @@ impl CommonComponent<DeleteGroup> for DeleteGroup {
self.modal.as_ref().expect("modal not initialized").hide();
}
Msg::DeleteGroupResponse(response) => {
self.common.cancel_task();
response?;
self.common
.props
.on_group_deleted
.emit(self.common.group.id);
ctx.props().on_group_deleted.emit(ctx.props().group.id);
}
}
Ok(true)
@@ -78,15 +79,15 @@ impl Component for DeleteGroup {
type Message = Msg;
type Properties = DeleteGroupProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
node_ref: NodeRef::default(),
modal: None,
}
}
fn rendered(&mut self, first_render: bool) {
fn rendered(&mut self, _: &Context<Self>, first_render: bool) {
if first_render {
self.modal = Some(Modal::new(
self.node_ref
@@ -96,20 +97,17 @@ impl Component for DeleteGroup {
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update_and_report_error(
self,
ctx,
msg,
self.common.on_error.clone(),
ctx.props().on_error.clone(),
)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<>
<button
@@ -118,19 +116,19 @@ impl Component for DeleteGroup {
onclick={link.callback(|_| Msg::ClickedDeleteGroup)}>
<i class="bi-x-circle-fill" aria-label="Delete group" />
</button>
{self.show_modal()}
{self.show_modal(ctx)}
</>
}
}
}
impl DeleteGroup {
fn show_modal(&self) -> Html {
let link = &self.common;
fn show_modal(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<div
class="modal fade"
id={"deleteGroupModal".to_string() + &self.common.group.id.to_string()}
id={"deleteGroupModal".to_string() + &ctx.props().group.id.to_string()}
tabindex="-1"
aria-labelledby="deleteGroupModalLabel"
aria-hidden="true"
@@ -148,7 +146,7 @@ impl DeleteGroup {
<div class="modal-body">
<span>
{"Are you sure you want to delete group "}
<b>{&self.common.group.display_name}</b>{"?"}
<b>{&ctx.props().group.display_name}</b>{"?"}
</span>
</div>
<div class="modal-footer">

View File

@@ -36,16 +36,21 @@ pub enum Msg {
}
impl CommonComponent<DeleteUser> for DeleteUser {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::ClickedDeleteUser => {
self.modal.as_ref().expect("modal not initialized").show();
}
Msg::ConfirmDeleteUser => {
self.update(Msg::DismissModal);
self.update(ctx, Msg::DismissModal);
self.common.call_graphql::<DeleteUserQuery, _>(
ctx,
delete_user_query::Variables {
user: self.common.username.clone(),
user: ctx.props().username.clone(),
},
Msg::DeleteUserResponse,
"Error trying to delete user",
@@ -55,12 +60,10 @@ impl CommonComponent<DeleteUser> for DeleteUser {
self.modal.as_ref().expect("modal not initialized").hide();
}
Msg::DeleteUserResponse(response) => {
self.common.cancel_task();
response?;
self.common
.props
ctx.props()
.on_user_deleted
.emit(self.common.username.clone());
.emit(ctx.props().username.clone());
}
}
Ok(true)
@@ -75,15 +78,15 @@ impl Component for DeleteUser {
type Message = Msg;
type Properties = DeleteUserProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
node_ref: NodeRef::default(),
modal: None,
}
}
fn rendered(&mut self, first_render: bool) {
fn rendered(&mut self, _: &Context<Self>, first_render: bool) {
if first_render {
self.modal = Some(Modal::new(
self.node_ref
@@ -93,20 +96,17 @@ impl Component for DeleteUser {
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update_and_report_error(
self,
ctx,
msg,
self.common.on_error.clone(),
ctx.props().on_error.clone(),
)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<>
<button
@@ -115,19 +115,19 @@ impl Component for DeleteUser {
onclick={link.callback(|_| Msg::ClickedDeleteUser)}>
<i class="bi-x-circle-fill" aria-label="Delete user" />
</button>
{self.show_modal()}
{self.show_modal(ctx)}
</>
}
}
}
impl DeleteUser {
fn show_modal(&self) -> Html {
let link = &self.common;
fn show_modal(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<div
class="modal fade"
id={"deleteUserModal".to_string() + &self.common.username}
id={"deleteUserModal".to_string() + &ctx.props().username}
tabindex="-1"
//role="dialog"
aria-labelledby="deleteUserModalLabel"
@@ -146,7 +146,7 @@ impl DeleteUser {
<div class="modal-body">
<span>
{"Are you sure you want to delete user "}
<b>{&self.common.username}</b>{"?"}
<b>{&ctx.props().username}</b>{"?"}
</span>
</div>
<div class="modal-footer">

View File

@@ -46,10 +46,11 @@ pub struct Props {
}
impl GroupDetails {
fn get_group_details(&mut self) {
fn get_group_details(&mut self, ctx: &Context<Self>) {
self.common.call_graphql::<GetGroupDetails, _>(
ctx,
get_group_details::Variables {
id: self.common.group_id,
id: ctx.props().group_id,
},
Msg::GroupDetailsResponse,
"Error trying to fetch group details",
@@ -107,14 +108,15 @@ impl GroupDetails {
}
}
fn view_user_list(&self, g: &Group) -> Html {
fn view_user_list(&self, ctx: &Context<Self>, g: &Group) -> Html {
let link = ctx.link();
let make_user_row = |user: &User| {
let user_id = user.id.clone();
let display_name = user.display_name.clone();
html! {
<tr>
<td>
<Link route={AppRoute::UserDetails(user_id.clone())}>
<Link to={AppRoute::UserDetails{user_id: user_id.clone()}}>
{user_id.clone()}
</Link>
</td>
@@ -123,8 +125,8 @@ impl GroupDetails {
<RemoveUserFromGroupComponent
username={user_id}
group_id={g.id}
on_user_removed_from_group={self.common.callback(Msg::OnUserRemovedFromGroup)}
on_error={self.common.callback(Msg::OnError)}/>
on_user_removed_from_group={link.callback(Msg::OnUserRemovedFromGroup)}
on_error={link.callback(Msg::OnError)}/>
</td>
</tr>
}
@@ -159,7 +161,8 @@ impl GroupDetails {
}
}
fn view_add_user_button(&self, g: &Group) -> Html {
fn view_add_user_button(&self, ctx: &Context<Self>, g: &Group) -> Html {
let link = ctx.link();
let users: Vec<_> = g
.users
.iter()
@@ -172,14 +175,14 @@ impl GroupDetails {
<AddGroupMemberComponent
group_id={g.id}
users={users}
on_error={self.common.callback(Msg::OnError)}
on_user_added_to_group={self.common.callback(Msg::OnUserAddedToGroup)}/>
on_error={link.callback(Msg::OnError)}
on_user_added_to_group={link.callback(Msg::OnUserAddedToGroup)}/>
}
}
}
impl CommonComponent<GroupDetails> for GroupDetails {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(&mut self, _: &Context<Self>, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::GroupDetailsResponse(response) => match response {
Ok(group) => self.group = Some(group.group),
@@ -215,24 +218,20 @@ impl Component for GroupDetails {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut table = Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
group: None,
};
table.get_group_details();
table.get_group_details(ctx);
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
match (&self.group, &self.common.error) {
(None, None) => html! {{"Loading..."}},
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
@@ -240,8 +239,8 @@ impl Component for GroupDetails {
html! {
<div>
{self.view_details(u)}
{self.view_user_list(u)}
{self.view_add_user_button(u)}
{self.view_user_list(ctx, u)}
{self.view_add_user_button(ctx, u)}
{self.view_messages(error)}
</div>
}

View File

@@ -34,7 +34,7 @@ pub enum Msg {
}
impl CommonComponent<GroupTable> for GroupTable {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(&mut self, _: &Context<Self>, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::ListGroupsResponse(groups) => {
self.groups = Some(groups?.groups.into_iter().collect());
@@ -58,12 +58,13 @@ impl Component for GroupTable {
type Message = Msg;
type Properties = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut table = GroupTable {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
groups: None,
};
table.common.call_graphql::<GetGroupList, _>(
ctx,
get_group_list::Variables {},
Msg::ListGroupsResponse,
"Error trying to fetch groups",
@@ -71,18 +72,14 @@ impl Component for GroupTable {
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<div>
{self.view_groups()}
{self.view_groups(ctx)}
{self.view_errors()}
</div>
}
@@ -90,7 +87,7 @@ impl Component for GroupTable {
}
impl GroupTable {
fn view_groups(&self) -> Html {
fn view_groups(&self, ctx: &Context<Self>) -> Html {
let make_table = |groups: &Vec<Group>| {
html! {
<div class="table-responsive">
@@ -103,7 +100,7 @@ impl GroupTable {
</tr>
</thead>
<tbody>
{groups.iter().map(|u| self.view_group(u)).collect::<Vec<_>>()}
{groups.iter().map(|u| self.view_group(ctx, u)).collect::<Vec<_>>()}
</tbody>
</table>
</div>
@@ -115,11 +112,12 @@ impl GroupTable {
}
}
fn view_group(&self, group: &Group) -> Html {
fn view_group(&self, ctx: &Context<Self>, group: &Group) -> Html {
let link = ctx.link();
html! {
<tr key={group.id}>
<td>
<Link route={AppRoute::GroupDetails(group.id)}>
<Link to={AppRoute::GroupDetails{group_id: group.id}}>
{&group.display_name}
</Link>
</td>
@@ -129,8 +127,8 @@ impl GroupTable {
<td>
<DeleteGroup
group={group.clone()}
on_group_deleted={self.common.callback(Msg::OnGroupDeleted)}
on_error={self.common.callback(Msg::OnError)}/>
on_group_deleted={link.callback(Msg::OnGroupDeleted)}
on_error={link.callback(Msg::OnError)}/>
</td>
</tr>
}

View File

@@ -1,12 +1,12 @@
use crate::{
components::router::{AppRoute, NavButton},
components::router::{AppRoute, Link},
infra::{
api::HostService,
common_component::{CommonComponent, CommonComponentParts},
},
};
use anyhow::{anyhow, bail, Context, Result};
use gloo_console::{debug, error};
use anyhow::{anyhow, bail, Result};
use gloo_console::error;
use lldap_auth::*;
use validator_derive::Validate;
use yew::prelude::*;
@@ -48,7 +48,12 @@ pub enum Msg {
}
impl CommonComponent<LoginForm> for LoginForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
use anyhow::Context;
match msg {
Msg::Update => Ok(true),
Msg::Submit => {
@@ -65,9 +70,9 @@ impl CommonComponent<LoginForm> for LoginForm {
login_start_request: message,
};
self.common
.call_backend(HostService::login_start, req, move |r| {
.call_backend(ctx, HostService::login_start(req), move |r| {
Msg::AuthenticationStartResponse((state, r))
})?;
});
Ok(true)
}
Msg::AuthenticationStartResponse((login_start, res)) => {
@@ -80,7 +85,6 @@ impl CommonComponent<LoginForm> for LoginForm {
// simple one to the user.
error!(&format!("Invalid username or password: {}", e));
self.common.error = Some(anyhow!("Invalid username or password"));
self.common.cancel_task();
return Ok(true);
}
Ok(l) => l,
@@ -90,24 +94,22 @@ impl CommonComponent<LoginForm> for LoginForm {
credential_finalization: login_finish.message,
};
self.common.call_backend(
HostService::login_finish,
req,
ctx,
HostService::login_finish(req),
Msg::AuthenticationFinishResponse,
)?;
);
Ok(false)
}
Msg::AuthenticationFinishResponse(user_info) => {
self.common.cancel_task();
self.common
ctx.props()
.on_logged_in
.emit(user_info.context("Could not log in")?);
Ok(true)
}
Msg::AuthenticationRefreshResponse(user_info) => {
self.refreshing = false;
self.common.cancel_task();
if let Ok(user_info) = user_info {
self.common.on_logged_in.emit(user_info);
ctx.props().on_logged_in.emit(user_info);
}
Ok(true)
}
@@ -123,34 +125,28 @@ impl Component for LoginForm {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut app = LoginForm {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
form: Form::<FormModel>::new(FormModel::default()),
refreshing: true,
};
if let Err(e) =
app.common
.call_backend(HostService::refresh, (), Msg::AuthenticationRefreshResponse)
{
debug!(&format!("Could not refresh auth: {}", e));
app.refreshing = false;
}
app.common.call_backend(
ctx,
HostService::refresh(),
Msg::AuthenticationRefreshResponse,
);
app
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
type Field = yew_form::Field<FormModel>;
let password_reset_enabled = self.common.password_reset_enabled;
let link = &self.common;
let password_reset_enabled = ctx.props().password_reset_enabled;
let link = &ctx.link();
if self.refreshing {
html! {
<div>
@@ -204,12 +200,12 @@ impl Component for LoginForm {
</button>
{ if password_reset_enabled {
html! {
<NavButton
<Link
classes="btn-link btn"
disabled={self.common.is_task_running()}
route={AppRoute::StartResetPassword}>
to={AppRoute::StartResetPassword}>
{"Forgot your password?"}
</NavButton>
</Link>
}
} else {
html!{}

View File

@@ -21,16 +21,20 @@ pub enum Msg {
}
impl CommonComponent<LogoutButton> for LogoutButton {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::LogoutRequested => {
self.common
.call_backend(HostService::logout, (), Msg::LogoutCompleted)?;
.call_backend(ctx, HostService::logout(), Msg::LogoutCompleted);
}
Msg::LogoutCompleted(res) => {
res?;
delete_cookie("user_id")?;
self.common.on_logged_out.emit(());
ctx.props().on_logged_out.emit(());
}
}
Ok(false)
@@ -45,22 +49,18 @@ impl Component for LogoutButton {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
LogoutButton {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<button
class="dropdown-item"

View File

@@ -31,15 +31,18 @@ pub enum Msg {
}
impl CommonComponent<RemoveUserFromGroupComponent> for RemoveUserFromGroupComponent {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::SubmitRemoveGroup => self.submit_remove_group(),
Msg::SubmitRemoveGroup => self.submit_remove_group(ctx),
Msg::RemoveGroupResponse(response) => {
response?;
self.common.cancel_task();
self.common
ctx.props()
.on_user_removed_from_group
.emit((self.common.username.clone(), self.common.group_id));
.emit((ctx.props().username.clone(), ctx.props().group_id));
}
}
Ok(true)
@@ -51,11 +54,12 @@ impl CommonComponent<RemoveUserFromGroupComponent> for RemoveUserFromGroupCompon
}
impl RemoveUserFromGroupComponent {
fn submit_remove_group(&mut self) {
fn submit_remove_group(&mut self, ctx: &Context<Self>) {
self.common.call_graphql::<RemoveUserFromGroup, _>(
ctx,
remove_user_from_group::Variables {
user: self.common.username.clone(),
group: self.common.group_id,
user: ctx.props().username.clone(),
group: ctx.props().group_id,
},
Msg::RemoveGroupResponse,
"Error trying to initiate removing the user from a group",
@@ -67,26 +71,23 @@ impl Component for RemoveUserFromGroupComponent {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update_and_report_error(
self,
ctx,
msg,
self.common.on_error.clone(),
ctx.props().on_error.clone(),
)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
html! {
<button
class="btn btn-danger"

View File

@@ -1,5 +1,5 @@
use crate::{
components::router::{AppRoute, NavButton},
components::router::{AppRoute, Link},
infra::{
api::HostService,
common_component::{CommonComponent, CommonComponentParts},
@@ -31,7 +31,11 @@ pub enum Msg {
}
impl CommonComponent<ResetPasswordStep1Form> for ResetPasswordStep1Form {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::Submit => {
@@ -40,10 +44,10 @@ impl CommonComponent<ResetPasswordStep1Form> for ResetPasswordStep1Form {
}
let FormModel { username } = self.form.model();
self.common.call_backend(
HostService::reset_password_step1,
&username,
ctx,
HostService::reset_password_step1(username),
Msg::PasswordResetResponse,
)?;
);
Ok(true)
}
Msg::PasswordResetResponse(response) => {
@@ -63,26 +67,22 @@ impl Component for ResetPasswordStep1Form {
type Message = Msg;
type Properties = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
ResetPasswordStep1Form {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
form: Form::<FormModel>::new(FormModel::default()),
just_succeeded: false,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
self.just_succeeded = false;
CommonComponentParts::<Self>::update(self, msg)
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
type Field = yew_form::Field<FormModel>;
let link = &self.common;
let link = &ctx.link();
html! {
<form
class="form center-block col-sm-4 col-offset-4">
@@ -113,16 +113,16 @@ impl Component for ResetPasswordStep1Form {
type="submit"
class="btn btn-primary"
disabled={self.common.is_task_running()}
onclick={self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})}>
onclick={link.callback(|e: MouseEvent| {e.prevent_default(); Msg::Submit})}>
<i class="bi-check-circle me-2"/>
{"Reset password"}
</button>
<NavButton
<Link
classes="btn-link btn"
disabled={self.common.is_task_running()}
route={AppRoute::Login}>
to={AppRoute::Login}>
{"Back"}
</NavButton>
</Link>
</div>
}
}}

View File

@@ -1,11 +1,11 @@
use crate::{
components::router::{AppRoute, NavButton},
components::router::{AppRoute, Link},
infra::{
api::HostService,
common_component::{CommonComponent, CommonComponentParts},
},
};
use anyhow::{bail, Context, Result};
use anyhow::{bail, Result};
use lldap_auth::{
opaque::client::registration as opaque_registration,
password_reset::ServerPasswordResetResponse, registration,
@@ -14,10 +14,7 @@ use validator_derive::Validate;
use yew::prelude::*;
use yew_form::Form;
use yew_form_derive::Model;
use yew_router::{
agent::{RouteAgentDispatcher, RouteRequest},
route::Route,
};
use yew_router::{prelude::History, scope_ext::RouterScopeExt};
/// The fields of the form, with the constraints.
#[derive(Model, Validate, PartialEq, Eq, Clone, Default)]
@@ -33,7 +30,6 @@ pub struct ResetPasswordStep2Form {
form: Form<FormModel>,
username: Option<String>,
opaque_data: Option<opaque_registration::ClientRegistration>,
route_dispatcher: RouteAgentDispatcher,
}
#[derive(Clone, PartialEq, Eq, Properties)]
@@ -50,11 +46,15 @@ pub enum Msg {
}
impl CommonComponent<ResetPasswordStep2Form> for ResetPasswordStep2Form {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
use anyhow::Context;
match msg {
Msg::ValidateTokenResponse(response) => {
self.username = Some(response?.user_id);
self.common.cancel_task();
Ok(true)
}
Msg::FormUpdate => Ok(true),
@@ -73,10 +73,10 @@ impl CommonComponent<ResetPasswordStep2Form> for ResetPasswordStep2Form {
};
self.opaque_data = Some(registration_start_request.state);
self.common.call_backend(
HostService::register_start,
req,
ctx,
HostService::register_start(req),
Msg::RegistrationStartResponse,
)?;
);
Ok(true)
}
Msg::RegistrationStartResponse(res) => {
@@ -94,17 +94,15 @@ impl CommonComponent<ResetPasswordStep2Form> for ResetPasswordStep2Form {
registration_upload: registration_finish.message,
};
self.common.call_backend(
HostService::register_finish,
req,
ctx,
HostService::register_finish(req),
Msg::RegistrationFinishResponse,
)?;
);
Ok(false)
}
Msg::RegistrationFinishResponse(response) => {
self.common.cancel_task();
if response.is_ok() {
self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(AppRoute::Login)));
ctx.link().history().unwrap().push(AppRoute::Login);
}
response?;
Ok(true)
@@ -121,36 +119,28 @@ impl Component for ResetPasswordStep2Form {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut component = ResetPasswordStep2Form {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
form: yew_form::Form::<FormModel>::new(FormModel::default()),
opaque_data: None,
route_dispatcher: RouteAgentDispatcher::new(),
username: None,
};
let token = component.common.token.clone();
component
.common
.call_backend(
HostService::reset_password_step2,
&token,
Msg::ValidateTokenResponse,
)
.unwrap();
let token = ctx.props().token.clone();
component.common.call_backend(
ctx,
HostService::reset_password_step2(token),
Msg::ValidateTokenResponse,
);
component
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
let link = &self.common;
fn view(&self, ctx: &Context<Self>) -> Html {
let link = &ctx.link();
match (&self.username, &self.common.error) {
(None, None) => {
return html! {
@@ -163,12 +153,12 @@ impl Component for ResetPasswordStep2Form {
<div class="alert alert-danger">
{e.to_string() }
</div>
<NavButton
<Link
classes="btn-link btn"
disabled={self.common.is_task_running()}
route={AppRoute::Login}>
to={AppRoute::Login}>
{"Back"}
</NavButton>
</Link>
</>
}
}

View File

@@ -1,34 +1,30 @@
use yew_router::{
components::{RouterAnchor, RouterButton},
Switch,
};
use yew_router::Routable;
#[derive(Switch, Debug, Clone)]
#[derive(Routable, Debug, Clone, PartialEq)]
pub enum AppRoute {
#[to = "/login"]
#[at("/login")]
Login,
#[to = "/reset-password/step1"]
#[at("/reset-password/step1")]
StartResetPassword,
#[to = "/reset-password/step2/{token}"]
FinishResetPassword(String),
#[to = "/users/create"]
#[at("/reset-password/step2/:token")]
FinishResetPassword { token: String },
#[at("/users/create")]
CreateUser,
#[to = "/users"]
#[at("/users")]
ListUsers,
#[to = "/user/{user_id}/password"]
ChangePassword(String),
#[to = "/user/{user_id}"]
UserDetails(String),
#[to = "/groups/create"]
#[at("/user/:user_id/password")]
ChangePassword { user_id: String },
#[at("/user/:user_id")]
UserDetails { user_id: String },
#[at("/groups/create")]
CreateGroup,
#[to = "/groups"]
#[at("/groups")]
ListGroups,
#[to = "/group/{group_id}"]
GroupDetails(i64),
#[to = "/"]
#[at("/group/:group_id")]
GroupDetails { group_id: i64 },
#[at("/")]
Index,
}
pub type Link = RouterAnchor<AppRoute>;
pub type NavButton = RouterButton<AppRoute>;
pub type Link = yew_router::components::Link<AppRoute>;
pub type Redirect = yew_router::components::Redirect<AppRoute>;

View File

@@ -1,9 +1,6 @@
use yew::{html::ChangeData, prelude::*};
use yewtil::NeqAssign;
use yew::prelude::*;
pub struct Select {
link: ComponentLink<Self>,
props: SelectProps,
node_ref: NodeRef,
}
@@ -14,100 +11,70 @@ pub struct SelectProps {
}
pub enum SelectMsg {
OnSelectChange(ChangeData),
OnSelectChange,
}
impl Select {
fn get_nth_child_props(&self, nth: i32) -> Option<SelectOptionProps> {
fn get_nth_child_props(&self, ctx: &Context<Self>, nth: i32) -> Option<SelectOptionProps> {
if nth == -1 {
return None;
}
self.props
ctx.props()
.children
.iter()
.nth(nth as usize)
.map(|child| child.props)
.map(|child| (*child.props).clone())
}
fn send_selection_update(&self) {
fn send_selection_update(&self, ctx: &Context<Self>) {
let select_node = self.node_ref.cast::<web_sys::HtmlSelectElement>().unwrap();
self.props
ctx.props()
.on_selection_change
.emit(self.get_nth_child_props(select_node.selected_index()))
.emit(self.get_nth_child_props(ctx, select_node.selected_index()))
}
}
impl Component for Select {
type Message = SelectMsg;
type Properties = SelectProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(_: &Context<Self>) -> Self {
Self {
link,
props,
node_ref: NodeRef::default(),
}
}
fn rendered(&mut self, _first_render: bool) {
self.send_selection_update();
fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
self.send_selection_update(ctx);
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
let SelectMsg::OnSelectChange(data) = msg;
match data {
ChangeData::Select(_) => self.send_selection_update(),
_ => unreachable!(),
}
fn update(&mut self, ctx: &Context<Self>, _: Self::Message) -> bool {
self.send_selection_update(ctx);
false
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.props.children.neq_assign(props.children)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<select class="form-select"
ref={self.node_ref.clone()}
disabled={self.props.children.is_empty()}
onchange={self.link.callback(SelectMsg::OnSelectChange)}>
{ self.props.children.clone() }
disabled={ctx.props().children.is_empty()}
onchange={ctx.link().callback(|_| SelectMsg::OnSelectChange)}>
{ ctx.props().children.clone() }
</select>
}
}
}
pub struct SelectOption {
props: SelectOptionProps,
}
#[derive(yew::Properties, Clone, PartialEq, Eq, Debug)]
pub struct SelectOptionProps {
pub value: String,
pub text: String,
}
impl Component for SelectOption {
type Message = ();
type Properties = SelectOptionProps;
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
Self { props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
false
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.props.neq_assign(props)
}
fn view(&self) -> Html {
html! {
<option value={self.props.value.clone()}>
{&self.props.text}
</option>
}
#[function_component(SelectOption)]
pub fn select_option(props: &SelectOptionProps) -> Html {
html! {
<option value={props.value.clone()}>
{&props.text}
</option>
}
}

View File

@@ -2,7 +2,7 @@ use crate::{
components::{
add_user_to_group::AddUserToGroupComponent,
remove_user_from_group::RemoveUserFromGroupComponent,
router::{AppRoute, Link, NavButton},
router::{AppRoute, Link},
user_details_form::UserDetailsForm,
},
infra::common_component::{CommonComponent, CommonComponentParts},
@@ -47,7 +47,7 @@ pub struct Props {
}
impl CommonComponent<UserDetails> for UserDetails {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(&mut self, _: &Context<Self>, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::UserDetailsResponse(response) => match response {
Ok(user) => self.user = Some(user.user),
@@ -77,10 +77,11 @@ impl CommonComponent<UserDetails> for UserDetails {
}
impl UserDetails {
fn get_user_details(&mut self) {
fn get_user_details(&mut self, ctx: &Context<Self>) {
self.common.call_graphql::<GetUserDetails, _>(
ctx,
get_user_details::Variables {
id: self.common.username.clone(),
id: ctx.props().username.clone(),
},
Msg::UserDetailsResponse,
"Error trying to fetch user details",
@@ -99,16 +100,16 @@ impl UserDetails {
}
}
fn view_group_memberships(&self, u: &User) -> Html {
let link = &self.common;
fn view_group_memberships(&self, ctx: &Context<Self>, u: &User) -> Html {
let link = &ctx.link();
let make_group_row = |group: &Group| {
let display_name = group.display_name.clone();
html! {
<tr key={"groupRow_".to_string() + &display_name}>
{if self.common.is_admin { html! {
{if ctx.props().is_admin { html! {
<>
<td>
<Link route={AppRoute::GroupDetails(group.id)}>
<Link to={AppRoute::GroupDetails{group_id: group.id}}>
{&group.display_name}
</Link>
</td>
@@ -134,7 +135,7 @@ impl UserDetails {
<thead>
<tr key="headerRow">
<th>{"Group"}</th>
{ if self.common.is_admin { html!{ <th></th> }} else { html!{} }}
{ if ctx.props().is_admin { html!{ <th></th> }} else { html!{} }}
</tr>
</thead>
<tbody>
@@ -154,9 +155,9 @@ impl UserDetails {
}
}
fn view_add_group_button(&self, u: &User) -> Html {
let link = &self.common;
if self.common.is_admin {
fn view_add_group_button(&self, ctx: &Context<Self>, u: &User) -> Html {
let link = &ctx.link();
if ctx.props().is_admin {
html! {
<AddUserToGroupComponent
username={u.id.clone()}
@@ -174,24 +175,20 @@ impl Component for UserDetails {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut table = Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
user: None,
};
table.get_user_details();
table.get_user_details(ctx);
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
match (&self.user, &self.common.error) {
(None, None) => html! {{"Loading..."}},
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
@@ -200,19 +197,19 @@ impl Component for UserDetails {
<>
<h3>{u.id.to_string()}</h3>
<div class="d-flex flex-row-reverse">
<NavButton
route={AppRoute::ChangePassword(u.id.clone())}
<Link
to={AppRoute::ChangePassword{user_id: u.id.clone()}}
classes="btn btn-secondary">
<i class="bi-key me-2"></i>
{"Modify password"}
</NavButton>
</Link>
</div>
<div>
<h5 class="row m-3 fw-bold">{"User details"}</h5>
</div>
<UserDetailsForm user={u.clone()} />
{self.view_group_memberships(u)}
{self.view_add_group_button(u)}
{self.view_group_memberships(ctx, u)}
{self.view_add_group_button(ctx, u)}
{self.view_messages(error)}
</>
}

View File

@@ -5,15 +5,19 @@ use crate::{
infra::common_component::{CommonComponent, CommonComponentParts},
};
use anyhow::{bail, Error, Result};
use gloo_file::{
callbacks::{read_as_bytes, FileReader},
File,
};
use graphql_client::GraphQLQuery;
use validator_derive::Validate;
use wasm_bindgen::JsCast;
use web_sys::{FileList, HtmlInputElement, InputEvent};
use yew::prelude::*;
use yew_form_derive::Model;
#[derive(PartialEq, Eq, Clone, Default)]
#[derive(Default)]
struct JsFile {
file: Option<web_sys::File>,
file: Option<File>,
contents: Option<Vec<u8>>,
}
@@ -21,7 +25,7 @@ impl ToString for JsFile {
fn to_string(&self) -> String {
self.file
.as_ref()
.map(web_sys::File::name)
.map(File::name)
.unwrap_or_else(String::new)
}
}
@@ -64,17 +68,21 @@ pub struct UserDetailsForm {
common: CommonComponentParts<Self>,
form: yew_form::Form<UserModel>,
avatar: JsFile,
reader: Option<FileReader>,
/// True if we just successfully updated the user, to display a success message.
just_updated: bool,
user: User,
}
pub enum Msg {
/// A form field changed.
Update,
/// A new file was selected.
FileSelected(File),
/// The "Submit" button was clicked.
SubmitClicked,
/// A picked file finished loading.
FileLoaded(yew::services::reader::FileData),
FileLoaded(String, Result<Vec<u8>>),
/// We got the response from the server about our update message.
UserUpdated(Result<update_user::ResponseData>),
}
@@ -86,50 +94,47 @@ pub struct Props {
}
impl CommonComponent<UserDetailsForm> for UserDetailsForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(
&mut self,
ctx: &Context<Self>,
msg: <Self as Component>::Message,
) -> Result<bool> {
match msg {
Msg::Update => {
let window = web_sys::window().expect("no global `window` exists");
let document = window.document().expect("should have a document on window");
let input = document
.get_element_by_id("avatarInput")
.expect("Form field avatarInput should be present")
.dyn_into::<web_sys::HtmlInputElement>()
.expect("Should be an HtmlInputElement");
if let Some(files) = input.files() {
if files.length() > 0 {
let new_avatar = JsFile {
file: files.item(0),
contents: None,
};
if self.avatar.file.as_ref().map(|f| f.name())
!= new_avatar.file.as_ref().map(|f| f.name())
{
if let Some(ref file) = new_avatar.file {
self.mut_common().read_file(file.clone(), Msg::FileLoaded)?;
}
self.avatar = new_avatar;
}
}
Msg::Update => Ok(true),
Msg::FileSelected(new_avatar) => {
if self.avatar.file.as_ref().map(|f| f.name()) != Some(new_avatar.name()) {
let file_name = new_avatar.name();
let link = ctx.link().clone();
self.reader = Some(read_as_bytes(&new_avatar, move |res| {
link.send_message(Msg::FileLoaded(
file_name,
res.map_err(|e| anyhow::anyhow!("{:#}", e)),
))
}));
self.avatar = JsFile {
file: Some(new_avatar),
contents: None,
};
}
Ok(true)
}
Msg::SubmitClicked => self.submit_user_update_form(),
Msg::SubmitClicked => self.submit_user_update_form(ctx),
Msg::UserUpdated(response) => self.user_update_finished(response),
Msg::FileLoaded(data) => {
self.common.cancel_task();
Msg::FileLoaded(file_name, data) => {
if let Some(file) = &self.avatar.file {
if file.name() == data.name {
if !is_valid_jpeg(data.content.as_slice()) {
if file.name() == file_name {
let data = data?;
if !is_valid_jpeg(data.as_slice()) {
// Clear the selection.
self.avatar = JsFile::default();
bail!("Chosen image is not a valid JPEG");
} else {
self.avatar.contents = Some(data.content);
self.avatar.contents = Some(data);
return Ok(true);
}
}
}
self.reader = None;
Ok(false)
}
}
@@ -144,38 +149,36 @@ impl Component for UserDetailsForm {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let model = UserModel {
email: props.user.email.clone(),
display_name: props.user.display_name.clone(),
first_name: props.user.first_name.clone(),
last_name: props.user.last_name.clone(),
email: ctx.props().user.email.clone(),
display_name: ctx.props().user.display_name.clone(),
first_name: ctx.props().user.first_name.clone(),
last_name: ctx.props().user.last_name.clone(),
};
Self {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
form: yew_form::Form::new(model),
avatar: JsFile::default(),
just_updated: false,
reader: None,
user: ctx.props().user.clone(),
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
self.just_updated = false;
CommonComponentParts::<Self>::update(self, msg)
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
type Field = yew_form::Field<UserModel>;
let link = &self.common;
let link = &ctx.link();
let avatar_base64 = maybe_to_base64(&self.avatar).unwrap_or_default();
let avatar_string = avatar_base64
.as_deref()
.or(self.common.user.avatar.as_deref())
.or(self.user.avatar.as_deref())
.unwrap_or("");
html! {
<div class="py-3">
@@ -186,7 +189,7 @@ impl Component for UserDetailsForm {
{"User ID: "}
</label>
<div class="col-8">
<span id="userId" class="form-control-static"><i>{&self.common.user.id}</i></span>
<span id="userId" class="form-control-static"><i>{&self.user.id}</i></span>
</div>
</div>
<div class="form-group row mb-3">
@@ -195,7 +198,7 @@ impl Component for UserDetailsForm {
{"Creation date: "}
</label>
<div class="col-8">
<span id="creationDate" class="form-control-static">{&self.common.user.creation_date.naive_local().date()}</span>
<span id="creationDate" class="form-control-static">{&self.user.creation_date.naive_local().date()}</span>
</div>
</div>
<div class="form-group row mb-3">
@@ -204,7 +207,7 @@ impl Component for UserDetailsForm {
{"UUID: "}
</label>
<div class="col-8">
<span id="creationDate" class="form-control-static">{&self.common.user.uuid}</span>
<span id="creationDate" class="form-control-static">{&self.user.uuid}</span>
</div>
</div>
<div class="form-group row mb-3">
@@ -294,7 +297,10 @@ impl Component for UserDetailsForm {
id="avatarInput"
type="file"
accept="image/jpeg"
oninput={link.callback(|_| Msg::Update)} />
oninput={link.callback(|e: InputEvent| {
let input: HtmlInputElement = e.target_unchecked_into();
Self::upload_files(input.files())
})} />
</div>
<div class="col-4">
<img
@@ -335,7 +341,7 @@ impl Component for UserDetailsForm {
}
impl UserDetailsForm {
fn submit_user_update_form(&mut self) -> Result<bool> {
fn submit_user_update_form(&mut self, ctx: &Context<Self>) -> Result<bool> {
if !self.form.validate() {
bail!("Invalid inputs");
}
@@ -346,9 +352,9 @@ impl UserDetailsForm {
{
bail!("Image file hasn't finished loading, try again");
}
let base_user = &self.common.user;
let base_user = &self.user;
let mut user_input = update_user::UpdateUserInput {
id: self.common.user.id.clone(),
id: self.user.id.clone(),
email: None,
displayName: None,
firstName: None,
@@ -377,6 +383,7 @@ impl UserDetailsForm {
}
let req = update_user::Variables { user: user_input };
self.common.call_graphql::<UpdateUser, _>(
ctx,
req,
Msg::UserUpdated,
"Error trying to update user",
@@ -385,23 +392,30 @@ impl UserDetailsForm {
}
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
self.common.cancel_task();
match r {
Err(e) => return Err(e),
Ok(_) => {
let model = self.form.model();
self.common.user.email = model.email;
self.common.user.display_name = model.display_name;
self.common.user.first_name = model.first_name;
self.common.user.last_name = model.last_name;
if let Some(avatar) = maybe_to_base64(&self.avatar)? {
self.common.user.avatar = Some(avatar);
}
self.just_updated = true;
}
};
r?;
let model = self.form.model();
self.user.email = model.email;
self.user.display_name = model.display_name;
self.user.first_name = model.first_name;
self.user.last_name = model.last_name;
if let Some(avatar) = maybe_to_base64(&self.avatar)? {
self.user.avatar = Some(avatar);
}
self.just_updated = true;
Ok(true)
}
fn upload_files(files: Option<FileList>) -> Msg {
if let Some(files) = files {
if files.length() > 0 {
Msg::FileSelected(File::from(files.item(0).unwrap()))
} else {
Msg::Update
}
} else {
Msg::Update
}
}
}
fn is_valid_jpeg(bytes: &[u8]) -> bool {

View File

@@ -34,7 +34,7 @@ pub enum Msg {
}
impl CommonComponent<UserTable> for UserTable {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
fn handle_msg(&mut self, _: &Context<Self>, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::ListUsersResponse(users) => {
self.users = Some(users?.users.into_iter().collect());
@@ -55,8 +55,9 @@ impl CommonComponent<UserTable> for UserTable {
}
impl UserTable {
fn get_users(&mut self, req: Option<RequestFilter>) {
fn get_users(&mut self, ctx: &Context<Self>, req: Option<RequestFilter>) {
self.common.call_graphql::<ListUsersQuery, _>(
ctx,
list_users_query::Variables { filters: req },
Msg::ListUsersResponse,
"Error trying to fetch users",
@@ -68,27 +69,23 @@ impl Component for UserTable {
type Message = Msg;
type Properties = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
fn create(ctx: &Context<Self>) -> Self {
let mut table = UserTable {
common: CommonComponentParts::<Self>::create(props, link),
common: CommonComponentParts::<Self>::create(),
users: None,
};
table.get_users(None);
table.get_users(ctx, None);
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
CommonComponentParts::<Self>::update(self, msg)
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
CommonComponentParts::<Self>::update(self, ctx, msg)
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.common.change(props)
}
fn view(&self) -> Html {
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<div>
{self.view_users()}
{self.view_users(ctx)}
{self.view_errors()}
</div>
}
@@ -96,7 +93,7 @@ impl Component for UserTable {
}
impl UserTable {
fn view_users(&self) -> Html {
fn view_users(&self, ctx: &Context<Self>) -> Html {
let make_table = |users: &Vec<User>| {
html! {
<div class="table-responsive">
@@ -113,7 +110,7 @@ impl UserTable {
</tr>
</thead>
<tbody>
{users.iter().map(|u| self.view_user(u)).collect::<Vec<_>>()}
{users.iter().map(|u| self.view_user(ctx, u)).collect::<Vec<_>>()}
</tbody>
</table>
</div>
@@ -125,11 +122,11 @@ impl UserTable {
}
}
fn view_user(&self, user: &User) -> Html {
let link = &self.common;
fn view_user(&self, ctx: &Context<Self>, user: &User) -> Html {
let link = &ctx.link();
html! {
<tr key={user.id.clone()}>
<td><Link route={AppRoute::UserDetails(user.id.clone())}>{&user.id}</Link></td>
<td><Link to={AppRoute::UserDetails{user_id: user.id.clone()}}>{&user.id}</Link></td>
<td>{&user.email}</td>
<td>{&user.display_name}</td>
<td>{&user.first_name}</td>