Skip to content

Improve VAPID key installation and presentation #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iMattPro merged 4 commits into from
Oct 16, 2026
Merged

Improve VAPID key installation and presentation #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbbd403
Update vapid keys presentation in ACP
iMattPro Oct 16, 2026
d933aed
Generate VAPID keys during intial install
iMattPro Oct 16, 2026
3d25795
Show default short name in field placeholder
iMattPro Oct 16, 2026
d739595
Code cleanup
iMattPro Oct 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions acp/wpn_acp_module.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,6 @@ class wpn_acp_module
/** @var array $errors */
protected $errors = [];

/** @var string Hide/replace private key with asterisks */
public const MASKED_PRIVATE_KEY = '********';

/**
* Main ACP module
*
Expand Down Expand Up @@ -142,7 +139,8 @@ public function display_settings()
$this->template->assign_vars([
'S_WEBPUSH_ENABLE' => $this->config['wpn_webpush_enable'],
'WEBPUSH_VAPID_PUBLIC' => $this->config['wpn_webpush_vapid_public'],
'WEBPUSH_VAPID_PRIVATE' => $this->config['wpn_webpush_vapid_private'] ? self::MASKED_PRIVATE_KEY : '',
'S_VAPID_KEYS_CONFIGURED' => (bool) ($this->config['wpn_webpush_vapid_public'] && $this->config['wpn_webpush_vapid_private']),
'S_VAPID_PRIVATE_CONFIGURED' => (bool) $this->config['wpn_webpush_vapid_private'],
'S_WEBPUSH_DROPDOWN_SUBSCRIBE' => $this->config['wpn_webpush_dropdown_subscribe'],
'S_WEBPUSH_METHOD_ENABLED' => $this->config['wpn_webpush_method_enabled'],
'S_WEBPUSH_POPUP_PROMPT' => $this->config['wpn_webpush_popup_prompt'],
Expand Down Expand Up @@ -174,8 +172,8 @@ public function save_settings()
'wpn_webpush_popup_prompt' => ['validate' => 'bool'],
];

// Do not validate and update private key field if the content is ******** and the key was already set
if ($config_array['wpn_webpush_vapid_private'] === self::MASKED_PRIVATE_KEY && $this->config['wpn_webpush_vapid_private'])
// An empty private key keeps the stored credential. Stored private keys are never sent to the browser.
if (($config_array['wpn_webpush_vapid_private'] ?? '') === '' && $this->config['wpn_webpush_vapid_private'])
{
unset($display_settings['wpn_webpush_vapid_private'], $config_array['wpn_webpush_vapid_private']);
}
Expand Down Expand Up @@ -209,6 +207,7 @@ public function display_pwa_settings()
$this->template->assign_vars([
'S_PWA_SHOW_INSTALL_BANNER' => (bool) $this->config['pwa_show_install_banner'],
'PWA_SHORT_NAME' => $this->config['pwa_short_name'],
'PWA_SHORT_NAME_PLACEHOLDER'=> utf8_substr(ext::decode_entities($this->config['sitename'], ENT_QUOTES), 0, 12),
'PWA_ICON_SMALL' => $this->config['pwa_icon_small'],
'PWA_ICON_LARGE' => $this->config['pwa_icon_large'],
'STYLES' => $this->get_styles(),
Expand Down
256 changes: 256 additions & 0 deletions adm/style/wpn_acp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
.vapid-credentials {
background: #f7fbff;
border: 1px solid #b8d3e6;
border-radius: 7px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
}

.vapid-credentials-header {
display: flex;
align-items: center;
padding: 18px;
gap: 14px;
}

.vapid-credentials-icon {
font-size: 18px;
background: #105289;
border-radius: 50%;
color: #ffffff;
display: flex;
flex: 0 0 42px;
justify-content: center;
align-items: center;
height: 42px;
}

.vapid-credentials-summary {
flex: 1 1 auto;
}

.vapid-credentials-summary h2 {
font-size: 1.25rem;
color: #115098;
display: inline;
margin: 0 8px 0 0;
}

.vapid-credentials-summary p {
line-height: 1.45;
color: #536471;
margin: 7px 0 0;
}

.vapid-status-badge {
font-size: 72%;
font-weight: bold;
vertical-align: 2px;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: 10px;
display: inline-block;
padding: 3px 8px;
}

.vapid-status-badge.is-configured {
background: #d9ead3;
color: #276221;
}

.vapid-status-badge.needs-setup {
background: #fff0c2;
color: #725400;
}

.vapid-status-badge.is-pending {
background: #d8eafa;
color: #105289;
}

.vapid-generate-button,
.vapid-toggle-private {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
width: auto;
cursor: pointer;
}

.vapid-generate-button {
font-size: 90%;
font-weight: bold;
background: linear-gradient(#2f82bd, #1d6397);
border: 1px solid #174f7a;
border-radius: 4px;
color: #ffffff;
flex: 0 0 auto;
padding: 8px 12px;
}

.vapid-generate-button:hover,
.vapid-generate-button:focus {
background: linear-gradient(#368fcf, #246fa5);
border-color: #0e3f65;
outline: 2px solid #b8d3e6;
}

.vapid-generate-button:disabled {
opacity: 0.65;
cursor: wait;
}

.vapid-generation-status {
background: #e5f3df;
border-left: 3px solid #4f8a3c;
color: #276221;
display: none;
margin: 0 18px 14px 74px;
padding: 8px 10px;
}

.vapid-generation-status.has-message {
display: block;
}

.vapid-generation-status.error {
background: #f8e1e1;
border-left-color: #bc2a4d;
color: #8a1f39;
}

.vapid-credentials-fields {
background: #ffffff;
border-top: 1px solid #d7e5ef;
padding: 12px 18px 2px;
}

.vapid-credentials-fields dl:last-child {
margin-bottom: 4px;
}

.vapid-credentials-fields input[type="text"],
.vapid-credentials-fields input[type="password"] {
box-sizing: border-box;
width: 100%;
max-width: 520px;
}

.vapid-private-field {
display: flex;
align-items: center;
gap: 5px;
}

.vapid-private-field input {
flex: 1 1 auto;
}

.vapid-toggle-private {
background: #efefef;
border: 1px solid #666666;
border-radius: 3px;
color: #333333;
flex: 0 0 auto;
padding: 3px 7px;
}

.vapid-toggle-private:hover,
.vapid-toggle-private:focus {
border-color: #bc2a4d;
color: #bc2a4d;
}

.vapid-rotation-warning {
font-size: 85%;
background: #fff8df;
border-top: 1px solid #eadca7;
color: #6b5712;
margin: 0;
padding: 10px 18px;
}

.phpbb_alert.vapid-confirm-dialog {
border-radius: 7px;
top: 12vh;
overflow: hidden;
box-sizing: border-box;
width: 520px;
max-width: calc(100% - 40px);
max-height: calc(100vh - 40px);
padding: 0;
}

.vapid-confirm-dialog .alert_close {
position: absolute;
z-index: 1;
top: 14px;
right: 14px;
margin: 0;
}

.vapid-confirm-dialog .alert_text {
overflow-y: auto;
box-sizing: border-box;
max-height: calc(100vh - 40px);
padding: 24px;
}

.vapid-confirm-message {
display: flex;
align-items: flex-start;
gap: 14px;
}

.vapid-confirm-icon {
font-size: 18px;
background: #fff0c2;
border-radius: 50%;
color: #8a6500;
display: flex;
flex: 0 0 42px;
justify-content: center;
align-items: center;
height: 42px;
}

.vapid-confirm-message h3 {
font-size: 1.1rem;
color: #333333;
margin: 2px 28px 8px 0;
}

.vapid-confirm-message p {
line-height: 1.5;
color: #536471;
margin: 0;
padding: 0;
}

.vapid-confirm-dialog fieldset.vapid-confirm-actions {
border-top: 1px solid #d7e5ef;
margin-top: 20px;
padding-top: 16px;
}

.vapid-confirm-actions input {
min-width: 72px;
margin: 0 3px;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
.vapid-credentials-header {
flex-wrap: wrap;
align-items: flex-start;
}

.vapid-credentials-summary {
flex-basis: calc(100% - 60px);
}

.vapid-generate-button {
width: 100%;
}

.vapid-generation-status {
margin-left: 18px;
}
}
Loading