feat: handle session expiration [LIBS-169]

adapter/i18n/en.pot

@@ -5,8 +5,33 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-10-12T12:20:51.045Z\n"
-"PO-Revision-Date: 2021-10-12T12:20:51.045Z\n"
+"POT-Creation-Date: 2022-10-04T22:55:46.815Z\n"
+"PO-Revision-Date: 2022-10-04T22:55:46.815Z\n"
+
+msgid "Save your data"
+msgstr "Save your data"
+
+msgid ""
+"Updating will reload all {{n}} open instances of this app, and any unsaved "
+"data will be lost. Save any data you need to, then click 'Reload' when "
+"ready."
+msgstr ""
+"Updating will reload all {{n}} open instances of this app, and any unsaved "
+"data will be lost. Save any data you need to, then click 'Reload' when "
+"ready."
+
+msgid ""
+"Updating will reload all open instances of this app, and any unsaved data "
+"will be lost. Save any data you need to, then click 'Reload' when ready."
+msgstr ""
+"Updating will reload all open instances of this app, and any unsaved data "
+"will be lost. Save any data you need to, then click 'Reload' when ready."
+
+msgid "Cancel"
+msgstr "Cancel"
+
+msgid "Reload"
+msgstr "Reload"
 
 msgid "An error occurred in the DHIS2 application."
 msgstr "An error occurred in the DHIS2 application."
@@ -44,39 +69,17 @@ msgstr "Username"
 msgid "Password"
 msgstr "Password"
 
-msgid "Sign in"
-msgstr "Sign in"
+msgid "Login using two factor authentication"
+msgstr "Login using two factor authentication"
 
-msgid "Save your data"
-msgstr "Save your data"
-
-msgid ""
-"Updating will reload all {{n}} open instances of this app, and any unsaved "
-"data will be lost. Save any data you need to, then click 'Reload' when "
-"ready."
-msgstr ""
-"Updating will reload all {{n}} open instances of this app, and any unsaved "
-"data will be lost. Save any data you need to, then click 'Reload' when "
-"ready."
-
-msgid ""
-"Updating will reload all open instances of this app, and any unsaved data "
-"will be lost. Save any data you need to, then click 'Reload' when ready."
-msgstr ""
-"Updating will reload all open instances of this app, and any unsaved data "
-"will be lost. Save any data you need to, then click 'Reload' when ready."
+msgid "Two factor authentication code"
+msgstr "Two factor authentication code"
 
-msgid "Cancel"
-msgstr "Cancel"
-
-msgid "Reload"
-msgstr "Reload"
-
-msgid "There's an update available for this app."
-msgstr "There's an update available for this app."
+msgid "Sign in"
+msgstr "Sign in"
 
-msgid "Update and reload"
-msgstr "Update and reload"
+msgid "You have been signed out"
+msgstr "You have been signed out"
 
-msgid "Not now"
-msgstr "Not now"
+msgid "Sign back in"
+msgstr "Sign back in"

adapter/src/components/AppWrapper.js

@@ -1,17 +1,17 @@
-import { HeaderBar } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useCurrentUserLocale } from '../utils/useLocale.js'
 import { useVerifyLatestUser } from '../utils/useVerifyLatestUser.js'
 import { Alerts } from './Alerts.js'
+import { ConnectedHeaderBar } from './ConnectedHeaderBar.js'
 import { ErrorBoundary } from './ErrorBoundary.js'
 import { LoadingMask } from './LoadingMask.js'
-import PWAUpdateManager from './PWAUpdateManager.js'
+import { ReauthenticationHandler } from './ReauthenticationHandler.js'
 import { styles } from './styles/AppWrapper.style.js'
 
-export const AppWrapper = ({ appName, children, offlineInterface }) => {
+export const AppWrapper = ({ children }) => {
  const { loading: localeLoading } = useCurrentUserLocale()
- const { loading: latestUserLoading } = useVerifyLatestUser()
+ const { loading: latestUserLoading, user } = useVerifyLatestUser()
 
  if (localeLoading || latestUserLoading) {
  return <LoadingMask />
@@ -20,20 +20,18 @@ export const AppWrapper = ({ appName, children, offlineInterface }) => {
  return (
  <div className="app-shell-adapter">
  <style jsx>{styles}</style>
- <HeaderBar appName={appName} />
+ <ConnectedHeaderBar />
  <div className="app-shell-app">
  <ErrorBoundary onRetry={() => window.location.reload()}>
  {children}
  </ErrorBoundary>
  </div>
  <Alerts />
- <PWAUpdateManager offlineInterface={offlineInterface} />
+ <ReauthenticationHandler user={user} />
  </div>
  )
 }
 
 AppWrapper.propTypes = {
- appName: PropTypes.string.isRequired,
- offlineInterface: PropTypes.object.isRequired,
  children: PropTypes.node,
 }

adapter/src/components/ConfirmUpdateModal.js

@@ -0,0 +1,43 @@
+import {
+ Button,
+ ButtonStrip,
+ Modal,
+ ModalActions,
+ ModalContent,
+ ModalTitle,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales'
+
+export function ConfirmUpdateModal({ clientsCount, onCancel, onConfirm }) {
+ return (
+ <Modal position="middle">
+ <ModalTitle>{i18n.t('Save your data')}</ModalTitle>
+ <ModalContent>
+ {clientsCount
+ ? i18n.t(
+ "Updating will reload all {{n}} open instances of this app, and any unsaved data will be lost. Save any data you need to, then click 'Reload' when ready.",
+ { n: clientsCount }
+ )
+ : // Fallback if clientsCount is unavailable:
+ i18n.t(
+ "Updating will reload all open instances of this app, and any unsaved data will be lost. Save any data you need to, then click 'Reload' when ready."
+ )}
+ </ModalContent>
+ <ModalActions>
+ <ButtonStrip end>
+ <Button onClick={onCancel}>{i18n.t('Cancel')}</Button>
+ <Button destructive onClick={onConfirm}>
+ {i18n.t('Reload')}
+ </Button>
+ </ButtonStrip>
+ </ModalActions>
+ </Modal>
+ )
+}
+ConfirmUpdateModal.propTypes = {
+ clientsCount: PropTypes.number,
+ onCancel: PropTypes.func,
+ onConfirm: PropTypes.func,
+}

adapter/src/components/ConnectedHeaderBar.js

@@ -0,0 +1,42 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { HeaderBar } from '@dhis2/ui'
+import React from 'react'
+import { usePWAUpdateState } from '../utils/usePWAUpdateState'
+import { ConfirmUpdateModal } from './ConfirmUpdateModal'
+
+/**
+ * Check for SW updates or a first activation, displaying an update notification
+ * message in the HeaderBar profile menu. When an update is applied, if there are
+ * multiple tabs of this app open, there's anadditional warning step because all
+ * clients of the service worker will reload when there's an update, which may
+ * cause data loss.
+ */
+
+export function ConnectedHeaderBar() {
+ const { appName } = useConfig()
+ const {
+ updateAvailable,
+ confirmReload,
+ confirmationRequired,
+ clientsCount,
+ onConfirmUpdate,
+ onCancelUpdate,
+ } = usePWAUpdateState()
+
+ return (
+ <>
+ <HeaderBar
+ appName={appName}
+ updateAvailable={updateAvailable}
+ onApplyAvailableUpdate={confirmReload}
+ />
+ {confirmationRequired ? (
+ <ConfirmUpdateModal
+ clientsCount={clientsCount}
+ onConfirm={onConfirmUpdate}
+ onCancel={onCancelUpdate}
+ />
+ ) : null}
+ </>
+ )
+}

adapter/src/components/LoginModal.js

@@ -5,20 +5,28 @@ import {
  ModalActions,
  Button,
  InputField,
+ ButtonStrip,
+ CheckboxField,
 } from '@dhis2/ui'
 import React, { useState } from 'react'
 import i18n from '../locales/index.js'
-import { post } from '../utils/api.js'
+import { attemptLogin } from '../utils/api.js'
 
-const staticUrl = process.env.REACT_APP_DHIS2_BASE_URL
-
-export const LoginModal = () => {
+export const LoginModal = ({
+ server: staticUrl,
+ username: staticUsername,
+ onLoginSuccess,
+ onLoginFailure,
+ onCancel,
+} = {}) => {
  const [server, setServer] = useState(
  staticUrl || window.localStorage.DHIS2_BASE_URL || ''
  )
- const [username, setUsername] = useState('')
+ const [username, setUsername] = useState(staticUsername || '')
  const [password, setPassword] = useState('')
  const [isDirty, setIsDirty] = useState(false)
+ const [mfaChecked, setMfaChecked] = useState(false)
+ const [mfaToken, setMfaToken] = useState(undefined)
 
  const isValid = (val) => val && val.length >= 2
 
@@ -29,21 +37,23 @@ export const LoginModal = () => {
  if (!staticUrl) {
  window.localStorage.DHIS2_BASE_URL = server
  }
- try {
- await post(
- `${server}/dhis-web-commons-security/login.action`,
- `j_username=${encodeURIComponent(
- username
- )}&j_password=${encodeURIComponent(password)}`
- )
- } catch (e) {
- console.log(
- 'TODO: This will always error and cancel the request until we get a real login endpoint!'
- )
- }
-
- // TODO: Hacky solution... this shouldn't require a reload
- window.location.reload()
+ await attemptLogin({
+ server,
+ username,
+ password,
+ mfaToken,
+ onSuccess: () => {
+ setIsDirty(false)
+ setPassword('')
+ setMfaToken(undefined)
+ onLoginSuccess && onLoginSuccess()
+ },
+ onFailure: () => {
+ setPassword('')
+ setMfaToken(undefined)
+ onLoginFailure && onLoginFailure()
+ }
+ })
  }
  }
 
@@ -53,47 +63,71 @@ export const LoginModal = () => {
  <ModalTitle>{i18n.t('Please sign in')}</ModalTitle>
 
  <ModalContent>
- {!staticUrl && (
+ {!staticUrl && (
+ <InputField
+ dataTest="dhis2-adapter-loginserver"
+ error={isDirty && !isValid(server)}
+ label={i18n.t('Server')}
+ name="server"
+ type="text"
+ value={server}
+ onChange={(input) => setServer(input.value)}
+ />
+ )}
+
  <InputField
- dataTest="dhis2-adapter-loginserver"
- error={isDirty && !isValid(server)}
- label={i18n.t('Server')}
- name="server"
+ dataTest="dhis2-adapter-loginname"
+ error={isDirty && !isValid(username)}
+ label={i18n.t('Username')}
+ disabled={staticUsername}
  type="text"
- value={server}
- onChange={(input) => setServer(input.value)}
+ value={username}
+ onChange={(input) => setUsername(input.value)}
  />
- )}
 
- <InputField
- dataTest="dhis2-adapter-loginname"
- error={isDirty && !isValid(username)}
- label={i18n.t('Username')}
- name="j_username"
- type="text"
- value={username}
- onChange={(input) => setUsername(input.value)}
- />
-
- <InputField
- dataTest="dhis2-adapter-loginpassword"
- error={isDirty && !isValid(password)}
- label={i18n.t('Password')}
- name="j_password"
- type="password"
- value={password}
- onChange={(input) => setPassword(input.value)}
- />
+ <InputField
+ dataTest="dhis2-adapter-loginpassword"
+ error={isDirty && !isValid(password)}
+ label={i18n.t('Password')}
+ type="password"
+ value={password}
+ onChange={(input) => setPassword(input.value)}
+ />
+ <CheckboxField
+ dataTest="dhis2-adapter-login-mfacheck"
+ label={i18n.t('Login using two factor authentication')}
+ checked={mfaChecked}
+ onChange={(input) => {
+ !input.checked && setMfaToken(undefined)
+ setMfaChecked(input.checked)
+ }}
+ />
+ {mfaChecked && (
+ <InputField dataTest="dhis2-adapter-login-mfatoken"
+ label={i18n.t('Two factor authentication code')}
+ error={isDirty && mfaChecked && !isValid(mfaToken)}
+ value={mfaToken}
+ type="text"
+ onChange={(input) => setMfaToken(input.value)}
+ />
+ )}
  </ModalContent>
 
  <ModalActions>
- <Button
- primary
- dataTest="dhis2-adapter-loginsubmit"
- type="submit"
- >
- {i18n.t('Sign in')}
- </Button>
+ <ButtonStrip>
+ {onCancel && (
+ <Button onClick={onCancel}>
+ {i18n.t('Cancel')}
+ </Button>
+ )}
+ <Button
+ primary
+ dataTest="dhis2-adapter-loginsubmit"
+ type="submit"
+ >
+ {i18n.t('Sign in')}
+ </Button>
+ </ButtonStrip>
  </ModalActions>
  </form>
  </Modal>