1350 lines
61 KiB
Rust
1350 lines
61 KiB
Rust
use crate::components::context::AppState;
|
|
use crate::components::gen_funcs::format_error_message;
|
|
use crate::requests::setting_reqs::{
|
|
call_add_oidc_provider, call_list_oidc_providers, call_remove_oidc_provider,
|
|
call_update_oidc_provider, AddOIDCProviderRequest, OIDCProvider,
|
|
};
|
|
use gloo_events::EventListener;
|
|
use i18nrs::yew::use_translation;
|
|
use wasm_bindgen::JsCast;
|
|
use web_sys::HtmlElement;
|
|
use web_sys::HtmlInputElement;
|
|
use yew::prelude::*;
|
|
use yewdux::prelude::*;
|
|
|
|
#[derive(Clone, PartialEq)]
|
|
enum PageState {
|
|
Hidden,
|
|
AddProvider,
|
|
EditProvider(i32), // provider_id
|
|
}
|
|
|
|
#[derive(Clone, PartialEq, Debug)]
|
|
pub struct ScopeOption {
|
|
pub id: String,
|
|
pub name: String,
|
|
pub description: String,
|
|
pub value: String,
|
|
pub provider_type: ProviderType,
|
|
}
|
|
|
|
#[derive(Clone, PartialEq, Debug, Eq)]
|
|
pub enum ProviderType {
|
|
Standard,
|
|
GitHub,
|
|
Google,
|
|
Microsoft,
|
|
}
|
|
|
|
// Create a helper function to get scope collections
|
|
// This should be defined at the module level, outside of any component
|
|
fn get_scope_collections() -> (Vec<ScopeOption>, Vec<ScopeOption>) {
|
|
// Standard OIDC scopes
|
|
let standard_scopes = vec![
|
|
ScopeOption {
|
|
id: "openid".to_string(),
|
|
name: "OpenID".to_string(),
|
|
description: "Provides verifiable identity".to_string(),
|
|
value: "openid".to_string(),
|
|
provider_type: ProviderType::Standard,
|
|
},
|
|
ScopeOption {
|
|
id: "email".to_string(),
|
|
name: "Email".to_string(),
|
|
description: "Access to email address".to_string(),
|
|
value: "email".to_string(),
|
|
provider_type: ProviderType::Standard,
|
|
},
|
|
ScopeOption {
|
|
id: "profile".to_string(),
|
|
name: "Profile".to_string(),
|
|
description: "Basic profile info like name".to_string(),
|
|
value: "profile".to_string(),
|
|
provider_type: ProviderType::Standard,
|
|
},
|
|
];
|
|
|
|
// GitHub-specific scopes
|
|
let github_scopes = vec![
|
|
ScopeOption {
|
|
id: "read_user".to_string(),
|
|
name: "Read User".to_string(),
|
|
description: "Read user profile data".to_string(),
|
|
value: "read:user".to_string(),
|
|
provider_type: ProviderType::GitHub,
|
|
},
|
|
ScopeOption {
|
|
id: "user_email".to_string(),
|
|
name: "User Email".to_string(),
|
|
description: "Access to email address(es)".to_string(),
|
|
value: "user:email".to_string(),
|
|
provider_type: ProviderType::GitHub,
|
|
},
|
|
];
|
|
|
|
(standard_scopes, github_scopes)
|
|
}
|
|
|
|
// Helper function to format scopes for the request - also at module level
|
|
pub fn format_scopes_for_request(scopes: &[String], provider_type: &ProviderType) -> String {
|
|
let (standard_scopes, github_scopes) = get_scope_collections();
|
|
|
|
if scopes.is_empty() {
|
|
// Provide defaults based on provider
|
|
match provider_type {
|
|
ProviderType::GitHub => "read:user,user:email".to_string(),
|
|
_ => "openid email profile".to_string(),
|
|
}
|
|
} else {
|
|
// Map selected scope IDs to their values
|
|
let scope_values: Vec<String> = scopes
|
|
.iter()
|
|
.filter_map(|id| {
|
|
// Find the matching scope option - use a function to get the right iterator
|
|
let mut iter = match provider_type {
|
|
ProviderType::GitHub => github_scopes.iter().chain(standard_scopes.iter()),
|
|
_ => standard_scopes.iter().chain([].iter()), // Chain with empty iterator for the default case
|
|
};
|
|
|
|
iter.find(|s| &s.id == id).map(|s| s.value.clone())
|
|
})
|
|
.collect();
|
|
|
|
scope_values.join(" ")
|
|
}
|
|
}
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct ScopeSelectorProps {
|
|
pub selected_scopes: Vec<String>,
|
|
pub on_select: Callback<Vec<String>>,
|
|
pub auth_url: String,
|
|
pub token_url: String,
|
|
pub user_info_url: String,
|
|
}
|
|
|
|
#[function_component(ScopeSelector)]
|
|
pub fn scope_selector(props: &ScopeSelectorProps) -> Html {
|
|
let is_open = use_state(|| false);
|
|
let dropdown_ref = use_node_ref();
|
|
|
|
let (standard_scopes, github_scopes) = get_scope_collections();
|
|
|
|
// Combine all scopes based on the detected provider
|
|
let detected_provider =
|
|
detect_provider(&props.auth_url, &props.token_url, &props.user_info_url);
|
|
let available_scopes = match detected_provider {
|
|
ProviderType::GitHub => [&standard_scopes[..], &github_scopes[..]].concat(),
|
|
_ => standard_scopes,
|
|
};
|
|
|
|
// Handle clicking outside to close dropdown
|
|
{
|
|
let is_open = is_open.clone();
|
|
let dropdown_ref = dropdown_ref.clone();
|
|
|
|
use_effect_with(dropdown_ref.clone(), move |dropdown_ref| {
|
|
let document = web_sys::window().unwrap().document().unwrap();
|
|
let dropdown_element = dropdown_ref.cast::<HtmlElement>();
|
|
|
|
let listener = EventListener::new(&document, "click", move |event| {
|
|
if let Some(target) = event.target() {
|
|
if let Some(dropdown) = &dropdown_element {
|
|
if let Ok(node) = target.dyn_into::<web_sys::Node>() {
|
|
if !dropdown.contains(Some(&node)) {
|
|
is_open.set(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|| drop(listener)
|
|
});
|
|
}
|
|
|
|
let toggle_dropdown = {
|
|
let is_open = is_open.clone();
|
|
Callback::from(move |e: MouseEvent| {
|
|
e.stop_propagation();
|
|
is_open.set(!*is_open);
|
|
})
|
|
};
|
|
|
|
let toggle_scope_selection = {
|
|
let selected = props.selected_scopes.clone();
|
|
let on_select = props.on_select.clone();
|
|
|
|
Callback::from(move |scope_id: String| {
|
|
let mut new_selection = selected.clone();
|
|
if let Some(pos) = new_selection.iter().position(|id| id == &scope_id) {
|
|
new_selection.remove(pos);
|
|
} else {
|
|
new_selection.push(scope_id);
|
|
}
|
|
on_select.emit(new_selection);
|
|
})
|
|
};
|
|
|
|
// Format selected scopes for display
|
|
let formatted_scopes = if props.selected_scopes.is_empty() {
|
|
if detected_provider == ProviderType::GitHub {
|
|
"GitHub: read:user,user:email".to_string()
|
|
} else if detected_provider == ProviderType::Google {
|
|
"OpenID Connect: openid email profile".to_string()
|
|
} else {
|
|
"OpenID Connect: openid email profile".to_string()
|
|
}
|
|
} else {
|
|
let selected_names: Vec<String> = available_scopes
|
|
.iter()
|
|
.filter(|scope| props.selected_scopes.contains(&scope.id))
|
|
.map(|scope| scope.name.clone())
|
|
.collect();
|
|
|
|
selected_names.join(", ")
|
|
};
|
|
|
|
html! {
|
|
<div class="relative" ref={dropdown_ref}>
|
|
<button
|
|
type="button"
|
|
onclick={toggle_dropdown.clone()}
|
|
class="search-bar-input border text-sm rounded-lg block w-full p-2.5 flex items-center"
|
|
>
|
|
<div class="flex items-center flex-grow">
|
|
<span class="flex-grow text-left">
|
|
{formatted_scopes}
|
|
</span>
|
|
<i class={classes!(
|
|
"ph",
|
|
"ph-caret-down",
|
|
"transition-transform",
|
|
"duration-200",
|
|
if *is_open { "rotate-180" } else { "" }
|
|
)}></i>
|
|
</div>
|
|
</button>
|
|
|
|
{
|
|
if *is_open {
|
|
let standard_group = available_scopes.iter()
|
|
.filter(|s| s.provider_type == ProviderType::Standard)
|
|
.collect::<Vec<_>>();
|
|
|
|
let github_group = available_scopes.iter()
|
|
.filter(|s| s.provider_type == ProviderType::GitHub)
|
|
.collect::<Vec<_>>();
|
|
|
|
let google_group = available_scopes.iter()
|
|
.filter(|s| s.provider_type == ProviderType::Google)
|
|
.collect::<Vec<_>>();
|
|
|
|
html! {
|
|
<div
|
|
class="absolute z-50 mt-1 w-full rounded-lg shadow-lg modal-container"
|
|
onclick={Callback::from(|e: MouseEvent| e.stop_propagation())}
|
|
>
|
|
<div class="max-h-[400px] overflow-y-auto p-2 space-y-1">
|
|
if detected_provider == ProviderType::GitHub {
|
|
<div class="p-2 rounded bg-blue-900/20 mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<i class="ph ph-info text-blue-400"></i>
|
|
<span class="font-medium">{"GitHub Provider Detected"}</span>
|
|
</div>
|
|
<p class="text-sm opacity-80 mt-1">
|
|
{"GitHub doesn't use standard OIDC scopes. We recommend using their specific scopes for best compatibility."}
|
|
</p>
|
|
</div>
|
|
}
|
|
|
|
// Render scope groups
|
|
if !standard_group.is_empty() {
|
|
<div class="mb-2">
|
|
<h3 class="text-sm font-medium opacity-70 mb-1 px-2">{"Standard OIDC Scopes"}</h3>
|
|
{ render_scope_group(standard_group, &props.selected_scopes, &toggle_scope_selection) }
|
|
</div>
|
|
}
|
|
|
|
if !github_group.is_empty() {
|
|
<div class="mb-2">
|
|
<h3 class="text-sm font-medium opacity-70 mb-1 px-2">{"GitHub Scopes"}</h3>
|
|
{ render_scope_group(github_group, &props.selected_scopes, &toggle_scope_selection) }
|
|
</div>
|
|
}
|
|
|
|
if !google_group.is_empty() {
|
|
<div class="mb-2">
|
|
<h3 class="text-sm font-medium opacity-70 mb-1 px-2">{"Google Scopes"}</h3>
|
|
{ render_scope_group(google_group, &props.selected_scopes, &toggle_scope_selection) }
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
} else {
|
|
html! {}
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// Helper function to render a group of scopes
|
|
fn render_scope_group(
|
|
scopes: Vec<&ScopeOption>,
|
|
selected_scopes: &[String],
|
|
toggle_callback: &Callback<String>,
|
|
) -> Html {
|
|
scopes
|
|
.iter()
|
|
.map(|scope| {
|
|
let is_selected = selected_scopes.contains(&scope.id);
|
|
let onclick = {
|
|
let toggle = toggle_callback.clone();
|
|
let id = scope.id.clone();
|
|
Callback::from(move |_| toggle.emit(id.clone()))
|
|
};
|
|
|
|
html! {
|
|
<div
|
|
key={scope.id.clone()}
|
|
{onclick}
|
|
class={classes!(
|
|
"flex",
|
|
"items-start",
|
|
"p-2",
|
|
"rounded-lg",
|
|
"cursor-pointer",
|
|
"hover:bg-gray-700",
|
|
"transition-colors",
|
|
if is_selected { "bg-gray-700" } else { "" }
|
|
)}
|
|
>
|
|
<div class="flex items-center h-5">
|
|
<input
|
|
type="checkbox"
|
|
class="w-4 h-4 accent-blue-500"
|
|
checked={is_selected}
|
|
readonly=true
|
|
/>
|
|
</div>
|
|
<div class="ml-3 flex-grow">
|
|
<label class="font-medium">
|
|
{&scope.name}
|
|
</label>
|
|
<p class="text-sm opacity-70">
|
|
{&scope.description}
|
|
</p>
|
|
<code class="text-xs opacity-50 block mt-1">
|
|
{&scope.value}
|
|
</code>
|
|
</div>
|
|
if is_selected {
|
|
<i class="ph ph-check text-blue-500 text-xl"></i>
|
|
}
|
|
</div>
|
|
}
|
|
})
|
|
.collect::<Html>()
|
|
}
|
|
|
|
// Helper function to detect provider type based on URLs
|
|
fn detect_provider(auth_url: &str, token_url: &str, user_info_url: &str) -> ProviderType {
|
|
let urls = [auth_url, token_url, user_info_url];
|
|
|
|
for url in urls {
|
|
if url.contains("github.com") {
|
|
return ProviderType::GitHub;
|
|
} else if url.contains("google") || url.contains("googleapis.com") {
|
|
return ProviderType::Google;
|
|
} else if url.contains("microsoft")
|
|
|| url.contains("azure")
|
|
|| url.contains("microsoftonline")
|
|
{
|
|
return ProviderType::Microsoft;
|
|
}
|
|
}
|
|
|
|
ProviderType::Standard
|
|
}
|
|
|
|
#[function_component(OIDCSettings)]
|
|
pub fn oidc_settings() -> Html {
|
|
let (i18n, _) = use_translation();
|
|
let (state, _dispatch) = use_store::<AppState>();
|
|
let page_state = use_state(|| PageState::Hidden);
|
|
let providers = use_state(|| Vec::<OIDCProvider>::new());
|
|
let update_trigger = use_state(|| false);
|
|
|
|
// Capture i18n strings before they get moved
|
|
let i18n_failed_to_fetch_oidc_providers =
|
|
i18n.t("oidc.failed_to_fetch_oidc_providers").to_string();
|
|
let i18n_provider_successfully_removed =
|
|
i18n.t("oidc.provider_successfully_removed").to_string();
|
|
let i18n_failed_to_remove_provider = i18n.t("oidc.failed_to_remove_provider").to_string();
|
|
let i18n_oidc_provider_successfully_added =
|
|
i18n.t("oidc.oidc_provider_successfully_added").to_string();
|
|
let i18n_failed_to_add_provider = i18n.t("oidc.failed_to_add_provider").to_string();
|
|
let i18n_oidc_provider_successfully_updated = i18n
|
|
.t("oidc.oidc_provider_successfully_updated")
|
|
.to_string();
|
|
let i18n_failed_to_update_provider = i18n.t("oidc.failed_to_update_provider").to_string();
|
|
let i18n_add_oidc_provider = i18n.t("oidc.add_oidc_provider").to_string();
|
|
let i18n_edit_oidc_provider = i18n.t("oidc.edit_oidc_provider").to_string();
|
|
let i18n_close_modal = i18n.t("common.close_modal").to_string();
|
|
let i18n_oidc_redirect_url = i18n.t("oidc.oidc_redirect_url").to_string();
|
|
let i18n_use_this_url_when_configuring =
|
|
i18n.t("oidc.use_this_url_when_configuring").to_string();
|
|
let i18n_provider_name = i18n.t("oidc.provider_name").to_string();
|
|
let i18n_client_id = i18n.t("oidc.client_id").to_string();
|
|
let i18n_client_secret = i18n.t("oidc.client_secret").to_string();
|
|
let i18n_authorization_url = i18n.t("oidc.authorization_url").to_string();
|
|
let i18n_token_url = i18n.t("oidc.token_url").to_string();
|
|
let i18n_user_info_url = i18n.t("oidc.user_info_url").to_string();
|
|
let i18n_submit = i18n.t("common.submit").to_string();
|
|
let i18n_add = i18n.t("common.add").to_string();
|
|
let i18n_update = i18n.t("common.update").to_string();
|
|
let i18n_oidc_provider_management = i18n.t("oidc.oidc_provider_management").to_string();
|
|
let i18n_add_provider = i18n.t("oidc.add_provider").to_string();
|
|
let i18n_no_oidc_providers_configured = i18n.t("oidc.no_oidc_providers_configured").to_string();
|
|
let i18n_remove = i18n.t("common.remove").to_string();
|
|
|
|
// Form states for the add/edit provider modal
|
|
let provider_name = use_state(|| String::new());
|
|
let client_id = use_state(|| String::new());
|
|
let client_secret = use_state(|| String::new());
|
|
let auth_url = use_state(|| String::new());
|
|
let token_url = use_state(|| String::new());
|
|
let user_info_url = use_state(|| String::new());
|
|
let button_text = use_state(|| String::new());
|
|
let button_color = use_state(|| String::from("#000000"));
|
|
let button_text_color = use_state(|| String::from("#000000"));
|
|
let icon_svg = use_state(|| String::new());
|
|
let name_claim = use_state(|| String::new());
|
|
let email_claim = use_state(|| String::new());
|
|
let username_claim = use_state(|| String::new());
|
|
let roles_claim = use_state(|| String::new());
|
|
let user_role = use_state(|| String::new());
|
|
let admin_role = use_state(|| String::new());
|
|
let selected_scopes = use_state(|| Vec::<String>::new());
|
|
let editing_provider_id = use_state(|| None::<i32>);
|
|
|
|
// Function to populate form with provider data for editing
|
|
let populate_form_for_edit = {
|
|
let provider_name = provider_name.clone();
|
|
let client_id = client_id.clone();
|
|
let client_secret = client_secret.clone();
|
|
let auth_url = auth_url.clone();
|
|
let token_url = token_url.clone();
|
|
let user_info_url = user_info_url.clone();
|
|
let button_text = button_text.clone();
|
|
let button_color = button_color.clone();
|
|
let button_text_color = button_text_color.clone();
|
|
let icon_svg = icon_svg.clone();
|
|
let name_claim = name_claim.clone();
|
|
let email_claim = email_claim.clone();
|
|
let username_claim = username_claim.clone();
|
|
let roles_claim = roles_claim.clone();
|
|
let user_role = user_role.clone();
|
|
let admin_role = admin_role.clone();
|
|
let selected_scopes = selected_scopes.clone();
|
|
let editing_provider_id = editing_provider_id.clone();
|
|
|
|
move |provider: &OIDCProvider| {
|
|
provider_name.set(provider.provider_name.clone());
|
|
client_id.set(provider.client_id.clone());
|
|
client_secret.set(String::new()); // Don't populate secret for security
|
|
auth_url.set(provider.authorization_url.clone());
|
|
token_url.set(provider.token_url.clone());
|
|
user_info_url.set(provider.user_info_url.clone());
|
|
button_text.set(provider.button_text.clone());
|
|
button_color.set(provider.button_color.clone());
|
|
button_text_color.set(provider.button_text_color.clone());
|
|
icon_svg.set(provider.icon_svg.as_ref().unwrap_or(&String::new()).clone());
|
|
name_claim.set(
|
|
provider
|
|
.name_claim
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
email_claim.set(
|
|
provider
|
|
.email_claim
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
username_claim.set(
|
|
provider
|
|
.username_claim
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
roles_claim.set(
|
|
provider
|
|
.roles_claim
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
user_role.set(
|
|
provider
|
|
.user_role
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
admin_role.set(
|
|
provider
|
|
.admin_role
|
|
.as_ref()
|
|
.unwrap_or(&String::new())
|
|
.clone(),
|
|
);
|
|
editing_provider_id.set(Some(provider.provider_id));
|
|
|
|
// Parse scopes from the provider's scope string
|
|
let scopes_vec: Vec<String> = provider
|
|
.scope
|
|
.split_whitespace()
|
|
.map(|s| s.to_string())
|
|
.collect();
|
|
selected_scopes.set(scopes_vec);
|
|
}
|
|
};
|
|
|
|
// Function to clear form for adding new provider
|
|
let clear_form = {
|
|
let provider_name = provider_name.clone();
|
|
let client_id = client_id.clone();
|
|
let client_secret = client_secret.clone();
|
|
let auth_url = auth_url.clone();
|
|
let token_url = token_url.clone();
|
|
let user_info_url = user_info_url.clone();
|
|
let button_text = button_text.clone();
|
|
let button_color = button_color.clone();
|
|
let button_text_color = button_text_color.clone();
|
|
let icon_svg = icon_svg.clone();
|
|
let name_claim = name_claim.clone();
|
|
let email_claim = email_claim.clone();
|
|
let username_claim = username_claim.clone();
|
|
let roles_claim = roles_claim.clone();
|
|
let user_role = user_role.clone();
|
|
let admin_role = admin_role.clone();
|
|
let selected_scopes = selected_scopes.clone();
|
|
let editing_provider_id = editing_provider_id.clone();
|
|
|
|
move || {
|
|
provider_name.set(String::new());
|
|
client_id.set(String::new());
|
|
client_secret.set(String::new());
|
|
auth_url.set(String::new());
|
|
token_url.set(String::new());
|
|
user_info_url.set(String::new());
|
|
button_text.set(String::new());
|
|
button_color.set(String::from("#000000"));
|
|
button_text_color.set(String::from("#000000"));
|
|
icon_svg.set(String::new());
|
|
name_claim.set(String::new());
|
|
email_claim.set(String::new());
|
|
username_claim.set(String::new());
|
|
roles_claim.set(String::new());
|
|
user_role.set(String::new());
|
|
admin_role.set(String::new());
|
|
selected_scopes.set(Vec::new());
|
|
editing_provider_id.set(None);
|
|
}
|
|
};
|
|
|
|
// Add this callback after your other input handlers
|
|
let scope_on_select = {
|
|
let selected_scopes = selected_scopes.clone();
|
|
Callback::from(move |scopes: Vec<String>| {
|
|
selected_scopes.set(scopes);
|
|
})
|
|
};
|
|
|
|
// Fetch providers on component mount and when update_trigger changes
|
|
let effect_state = state.clone();
|
|
{
|
|
let providers = providers.clone();
|
|
let update_trigger = update_trigger.clone();
|
|
let _dispatch = _dispatch.clone();
|
|
|
|
use_effect_with(*update_trigger, move |_| {
|
|
let server_name = effect_state
|
|
.auth_details
|
|
.as_ref()
|
|
.map(|ud| ud.server_name.clone());
|
|
let api_key = effect_state
|
|
.auth_details
|
|
.as_ref()
|
|
.and_then(|ud| ud.api_key.clone());
|
|
|
|
if let (Some(server_name), Some(api_key)) = (server_name, api_key) {
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match call_list_oidc_providers(server_name, api_key).await {
|
|
Ok(fetched_providers) => {
|
|
providers.set(fetched_providers);
|
|
}
|
|
Err(e) => {
|
|
let formatted_error = format_error_message(&e.to_string());
|
|
_dispatch.reduce_mut(|state| {
|
|
state.error_message = Some(format!(
|
|
"{}{}",
|
|
i18n_failed_to_fetch_oidc_providers.clone(),
|
|
formatted_error
|
|
));
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|| ()
|
|
});
|
|
}
|
|
|
|
let on_add_provider = {
|
|
let page_state = page_state.clone();
|
|
let clear_form = clear_form.clone();
|
|
Callback::from(move |_| {
|
|
clear_form();
|
|
page_state.set(PageState::AddProvider);
|
|
})
|
|
};
|
|
|
|
let on_edit_provider = {
|
|
let page_state = page_state.clone();
|
|
let populate_form_for_edit = populate_form_for_edit.clone();
|
|
let providers = providers.clone();
|
|
Callback::from(move |provider_id: i32| {
|
|
if let Some(provider) = providers.iter().find(|p| p.provider_id == provider_id) {
|
|
populate_form_for_edit(provider);
|
|
page_state.set(PageState::EditProvider(provider_id));
|
|
}
|
|
})
|
|
};
|
|
|
|
let on_close_modal = {
|
|
let page_state = page_state.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
page_state.set(PageState::Hidden);
|
|
})
|
|
};
|
|
|
|
let on_background_click = {
|
|
let on_close_modal = on_close_modal.clone();
|
|
Callback::from(move |e: MouseEvent| {
|
|
let target = e.target().unwrap();
|
|
let element = target.dyn_into::<web_sys::Element>().unwrap();
|
|
if element.tag_name() == "DIV" {
|
|
on_close_modal.emit(e);
|
|
}
|
|
})
|
|
};
|
|
|
|
let stop_propagation = Callback::from(|e: MouseEvent| {
|
|
e.stop_propagation();
|
|
});
|
|
|
|
let remove_state = state.clone();
|
|
let on_remove_provider = {
|
|
let update_trigger = update_trigger.clone();
|
|
let _dispatch = _dispatch.clone();
|
|
let i18n_provider_successfully_removed = i18n_provider_successfully_removed.clone();
|
|
let i18n_failed_to_remove_provider = i18n_failed_to_remove_provider.clone();
|
|
|
|
Callback::from(move |provider_id: i32| {
|
|
let i18n_provider_successfully_removed = i18n_provider_successfully_removed.clone();
|
|
let i18n_failed_to_remove_provider = i18n_failed_to_remove_provider.clone();
|
|
let server_name = remove_state
|
|
.auth_details
|
|
.as_ref()
|
|
.map(|ud| ud.server_name.clone());
|
|
let api_key = remove_state
|
|
.auth_details
|
|
.as_ref()
|
|
.and_then(|ud| ud.api_key.clone());
|
|
let update_trigger = update_trigger.clone();
|
|
let _dispatch = _dispatch.clone();
|
|
|
|
if let (Some(server_name), Some(api_key)) = (server_name, api_key) {
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match call_remove_oidc_provider(server_name, api_key, provider_id).await {
|
|
Ok(_) => {
|
|
update_trigger.set(!*update_trigger);
|
|
_dispatch.reduce_mut(|state| {
|
|
state.info_message =
|
|
Some(i18n_provider_successfully_removed.clone());
|
|
});
|
|
}
|
|
Err(e) => {
|
|
let formatted_error = format_error_message(&e.to_string());
|
|
_dispatch.reduce_mut(|state| {
|
|
state.error_message = Some(format!(
|
|
"{}{}",
|
|
i18n_failed_to_remove_provider, formatted_error
|
|
));
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
};
|
|
|
|
// Create provider modal
|
|
// Input handlers
|
|
let on_provider_name_change = {
|
|
let provider_name = provider_name.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
provider_name.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_client_id_change = {
|
|
let client_id = client_id.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
client_id.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_client_secret_change = {
|
|
let client_secret = client_secret.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
client_secret.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_auth_url_change = {
|
|
let auth_url = auth_url.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
auth_url.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_token_url_change = {
|
|
let token_url = token_url.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
token_url.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_user_info_url_change = {
|
|
let user_info_url = user_info_url.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
user_info_url.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_button_text_change = {
|
|
let button_text = button_text.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
button_text.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_button_color_change = {
|
|
let button_color = button_color.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
button_color.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_button_text_color_change = {
|
|
let button_text_color = button_text_color.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
button_text_color.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_icon_svg_change = {
|
|
let icon_svg = icon_svg.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
icon_svg.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_name_claim_change = {
|
|
let name_claim = name_claim.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
name_claim.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_email_claim_change = {
|
|
let email_claim = email_claim.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
email_claim.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_username_claim_change = {
|
|
let username_claim = username_claim.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
username_claim.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_roles_claim_change = {
|
|
let roles_claim = roles_claim.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
roles_claim.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_user_role_change = {
|
|
let user_role = user_role.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
user_role.set(target.value());
|
|
})
|
|
};
|
|
|
|
let on_admin_role_change = {
|
|
let admin_role = admin_role.clone();
|
|
Callback::from(move |e: InputEvent| {
|
|
let target = e.target_unchecked_into::<HtmlInputElement>();
|
|
admin_role.set(target.value());
|
|
})
|
|
};
|
|
|
|
let submit_state = state.clone();
|
|
let on_submit = {
|
|
let provider_name = provider_name.clone();
|
|
let client_id = client_id.clone();
|
|
let client_secret = client_secret.clone();
|
|
let auth_url = auth_url.clone();
|
|
let token_url = token_url.clone();
|
|
let user_info_url = user_info_url.clone();
|
|
let button_text = button_text.clone();
|
|
let button_color = button_color.clone();
|
|
let button_text_color = button_text_color.clone();
|
|
let icon_svg = icon_svg.clone();
|
|
let name_claim = name_claim.clone();
|
|
let email_claim = email_claim.clone();
|
|
let username_claim = username_claim.clone();
|
|
let roles_claim = roles_claim.clone();
|
|
let user_role = user_role.clone();
|
|
let admin_role = admin_role.clone();
|
|
let page_state = page_state.clone();
|
|
let update_trigger = update_trigger.clone();
|
|
let _dispatch = _dispatch.clone();
|
|
let selected_scopes = selected_scopes.clone();
|
|
let i18n_oidc_provider_successfully_added = i18n_oidc_provider_successfully_added.clone();
|
|
let i18n_failed_to_add_provider = i18n_failed_to_add_provider.clone();
|
|
let i18n_oidc_provider_successfully_updated =
|
|
i18n_oidc_provider_successfully_updated.clone();
|
|
let i18n_failed_to_update_provider = i18n_failed_to_update_provider.clone();
|
|
|
|
Callback::from(move |e: SubmitEvent| {
|
|
let i18n_oidc_provider_successfully_added =
|
|
i18n_oidc_provider_successfully_added.clone();
|
|
let i18n_failed_to_add_provider = i18n_failed_to_add_provider.clone();
|
|
let i18n_oidc_provider_successfully_updated =
|
|
i18n_oidc_provider_successfully_updated.clone();
|
|
let i18n_failed_to_update_provider = i18n_failed_to_update_provider.clone();
|
|
let call_trigger = update_trigger.clone();
|
|
let call_page_state = page_state.clone();
|
|
let call_dispatch = _dispatch.clone();
|
|
e.prevent_default();
|
|
|
|
// Calculate detected_provider inside the callback so it uses current values
|
|
let detected_provider = detect_provider(&(*auth_url), &(*token_url), &(*user_info_url));
|
|
|
|
let provider = AddOIDCProviderRequest {
|
|
provider_name: (*provider_name).clone(),
|
|
client_id: (*client_id).clone(),
|
|
client_secret: (*client_secret).clone(),
|
|
authorization_url: (*auth_url).clone(),
|
|
token_url: (*token_url).clone(),
|
|
user_info_url: (*user_info_url).clone(),
|
|
button_text: (*button_text).clone(),
|
|
scope: Some(format_scopes_for_request(
|
|
&*selected_scopes,
|
|
&detected_provider,
|
|
)),
|
|
button_color: Some((*button_color).clone()),
|
|
button_text_color: Some((*button_text_color).clone()),
|
|
icon_svg: Some((*icon_svg).clone()),
|
|
name_claim: Some((*name_claim).clone()),
|
|
email_claim: Some((*email_claim).clone()),
|
|
username_claim: Some((*username_claim).clone()),
|
|
roles_claim: Some((*roles_claim).clone()),
|
|
user_role: Some((*user_role).clone()),
|
|
admin_role: Some((*admin_role).clone()),
|
|
};
|
|
|
|
// Rest of your submission code...
|
|
let server_name = submit_state
|
|
.auth_details
|
|
.as_ref()
|
|
.map(|ud| ud.server_name.clone());
|
|
let api_key = submit_state
|
|
.auth_details
|
|
.as_ref()
|
|
.and_then(|ud| ud.api_key.clone());
|
|
|
|
if let (Some(server_name), Some(api_key)) = (server_name, api_key) {
|
|
let current_page_state = (*call_page_state).clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match current_page_state {
|
|
PageState::AddProvider => {
|
|
match call_add_oidc_provider(server_name, api_key, provider).await {
|
|
Ok(_) => {
|
|
call_trigger.set(!*call_trigger);
|
|
call_page_state.set(PageState::Hidden);
|
|
call_dispatch.reduce_mut(|state| {
|
|
state.info_message =
|
|
Some(i18n_oidc_provider_successfully_added.clone());
|
|
});
|
|
}
|
|
Err(e) => {
|
|
let formatted_error = format_error_message(&e.to_string());
|
|
call_dispatch.reduce_mut(|state| {
|
|
state.error_message = Some(format!(
|
|
"{}{}",
|
|
i18n_failed_to_add_provider, formatted_error
|
|
));
|
|
});
|
|
}
|
|
}
|
|
}
|
|
PageState::EditProvider(provider_id) => {
|
|
match call_update_oidc_provider(
|
|
server_name,
|
|
api_key,
|
|
provider_id,
|
|
provider,
|
|
)
|
|
.await
|
|
{
|
|
Ok(_) => {
|
|
call_trigger.set(!*call_trigger);
|
|
call_page_state.set(PageState::Hidden);
|
|
call_dispatch.reduce_mut(|state| {
|
|
state.info_message =
|
|
Some(i18n_oidc_provider_successfully_updated.clone());
|
|
});
|
|
}
|
|
Err(e) => {
|
|
let formatted_error = format_error_message(&e.to_string());
|
|
call_dispatch.reduce_mut(|state| {
|
|
state.error_message = Some(format!(
|
|
"{}{}",
|
|
i18n_failed_to_update_provider, formatted_error
|
|
));
|
|
});
|
|
}
|
|
}
|
|
}
|
|
PageState::Hidden => {
|
|
// This shouldn't happen, but handle gracefully
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
};
|
|
|
|
let redirect_url = if let Some(auth_details) = &state.auth_details {
|
|
format!("{}/api/auth/callback", auth_details.server_name)
|
|
} else {
|
|
"https://your-pinepods-instance/api/auth/callback".to_string()
|
|
};
|
|
|
|
let onclick_copy = {
|
|
let url = redirect_url.clone();
|
|
Callback::from(move |_| {
|
|
if let Some(window) = web_sys::window() {
|
|
let clipboard = window.navigator().clipboard();
|
|
let _ = clipboard.write_text(&url);
|
|
}
|
|
})
|
|
};
|
|
|
|
let add_provider_modal = html! {
|
|
<div id="add-provider-modal" tabindex="-1" aria-hidden="true"
|
|
class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-25"
|
|
onclick={on_background_click.clone()}>
|
|
<div class="modal-container relative p-4 w-full max-w-2xl max-h-[80vh] rounded-lg shadow overflow-y-auto"
|
|
onclick={stop_propagation.clone()}>
|
|
<div class="modal-container relative rounded-lg shadow">
|
|
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
|
|
<h3 class="text-xl font-semibold">
|
|
{match &*page_state {
|
|
PageState::AddProvider => &i18n_add_oidc_provider,
|
|
PageState::EditProvider(_) => &i18n_edit_oidc_provider,
|
|
PageState::Hidden => &i18n_add_oidc_provider, // fallback
|
|
}}
|
|
</h3>
|
|
<button onclick={on_close_modal.clone()}
|
|
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
</svg>
|
|
<span class="sr-only">{&i18n_close_modal}</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 md:p-5">
|
|
<div class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 mb-6">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i class="ph ph-info text-indigo-600 dark:text-indigo-400"></i>
|
|
<h3 class="font-medium text-indigo-900 dark:text-indigo-100">{&i18n_oidc_redirect_url}</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white dark:bg-gray-800 rounded p-2">
|
|
<code class="text-sm text-gray-800 dark:text-gray-200 flex-grow">
|
|
{redirect_url.clone()}
|
|
</code>
|
|
<button
|
|
onclick={onclick_copy.clone()}
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 p-1 rounded"
|
|
title="Copy to clipboard"
|
|
>
|
|
<i class="ph ph-copy text-lg"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-indigo-700 dark:text-indigo-300 mt-2">
|
|
{&i18n_use_this_url_when_configuring}
|
|
</p>
|
|
</div>
|
|
<form class="space-y-4" action="#" onsubmit={on_submit}>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_provider_name}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*provider_name).clone()}
|
|
oninput={on_provider_name_change}
|
|
placeholder="Google"
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_client_id}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*client_id).clone()}
|
|
oninput={on_client_id_change}
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_client_secret}
|
|
{match &*page_state {
|
|
PageState::EditProvider(_) => html! { <span class="text-sm opacity-70">{" (leave empty to keep current)"}</span> },
|
|
_ => html! {}
|
|
}}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
class="form-input"
|
|
value={(*client_secret).clone()}
|
|
oninput={on_client_secret_change}
|
|
required={match &*page_state {
|
|
PageState::AddProvider => true,
|
|
PageState::EditProvider(_) => false,
|
|
PageState::Hidden => false,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_authorization_url}</label>
|
|
<input
|
|
type="url"
|
|
class="form-input"
|
|
value={(*auth_url).clone()}
|
|
oninput={on_auth_url_change}
|
|
placeholder="https://provider.com/oauth2/auth"
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_token_url}</label>
|
|
<input
|
|
type="url"
|
|
class="form-input"
|
|
value={(*token_url).clone()}
|
|
oninput={on_token_url_change}
|
|
placeholder="https://provider.com/oauth2/token"
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{&i18n_user_info_url}</label>
|
|
<input
|
|
type="url"
|
|
class="form-input"
|
|
value={(*user_info_url).clone()}
|
|
oninput={on_user_info_url_change}
|
|
placeholder="https://provider.com/oauth2/userinfo"
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group col-span-2">
|
|
<label class="form-label">{"Scopes"}</label>
|
|
<ScopeSelector
|
|
selected_scopes={(*selected_scopes).clone()}
|
|
on_select={scope_on_select}
|
|
auth_url={(*auth_url).clone()}
|
|
token_url={(*token_url).clone()}
|
|
user_info_url={(*user_info_url).clone()}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Button Text"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*button_text).clone()}
|
|
oninput={on_button_text_change}
|
|
placeholder="Login with Provider"
|
|
required=true
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Button Color"}</label>
|
|
<input
|
|
type="color"
|
|
class="form-input h-[42px]"
|
|
value={(*button_color).clone()}
|
|
oninput={on_button_color_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Button Text Color"}</label>
|
|
<input
|
|
type="color"
|
|
class="form-input h-[42px]"
|
|
value={(*button_text_color).clone()}
|
|
oninput={on_button_text_color_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group col-span-2">
|
|
<label class="form-label">{"Icon SVG (optional)"}</label>
|
|
<textarea
|
|
class="form-input min-h-[100px]"
|
|
value={(*icon_svg).clone()}
|
|
oninput={on_icon_svg_change}
|
|
placeholder="<svg>...</svg>"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Name Claim"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*name_claim).clone()}
|
|
oninput={on_name_claim_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Email Claim"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*email_claim).clone()}
|
|
oninput={on_email_claim_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Username Claim"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*username_claim).clone()}
|
|
oninput={on_username_claim_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Roles Claim"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*roles_claim).clone()}
|
|
oninput={on_roles_claim_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"User Role"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*user_role).clone()}
|
|
oninput={on_user_role_change}
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{"Admin Role"}</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
value={(*admin_role).clone()}
|
|
oninput={on_admin_role_change}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<button type="submit" class="download-button focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">
|
|
{match &*page_state {
|
|
PageState::AddProvider => &i18n_add,
|
|
PageState::EditProvider(_) => &i18n_update,
|
|
PageState::Hidden => &i18n_submit, // fallback
|
|
}}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
};
|
|
|
|
html! {
|
|
<div class="user-settings-container">
|
|
|
|
<div class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 mb-6">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i class="ph ph-info text-indigo-600 dark:text-indigo-400"></i>
|
|
<h3 class="font-medium text-indigo-900 dark:text-indigo-100">{"OIDC Redirect URL"}</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-white dark:bg-gray-800 rounded p-2">
|
|
<code class="text-sm text-gray-800 dark:text-gray-200 flex-grow">
|
|
{redirect_url}
|
|
</code>
|
|
<button
|
|
onclick={onclick_copy}
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 p-1 rounded"
|
|
title="Copy to clipboard"
|
|
>
|
|
<i class="ph ph-copy text-lg"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-indigo-700 dark:text-indigo-300 mt-2">
|
|
{"Use this URL when configuring your OIDC provider's callback/redirect settings."}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="settings-header">
|
|
<div class="flex items-center gap-4">
|
|
<i class="ph ph-key text-2xl"></i>
|
|
<h2 class="text-xl font-semibold">{&i18n_oidc_provider_management}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<button onclick={on_add_provider} class="settings-button">
|
|
<i class="ph ph-plus"></i>
|
|
{&i18n_add_provider}
|
|
</button>
|
|
</div>
|
|
|
|
if (*providers).is_empty() {
|
|
<div class="oidc-empty-state">
|
|
<p>{&i18n_no_oidc_providers_configured}</p>
|
|
</div>
|
|
} else {
|
|
{
|
|
(*providers).iter().map(|provider| {
|
|
let on_remove = {
|
|
let on_remove_provider = on_remove_provider.clone();
|
|
let provider_id = provider.provider_id;
|
|
Callback::from(move |_| {
|
|
on_remove_provider.emit(provider_id);
|
|
})
|
|
};
|
|
|
|
let on_edit = {
|
|
let on_edit_provider = on_edit_provider.clone();
|
|
let provider_id = provider.provider_id;
|
|
Callback::from(move |_| {
|
|
on_edit_provider.emit(provider_id);
|
|
})
|
|
};
|
|
|
|
html! {
|
|
<div class="oidc-provider-card">
|
|
<div class="oidc-provider-header">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-lg font-medium">{&provider.provider_name}</h3>
|
|
if provider.initialized_from_env {
|
|
<span class="px-2 py-1 text-xs rounded-full bg-blue-900/20 text-blue-300 border border-blue-800/30">
|
|
{"Environment"}
|
|
</span>
|
|
}
|
|
</div>
|
|
<p class="text-sm opacity-70">{&provider.client_id}</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button onclick={on_edit} class="oidc-edit-button">
|
|
<i class="ph ph-pencil"></i>
|
|
{"Edit"}
|
|
</button>
|
|
if !provider.initialized_from_env {
|
|
<button onclick={on_remove} class="oidc-remove-button">
|
|
<i class="ph ph-trash"></i>
|
|
{&i18n_remove}
|
|
</button>
|
|
} else {
|
|
<button
|
|
class="oidc-remove-button opacity-50 cursor-not-allowed"
|
|
disabled=true
|
|
title="Cannot remove environment-initialized providers"
|
|
>
|
|
<i class="ph ph-trash"></i>
|
|
{&i18n_remove}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="oidc-provider-info">
|
|
<div class="oidc-info-group">
|
|
<div class="oidc-info-label">{&i18n_authorization_url}</div>
|
|
<div class="oidc-info-value">{&provider.authorization_url}</div>
|
|
</div>
|
|
<div class="oidc-info-group">
|
|
<div class="oidc-info-label">{&i18n_token_url}</div>
|
|
<div class="oidc-info-value">{&provider.token_url}</div>
|
|
</div>
|
|
<div class="oidc-info-group">
|
|
<div class="oidc-info-label">{&i18n_user_info_url}</div>
|
|
<div class="oidc-info-value">{&provider.user_info_url}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}).collect::<Html>()
|
|
}
|
|
}
|
|
|
|
{
|
|
match *page_state {
|
|
PageState::AddProvider => add_provider_modal,
|
|
PageState::EditProvider(_) => add_provider_modal, // Reuse the same modal for editing
|
|
PageState::Hidden => html! {},
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
}
|