From: Shannon Sterz <s.sterz@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [pdm-devel] [PATCH yew-comp 2/2] token panel: improve token secret dialog layout and hide password
Date: Fri, 3 Oct 2025 16:21:05 +0200 [thread overview]
Message-ID: <20251003142108.352525-6-s.sterz@proxmox.com> (raw)
In-Reply-To: <20251003142108.352525-1-s.sterz@proxmox.com>
the dialog showing the token secret now displays it like any other
password. meaning that the actual secret is covered up at first but
can be displayed if required. this adds protections against should
surfing attacks.
the copy secret button has also been moved next to the input field and
is now an icon buton with a tool tip.
Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
src/token_panel.rs | 111 ++++++++++++++++++++++-----------------------
1 file changed, 55 insertions(+), 56 deletions(-)
diff --git a/src/token_panel.rs b/src/token_panel.rs
index c027a32..049aaa0 100644
--- a/src/token_panel.rs
+++ b/src/token_panel.rs
@@ -6,6 +6,7 @@ use anyhow::Error;
use proxmox_access_control::types::{ApiToken, UserWithTokens};
use proxmox_auth_api::types::Authid;
use proxmox_client::ApiResponseData;
+use pwt::css::ColorScheme;
use serde_json::{json, Value};
use yew::virtual_dom::{Key, VComp, VNode};
@@ -14,7 +15,9 @@ use pwt::prelude::*;
use pwt::state::{Selection, Store};
use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
use pwt::widget::form::{Checkbox, DisplayField, Field, FormContext, InputType};
-use pwt::widget::{Button, Column, Container, Dialog, InputPanel, Toolbar};
+use pwt::widget::{
+ Button, Column, Container, Dialog, FieldLabel, InputPanel, Row, Toolbar, Tooltip,
+};
use crate::percent_encoding::percent_encode_component;
use crate::utils::{
@@ -321,65 +324,61 @@ impl ProxmoxTokenView {
}
fn show_secret_dialog(&self, ctx: &LoadableComponentContext<Self>, secret: &Value) -> Html {
- let secret = secret.clone();
+ let tokenid = AttrValue::from(secret["tokenid"].as_str().unwrap_or("").to_owned());
+ let secret = AttrValue::from(secret["value"].as_str().unwrap_or("").to_owned());
Dialog::new(tr!("Token Secret"))
.with_child(
- Column::new()
- .with_child(
- InputPanel::new()
- .padding(4)
- .with_large_field(
- tr!("Token ID"),
- DisplayField::new()
- .value(AttrValue::from(
- secret["tokenid"].as_str().unwrap_or("").to_owned(),
- ))
- .border(true),
- )
- .with_large_field(
- tr!("Secret"),
- DisplayField::new()
- .value(AttrValue::from(
- secret["value"].as_str().unwrap_or("").to_owned(),
- ))
- .border(true),
- ),
- )
- .with_child(
- Container::new()
- .style("opacity", "0")
- .with_child(AttrValue::from(
- secret["value"].as_str().unwrap_or("").to_owned(),
- )),
- )
- .with_child(
- Container::new()
- .padding(4)
- .class(pwt::css::FlexFit)
- .class("pwt-bg-color-warning-container")
- .class("pwt-color-on-warning-container")
- .with_child(tr!(
- "Please record the API token secret - it will only be displayed now"
- )),
- )
- .with_child(
- Toolbar::new()
- .class("pwt-bg-color-surface")
- .with_flex_spacer()
- .with_child(
- Button::new(tr!("Copy Secret Value"))
- .icon_class("fa fa-clipboard")
- .class("pwt-scheme-primary")
- .on_activate({
- move |_| {
- copy_text_to_clipboard(
- secret["value"].as_str().unwrap_or(""),
+ Column::new().with_child(
+ InputPanel::new()
+ .padding(4)
+ .with_large_field(
+ tr!("Token ID"),
+ DisplayField::new()
+ .value(tokenid)
+ .name("tokenid")
+ .border(true),
+ )
+ .with_large_custom_child(
+ Container::new()
+ .class("pwt-form-grid-col4")
+ .with_child(FieldLabel::new(tr!("Secret")))
+ .with_child(
+ Row::new()
+ .class("pwt-fill-grid-row")
+ .with_child(
+ Field::new()
+ .input_type(InputType::Password)
+ .class(pwt::css::FlexFit)
+ .value(secret.clone())
+ .name("secret")
+ .disabled(true)
+ .opacity(100),
+ )
+ .with_child(
+ Tooltip::new(
+ Button::new_icon("fa fa-clipboard")
+ .class(ColorScheme::Primary)
+ .margin_start(2)
+ .on_activate(move |_| {
+ copy_text_to_clipboard(&secret)
+ }),
)
- }
- }),
- ),
- ),
+ .tip(tr!("Copy token secret to clipboard.")),
+ ),
+ ),
+ ),
+ ),
+ )
+ .with_child(
+ Container::new()
+ .padding(4)
+ .class(pwt::css::FlexFit)
+ .class("pwt-bg-color-warning-container")
+ .class("pwt-color-on-warning-container")
+ .with_child(tr!(
+ "Please record the API token secret - it will only be displayed now."
+ )),
)
.on_close(ctx.link().change_view_callback(|_| None))
.into()
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
next prev parent reply other threads:[~2025-10-03 14:21 UTC|newest]
Thread overview: 9+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-10-03 14:21 [pdm-devel] [PATCH datacenter-manager/proxmox/yew-comp 0/8] add better token support for pdm Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH proxmox 1/3] access-control: refactor api module to be more hirachical Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH proxmox 2/3] access-control: move `ApiTokenSecret` to types module Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH proxmox 3/3] access-control: add api endpoints for handling tokens Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH yew-comp 1/2] utils/tfa add recover/token panel: add copy_text_to_clipboard function Shannon Sterz
2025-10-03 14:21 ` Shannon Sterz [this message]
2025-10-03 14:21 ` [pdm-devel] [PATCH datacenter-manager 1/3] ui: add a token panel and a token acl edit menu in the permissions panel Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH datacenter-manager 2/3] server: access: use token endpoints from proxmox-access-control Shannon Sterz
2025-10-03 14:21 ` [pdm-devel] [PATCH datacenter-manager 3/3] server: clean up acl tree entries and api tokens when deleting users Shannon Sterz
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20251003142108.352525-6-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pdm-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox