From 7dba83771bd090b9789b216577f0ec0093b7b192 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Thu, 23 Apr 2026 11:16:53 +0700
Subject: [PATCH] Move security section

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 models/setting/src/index.ts                   |   2 +-
 plugins/setting-assets/lang/cs.json           |   1 +
 plugins/setting-assets/lang/de.json           |   1 +
 plugins/setting-assets/lang/en.json           |   1 +
 plugins/setting-assets/lang/es.json           |   1 +
 plugins/setting-assets/lang/fr.json           |   1 +
 plugins/setting-assets/lang/it.json           |   1 +
 plugins/setting-assets/lang/ja.json           |   1 +
 plugins/setting-assets/lang/pt-br.json        |   1 +
 plugins/setting-assets/lang/pt.json           |   1 +
 plugins/setting-assets/lang/ru.json           |   1 +
 plugins/setting-assets/lang/tr.json           |   1 +
 plugins/setting-assets/lang/zh.json           |   1 +
 .../src/components/SecuritySettings.svelte    |  75 ++++++++
 .../components/SessionHistorySettings.svelte  | 170 ++++++++++++++++++
 .../src/components/TwoFactorSettings.svelte   |   6 +-
 plugins/setting-resources/src/index.ts        |   4 +-
 plugins/setting-resources/src/plugin.ts       |   3 +-
 plugins/setting/src/index.ts                  |   3 +-
 19 files changed, 266 insertions(+), 9 deletions(-)
 create mode 100644 plugins/setting-resources/src/components/SecuritySettings.svelte
 create mode 100644 plugins/setting-resources/src/components/SessionHistorySettings.svelte

diff --git a/models/setting/src/index.ts b/models/setting/src/index.ts
index 66ec8a9be9..aed83a9b21 100644
--- a/models/setting/src/index.ts
+++ b/models/setting/src/index.ts
@@ -217,7 +217,7 @@ export function createModel (builder: Builder): void {
       name: 'security',
       label: setting.string.Security,
       icon: setting.icon.Password,
-      component: setting.component.TwoFactorSettings,
+      component: setting.component.SecuritySettings,
       group: 'settings-account',
       role: AccountRole.Guest,
       order: 1200
diff --git a/plugins/setting-assets/lang/cs.json b/plugins/setting-assets/lang/cs.json
index dcc8921c11..5a10fb5db6 100644
--- a/plugins/setting-assets/lang/cs.json
+++ b/plugins/setting-assets/lang/cs.json
@@ -227,6 +227,7 @@
     "SpaceMembersOnly": "Pouze členové prostoru",
     "Reset": "Resetovat",
     "Security": "Zabezpečení",
+    "SecurityTabSessions": "Historie relací",
     "TwoFactorAuth": "Dvoufaktorové ověřování",
     "TwoFactorAuthDescription": "Dvoufaktorové ověřování přidává další vrstvu zabezpečení k vašemu účtu",
     "EnableTwoFactorAuth": "Povolit dvoufaktorové ověřování",
diff --git a/plugins/setting-assets/lang/de.json b/plugins/setting-assets/lang/de.json
index a92eaa1f67..e2662af2ed 100644
--- a/plugins/setting-assets/lang/de.json
+++ b/plugins/setting-assets/lang/de.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "Nur Bereichsmitglieder",
     "Reset": "Zurücksetzen",
     "Security": "Sicherheit",
+    "SecurityTabSessions": "Sitzungsverlauf",
     "TwoFactorAuth": "Zweistufige Authentifizierung",
     "TwoFactorAuthDescription": "Zweistufige Authentifizierung fügt eine zusätzliche Sicherheitsebene zu Ihrem Konto hinzu",
     "EnableTwoFactorAuth": "Zweistufige Authentifizierung aktivieren",
diff --git a/plugins/setting-assets/lang/en.json b/plugins/setting-assets/lang/en.json
index 4ab204d2b0..60b4c2bb79 100644
--- a/plugins/setting-assets/lang/en.json
+++ b/plugins/setting-assets/lang/en.json
@@ -229,6 +229,7 @@
     "ShowInTitle": "Show in title",
     "SpaceMembersOnly": "Space members only",
     "Security": "Security",
+    "SecurityTabSessions": "Session history",
     "TwoFactorAuth": "Two-factor authentication",
     "TwoFactorAuthDescription": "Two-factor authentication adds an extra layer of security to your account",
     "EnableTwoFactorAuth": "Enable two-factor authentication",
diff --git a/plugins/setting-assets/lang/es.json b/plugins/setting-assets/lang/es.json
index 5c2d424040..64ba92b6c0 100644
--- a/plugins/setting-assets/lang/es.json
+++ b/plugins/setting-assets/lang/es.json
@@ -220,6 +220,7 @@
     "SpaceMembersOnly": "Solo miembros del espacio",
     "Reset": "Reiniciar",
     "Security": "Seguridad",
+    "SecurityTabSessions": "Historial de sesiones",
     "TwoFactorAuth": "Autenticación de dos factores",
     "TwoFactorAuthDescription": "La autenticación de dos factores añade una capa adicional de seguridad a tu cuenta",
     "EnableTwoFactorAuth": "Habilitar autenticación de dos factores",
diff --git a/plugins/setting-assets/lang/fr.json b/plugins/setting-assets/lang/fr.json
index 5bd3e1235e..f15bad72cd 100644
--- a/plugins/setting-assets/lang/fr.json
+++ b/plugins/setting-assets/lang/fr.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "Membres de l'espace uniquement",
     "Reset": "Réinitialiser",
     "Security": "Sécurité",
+    "SecurityTabSessions": "Historique des sessions",
     "TwoFactorAuth": "Authentification à deux facteurs",
     "TwoFactorAuthDescription": "L'authentification à deux facteurs ajoute une couche de sécurité supplémentaire à votre compte",
     "EnableTwoFactorAuth": "Activer l'authentification à deux facteurs",
diff --git a/plugins/setting-assets/lang/it.json b/plugins/setting-assets/lang/it.json
index cc19acd007..0e921c57ac 100644
--- a/plugins/setting-assets/lang/it.json
+++ b/plugins/setting-assets/lang/it.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "Solo membri dello spazio",
     "Reset": "Reset",
     "Security": "Sicurezza",
+    "SecurityTabSessions": "Cronologia sessioni",
     "TwoFactorAuth": "Autenticazione a due fattori",
     "TwoFactorAuthDescription": "L'autenticazione a due fattori aggiunge un ulteriore livello di sicurezza al tuo account",
     "EnableTwoFactorAuth": "Abilita autenticazione a due fattori",
diff --git a/plugins/setting-assets/lang/ja.json b/plugins/setting-assets/lang/ja.json
index 30707aff9b..04e8dcbdcf 100644
--- a/plugins/setting-assets/lang/ja.json
+++ b/plugins/setting-assets/lang/ja.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "スペースメンバーのみ",
     "Reset": "リセット",
     "Security": "セキュリティ",
+    "SecurityTabSessions": "セッション履歴",
     "TwoFactorAuth": "二要素認証",
     "TwoFactorAuthDescription": "二要素認証はアカウントにセキュリティの追加レイヤーを追加します",
     "EnableTwoFactorAuth": "二要素認証を有効にする",
diff --git a/plugins/setting-assets/lang/pt-br.json b/plugins/setting-assets/lang/pt-br.json
index 98c63cdee3..3e88a52515 100644
--- a/plugins/setting-assets/lang/pt-br.json
+++ b/plugins/setting-assets/lang/pt-br.json
@@ -220,6 +220,7 @@
     "SpaceMembersOnly": "Apenas membros do espaço",
     "Reset": "Reiniciar",
     "Security": "Segurança",
+    "SecurityTabSessions": "Histórico de sessões",
     "TwoFactorAuth": "Autenticação de dois fatores",
     "TwoFactorAuthDescription": "A autenticação de dois fatores adiciona uma camada extra de segurança à sua conta",
     "EnableTwoFactorAuth": "Ativar autenticação de dois fatores",
diff --git a/plugins/setting-assets/lang/pt.json b/plugins/setting-assets/lang/pt.json
index c638af3471..beb4f355c2 100644
--- a/plugins/setting-assets/lang/pt.json
+++ b/plugins/setting-assets/lang/pt.json
@@ -220,6 +220,7 @@
     "SpaceMembersOnly": "Apenas membros do espaço",
     "Reset": "Reiniciar",
     "Security": "Segurança",
+    "SecurityTabSessions": "Histórico de sessões",
     "TwoFactorAuth": "Autenticação de dois fatores",
     "TwoFactorAuthDescription": "A autenticação de dois fatores adiciona uma camada extra de segurança à sua conta",
     "EnableTwoFactorAuth": "Ativar autenticação de dois fatores",
diff --git a/plugins/setting-assets/lang/ru.json b/plugins/setting-assets/lang/ru.json
index 512fbb9661..8472519c8d 100644
--- a/plugins/setting-assets/lang/ru.json
+++ b/plugins/setting-assets/lang/ru.json
@@ -229,6 +229,7 @@
     "ShowInTitle": "Показывать в заголовке",
     "SpaceMembersOnly": "Только участники пространства",
     "Security": "Безопасность",
+    "SecurityTabSessions": "История сессий",
     "TwoFactorAuth": "Двухфакторная аутентификация",
     "TwoFactorAuthDescription": "Двухфакторная аутентификация добавляет дополнительный уровень безопасности к вашей учетной записи",
     "EnableTwoFactorAuth": "Включить двухфакторную аутентификацию",
diff --git a/plugins/setting-assets/lang/tr.json b/plugins/setting-assets/lang/tr.json
index fa4cff6f16..0fe5ea0b44 100644
--- a/plugins/setting-assets/lang/tr.json
+++ b/plugins/setting-assets/lang/tr.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "Yalnızca alan üyeleri",
     "Reset": "Sıfırla",
     "Security": "Güvenlik",
+    "SecurityTabSessions": "Oturum geçmişi",
     "TwoFactorAuth": "İki faktörlü kimlik doğrulama",
     "TwoFactorAuthDescription": "İki faktörlü kimlik doğrulama hesabınıza ek bir güvenlik katmanı ekler",
     "EnableTwoFactorAuth": "İki faktörlü kimlik doğrulamayı etkinleştir",
diff --git a/plugins/setting-assets/lang/zh.json b/plugins/setting-assets/lang/zh.json
index beccd27aef..110141d01a 100644
--- a/plugins/setting-assets/lang/zh.json
+++ b/plugins/setting-assets/lang/zh.json
@@ -229,6 +229,7 @@
     "SpaceMembersOnly": "仅限空间成员",
     "Reset": "重置",
     "Security": "安全",
+    "SecurityTabSessions": "会话历史",
     "TwoFactorAuth": "双因素认证",
     "TwoFactorAuthDescription": "双因素认证为您的帐户增加额外的安全层",
     "EnableTwoFactorAuth": "启用双因素认证",
diff --git a/plugins/setting-resources/src/components/SecuritySettings.svelte b/plugins/setting-resources/src/components/SecuritySettings.svelte
new file mode 100644
index 0000000000..e2b6abc0a2
--- /dev/null
+++ b/plugins/setting-resources/src/components/SecuritySettings.svelte
@@ -0,0 +1,75 @@
+<!--
+// Copyright © 2026 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import setting from '@hcengineering/setting'
+  import view from '@hcengineering/view'
+  import {
+    Breadcrumb,
+    defineSeparators,
+    Header,
+    NavItem,
+    Scroller,
+    Separator,
+    twoPanelsSeparators
+  } from '@hcengineering/ui'
+
+  import settingsRes from '../plugin'
+  import SessionHistorySettings from './SessionHistorySettings.svelte'
+  import TwoFactorSettings from './TwoFactorSettings.svelte'
+
+  let securityTab: 'twoFactor' | 'sessions' = 'twoFactor'
+
+  defineSeparators('securitySettings', twoPanelsSeparators)
+</script>
+
+<div class="hulyComponent">
+  <Header adaptive={'disabled'}>
+    <Breadcrumb icon={setting.icon.Password} label={setting.string.Security} size={'large'} isCurrent />
+  </Header>
+  <div class="hulyComponent-content__container columns">
+    <div class="hulyComponent-content__column navigation py-2">
+      <Scroller shrink>
+        <NavItem
+          icon={setting.icon.Password}
+          label={setting.string.TwoFactorAuth}
+          selected={securityTab === 'twoFactor'}
+          on:click={() => {
+            securityTab = 'twoFactor'
+          }}
+        />
+        <NavItem
+          icon={view.icon.Timeline}
+          label={settingsRes.string.SecurityTabSessions}
+          selected={securityTab === 'sessions'}
+          on:click={() => {
+            securityTab = 'sessions'
+          }}
+        />
+      </Scroller>
+    </div>
+
+    <Separator name={'securitySettings'} index={0} color={'var(--theme-divider-color)'} />
+
+    <div class="hulyComponent-content__column content">
+      <Scroller align={'center'} padding={'var(--spacing-3)'} bottomPadding={'var(--spacing-3)'}>
+        {#if securityTab === 'twoFactor'}
+          <TwoFactorSettings />
+        {:else}
+          <SessionHistorySettings />
+        {/if}
+      </Scroller>
+    </div>
+  </div>
+</div>
diff --git a/plugins/setting-resources/src/components/SessionHistorySettings.svelte b/plugins/setting-resources/src/components/SessionHistorySettings.svelte
new file mode 100644
index 0000000000..8abffa1ee7
--- /dev/null
+++ b/plugins/setting-resources/src/components/SessionHistorySettings.svelte
@@ -0,0 +1,170 @@
+<!--
+// Copyright © 2026 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Analytics } from '@hcengineering/analytics'
+  import type { SecurityLoginHistoryEvent } from '@hcengineering/account-client'
+  import { MessageBox } from '@hcengineering/presentation'
+  import { Button, Label, showPopup } from '@hcengineering/ui'
+  import { onMount } from 'svelte'
+
+  import settingsRes from '../plugin'
+  import { formatLocation, getShortUserAgent, maskIpAddress, shouldShowNotMeAction } from '../securityLoginActivity'
+  import { getAccountClient } from '../utils'
+
+  /** Narrow account client for security APIs (params match server contract). */
+  const accountClient = getAccountClient() as unknown as {
+    getMySecurityLoginHistory: (params?: { limit?: number, redact?: boolean }) => Promise<SecurityLoginHistoryEvent[]>
+    reportSecurityLoginConcern: (params?: { loginEventId?: string }) => Promise<void>
+  }
+  const recentActivityLimit = 20
+  let loginHistory: SecurityLoginHistoryEvent[] = []
+  let loginHistoryLoading = false
+  let loginHistoryLoaded = false
+  let loginHistoryError = false
+
+  async function loadRecentLoginActivity (): Promise<void> {
+    loginHistoryLoading = true
+    loginHistoryError = false
+    try {
+      loginHistory = await accountClient.getMySecurityLoginHistory({ limit: recentActivityLimit, redact: true })
+      loginHistoryLoaded = true
+    } catch (err: any) {
+      loginHistoryError = true
+      Analytics.handleError(err)
+    } finally {
+      loginHistoryLoading = false
+    }
+  }
+
+  function handleNotMeAction (event?: SecurityLoginHistoryEvent): void {
+    showPopup(MessageBox, {
+      label: settingsRes.string.NotMeDialogTitle,
+      message: settingsRes.string.NotMeDialogMessage,
+      okLabel: settingsRes.string.NotMeDialogAction,
+      action: async () => {
+        await accountClient.reportSecurityLoginConcern(event !== undefined ? { loginEventId: event.id } : {})
+        Analytics.handleEvent('Settings:RecentLoginActivityNotMe', {
+          eventId: event?.id ?? 'header-action',
+          authMethod: event?.authMethod ?? 'unknown'
+        })
+      }
+    })
+  }
+
+  onMount(() => {
+    void loadRecentLoginActivity()
+  })
+</script>
+
+<div class="flex-col gap-2 max-w-240">
+  <div class="flex-between">
+    <h3 class="text-lg font-medium"><Label label={settingsRes.string.RecentLoginActivityTitle} /></h3>
+    <Button
+      label={settingsRes.string.NotMeAction}
+      kind="secondary"
+      on:click={() => {
+        handleNotMeAction()
+      }}
+    />
+  </div>
+  {#if loginHistoryLoading}
+    <div class="login-placeholder"><Label label={settingsRes.string.RecentLoginActivityLoading} /></div>
+    <div class="login-placeholder"><Label label={settingsRes.string.RecentLoginActivityLoading} /></div>
+    <div class="login-placeholder"><Label label={settingsRes.string.RecentLoginActivityLoading} /></div>
+  {:else if loginHistoryError}
+    <div class="login-empty">
+      <div><Label label={settingsRes.string.RecentLoginActivityError} /></div>
+      <Button
+        label={settingsRes.string.RecentLoginActivityRetry}
+        kind="secondary"
+        on:click={() => {
+          void loadRecentLoginActivity()
+        }}
+      />
+    </div>
+  {:else if loginHistoryLoaded && loginHistory.length === 0}
+    <div class="login-empty"><Label label={settingsRes.string.RecentLoginActivityEmpty} /></div>
+  {:else}
+    <div class="flex-col gap-2">
+      {#each loginHistory as loginEvent (loginEvent.id)}
+        <div class="login-activity-row">
+          <div class="flex-between gap-2">
+            <span class="text-sm">{new Date(loginEvent.eventTime).toLocaleString()}</span>
+            <span class:login-success={loginEvent.success} class:login-failed={!loginEvent.success}>
+              {#if loginEvent.success}
+                <Label label={settingsRes.string.RecentLoginActivitySuccess} />
+              {:else}
+                <Label label={settingsRes.string.RecentLoginActivityFailure} />
+              {/if}
+            </span>
+          </div>
+          <div class="text-sm flex-row-center gap-1">
+            <Label label={settingsRes.string.RecentLoginActivityMethod} />: {loginEvent.authMethod}
+          </div>
+          <div class="text-sm flex-row-center gap-1">
+            <Label label={settingsRes.string.RecentLoginActivityIp} />: {maskIpAddress(loginEvent.ip)}
+          </div>
+          <div class="text-sm flex-row-center gap-1">
+            <Label label={settingsRes.string.RecentLoginActivityLocation} />:
+            {formatLocation({ city: loginEvent.city, country: loginEvent.country })}
+          </div>
+          <div class="text-sm flex-row-center gap-1">
+            <Label label={settingsRes.string.RecentLoginActivityDevice} />:
+            {getShortUserAgent(loginEvent.userAgent)}
+          </div>
+          {#if shouldShowNotMeAction(loginEvent)}
+            <div class="mt-2">
+              <Button
+                label={settingsRes.string.NotMeAction}
+                kind="secondary"
+                on:click={() => {
+                  handleNotMeAction(loginEvent)
+                }}
+              />
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .login-activity-row {
+    border: 1px solid var(--theme-divider-color, var(--divider-color));
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+  }
+
+  .login-placeholder {
+    height: 2.25rem;
+    border-radius: 0.5rem;
+    background: var(--theme-button-default, var(--button-default));
+    opacity: 0.35;
+  }
+
+  .login-empty {
+    color: var(--caption-color);
+    font-size: 0.875rem;
+  }
+
+  .login-success {
+    color: var(--theme-positive-color, #2e7d32);
+  }
+
+  .login-failed {
+    color: var(--theme-danger-color, #d32f2f);
+  }
+</style>
diff --git a/plugins/setting-resources/src/components/TwoFactorSettings.svelte b/plugins/setting-resources/src/components/TwoFactorSettings.svelte
index a0678cba18..a8bd3318f6 100644
--- a/plugins/setting-resources/src/components/TwoFactorSettings.svelte
+++ b/plugins/setting-resources/src/components/TwoFactorSettings.svelte
@@ -17,7 +17,7 @@
   import { getCurrentAccount } from '@hcengineering/core'
   import { OK, unknownError, getEmbeddedLabel } from '@hcengineering/platform'
   import setting from '@hcengineering/setting'
-  import { Breadcrumb, Button, EditBox, Header, Label, Spinner, Status } from '@hcengineering/ui'
+  import { Button, EditBox, Label, Spinner, Status } from '@hcengineering/ui'
   import { getAccountClient } from '../utils'
   import presentation from '@hcengineering/presentation'
 
@@ -96,10 +96,6 @@
 </script>
 
 <div class="hulyComponent">
-  <Header adaptive={'disabled'}>
-    <Breadcrumb icon={setting.icon.Password} label={setting.string.TwoFactorAuth} size="large" isCurrent />
-  </Header>
-
   <div class="flex-col p-6 gap-8 max-w-2xl">
     <div class="flex flex-between">
       <Label label={setting.string.TwoFactorAuthDescription} />
diff --git a/plugins/setting-resources/src/index.ts b/plugins/setting-resources/src/index.ts
index d11948b02c..b61e8707b4 100644
--- a/plugins/setting-resources/src/index.ts
+++ b/plugins/setting-resources/src/index.ts
@@ -30,6 +30,7 @@ import Password from './components/Password.svelte'
 import Privacy from './components/Privacy.svelte'
 import Profile from './components/Profile.svelte'
 import Settings from './components/Settings.svelte'
+import SecuritySettings from './components/SecuritySettings.svelte'
 import TwoFactorSettings from './components/TwoFactorSettings.svelte'
 
 import { Analytics } from '@hcengineering/analytics'
@@ -171,7 +172,8 @@ export default async (): Promise<Resources> => ({
     AddEmailSocialId,
     EmployeeRefEditor,
     UserRoleSelect,
-    TwoFactorSettings
+    TwoFactorSettings,
+    SecuritySettings
   },
   actionImpl: {
     DeleteMixin
diff --git a/plugins/setting-resources/src/plugin.ts b/plugins/setting-resources/src/plugin.ts
index 2035ca1769..cc8e35ea91 100644
--- a/plugins/setting-resources/src/plugin.ts
+++ b/plugins/setting-resources/src/plugin.ts
@@ -178,6 +178,7 @@ export default mergeIds(settingId, setting, {
     NotMeAction: '' as IntlString,
     NotMeDialogTitle: '' as IntlString,
     NotMeDialogMessage: '' as IntlString,
-    NotMeDialogAction: '' as IntlString
+    NotMeDialogAction: '' as IntlString,
+    SecurityTabSessions: '' as IntlString
   }
 })
diff --git a/plugins/setting/src/index.ts b/plugins/setting/src/index.ts
index 98c09a0e87..9e1a7edfdd 100644
--- a/plugins/setting/src/index.ts
+++ b/plugins/setting/src/index.ts
@@ -246,7 +246,8 @@ export default plugin(settingId, {
     AddEmailSocialId: '' as AnyComponent,
     OfficeSettings: '' as AnyComponent,
     UserRoleSelect: '' as AnyComponent,
-    TwoFactorSettings: '' as AnyComponent
+    TwoFactorSettings: '' as AnyComponent,
+    SecuritySettings: '' as AnyComponent
   },
   string: {
     Settings: '' as IntlString,