Session vanhenemisen estäminen viestiä kirjoittaessa

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,6 +395,7 @@ export default React.memo(function MessageEditor({
                   }))
                 }
                 data-qa="input-content"
+                onKeyUp={keepSessionAlive}
               />
             </TextAreaLabel>
 
@@ -433,6 +443,11 @@ export default React.memo(function MessageEditor({
           </FormArea>
         </Container>
       </FocusLock>
+      {showSessionExpiredModal && (
+        <SessionExpiredModal
+          onClose={() => setShowSessionExpiredModal(false)}
+        />
+      )}
     </ModalAccessibilityWrapper>
   )
 })

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,6 +366,7 @@ export default React.memo(
               replyContent={replyContent}
               sendEnabled={sendEnabled}
               messageThreadSensitive={sensitive}
+              sessionKeepAlive={sessionKeepalive}
             />
           </ReplyEditorContainer>
         ) : (

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')
+  }
+}

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
 }

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')
@@ -141,23 +141,27 @@ 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.sendReply()
+  }
+  async startReplyToFirstThread() {
     await this.#threadListItem.click()
     await this.#openReplyEditorButton.click()
-    await this.#messageReplyContent.fill(content)
+  }
+  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()
   }

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 () => {
@@ -713,6 +713,50 @@ 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.messageReplyContent.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)