diff --git a/debian/control b/debian/control index 0d0161e..4ce0368 100644 --- a/debian/control +++ b/debian/control @@ -15,8 +15,7 @@ Depends: libanyevent-http-perl, libhttp-date-perl, libhttp-message-perl, libio-socket-ssl-perl, - libjs-bootstrap, - libjs-jquery, + libjs-bootstrap5, libjson-perl, libnet-ip-perl, libpve-common-perl (>= 8.0.2), diff --git a/src/PVE/APIServer/AnyEvent.pm b/src/PVE/APIServer/AnyEvent.pm index b71a9a5..e1f3141 100644 --- a/src/PVE/APIServer/AnyEvent.pm +++ b/src/PVE/APIServer/AnyEvent.pm @@ -2025,12 +2025,8 @@ sub new { $self->{formatter_config}->{csrfgen_func} = $self->can('generate_csrf_prevention_token'); - # add default dirs which includes jquery and bootstrap - my $jsbase = '/usr/share/javascript'; - add_dirs($self->{dirs}, '/js/' => "$jsbase/"); - # libjs-bootstrap uses symlinks for this, which we do not want to allow.. - my $glyphicons = '/usr/share/fonts/truetype/glyphicons/'; - add_dirs($self->{dirs}, '/js/bootstrap/fonts/' => "$glyphicons"); + # libjs-bootstrap5 uses a different dir with symlinks + add_dirs($self->{dirs}, '/bootstrap5/' => "/usr/share/bootstrap-html/"); # init inotify PVE::INotify::inotify_init(); diff --git a/src/PVE/APIServer/Formatter/Bootstrap.pm b/src/PVE/APIServer/Formatter/Bootstrap.pm index 0055d64..6b3f350 100644 --- a/src/PVE/APIServer/Formatter/Bootstrap.pm +++ b/src/PVE/APIServer/Formatter/Bootstrap.pm @@ -53,7 +53,7 @@ sub body { $self->{title} - + - - + + @@ -155,33 +153,4 @@ sub alert { return $self->el(class => "alert alert-danger", %param); } -sub add_js { - my ($self, $js) = @_; - - $self->{js} .= $js . "\n"; -} - -my $format_event_callback = sub { - my ($info) = @_; - - my $pstr = encode_json($info->{param}); - return "function(e){$info->{fn}.apply(e, $pstr);}"; -}; - -sub button { - my ($self, %param) = @_; - - $param{tag} = 'button'; - $param{class} = "btn btn-default btn-xs"; - - if (my $click = delete $param{click}) { - my ($html, $id) = $self->el(%param); - my $cb = &$format_event_callback($click); - $self->add_js("jQuery('#$id').on('click', $cb);"); - return $html; - } else { - return $self->el(%param); - } -} - 1; diff --git a/src/PVE/APIServer/Formatter/HTML.pm b/src/PVE/APIServer/Formatter/HTML.pm index 2ce0723..d236d7d 100644 --- a/src/PVE/APIServer/Formatter/HTML.pm +++ b/src/PVE/APIServer/Formatter/HTML.pm @@ -27,75 +27,86 @@ my $get_portal_login_url = sub { sub render_page { my ($doc, $html, $config) = @_; - my $items = []; - - push @$items, { - tag => 'li', - cn => { - tag => 'a', - href => $get_portal_login_url->($config), - onclick => "PVE.delete_auth_cookie();", - text => "Logout", - }}; - my $base_url = $get_portal_base_url->($config); my $nav = $doc->el( - class => "navbar navbar-inverse navbar-fixed-top", - role => "navigation", cn => { - class => "container", cn => [ + class => "navbar navbar-dark navbar-expand-lg bg-dark fixed-top", + 'data-bs-theme' => 'dark', + role => "navigation", + cn => { + class => "container", + cn => [ { - class => "navbar-header", cn => [ + tag => 'a', + class => "navbar-brand", + href => $base_url, + text => $config->{title}, + }, + { + tag => 'button', + type => 'button', + class => "navbar-toggler", + 'data-bs-toggle' => "collapse", + 'data-bs-target' => ".navbarNav", + cn => [ { - tag => 'button', - type => 'button', - class => "navbar-toggle", - 'data-toggle' => "collapse", - 'data-target' => ".navbar-collapse", - cn => [ - { tag => 'span', class => 'sr-only', text => "Toggle navigation" }, - { tag => 'span', class => 'icon-bar' }, - { tag => 'span', class => 'icon-bar' }, - { tag => 'span', class => 'icon-bar' }, - ], - }, - { - tag => 'a', - class => "navbar-brand", - href => $base_url, - text => $config->{title}, + tag => 'span', + class => 'navbar-toggler-icon', }, ], }, { - class => "collapse navbar-collapse", + class => "collapse navbar-collapse navbarNav", cn => { tag => 'ul', - class => "nav navbar-nav", - cn => $items, + class => "navbar-nav", + cn => [ + { + tag => 'li', + class => 'nav-item', + cn => { + tag => 'a', + class => 'nav-link', + href => $get_portal_login_url->($config), + onclick => "PVE.delete_auth_cookie();", + text => "Logout", + }, + } + ], }, }, - ], - }); + ] + } + ); - $items = []; + my $items = []; my @pcomp = split('/', $doc->{url}); shift @pcomp; # empty shift @pcomp; # api2 shift @pcomp; # $format my $href = $base_url; - push @$items, { tag => 'li', cn => { - tag => 'a', - href => $href, - text => 'Home'}}; - - foreach my $comp (@pcomp) { - $href .= "/".encode_entities($comp); - push @$items, { tag => 'li', cn => { + push @$items, { + tag => 'li', + class => 'breadcrumb-item', + cn => { tag => 'a', href => $href, - text => $comp}}; + text => 'Home', + }, + }; + + foreach my $comp (@pcomp) { + $href .= "/" . encode_entities($comp); + push @$items, { + tag => 'li', + class => 'breadcrumb-item', + cn => { + tag => 'a', + href => $href, + text => $comp, + }, + }; } my $breadcrumbs = $doc->el(tag => 'ol', class => 'breadcrumb container', cn => $items); @@ -114,6 +125,7 @@ my $login_form = sub { my $items = [ { tag => 'label', + class => 'form-label', text => "Please sign in", }, { @@ -150,14 +162,24 @@ my $login_form = sub { action => $get_portal_login_url->($config), cn => [ { - class => 'form-group', - cn => $items, + class => "mb-3", + cn => [ + { + class => 'form-group', + cn => $items, + }, + ], }, { - tag => 'button', - type => 'submit', - class => 'btn btn-lg btn-primary btn-block', - text => "Sign in", + class => "d-grid", + cn => [ + { + tag => 'button', + type => 'submit', + class => 'btn btn-lg btn-primary', + text => "Sign in", + }, + ], }, ], }); @@ -236,13 +258,13 @@ PVE::APIServer::Formatter::register_formatter($portal_format, sub { } else { my $json = to_json($data, {allow_nonref => 1, pretty => 1, canonical => 1}); - $html .= $doc->el(tag => 'pre', text => $json); + $html .= $doc->el(tag => 'pre', class => 'bg-light border rounded p-2', text => $json); } } else { my $json = to_json($data, {allow_nonref => 1, pretty => 1, canonical => 1}); - $html .= $doc->el(tag => 'pre', text => $json); + $html .= $doc->el(tag => 'pre', class => 'bg-light border rounded p-2', text => $json); } $html = $doc->el(class => 'container', html => $html);