Commit Graph

11 Commits

Author SHA1 Message Date
James E. Blair 560fa563db Support auth in multiple tabs
By default the UserManager uses session storage for its authentication
credentials.  That is restricted to a single tab.  In order to support
using the same auth token in multiple tabs, we could switch that to
localStorage which is shared by all tabs of the same domain.  But then
if a user exited the browser, they might be surprised to find that they
were still logged in when restarting.  The typically short lifetime of
OIDC tokens mitigates that somewhat, but it's probably best not to
subvert that expectation anyway.

Instead, we can continue to use session storage by using a BroadcastChannel
to notify other tabs of login/out events and transfer the token info as
well.  This is a standard feature of modern browsers, but we're using
a library that wraps it for two reasons: it supports older browsers
with compatability workarounds if required, and it implements a leader
election protocol.  More on that in a minute.

We would also like to automatically renew tokens shortly before they
expire.  The UserManager has an automatic facility for that, but it
isn't multi-tab aware, so every tab would try to renew at the same time
if we used it.  Instead, we hook into the UserManager timer that fires
about one minute before token expiration and use the leader election to
decide which tab will renew the token.

We renew the token silently in the background with a hidden iframe.  In
this case, instead of using our normal auth callback page, we use a much
simpler "silent callback" which does not render the rest of our application.
This avoids confusion and reduces resource usage.

This also moves any remaining token lifecycle handling out of the Auth
component and into ZuulAuthProvider, so the division of responsibilities
is much simpler.

Change-Id: I17af1a98bf8d704dd7650109aa4979b34086e2fa
2021-11-18 17:40:04 +01:00
Matthieu Huin b13ff51dda web UI: user login with OpenID Connect
Under the hood, this uses AuthProvider as supplied by oidc-react.
Most of the theory is explained in the comment in ZuulAuthProvider.jsx

The benefit of doing this is that we allow the AuthProvider and
userManager to handle the callback logic, so we don't need to
handle the callback logic ourselves.  A callback page is still required
though in order to deal with the parameters passed in a successful
redirection from the Identity Provider.

The challenge in using these classes as-is is that our authority
endpoints (eg, the IDP itself) may change from one tenant to
the next; these classes aren't set up for that.  So we need to be
careful about how and when we change those authority URLs.

In terms of functionalities: if the default realm's authentication driver
is set to "OpenIDConnect", display a "Sign in" button. If the the user
is logged in, redirect to the last page visited prior to logging in;
fetch user authorizations and add them to the redux store; display the
user's preferred username in the upper right corner. Clicking on the
user icon in the right corner displays a modal with user information
such as the user's zuul-client configuration, and a sign out button.

Clicking on the sign out button removes user information from the
store (note that it does not log the user out from the Identity Provider).

Add some basic documentation explaining how to configure Zuul with
Google's authentication, and with a Keycloak server.

(This squashes https://review.opendev.org/c/zuul/zuul/+/816208 into
https://review.opendev.org/c/zuul/zuul/+/734082 )

Co-authored-by: James E. Blair <jim@acmegating.com>

Change-Id: I31e71f2795f3f7c4253d0d5b8ed309bfd7d4f98e
2021-11-18 16:39:17 +01:00
Ian Wienand 10a942de8f web: Use PF4 sizing/spacing css
These CSS files aren't included so a lot of the sizing/margin classes
don't work.  I believe this is correct as the PF sample project does
import them, but I can't find any discussion of it in the docs; I have
filed [1] to clarify this.

[1] https://github.com/patternfly/patternfly/pull/4297

Change-Id: I56900fd5b48e3e66c650f8bb402e1dee11d39967
2021-08-16 15:45:36 +10:00
Felix Edel 7abe44ef73
Configure redux for development
This enables the redux developer tools for the browser. To make use of
this, one must also install the Redux DevTools extension which is
available for various browsers. The extension visualize all state
transitions in the redux store and also allows changing them manually to
see the effects.

Additionally, this change makes use of the third-party library called
"redux-immutable-state-invariant", which throws exception in development
mode whenever a state is mutated directly within an action or reducer.

Change-Id: I8a8588cd7f5f1b17b247d9700a492e5c1e27f040
2020-10-14 08:20:50 +02:00
Felix Edel 65653bcd01
Introduce Patternfly 4
Since Patternfly 4 (PF4) is a complete rewrite of the framework that
doesn't require bootstrap and comes with a new npm package, it's
possible to include both side-by-side in a project.

This change includes the necessary PF4 packages and updates the header,
navbar, drawer (shows the config errors) and global page layout with PF4
components. Once this is done, we should be able to update the other
components step by step to PF4.

Points to keep in mind for the migration phase:
  1. Some Patternfly 3 CSS rules are overridden by Patternfly 4
     wildcards, mostly (re)setting the padding and margin of various
     elements to 0.

     To fix this unwanted behaviour, there is a pf4-migration.css file
     included were we can keep track on those rules and ensure that the
     old padding and margin values are re-applied after Patternfly 4 is
     imported.

Change-Id: I77b81fa0f97fe718207ba5a506cee300371c693b
2020-07-07 11:16:48 +02:00
Guillaume Vincent a4d649f62a Return store object instead of a function
ES6 modules are evaluated only once on first import. They behave like singleton.
Some redux librairies except the store to be a singleton.
Returning a function and invoking it remove this behavior.

Change-Id: I74ff516567d4b7bcf5f1e2d3004eb4617817f117
2019-06-17 16:26:12 +02:00
Tristan Cacqueray 17144c2a46 web: refactor info and tenant reducers action
This change adds info fetch state action type and simplifies the main App
by using the new info attributes.

Change-Id: I2cfd3f6ae605051e11f58272e62925d8f97e4ac9
2018-12-02 05:43:25 +00:00
Tristan Cacqueray 76867ca14a web: break the reducers module into logical units
This change applies best practices to split the current reducers module
in logical unit. Each reducer and its actions are moved into different
modules to ease further refactor and follow-up tests.

Change-Id: I75cc41ca3d31a61046868aafbc84505de661a99d
2018-12-02 01:05:02 +00:00
Tristan Cacqueray 68d1189871
Revert "Revert "web: rewrite interface in react""
This reverts commit 3dba813c64.

Change-Id: I233797a9b4e3485491c49675da2c2efbdba59449
2018-10-06 10:42:31 -05:00
James E. Blair 3dba813c64 Revert "web: rewrite interface in react"
Revert "Fix publish-openstack-javascript-content"

This reverts commit ca199eb9db.
This reverts commit 1082faae95.

This appears to remove the tarball publishing system that we rely on.

Change-Id: Id746fb826dfc01b157c5b772adc1d2991ddcd93a
2018-09-29 11:51:43 -07:00
Tristan Cacqueray 1082faae95 web: rewrite interface in react
This change rewrites the web interface using React:
http://lists.zuul-ci.org/pipermail/zuul-discuss/2018-August/000528.html

Depends-On: https://review.openstack.org/591964
Change-Id: Ic6c33102ac3da69ebd0b8e9c6c8b431d51f3cfd4
Co-Authored-By: Monty Taylor <mordred@inaugust.com>
Co-Authored-By: James E. Blair <jeblair@redhat.com>
2018-09-27 02:14:46 +00:00