diff --git a/src/components/IIIFAuthentication.js b/src/components/IIIFAuthentication.js index c804e69715..1c413eeb72 100644 --- a/src/components/IIIFAuthentication.js +++ b/src/components/IIIFAuthentication.js @@ -1,4 +1,3 @@ -import { Component } from 'react'; import PropTypes from 'prop-types'; import { AccessTokenSender } from './AccessTokenSender'; import { NewWindow } from './NewWindow'; @@ -7,121 +6,79 @@ import WindowAuthenticationBar from '../containers/WindowAuthenticationBar'; /** * Opens a new window for click */ -export class IIIFAuthentication extends Component { +export function IIIFAuthentication({ + accessTokenServiceId, authServiceId, confirm = undefined, description = undefined, + failureDescription = undefined, failureHeader = undefined, features = 'centerscreen', + handleAuthInteraction, header = undefined, isInteractive = true, label = undefined, + logoutConfirm = undefined, logoutServiceId = undefined, openWindow = window.open, + resetAuthenticationState, resolveAccessTokenRequest, resolveAuthenticationRequest, + status = null, t = k => k, windowId, +}) { /** */ - constructor(props) { - super(props); - - this.performLogout = this.performLogout.bind(this); - this.onReceiveAccessTokenMessage = this.onReceiveAccessTokenMessage.bind(this); - } - - /** */ - onReceiveAccessTokenMessage(payload) { - const { - authServiceId, accessTokenServiceId, resolveAccessTokenRequest, - } = this.props; - + const onReceiveAccessTokenMessage = (payload) => { resolveAccessTokenRequest(authServiceId, accessTokenServiceId, payload); - } + }; /** */ - defaultAuthBarProps() { - const { - authServiceId, windowId, status, logoutServiceId, - } = this.props; - - return { - authServiceId, - hasLogoutService: !!logoutServiceId, - status, - windowId, - }; - } + const defaultAuthBarProps = () => ({ + authServiceId, + hasLogoutService: !!logoutServiceId, + status, + windowId, + }); /** handle the IIIF logout workflow */ - performLogout() { - const { - accessTokenServiceId, authServiceId, features, - logoutServiceId, resetAuthenticationState, openWindow, - } = this.props; + const performLogout = () => { openWindow(logoutServiceId, undefined, features); resetAuthenticationState({ authServiceId, tokenServiceId: accessTokenServiceId }); - } + }; /** Render the auth bar for logged in users */ - renderLoggedIn() { - const { - isInteractive, logoutConfirm, t, - } = this.props; - + const renderLoggedIn = () => { if (!isInteractive) return null; return ( ); - } + }; /** Render whatever shows up after the interactive login attempt fails */ - renderFailure() { - const { - handleAuthInteraction, failureHeader: header, failureDescription: description, t, - authServiceId, windowId, - } = this.props; - - return ( - handleAuthInteraction(windowId, authServiceId)} - {...this.defaultAuthBarProps()} - /> - ); - } + const renderFailure = () => ( + handleAuthInteraction(windowId, authServiceId)} + {...defaultAuthBarProps()} + /> + ); /** Render the login bar after we're logging in */ - renderLoggingInCookie() { - const { - accessTokenServiceId, authServiceId, resolveAuthenticationRequest, features, - } = this.props; - - return ( - <> - {this.renderLogin()} - resolveAuthenticationRequest(authServiceId, accessTokenServiceId)} /> - - ); - } + const renderLoggingInCookie = () => ( + <> + {renderLogin()} + resolveAuthenticationRequest(authServiceId, accessTokenServiceId)} /> + + ); /** Render the login bar after we're logging in */ - renderLoggingInToken() { - const { - accessTokenServiceId, - } = this.props; - - return ( - <> - {this.renderLogin()} - - - ); - } + const renderLoggingInToken = () => ( + <> + {renderLogin()} + + + ); /** Render a login bar */ - renderLogin() { - const { - confirm, description, handleAuthInteraction, header, isInteractive, label, - authServiceId, windowId, - } = this.props; + const renderLogin = () => { if (!isInteractive) return null; return ( @@ -131,25 +88,20 @@ export class IIIFAuthentication extends Component { label={label} confirmButton={confirm} onConfirm={() => handleAuthInteraction(windowId, authServiceId)} - {...this.defaultAuthBarProps()} + {...defaultAuthBarProps()} /> ); - } - - /** */ - render() { - const { authServiceId, status } = this.props; + }; - if (!authServiceId) return null; + if (!authServiceId) return null; - if (status === null) return this.renderLogin(); - if (status === 'cookie') return this.renderLoggingInCookie(); - if (status === 'token') return this.renderLoggingInToken(); - if (status === 'failed') return this.renderFailure(); - if (status === 'ok') return this.renderLoggedIn(); + if (status === null) return renderLogin(); + if (status === 'cookie') return renderLoggingInCookie(); + if (status === 'token') return renderLoggingInToken(); + if (status === 'failed') return renderFailure(); + if (status === 'ok') return renderLoggedIn(); - return null; - } + return null; } IIIFAuthentication.propTypes = { @@ -174,19 +126,3 @@ IIIFAuthentication.propTypes = { t: PropTypes.func, windowId: PropTypes.string.isRequired, }; - -IIIFAuthentication.defaultProps = { - confirm: undefined, - description: undefined, - failureDescription: undefined, - failureHeader: undefined, - features: 'centerscreen', - header: undefined, - isInteractive: true, - label: undefined, - logoutConfirm: undefined, - logoutServiceId: undefined, - openWindow: window.open, - status: null, - t: k => k, -};