From b75b19dbc6e5194c08619c8c895bd604e81e6650 Mon Sep 17 00:00:00 2001
From: Jonni Madekivi <jonni.madekivi@reaktor.com>
Date: Tue, 15 Oct 2024 15:36:51 +0300
Subject: [PATCH 1/4] Add session keepalive mechanism to citizen message reply
 editor

---
 .../messages/MessageEditor.tsx                |   1 +
 .../citizen-frontend/messages/ThreadView.tsx  |  13 ++
 .../components/messages/SingleThreadView.tsx  |   1 +
 .../messages/ThreadView.tsx                   |   1 +
 .../lib-components/atoms/form/TextArea.tsx    | 157 +++++++++---------
 frontend/src/lib-components/i18n.tsx          |   6 +
 .../messages/MessageReplyEditor.tsx           |  18 +-
 .../molecules/modals/SessionExpiredModal.tsx  |  40 +++++
 .../src/lib-components/useKeepSessionAlive.ts |  35 ++++
 .../utils/TestContextProvider.tsx             |   6 +
 .../defaults/components/i18n/en.tsx           |   7 +
 .../defaults/components/i18n/fi.tsx           |   7 +
 .../defaults/components/i18n/sv.tsx           |   7 +
 13 files changed, 224 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
 create mode 100644 frontend/src/lib-components/useKeepSessionAlive.ts

diff --git a/frontend/src/citizen-frontend/messages/MessageEditor.tsx b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
index 546e447b0aa..a7240653e82 100644
--- a/frontend/src/citizen-frontend/messages/MessageEditor.tsx
+++ b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
@@ -386,6 +386,7 @@ export default React.memo(function MessageEditor({
                   }))
                 }
                 data-qa="input-content"
+                onKeyUp={() => console.log('MessageEditor keyup')}
               />
             </TextAreaLabel>
 
diff --git a/frontend/src/citizen-frontend/messages/ThreadView.tsx b/frontend/src/citizen-frontend/messages/ThreadView.tsx
index 6ccd066dffc..2c864326ed8 100644
--- a/frontend/src/citizen-frontend/messages/ThreadView.tsx
+++ b/frontend/src/citizen-frontend/messages/ThreadView.tsx
@@ -365,6 +365,19 @@ export default React.memo(
               replyContent={replyContent}
               sendEnabled={sendEnabled}
               messageThreadSensitive={sensitive}
+              sessionKeepAlive={async () => {
+                const response = await fetch(
+                  '/api/application/citizen/children',
+                  {
+                    method: 'GET',
+                    credentials: 'include'
+                  }
+                )
+                if (!response.ok) {
+                  throw new Error(`HTTP error! status: ${response.status}`)
+                }
+                return Promise.resolve()
+              }}
             />
           </ReplyEditorContainer>
         ) : (
diff --git a/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx b/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
index 3a6d63986a7..b4be01c3900 100644
--- a/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
+++ b/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
@@ -297,6 +297,7 @@ export function SingleThreadView({
                 onToggleRecipient={onToggleRecipient}
                 replyContent={replyContent}
                 sendEnabled={sendEnabled}
+                sessionKeepAlive={() => Promise.resolve()}
               />
             </MessageContainer>
           ) : (
diff --git a/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx b/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
index 04379707236..fd472467a29 100644
--- a/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
+++ b/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
@@ -180,6 +180,7 @@ const ReceivedThread = React.memo(function ReceivedThread({
             onToggleRecipient={onToggleRecipient}
             replyContent={replyContent}
             sendEnabled={sendEnabled}
+            sessionKeepAlive={() => Promise.resolve()}
           />
         </ReplyEditorContainer>
       ) : (
diff --git a/frontend/src/lib-components/atoms/form/TextArea.tsx b/frontend/src/lib-components/atoms/form/TextArea.tsx
index 005e225b48e..6036f58f078 100644
--- a/frontend/src/lib-components/atoms/form/TextArea.tsx
+++ b/frontend/src/lib-components/atoms/form/TextArea.tsx
@@ -4,7 +4,7 @@
 
 import autosize from 'autosize'
 import classNames from 'classnames'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState, forwardRef } from 'react'
 import styled from 'styled-components'
 
 import { BoundFormState } from 'lib-common/form/hooks'
@@ -20,6 +20,7 @@ interface TextAreaInputProps extends BaseProps {
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onKeyPress?: (e: React.KeyboardEvent) => void
+  onKeyUp?: (e: React.KeyboardEvent) => void
   readonly?: boolean
   rows?: number
   maxLength?: number
@@ -38,79 +39,87 @@ interface TextAreaInputProps extends BaseProps {
   wrapperClassName?: string
 }
 
-const TextArea = React.memo(function TextArea({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyPress,
-  readonly,
-  rows,
-  maxLength,
-  type,
-  autoFocus,
-  preventAutoFocusScroll,
-  placeholder,
-  info,
-  id,
-  'data-qa': dataQa,
-  className,
-  'aria-describedby': ariaId,
-  hideErrorsBeforeTouched,
-  required
-}: TextAreaInputProps) {
-  const [touched, setTouched] = useState(false)
-
-  const hideError =
-    hideErrorsBeforeTouched && !touched && info?.status === 'warning'
-  const infoText = hideError ? undefined : info?.text
-  const infoStatus = hideError ? undefined : info?.status
-
-  const handleChange = useMemo(
-    () =>
-      onChange
-        ? (e: React.ChangeEvent<HTMLTextAreaElement>) =>
-            onChange(e.target.value)
-        : undefined,
-    [onChange]
-  )
-
-  return (
-    <>
-      <StyledTextArea
-        value={value}
-        onChange={handleChange}
-        onFocus={onFocus}
-        onBlur={(e) => {
-          setTouched(true)
-          if (onBlur) onBlur(e)
-        }}
-        onKeyPress={onKeyPress}
-        placeholder={placeholder}
-        readOnly={readonly}
-        disabled={readonly}
-        maxLength={maxLength}
-        type={type}
-        autoFocus={autoFocus}
-        preventAutoFocusScroll={preventAutoFocusScroll}
-        className={classNames(className, infoStatus)}
-        data-qa={dataQa}
-        id={id}
-        aria-describedby={ariaId}
-        required={required ?? false}
-        rows={rows}
-      />
-      {!!infoText && (
-        <InputFieldUnderRow className={classNames(infoStatus)}>
-          <span data-qa={dataQa ? `${dataQa}-info` : undefined}>
-            {infoText}
-          </span>
-          <UnderRowStatusIcon status={info?.status} />
-        </InputFieldUnderRow>
-      )}
-    </>
-  )
-})
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(
+  function TextArea(
+    {
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyPress,
+      readonly,
+      rows,
+      maxLength,
+      type,
+      autoFocus,
+      preventAutoFocusScroll,
+      placeholder,
+      info,
+      id,
+      'data-qa': dataQa,
+      className,
+      'aria-describedby': ariaId,
+      hideErrorsBeforeTouched,
+      required,
+      onKeyUp
+    },
+    ref
+  ) {
+    const [touched, setTouched] = useState(false)
+
+    const hideError =
+      hideErrorsBeforeTouched && !touched && info?.status === 'warning'
+    const infoText = hideError ? undefined : info?.text
+    const infoStatus = hideError ? undefined : info?.status
+
+    const handleChange = useMemo(
+      () =>
+        onChange
+          ? (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              onChange(e.target.value)
+          : undefined,
+      [onChange]
+    )
+
+    return (
+      <>
+        <StyledTextArea
+          ref={ref}
+          value={value}
+          onChange={handleChange}
+          onFocus={onFocus}
+          onBlur={(e) => {
+            setTouched(true)
+            if (onBlur) onBlur(e)
+          }}
+          onKeyPress={onKeyPress}
+          onKeyUp={onKeyUp}
+          placeholder={placeholder}
+          readOnly={readonly}
+          disabled={readonly}
+          maxLength={maxLength}
+          type={type}
+          autoFocus={autoFocus}
+          preventAutoFocusScroll={preventAutoFocusScroll}
+          className={classNames(className, infoStatus)}
+          data-qa={dataQa}
+          id={id}
+          aria-describedby={ariaId}
+          required={required ?? false}
+          rows={rows}
+        />
+        {!!infoText && (
+          <InputFieldUnderRow className={classNames(infoStatus)}>
+            <span data-qa={dataQa ? `${dataQa}-info` : undefined}>
+              {infoText}
+            </span>
+            <UnderRowStatusIcon status={info?.status} />
+          </InputFieldUnderRow>
+        )}
+      </>
+    )
+  }
+)
 
 export default TextArea
 
diff --git a/frontend/src/lib-components/i18n.tsx b/frontend/src/lib-components/i18n.tsx
index e0f00656a0d..e6ba612106f 100644
--- a/frontend/src/lib-components/i18n.tsx
+++ b/frontend/src/lib-components/i18n.tsx
@@ -95,6 +95,12 @@ export interface Translations {
     discard: string
     messagePlaceholderSensitiveThread: string | undefined
   }
+  sessionTimeout: {
+    sessionExpiredTitle: string
+    sessionExpiredMessage: string
+    goToLoginPage: string
+    cancel: string
+  }
   notifications: {
     close: string
   }
diff --git a/frontend/src/lib-components/messages/MessageReplyEditor.tsx b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
index c7a682ab157..4d5af4b1e2a 100644
--- a/frontend/src/lib-components/messages/MessageReplyEditor.tsx
+++ b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
@@ -9,6 +9,7 @@ import { AccountType } from 'lib-common/generated/api-types/messaging'
 import { type cancelMutation, MutationDescription } from 'lib-common/query'
 import { UUID } from 'lib-common/types'
 import { Button } from 'lib-components/atoms/buttons/Button'
+import SessionExpiredModal from 'lib-components/molecules/modals/SessionExpiredModal'
 import { faTrash } from 'lib-icons'
 
 import { MutateButton } from '../atoms/buttons/MutateButton'
@@ -16,6 +17,7 @@ import TextArea from '../atoms/form/TextArea'
 import { useTranslations } from '../i18n'
 import ButtonContainer from '../layout/ButtonContainer'
 import { Label } from '../typography'
+import { useKeepSessionAlive } from '../useKeepSessionAlive'
 import { defaultMargins } from '../white-space'
 
 import { ToggleableRecipient } from './ToggleableRecipient'
@@ -54,6 +56,7 @@ interface Props<T, R> {
   replyContent: string
   sendEnabled: boolean
   messageThreadSensitive?: boolean
+  sessionKeepAlive: () => Promise<void>
 }
 
 function MessageReplyEditor<T, R>({
@@ -66,9 +69,16 @@ function MessageReplyEditor<T, R>({
   recipients,
   replyContent,
   sendEnabled,
-  messageThreadSensitive = false
+  messageThreadSensitive = false,
+  sessionKeepAlive
 }: Props<T, R>) {
   const i18n = useTranslations()
+  const {
+    keepSessionAlive,
+    showSessionExpiredModal,
+    setShowSessionExpiredModal
+  } = useKeepSessionAlive(sessionKeepAlive)
+
   const handleSuccess = useCallback(
     (response: R) => {
       onUpdateContent('')
@@ -76,6 +86,7 @@ function MessageReplyEditor<T, R>({
     },
     [onUpdateContent, onSuccess]
   )
+
   return (
     <>
       <EditorRow>
@@ -100,6 +111,7 @@ function MessageReplyEditor<T, R>({
           }
           value={replyContent}
           onChange={(value) => onUpdateContent(value)}
+          onKeyUp={keepSessionAlive}
           data-qa="message-reply-content"
           autoFocus
           preventAutoFocusScroll={true}
@@ -126,6 +138,10 @@ function MessageReplyEditor<T, R>({
           />
         </ButtonContainer>
       </EditorRow>
+      <SessionExpiredModal
+        isOpen={showSessionExpiredModal}
+        onClose={() => setShowSessionExpiredModal(false)}
+      />
     </>
   )
 }
diff --git a/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
new file mode 100644
index 00000000000..3ffbd79a0ba
--- /dev/null
+++ b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Button } from 'lib-components/atoms/buttons/Button'
+
+import { useTranslations } from '../../i18n'
+import ButtonContainer from '../../layout/ButtonContainer'
+
+import BaseModal from './BaseModal'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const SessionExpiredModal: React.FC<Props> = ({ isOpen, onClose }) => {
+  const i18n = useTranslations()
+
+  return (
+    isOpen && (
+      <BaseModal
+        mobileFullScreen
+        close={onClose}
+        title={i18n.sessionTimeout.sessionExpiredTitle}
+        closeLabel={i18n.sessionTimeout.cancel}
+      >
+        <p>{i18n.sessionTimeout.sessionExpiredMessage}</p>
+        <ButtonContainer>
+          <Button
+            primary
+            onClick={() => window.location.reload()}
+            text={i18n.sessionTimeout.goToLoginPage}
+          />
+          <Button onClick={onClose} text={i18n.sessionTimeout.cancel} />
+        </ButtonContainer>
+      </BaseModal>
+    )
+  )
+}
+
+export default SessionExpiredModal
diff --git a/frontend/src/lib-components/useKeepSessionAlive.ts b/frontend/src/lib-components/useKeepSessionAlive.ts
new file mode 100644
index 00000000000..556dc152a32
--- /dev/null
+++ b/frontend/src/lib-components/useKeepSessionAlive.ts
@@ -0,0 +1,35 @@
+import throttle from 'lodash/throttle'
+import { useState, useEffect, useMemo } from 'react'
+
+export function useKeepSessionAlive(sessionKeepAlive: () => Promise<void>) {
+  const [showSessionExpiredModal, setShowSessionExpiredModal] = useState(false)
+
+  const keepSessionAlive = useMemo(
+    () =>
+      throttle(
+        async () => {
+          try {
+            await sessionKeepAlive()
+          } catch (error) {
+            setShowSessionExpiredModal(true)
+          }
+        },
+        5000,
+        {
+          leading: true,
+          trailing: true
+        }
+      ),
+    [sessionKeepAlive]
+  )
+
+  useEffect(() => {
+    return () => keepSessionAlive.cancel()
+  }, [keepSessionAlive])
+
+  return {
+    keepSessionAlive,
+    showSessionExpiredModal,
+    setShowSessionExpiredModal
+  }
+}
diff --git a/frontend/src/lib-components/utils/TestContextProvider.tsx b/frontend/src/lib-components/utils/TestContextProvider.tsx
index 212b56711ac..898e76899d7 100644
--- a/frontend/src/lib-components/utils/TestContextProvider.tsx
+++ b/frontend/src/lib-components/utils/TestContextProvider.tsx
@@ -10,6 +10,12 @@ import espooTheme from 'lib-common/themes/espoo-theme'
 import { ComponentLocalizationContextProvider, Translations } from '../i18n'
 
 export const testTranslations: Translations = {
+  sessionTimeout: {
+    cancel: '',
+    goToLoginPage: '',
+    sessionExpiredMessage: '',
+    sessionExpiredTitle: ''
+  },
   asyncButton: {
     inProgress: '',
     failure: '',
diff --git a/frontend/src/lib-customizations/defaults/components/i18n/en.tsx b/frontend/src/lib-customizations/defaults/components/i18n/en.tsx
index 986282f5f60..317c438fdfc 100644
--- a/frontend/src/lib-customizations/defaults/components/i18n/en.tsx
+++ b/frontend/src/lib-customizations/defaults/components/i18n/en.tsx
@@ -116,6 +116,13 @@ const components: Translations = {
     messagePlaceholder: undefined,
     messagePlaceholderSensitiveThread: undefined
   },
+  sessionTimeout: {
+    sessionExpiredTitle: 'Your session has timed out',
+    sessionExpiredMessage:
+      'Please make note of any message you have typed and log in again.',
+    goToLoginPage: 'Go to login page',
+    cancel: 'Cancel'
+  },
   notifications: {
     close: 'Close'
   },
diff --git a/frontend/src/lib-customizations/defaults/components/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/components/i18n/fi.tsx
index de3eed72271..9217673d48c 100644
--- a/frontend/src/lib-customizations/defaults/components/i18n/fi.tsx
+++ b/frontend/src/lib-customizations/defaults/components/i18n/fi.tsx
@@ -114,6 +114,13 @@ const components: Translations = {
     discard: 'Hylkää',
     messagePlaceholderSensitiveThread: undefined
   },
+  sessionTimeout: {
+    sessionExpiredTitle: 'Istuntosi on aikakatkaistu',
+    sessionExpiredMessage:
+      'Ole hyvä ja ota kirjaamasi viesti muistiin ja kirjaudu sisään uudelleen.',
+    goToLoginPage: 'Siirry kirjautumissivulle',
+    cancel: 'Peruuta'
+  },
   notifications: {
     close: 'Sulje'
   },
diff --git a/frontend/src/lib-customizations/defaults/components/i18n/sv.tsx b/frontend/src/lib-customizations/defaults/components/i18n/sv.tsx
index 3f9aab516ba..61b1c4f5cbb 100644
--- a/frontend/src/lib-customizations/defaults/components/i18n/sv.tsx
+++ b/frontend/src/lib-customizations/defaults/components/i18n/sv.tsx
@@ -116,6 +116,13 @@ const components: Translations = {
     messagePlaceholder: undefined,
     messagePlaceholderSensitiveThread: undefined
   },
+  sessionTimeout: {
+    sessionExpiredTitle: 'Din session har gått ut',
+    sessionExpiredMessage:
+      'Vänligen notera eventuellt meddelande du har skrivit och logga in igen.',
+    goToLoginPage: 'Gå till inloggningssidan',
+    cancel: 'Avbryt'
+  },
   notifications: {
     close: 'Stäng'
   },

From fa6ba347ab7da9df823d58fc2292ddf284c28710 Mon Sep 17 00:00:00 2001
From: Jonni Madekivi <jonni.madekivi@reaktor.com>
Date: Thu, 17 Oct 2024 12:54:05 +0300
Subject: [PATCH 2/4] Add session keepalive to rest of the message editors.

---
 .../messages/MessageEditor.tsx                |  15 +-
 .../citizen-frontend/messages/ThreadView.tsx  |  15 +-
 .../src/citizen-frontend/messages/utils.ts    |  21 +
 .../components/messages/MessageEditor.tsx     | 599 +++++++++---------
 .../components/messages/SingleThreadView.tsx  |   3 +-
 .../components/messages/utils.ts              |  23 +
 .../messages/ThreadView.tsx                   |   1 -
 frontend/src/lib-common/utils/helpers.ts      |   1 +
 .../messages/MessageReplyEditor.tsx           |   4 +-
 .../molecules/modals/SessionExpiredModal.tsx  |  17 +-
 frontend/src/lib-components/typography.ts     |   2 +-
 .../src/lib-components/useKeepSessionAlive.ts |  17 +-
 12 files changed, 401 insertions(+), 317 deletions(-)
 create mode 100644 frontend/src/citizen-frontend/messages/utils.ts
 create mode 100644 frontend/src/employee-frontend/components/messages/utils.ts

diff --git a/frontend/src/citizen-frontend/messages/MessageEditor.tsx b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
index a7240653e82..ed37f14492f 100644
--- a/frontend/src/citizen-frontend/messages/MessageEditor.tsx
+++ b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
@@ -38,7 +38,9 @@ import FileUpload, {
   UploadStatus
 } from 'lib-components/molecules/FileUpload'
 import { InfoBox } from 'lib-components/molecules/MessageBoxes'
+import SessionExpiredModal from 'lib-components/molecules/modals/SessionExpiredModal'
 import { Bold, P } from 'lib-components/typography'
+import { useKeepSessionAlive } from 'lib-components/useKeepSessionAlive'
 import { defaultMargins, Gap } from 'lib-components/white-space'
 import colors from 'lib-customizations/common'
 import { faTimes } from 'lib-icons'
@@ -49,6 +51,8 @@ import { useUser } from '../auth/state'
 import { deleteAttachment } from '../generated/api-clients/attachment'
 import { useTranslation } from '../localization'
 
+import { sessionKeepalive } from './utils'
+
 const emptyMessage: CitizenMessageBody = {
   title: '',
   content: '',
@@ -127,6 +131,11 @@ export default React.memo(function MessageEditor({
         .catch((e) => Failure.fromError<void>(e)),
     []
   )
+  const {
+    keepSessionAlive,
+    showSessionExpiredModal,
+    setShowSessionExpiredModal
+  } = useKeepSessionAlive(sessionKeepalive)
 
   useEffect(
     () =>
@@ -386,7 +395,7 @@ export default React.memo(function MessageEditor({
                   }))
                 }
                 data-qa="input-content"
-                onKeyUp={() => console.log('MessageEditor keyup')}
+                onKeyUp={keepSessionAlive}
               />
             </TextAreaLabel>
 
@@ -434,6 +443,10 @@ export default React.memo(function MessageEditor({
           </FormArea>
         </Container>
       </FocusLock>
+      <SessionExpiredModal
+        isOpen={showSessionExpiredModal}
+        onClose={() => setShowSessionExpiredModal(false)}
+      />
     </ModalAccessibilityWrapper>
   )
 })
diff --git a/frontend/src/citizen-frontend/messages/ThreadView.tsx b/frontend/src/citizen-frontend/messages/ThreadView.tsx
index 2c864326ed8..0cde6d31c85 100644
--- a/frontend/src/citizen-frontend/messages/ThreadView.tsx
+++ b/frontend/src/citizen-frontend/messages/ThreadView.tsx
@@ -53,6 +53,7 @@ import { ConfirmDeleteThread } from './ConfirmDeleteThread'
 import { isPrimaryRecipient } from './MessageEditor'
 import { replyToThreadMutation } from './queries'
 import { MessageContext } from './state'
+import { sessionKeepalive } from './utils'
 
 const TitleRow = styled.div`
   display: flex;
@@ -365,19 +366,7 @@ export default React.memo(
               replyContent={replyContent}
               sendEnabled={sendEnabled}
               messageThreadSensitive={sensitive}
-              sessionKeepAlive={async () => {
-                const response = await fetch(
-                  '/api/application/citizen/children',
-                  {
-                    method: 'GET',
-                    credentials: 'include'
-                  }
-                )
-                if (!response.ok) {
-                  throw new Error(`HTTP error! status: ${response.status}`)
-                }
-                return Promise.resolve()
-              }}
+              sessionKeepAlive={sessionKeepalive}
             />
           </ReplyEditorContainer>
         ) : (
diff --git a/frontend/src/citizen-frontend/messages/utils.ts b/frontend/src/citizen-frontend/messages/utils.ts
new file mode 100644
index 00000000000..d736f2db27c
--- /dev/null
+++ b/frontend/src/citizen-frontend/messages/utils.ts
@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
+//
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
+export const sessionKeepalive = async () => {
+  const response = await fetch('/api/application/auth/status', {
+    method: 'GET',
+    credentials: 'include'
+  })
+  if (!response.ok) {
+    // could be e.g. temporarily offline
+    throw new Error(`HTTP error! status: ${response.status}`)
+  }
+
+  try {
+    const data = (await response.json()) as { loggedIn?: boolean }
+    return data.loggedIn === true
+  } catch (error) {
+    throw new Error('Failed to parse JSON response')
+  }
+}
diff --git a/frontend/src/employee-frontend/components/messages/MessageEditor.tsx b/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
index 2366c621a1a..f9c748d7d9d 100644
--- a/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
+++ b/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
@@ -58,7 +58,9 @@ import FileUpload, {
 import { InfoBox } from 'lib-components/molecules/MessageBoxes'
 import { SelectOption } from 'lib-components/molecules/Select'
 import InfoModal from 'lib-components/molecules/modals/InfoModal'
+import SessionExpiredModal from 'lib-components/molecules/modals/SessionExpiredModal'
 import { Bold } from 'lib-components/typography'
+import { useKeepSessionAlive } from 'lib-components/useKeepSessionAlive'
 import { defaultMargins, Gap } from 'lib-components/white-space'
 import { featureFlags } from 'lib-customizations/employee'
 import {
@@ -74,6 +76,7 @@ import {
 import { useTranslation } from '../../state/i18n'
 
 import { createMessagePreflightCheckQuery } from './queries'
+import { sessionKeepalive } from './utils'
 
 type Message = Omit<
   UpdatableDraftContent,
@@ -509,6 +512,11 @@ export default React.memo(function MessageEditor({
     () => setSensitiveInfoOpen((prev) => !prev),
     []
   )
+  const {
+    keepSessionAlive,
+    showSessionExpiredModal,
+    setShowSessionExpiredModal
+  } = useKeepSessionAlive(sessionKeepalive)
 
   const sensitiveCheckbox = (
     <FixedSpaceRow spacing="xs" alignItems="center">
@@ -571,318 +579,327 @@ export default React.memo(function MessageEditor({
   )
 
   return (
-    <FullScreenContainer
-      data-qa="fullscreen-container"
-      className={classNames({ fullscreen: expandedView })}
-    >
-      <Container
-        data-qa="message-editor"
-        data-status={draftState}
+    <>
+      <FullScreenContainer
+        data-qa="fullscreen-container"
         className={classNames({ fullscreen: expandedView })}
       >
-        <TopBar>
-          <Title>{title}</Title>
-          <HeaderButtonContainer>
-            {expandedView ? (
-              <IconOnlyButton
-                icon={faDownLeftAndUpRightToCenter}
-                onClick={toggleExpandedView}
-                color="white"
-                size="s"
-                data-qa="collapse-view-btn"
-                aria-label={i18n.common.open}
-              />
-            ) : (
+        <Container
+          data-qa="message-editor"
+          data-status={draftState}
+          className={classNames({ fullscreen: expandedView })}
+        >
+          <TopBar>
+            <Title>{title}</Title>
+            <HeaderButtonContainer>
+              {expandedView ? (
+                <IconOnlyButton
+                  icon={faDownLeftAndUpRightToCenter}
+                  onClick={toggleExpandedView}
+                  color="white"
+                  size="s"
+                  data-qa="collapse-view-btn"
+                  aria-label={i18n.common.open}
+                />
+              ) : (
+                <IconOnlyButton
+                  icon={faUpRightAndDownLeftFromCenter}
+                  onClick={toggleExpandedView}
+                  color="white"
+                  size="s"
+                  data-qa="expand-view-btn"
+                  aria-label={i18n.common.close}
+                />
+              )}
               <IconOnlyButton
-                icon={faUpRightAndDownLeftFromCenter}
-                onClick={toggleExpandedView}
+                icon={faTimes}
+                onClick={onCloseHandler}
                 color="white"
-                size="s"
-                data-qa="expand-view-btn"
+                size="m"
+                data-qa="close-message-editor-btn"
                 aria-label={i18n.common.close}
               />
+            </HeaderButtonContainer>
+          </TopBar>
+          <ScrollableFormArea>
+            <ExpandableLayout expandedView={expandedView}>
+              <Dropdowns expandedView={expandedView}>
+                <HorizontalField>
+                  <Bold>{i18n.messages.messageEditor.sender}</Bold>
+                  <Combobox
+                    items={senderOptions}
+                    onChange={handleSenderChange}
+                    selectedItem={message.sender}
+                    getItemLabel={(sender) => sender.label}
+                    data-qa="select-sender"
+                    fullWidth
+                  />
+                </HorizontalField>
+                <Gap size="s" />
+                <HorizontalField>
+                  <Bold>{i18n.messages.messageEditor.recipients}</Bold>
+                  <TreeDropdown
+                    tree={receiverTree}
+                    onChange={handleRecipientChange}
+                    placeholder={i18n.messages.messageEditor.selectPlaceholder}
+                    data-qa="select-receiver"
+                  />
+                </HorizontalField>
+              </Dropdowns>
+              {expandedView && !simpleMode && (
+                <ExpandedRightPane>
+                  <ExpandedHorizontalField>
+                    <Bold>{i18n.messages.messageEditor.type.label}</Bold>
+                    {messageType}
+                  </ExpandedHorizontalField>
+                  <Gap size="s" />
+                  <ExpandedHorizontalField>
+                    <Bold>{i18n.messages.messageEditor.flags.heading}</Bold>
+                    {urgent}
+                    {sensitiveCheckbox}
+                  </ExpandedHorizontalField>
+                  {sensitiveInfoOpen && (
+                    <FixedSpaceRow fullWidth>
+                      <ExpandingInfoBox
+                        width="auto"
+                        info={
+                          i18n.messages.messageEditor.flags.sensitive
+                            .whyDisabled
+                        }
+                        close={onSensitiveInfoClick}
+                      />
+                    </FixedSpaceRow>
+                  )}
+                  {flagsInfo}
+                </ExpandedRightPane>
+              )}
+            </ExpandableLayout>
+            {(senderAccountType === 'PERSONAL' ||
+              senderAccountType === 'MUNICIPAL') && (
+              <>
+                <Gap size="s" />
+                <RightAlignedRow>
+                  <Button
+                    appearance="inline"
+                    order="text-icon"
+                    data-qa="filters-btn"
+                    onClick={useFiltersVisible.toggle}
+                    text={
+                      filtersVisible
+                        ? i18n.messages.messageEditor.filters.hideFilters
+                        : i18n.messages.messageEditor.filters.showFilters
+                    }
+                    icon={filtersVisible ? faChevronUp : faChevronDown}
+                  />
+                </RightAlignedRow>
+                {filtersVisible && (
+                  <>
+                    <Gap size="s" />
+                    <ExpandableLayout expandedView={expandedView}>
+                      <Dropdowns expandedView={expandedView}>
+                        <HorizontalField>
+                          <Bold>
+                            {i18n.messages.messageEditor.filters.yearOfBirth}
+                          </Bold>
+                          <TreeDropdown
+                            tree={yearOfBirthTree}
+                            onChange={handleBirthYearChange}
+                            placeholder={
+                              i18n.messages.messageEditor.selectPlaceholder
+                            }
+                            data-qa="select-years-of-birth"
+                          />
+                        </HorizontalField>
+                      </Dropdowns>
+                      {expandedView && !simpleMode && (
+                        <ExpandedRightPane>
+                          <ExpandedHorizontalField>
+                            <Bold>
+                              {
+                                i18n.messages.messageEditor.filters.shiftCare
+                                  .heading
+                              }
+                            </Bold>
+                            {shiftCareCheckBox}
+                            {featureFlags.intermittentShiftCare
+                              ? intermittentShiftCareCheckBox
+                              : null}
+                          </ExpandedHorizontalField>
+                          <Gap size="s" />
+                          <ExpandedHorizontalField>
+                            <Bold>
+                              {
+                                i18n.messages.messageEditor.filters
+                                  .familyDaycare.heading
+                              }
+                            </Bold>
+                            {familyDaycareCheckBox}
+                          </ExpandedHorizontalField>
+                        </ExpandedRightPane>
+                      )}
+                      {!expandedView && !simpleMode && (
+                        <>
+                          <Gap size="s" />
+                          <HorizontalField>
+                            <Bold>
+                              {
+                                i18n.messages.messageEditor.filters.shiftCare
+                                  .heading
+                              }
+                            </Bold>
+                            {shiftCareCheckBox}
+                            {featureFlags.intermittentShiftCare
+                              ? intermittentShiftCareCheckBox
+                              : null}
+                          </HorizontalField>
+                          <Gap size="s" />
+                          <HorizontalField>
+                            <Bold>
+                              {
+                                i18n.messages.messageEditor.filters
+                                  .familyDaycare.heading
+                              }
+                            </Bold>
+                            {familyDaycareCheckBox}
+                          </HorizontalField>
+                        </>
+                      )}
+                    </ExpandableLayout>
+                    <HorizontalLine slim />
+                  </>
+                )}
+              </>
             )}
-            <IconOnlyButton
-              icon={faTimes}
-              onClick={onCloseHandler}
-              color="white"
-              size="m"
-              data-qa="close-message-editor-btn"
-              aria-label={i18n.common.close}
-            />
-          </HeaderButtonContainer>
-        </TopBar>
-        <ScrollableFormArea>
-          <ExpandableLayout expandedView={expandedView}>
-            <Dropdowns expandedView={expandedView}>
-              <HorizontalField>
-                <Bold>{i18n.messages.messageEditor.sender}</Bold>
-                <Combobox
-                  items={senderOptions}
-                  onChange={handleSenderChange}
-                  selectedItem={message.sender}
-                  getItemLabel={(sender) => sender.label}
-                  data-qa="select-sender"
-                  fullWidth
-                />
-              </HorizontalField>
-              <Gap size="s" />
-              <HorizontalField>
-                <Bold>{i18n.messages.messageEditor.recipients}</Bold>
-                <TreeDropdown
-                  tree={receiverTree}
-                  onChange={handleRecipientChange}
-                  placeholder={i18n.messages.messageEditor.selectPlaceholder}
-                  data-qa="select-receiver"
-                />
-              </HorizontalField>
-            </Dropdowns>
-            {expandedView && !simpleMode && (
-              <ExpandedRightPane>
-                <ExpandedHorizontalField>
-                  <Bold>{i18n.messages.messageEditor.type.label}</Bold>
-                  {messageType}
-                </ExpandedHorizontalField>
+            <Gap size="s" />
+            <HorizontalField>
+              <Bold>{i18n.messages.messageEditor.title}</Bold>
+              <InputField
+                value={message.title ?? ''}
+                onChange={(title) => updateMessage({ title })}
+                data-qa="input-title"
+              />
+            </HorizontalField>
+            {!expandedView && !simpleMode && (
+              <>
                 <Gap size="s" />
-                <ExpandedHorizontalField>
-                  <Bold>{i18n.messages.messageEditor.flags.heading}</Bold>
-                  {urgent}
-                  {sensitiveCheckbox}
-                </ExpandedHorizontalField>
-                {sensitiveInfoOpen && (
-                  <FixedSpaceRow fullWidth>
+                <FixedSpaceRow>
+                  <HalfWidthColumn>
+                    <Bold>{i18n.messages.messageEditor.type.label}</Bold>
+                    {messageType}
+                  </HalfWidthColumn>
+                  <HalfWidthColumn>
+                    <Bold>{i18n.messages.messageEditor.flags.heading}</Bold>
+                    {urgent}
+                    {sensitiveCheckbox}
+                  </HalfWidthColumn>
+                </FixedSpaceRow>
+                {sensitiveInfoOpen && !sensitiveCheckboxEnabled && (
+                  <InfoBoxContainer>
                     <ExpandingInfoBox
-                      width="auto"
+                      width="full"
                       info={
                         i18n.messages.messageEditor.flags.sensitive.whyDisabled
                       }
                       close={onSensitiveInfoClick}
                     />
-                  </FixedSpaceRow>
+                  </InfoBoxContainer>
                 )}
                 {flagsInfo}
-              </ExpandedRightPane>
+              </>
             )}
-          </ExpandableLayout>
-          {(senderAccountType === 'PERSONAL' ||
-            senderAccountType === 'MUNICIPAL') && (
-            <>
-              <Gap size="s" />
-              <RightAlignedRow>
-                <Button
-                  appearance="inline"
-                  order="text-icon"
-                  data-qa="filters-btn"
-                  onClick={useFiltersVisible.toggle}
-                  text={
-                    filtersVisible
-                      ? i18n.messages.messageEditor.filters.hideFilters
-                      : i18n.messages.messageEditor.filters.showFilters
-                  }
-                  icon={filtersVisible ? faChevronUp : faChevronDown}
-                />
-              </RightAlignedRow>
-              {filtersVisible && (
-                <>
-                  <Gap size="s" />
-                  <ExpandableLayout expandedView={expandedView}>
-                    <Dropdowns expandedView={expandedView}>
-                      <HorizontalField>
-                        <Bold>
-                          {i18n.messages.messageEditor.filters.yearOfBirth}
-                        </Bold>
-                        <TreeDropdown
-                          tree={yearOfBirthTree}
-                          onChange={handleBirthYearChange}
-                          placeholder={
-                            i18n.messages.messageEditor.selectPlaceholder
-                          }
-                          data-qa="select-years-of-birth"
-                        />
-                      </HorizontalField>
-                    </Dropdowns>
-                    {expandedView && !simpleMode && (
-                      <ExpandedRightPane>
-                        <ExpandedHorizontalField>
-                          <Bold>
-                            {
-                              i18n.messages.messageEditor.filters.shiftCare
-                                .heading
-                            }
-                          </Bold>
-                          {shiftCareCheckBox}
-                          {featureFlags.intermittentShiftCare
-                            ? intermittentShiftCareCheckBox
-                            : null}
-                        </ExpandedHorizontalField>
-                        <Gap size="s" />
-                        <ExpandedHorizontalField>
-                          <Bold>
-                            {
-                              i18n.messages.messageEditor.filters.familyDaycare
-                                .heading
-                            }
-                          </Bold>
-                          {familyDaycareCheckBox}
-                        </ExpandedHorizontalField>
-                      </ExpandedRightPane>
-                    )}
-                    {!expandedView && !simpleMode && (
-                      <>
-                        <Gap size="s" />
-                        <HorizontalField>
-                          <Bold>
-                            {
-                              i18n.messages.messageEditor.filters.shiftCare
-                                .heading
-                            }
-                          </Bold>
-                          {shiftCareCheckBox}
-                          {featureFlags.intermittentShiftCare
-                            ? intermittentShiftCareCheckBox
-                            : null}
-                        </HorizontalField>
-                        <Gap size="s" />
-                        <HorizontalField>
-                          <Bold>
-                            {
-                              i18n.messages.messageEditor.filters.familyDaycare
-                                .heading
-                            }
-                          </Bold>
-                          {familyDaycareCheckBox}
-                        </HorizontalField>
-                      </>
-                    )}
-                  </ExpandableLayout>
-                  <HorizontalLine slim />
-                </>
-              )}
-            </>
-          )}
-          <Gap size="s" />
-          <HorizontalField>
-            <Bold>{i18n.messages.messageEditor.title}</Bold>
-            <InputField
-              value={message.title ?? ''}
-              onChange={(title) => updateMessage({ title })}
-              data-qa="input-title"
+            <Gap size="m" />
+            <Bold>{i18n.messages.messageEditor.message}</Bold>
+            <Gap size="xs" />
+            <StyledTextArea
+              value={message.content}
+              onChange={(e) => updateMessage({ content: e.target.value })}
+              data-qa="input-content"
+              onKeyUp={keepSessionAlive}
             />
-          </HorizontalField>
-          {!expandedView && !simpleMode && (
-            <>
-              <Gap size="s" />
-              <FixedSpaceRow>
-                <HalfWidthColumn>
-                  <Bold>{i18n.messages.messageEditor.type.label}</Bold>
-                  {messageType}
-                </HalfWidthColumn>
-                <HalfWidthColumn>
-                  <Bold>{i18n.messages.messageEditor.flags.heading}</Bold>
-                  {urgent}
-                  {sensitiveCheckbox}
-                </HalfWidthColumn>
-              </FixedSpaceRow>
-              {sensitiveInfoOpen && !sensitiveCheckboxEnabled && (
-                <InfoBoxContainer>
-                  <ExpandingInfoBox
-                    width="full"
-                    info={
-                      i18n.messages.messageEditor.flags.sensitive.whyDisabled
-                    }
-                    close={onSensitiveInfoClick}
-                  />
-                </InfoBoxContainer>
+            {!simpleMode && (
+              <FileUpload
+                slim
+                disabled={!draftId}
+                data-qa="upload-message-attachment"
+                files={message.attachments}
+                getDownloadUrl={getAttachmentUrl}
+                onUpload={handleAttachmentUpload}
+                onDelete={handleAttachmentDelete}
+                onStateChange={setUploadStatus}
+              />
+            )}
+            <Gap size="L" />
+          </ScrollableFormArea>
+          <BottomBar>
+            {draftId ? (
+              <Button
+                appearance="inline"
+                onClick={() => onDiscard(message.sender.value, draftId)}
+                text={i18n.messages.messageEditor.deleteDraft}
+                icon={faTrash}
+                data-qa="discard-draft-btn"
+              />
+            ) : (
+              <Gap horizontal />
+            )}
+            <FixedSpaceRow alignItems="center">
+              <div>
+                {i18n.messages.messageEditor.recipientCount}:{' '}
+                {preflightResult
+                  .map((r) => r.numberOfRecipientAccounts)
+                  .getOrElse('')}
+              </div>
+              <LegacyButton
+                text={
+                  sending
+                    ? i18n.messages.messageEditor.sending
+                    : i18n.messages.messageEditor.send
+                }
+                primary
+                disabled={!sendEnabled}
+                onClick={
+                  preflightResult
+                    .map((r) => r.numberOfRecipientAccounts > 2)
+                    .getOrElse(false)
+                    ? () => setConfirmLargeSend(true)
+                    : sendHandler
+                }
+                data-qa="send-message-btn"
+              />
+            </FixedSpaceRow>
+          </BottomBar>
+
+          {confirmLargeSend && preflightResult.isSuccess && (
+            <InfoModal
+              type="warning"
+              icon={faQuestion}
+              title={i18n.messages.messageEditor.manyRecipientsWarning.title}
+              text={i18n.messages.messageEditor.manyRecipientsWarning.text(
+                preflightResult.value.numberOfRecipientAccounts
               )}
-              {flagsInfo}
-            </>
-          )}
-          <Gap size="m" />
-          <Bold>{i18n.messages.messageEditor.message}</Bold>
-          <Gap size="xs" />
-          <StyledTextArea
-            value={message.content}
-            onChange={(e) => updateMessage({ content: e.target.value })}
-            data-qa="input-content"
-          />
-          {!simpleMode && (
-            <FileUpload
-              slim
-              disabled={!draftId}
-              data-qa="upload-message-attachment"
-              files={message.attachments}
-              getDownloadUrl={getAttachmentUrl}
-              onUpload={handleAttachmentUpload}
-              onDelete={handleAttachmentDelete}
-              onStateChange={setUploadStatus}
+              close={() => setConfirmLargeSend(false)}
+              closeLabel={i18n.common.cancel}
+              resolve={{
+                label: i18n.messages.messageEditor.send,
+                action: () => {
+                  sendHandler()
+                  setConfirmLargeSend(false)
+                }
+              }}
+              reject={{
+                label: i18n.common.cancel,
+                action: () => setConfirmLargeSend(false)
+              }}
             />
           )}
-          <Gap size="L" />
-        </ScrollableFormArea>
-        <BottomBar>
-          {draftId ? (
-            <Button
-              appearance="inline"
-              onClick={() => onDiscard(message.sender.value, draftId)}
-              text={i18n.messages.messageEditor.deleteDraft}
-              icon={faTrash}
-              data-qa="discard-draft-btn"
-            />
-          ) : (
-            <Gap horizontal />
-          )}
-          <FixedSpaceRow alignItems="center">
-            <div>
-              {i18n.messages.messageEditor.recipientCount}:{' '}
-              {preflightResult
-                .map((r) => r.numberOfRecipientAccounts)
-                .getOrElse('')}
-            </div>
-            <LegacyButton
-              text={
-                sending
-                  ? i18n.messages.messageEditor.sending
-                  : i18n.messages.messageEditor.send
-              }
-              primary
-              disabled={!sendEnabled}
-              onClick={
-                preflightResult
-                  .map((r) => r.numberOfRecipientAccounts > 2)
-                  .getOrElse(false)
-                  ? () => setConfirmLargeSend(true)
-                  : sendHandler
-              }
-              data-qa="send-message-btn"
-            />
-          </FixedSpaceRow>
-        </BottomBar>
-
-        {confirmLargeSend && preflightResult.isSuccess && (
-          <InfoModal
-            type="warning"
-            icon={faQuestion}
-            title={i18n.messages.messageEditor.manyRecipientsWarning.title}
-            text={i18n.messages.messageEditor.manyRecipientsWarning.text(
-              preflightResult.value.numberOfRecipientAccounts
-            )}
-            close={() => setConfirmLargeSend(false)}
-            closeLabel={i18n.common.cancel}
-            resolve={{
-              label: i18n.messages.messageEditor.send,
-              action: () => {
-                sendHandler()
-                setConfirmLargeSend(false)
-              }
-            }}
-            reject={{
-              label: i18n.common.cancel,
-              action: () => setConfirmLargeSend(false)
-            }}
-          />
-        )}
-      </Container>
-    </FullScreenContainer>
+        </Container>
+      </FullScreenContainer>
+
+      <SessionExpiredModal
+        isOpen={showSessionExpiredModal}
+        onClose={() => setShowSessionExpiredModal(false)}
+      />
+    </>
   )
 })
 
diff --git a/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx b/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
index b4be01c3900..8dd344bdce4 100644
--- a/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
+++ b/frontend/src/employee-frontend/components/messages/SingleThreadView.tsx
@@ -51,6 +51,7 @@ import { useTranslation } from '../../state/i18n'
 import { MessageContext } from './MessageContext'
 import { replyToThreadMutation } from './queries'
 import { View } from './types-view'
+import { sessionKeepalive } from './utils'
 
 const archiveThreadResult = wrapResult(archiveThread)
 
@@ -297,7 +298,7 @@ export function SingleThreadView({
                 onToggleRecipient={onToggleRecipient}
                 replyContent={replyContent}
                 sendEnabled={sendEnabled}
-                sessionKeepAlive={() => Promise.resolve()}
+                sessionKeepAlive={sessionKeepalive}
               />
             </MessageContainer>
           ) : (
diff --git a/frontend/src/employee-frontend/components/messages/utils.ts b/frontend/src/employee-frontend/components/messages/utils.ts
new file mode 100644
index 00000000000..e7fbc0ecf5e
--- /dev/null
+++ b/frontend/src/employee-frontend/components/messages/utils.ts
@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
+//
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
+export const sessionKeepalive = async () => {
+  const response = await fetch('/api/internal/auth/status', {
+    method: 'GET',
+    credentials: 'include'
+  })
+  if (!response.ok) {
+    // could be e.g. temporarily offline
+    throw new Error(`HTTP error! status: ${response.status}`)
+  }
+
+  try {
+    const data = (await response.json()) as {
+      loggedIn?: boolean
+    }
+    return data.loggedIn === true
+  } catch (error) {
+    throw new Error('Failed to parse JSON response')
+  }
+}
diff --git a/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx b/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
index fd472467a29..04379707236 100644
--- a/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
+++ b/frontend/src/employee-mobile-frontend/messages/ThreadView.tsx
@@ -180,7 +180,6 @@ const ReceivedThread = React.memo(function ReceivedThread({
             onToggleRecipient={onToggleRecipient}
             replyContent={replyContent}
             sendEnabled={sendEnabled}
-            sessionKeepAlive={() => Promise.resolve()}
           />
         </ReplyEditorContainer>
       ) : (
diff --git a/frontend/src/lib-common/utils/helpers.ts b/frontend/src/lib-common/utils/helpers.ts
index 6d28cf71207..a247c2b4f46 100644
--- a/frontend/src/lib-common/utils/helpers.ts
+++ b/frontend/src/lib-common/utils/helpers.ts
@@ -47,6 +47,7 @@ declare global {
   interface EvakaWindowConfig {
     automatedTest?: boolean
     mockedTime?: Date | undefined
+    keepSessionAliveThrottleTime?: number
   }
 }
 
diff --git a/frontend/src/lib-components/messages/MessageReplyEditor.tsx b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
index 4d5af4b1e2a..8f2eda29704 100644
--- a/frontend/src/lib-components/messages/MessageReplyEditor.tsx
+++ b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
@@ -56,7 +56,7 @@ interface Props<T, R> {
   replyContent: string
   sendEnabled: boolean
   messageThreadSensitive?: boolean
-  sessionKeepAlive: () => Promise<void>
+  sessionKeepAlive?: () => Promise<boolean>
 }
 
 function MessageReplyEditor<T, R>({
@@ -77,7 +77,7 @@ function MessageReplyEditor<T, R>({
     keepSessionAlive,
     showSessionExpiredModal,
     setShowSessionExpiredModal
-  } = useKeepSessionAlive(sessionKeepAlive)
+  } = useKeepSessionAlive(sessionKeepAlive ?? (() => Promise.resolve(true)))
 
   const handleSuccess = useCallback(
     (response: R) => {
diff --git a/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
index 3ffbd79a0ba..634522307df 100644
--- a/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
+++ b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
@@ -1,9 +1,14 @@
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
+//
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
 import React from 'react'
+import styled from 'styled-components'
 
 import { Button } from 'lib-components/atoms/buttons/Button'
 
 import { useTranslations } from '../../i18n'
-import ButtonContainer from '../../layout/ButtonContainer'
+import { defaultMargins } from '../../white-space'
 
 import BaseModal from './BaseModal'
 
@@ -22,19 +27,25 @@ const SessionExpiredModal: React.FC<Props> = ({ isOpen, onClose }) => {
         close={onClose}
         title={i18n.sessionTimeout.sessionExpiredTitle}
         closeLabel={i18n.sessionTimeout.cancel}
+        zIndex={999}
       >
         <p>{i18n.sessionTimeout.sessionExpiredMessage}</p>
-        <ButtonContainer>
+        <ButtonFooter>
           <Button
             primary
             onClick={() => window.location.reload()}
             text={i18n.sessionTimeout.goToLoginPage}
           />
           <Button onClick={onClose} text={i18n.sessionTimeout.cancel} />
-        </ButtonContainer>
+        </ButtonFooter>
       </BaseModal>
     )
   )
 }
 
 export default SessionExpiredModal
+const ButtonFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0 ${defaultMargins.L} 0;
+`
diff --git a/frontend/src/lib-components/typography.ts b/frontend/src/lib-components/typography.ts
index f42115801d3..c7b3c9e86d8 100755
--- a/frontend/src/lib-components/typography.ts
+++ b/frontend/src/lib-components/typography.ts
@@ -40,7 +40,7 @@ export const H1 = styled.h1<HeadingProps>`
       ? p.theme.colors.main.m1
       : p.theme.colors.grayscale.g100};
   font-size: ${(p) => (p.smaller ? fontSizesMobile.h1 : '32px')};
-  line-height: ${(p) => (p.smaller ? fontSizesMobile.h1 : '36px')};
+  line-height: ${(p) => (p.smaller ? fontSizesMobile.h1 : 'initial')};
   font-family: Montserrat, sans-serif;
   font-weight: ${(p) => p.theme.typography.h1.weight};
   ${(p) =>
diff --git a/frontend/src/lib-components/useKeepSessionAlive.ts b/frontend/src/lib-components/useKeepSessionAlive.ts
index 556dc152a32..af0537ce4bb 100644
--- a/frontend/src/lib-components/useKeepSessionAlive.ts
+++ b/frontend/src/lib-components/useKeepSessionAlive.ts
@@ -1,7 +1,11 @@
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
+//
+// SPDX-License-Identifier: LGPL-2.1-or-later
+
 import throttle from 'lodash/throttle'
 import { useState, useEffect, useMemo } from 'react'
 
-export function useKeepSessionAlive(sessionKeepAlive: () => Promise<void>) {
+export function useKeepSessionAlive(sessionKeepAlive: () => Promise<boolean>) {
   const [showSessionExpiredModal, setShowSessionExpiredModal] = useState(false)
 
   const keepSessionAlive = useMemo(
@@ -9,12 +13,17 @@ export function useKeepSessionAlive(sessionKeepAlive: () => Promise<void>) {
       throttle(
         async () => {
           try {
-            await sessionKeepAlive()
+            const sessionAlive = await sessionKeepAlive()
+            if (!sessionAlive) {
+              setShowSessionExpiredModal(true)
+            }
           } catch (error) {
-            setShowSessionExpiredModal(true)
+            // ignore errors that might happen e.g. because client is offline or server temporarily unreachable
+            console.error('Error occurred while keeping session alive', error)
           }
         },
-        5000,
+        // Default to 2 minutes and allow overriding this in automated tests
+        window.evaka?.keepSessionAliveThrottleTime ?? 2 * 60 * 1000,
         {
           leading: true,
           trailing: true

From c0db7ee29c067993107184eccd537f820e71c889 Mon Sep 17 00:00:00 2001
From: Jonni Madekivi <jonni.madekivi@reaktor.com>
Date: Fri, 1 Nov 2024 15:57:35 +0200
Subject: [PATCH 3/4] e2e test

---
 frontend/src/e2e-test/browser.ts              |  1 +
 .../pages/citizen/citizen-messages.ts         | 21 ++++++++-
 .../specs/7_messaging/messaging.spec.ts       | 43 +++++++++++++++++++
 .../src/lib-components/useKeepSessionAlive.ts |  7 +--
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/frontend/src/e2e-test/browser.ts b/frontend/src/e2e-test/browser.ts
index 9b58eb17a6e..f2075636111 100644
--- a/frontend/src/e2e-test/browser.ts
+++ b/frontend/src/e2e-test/browser.ts
@@ -32,6 +32,7 @@ declare global {
         captureScreenshots: (namePrefix: string) => Promise<void>
         saveTraces: (namePrefix: string) => Promise<void>
         promises: Promise<void>[]
+        keepSessionAliveThrottleTime?: number
       }
     | undefined
 }
diff --git a/frontend/src/e2e-test/pages/citizen/citizen-messages.ts b/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
index 08f625ae29d..b5e4d04c8a2 100644
--- a/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
+++ b/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
@@ -97,6 +97,9 @@ export default class CitizenMessagesPage {
       )
       .assertTextEquals('Viesti lähetetty')
   }
+  async assertThreadMessagesEqual(messages: string[]) {
+    await this.#threadContent.assertTextsEqual(messages)
+  }
 
   async assertThreadContent(message: {
     title: string
@@ -148,16 +151,30 @@ export default class CitizenMessagesPage {
   async assertReplyContentIsEmpty() {
     return this.#messageReplyContent.assertTextEquals('')
   }
-
   async replyToFirstThread(content: string) {
+    await this.startReplyToFirstThread()
+    await this.#messageReplyContent.fill(content)
+    await this.sendReply()
+  }
+  async startReplyToFirstThread() {
     await this.#threadListItem.click()
     await this.#openReplyEditorButton.click()
-    await this.#messageReplyContent.fill(content)
+  }
+  getReplyContentElement() {
+    return this.#messageReplyContent
+  }
+  async sendReply() {
     await this.#sendReplyButton.click()
     // the editor is hidden after sending the reply
     await this.#sendReplyButton.waitUntilHidden()
   }
 
+  async getSessionExpiry() {
+    const cookies = await this.page.page.context().cookies()
+    const sessionCookie = cookies.find((c) => c.name === 'evaka.eugw.session')
+    return sessionCookie?.expires ?? 0
+  }
+
   async deleteFirstThread() {
     await this.#threadListItem.findByDataQa('delete-thread-btn').click()
   }
diff --git a/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts b/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
index 3cbb036f421..87baa3f0540 100644
--- a/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
+++ b/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
@@ -713,6 +713,49 @@ describe('Sending and receiving messages', () => {
         )
       })
 
+      test('Citizen session is kept alive as long as user keeps typing', async () => {
+        await openSupervisorPage(mockedDateAt10)
+        await unitSupervisorPage.goto(`${config.employeeUrl}/messages`)
+        const messagesPage = new MessagesPage(unitSupervisorPage)
+        const messageEditor = await messagesPage.openMessageEditor()
+        await messageEditor.sendNewMessage(defaultMessage)
+        await runPendingAsyncJobs(mockedDateAt10.addMinutes(1))
+
+        await openCitizen(mockedDateAt11)
+
+        await citizenPage.goto(config.enduserMessagesUrl)
+        await citizenPage.page.evaluate(() => {
+          if (window.evaka) window.evaka.keepSessionAliveThrottleTime = 300 // Set to 300ms for tests
+        })
+        const citizenMessagesPage = new CitizenMessagesPage(citizenPage)
+        await citizenMessagesPage.assertThreadContent(defaultMessage)
+
+        const initialExpiry = await citizenMessagesPage.getSessionExpiry()
+
+        await citizenMessagesPage.startReplyToFirstThread()
+
+        const slowTypedText =
+          'Olen aika hidas kirjoittamaan näitä viestejä, mutta yritän parhaani: Lapseni ovat sitä ja tätä...'
+
+        const msDelayPerCharToTypeSlowly = 1000 / slowTypedText.length
+        const authStatusRequests: string[] = []
+        citizenPage.page.on('request', (request) => {
+          if (request.url().includes('/api/application/auth/status')) {
+            authStatusRequests.push(request.url())
+          }
+        })
+        // typing this takes so long that session keepalive mechanism should renew the session
+        await citizenMessagesPage
+          .getReplyContentElement()
+          .locator.pressSequentially(slowTypedText, {
+            delay: msDelayPerCharToTypeSlowly
+          })
+
+        const finalExpiry = await citizenMessagesPage.getSessionExpiry()
+        expect(authStatusRequests.length).toBeGreaterThanOrEqual(3)
+        expect(finalExpiry).toBeGreaterThan(initialExpiry + 0.3)
+      })
+
       describe('Messages can be deleted / archived', () => {
         test('Unit supervisor sends message and citizen deletes the message', async () => {
           await openSupervisorPage(mockedDateAt10)
diff --git a/frontend/src/lib-components/useKeepSessionAlive.ts b/frontend/src/lib-components/useKeepSessionAlive.ts
index af0537ce4bb..c3f738e98d8 100644
--- a/frontend/src/lib-components/useKeepSessionAlive.ts
+++ b/frontend/src/lib-components/useKeepSessionAlive.ts
@@ -7,7 +7,8 @@ import { useState, useEffect, useMemo } from 'react'
 
 export function useKeepSessionAlive(sessionKeepAlive: () => Promise<boolean>) {
   const [showSessionExpiredModal, setShowSessionExpiredModal] = useState(false)
-
+  const throttleTime =
+    window.evaka?.keepSessionAliveThrottleTime ?? 2 * 60 * 1000
   const keepSessionAlive = useMemo(
     () =>
       throttle(
@@ -23,13 +24,13 @@ export function useKeepSessionAlive(sessionKeepAlive: () => Promise<boolean>) {
           }
         },
         // Default to 2 minutes and allow overriding this in automated tests
-        window.evaka?.keepSessionAliveThrottleTime ?? 2 * 60 * 1000,
+        throttleTime,
         {
           leading: true,
           trailing: true
         }
       ),
-    [sessionKeepAlive]
+    [sessionKeepAlive, throttleTime]
   )
 
   useEffect(() => {

From 3e946e07bfc005177885a72d66e1d2a0e0cef117 Mon Sep 17 00:00:00 2001
From: Jonni Madekivi <jonni.madekivi@reaktor.com>
Date: Fri, 8 Nov 2024 09:30:27 +0200
Subject: [PATCH 4/4] Fix review comments

---
 .../messages/MessageEditor.tsx                |  9 +++--
 .../pages/citizen/citizen-messages.ts         | 19 ++-------
 .../specs/7_messaging/messaging.spec.ts       | 13 ++++---
 .../components/messages/MessageEditor.tsx     |  9 +++--
 .../messages/MessageReplyEditor.tsx           |  9 +++--
 .../molecules/modals/SessionExpiredModal.tsx  | 39 +++++++++----------
 6 files changed, 43 insertions(+), 55 deletions(-)

diff --git a/frontend/src/citizen-frontend/messages/MessageEditor.tsx b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
index ed37f14492f..e99e56a1791 100644
--- a/frontend/src/citizen-frontend/messages/MessageEditor.tsx
+++ b/frontend/src/citizen-frontend/messages/MessageEditor.tsx
@@ -443,10 +443,11 @@ export default React.memo(function MessageEditor({
           </FormArea>
         </Container>
       </FocusLock>
-      <SessionExpiredModal
-        isOpen={showSessionExpiredModal}
-        onClose={() => setShowSessionExpiredModal(false)}
-      />
+      {showSessionExpiredModal && (
+        <SessionExpiredModal
+          onClose={() => setShowSessionExpiredModal(false)}
+        />
+      )}
     </ModalAccessibilityWrapper>
   )
 })
diff --git a/frontend/src/e2e-test/pages/citizen/citizen-messages.ts b/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
index b5e4d04c8a2..cd8e844469d 100644
--- a/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
+++ b/frontend/src/e2e-test/pages/citizen/citizen-messages.ts
@@ -23,7 +23,7 @@ export class MockStrongAuthPage {
   }
 }
 export default class CitizenMessagesPage {
-  #messageReplyContent: TextInput
+  messageReplyContent: TextInput
   #threadListItem: Element
   #threadTitle: Element
   #redactedThreadTitle: Element
@@ -38,7 +38,7 @@ export default class CitizenMessagesPage {
   newMessageButton: Element
   fileUpload: Element
   constructor(private readonly page: Page) {
-    this.#messageReplyContent = new TextInput(
+    this.messageReplyContent = new TextInput(
       page.findByDataQa('message-reply-content')
     )
     this.#threadListItem = page.findByDataQa('thread-list-item')
@@ -97,9 +97,6 @@ export default class CitizenMessagesPage {
       )
       .assertTextEquals('Viesti lähetetty')
   }
-  async assertThreadMessagesEqual(messages: string[]) {
-    await this.#threadContent.assertTextsEqual(messages)
-  }
 
   async assertThreadContent(message: {
     title: string
@@ -144,25 +141,15 @@ export default class CitizenMessagesPage {
     await this.discardMessageButton.click()
   }
 
-  async fillReplyContent(content: string) {
-    await this.#messageReplyContent.fill(content)
-  }
-
-  async assertReplyContentIsEmpty() {
-    return this.#messageReplyContent.assertTextEquals('')
-  }
   async replyToFirstThread(content: string) {
     await this.startReplyToFirstThread()
-    await this.#messageReplyContent.fill(content)
+    await this.messageReplyContent.fill(content)
     await this.sendReply()
   }
   async startReplyToFirstThread() {
     await this.#threadListItem.click()
     await this.#openReplyEditorButton.click()
   }
-  getReplyContentElement() {
-    return this.#messageReplyContent
-  }
   async sendReply() {
     await this.#sendReplyButton.click()
     // the editor is hidden after sending the reply
diff --git a/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts b/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
index 87baa3f0540..67c3e0e51a3 100644
--- a/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
+++ b/frontend/src/e2e-test/specs/7_messaging/messaging.spec.ts
@@ -686,11 +686,11 @@ describe('Sending and receiving messages', () => {
         const citizenMessagesPage = new CitizenMessagesPage(citizenPage)
         await citizenMessagesPage.openFirstThreadReplyEditor()
         await citizenMessagesPage.discardMessageButton.waitUntilVisible()
-        await citizenMessagesPage.fillReplyContent(defaultContent)
+        await citizenMessagesPage.messageReplyContent.fill(defaultContent)
         await citizenMessagesPage.discardReplyEditor()
         await citizenMessagesPage.discardMessageButton.waitUntilHidden()
         await citizenMessagesPage.openFirstThreadReplyEditor()
-        await citizenMessagesPage.assertReplyContentIsEmpty()
+        await citizenMessagesPage.messageReplyContent.assertTextEquals('')
       })
 
       test('Citizen can reply to a thread and receive a notification on success', async () => {
@@ -745,11 +745,12 @@ describe('Sending and receiving messages', () => {
           }
         })
         // typing this takes so long that session keepalive mechanism should renew the session
-        await citizenMessagesPage
-          .getReplyContentElement()
-          .locator.pressSequentially(slowTypedText, {
+        await citizenMessagesPage.messageReplyContent.locator.pressSequentially(
+          slowTypedText,
+          {
             delay: msDelayPerCharToTypeSlowly
-          })
+          }
+        )
 
         const finalExpiry = await citizenMessagesPage.getSessionExpiry()
         expect(authStatusRequests.length).toBeGreaterThanOrEqual(3)
diff --git a/frontend/src/employee-frontend/components/messages/MessageEditor.tsx b/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
index f9c748d7d9d..7b5f578bf76 100644
--- a/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
+++ b/frontend/src/employee-frontend/components/messages/MessageEditor.tsx
@@ -895,10 +895,11 @@ export default React.memo(function MessageEditor({
         </Container>
       </FullScreenContainer>
 
-      <SessionExpiredModal
-        isOpen={showSessionExpiredModal}
-        onClose={() => setShowSessionExpiredModal(false)}
-      />
+      {showSessionExpiredModal && (
+        <SessionExpiredModal
+          onClose={() => setShowSessionExpiredModal(false)}
+        />
+      )}
     </>
   )
 })
diff --git a/frontend/src/lib-components/messages/MessageReplyEditor.tsx b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
index 8f2eda29704..197fa7c94d4 100644
--- a/frontend/src/lib-components/messages/MessageReplyEditor.tsx
+++ b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
@@ -138,10 +138,11 @@ function MessageReplyEditor<T, R>({
           />
         </ButtonContainer>
       </EditorRow>
-      <SessionExpiredModal
-        isOpen={showSessionExpiredModal}
-        onClose={() => setShowSessionExpiredModal(false)}
-      />
+      {showSessionExpiredModal && (
+        <SessionExpiredModal
+          onClose={() => setShowSessionExpiredModal(false)}
+        />
+      )}
     </>
   )
 }
diff --git a/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
index 634522307df..25d0c7a31c5 100644
--- a/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
+++ b/frontend/src/lib-components/molecules/modals/SessionExpiredModal.tsx
@@ -13,33 +13,30 @@ import { defaultMargins } from '../../white-space'
 import BaseModal from './BaseModal'
 
 interface Props {
-  isOpen: boolean
   onClose: () => void
 }
 
-const SessionExpiredModal: React.FC<Props> = ({ isOpen, onClose }) => {
+const SessionExpiredModal: React.FC<Props> = ({ onClose }) => {
   const i18n = useTranslations()
 
   return (
-    isOpen && (
-      <BaseModal
-        mobileFullScreen
-        close={onClose}
-        title={i18n.sessionTimeout.sessionExpiredTitle}
-        closeLabel={i18n.sessionTimeout.cancel}
-        zIndex={999}
-      >
-        <p>{i18n.sessionTimeout.sessionExpiredMessage}</p>
-        <ButtonFooter>
-          <Button
-            primary
-            onClick={() => window.location.reload()}
-            text={i18n.sessionTimeout.goToLoginPage}
-          />
-          <Button onClick={onClose} text={i18n.sessionTimeout.cancel} />
-        </ButtonFooter>
-      </BaseModal>
-    )
+    <BaseModal
+      mobileFullScreen
+      close={onClose}
+      title={i18n.sessionTimeout.sessionExpiredTitle}
+      closeLabel={i18n.sessionTimeout.cancel}
+      zIndex={999}
+    >
+      <p>{i18n.sessionTimeout.sessionExpiredMessage}</p>
+      <ButtonFooter>
+        <Button
+          primary
+          onClick={() => window.location.reload()}
+          text={i18n.sessionTimeout.goToLoginPage}
+        />
+        <Button onClick={onClose} text={i18n.sessionTimeout.cancel} />
+      </ButtonFooter>
+    </BaseModal>
   )
 }