From 198058b19a03ebe80790a4a25686309d88275761 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 2 Oct 2022 11:33:21 +0200
Subject: [PATCH] add user visible note that login history expires

The display variant where no signin history items are present has been
made shorter and more appropriate.
---
 locales/en-US.yml                             |  1 +
 .../client/src/pages/settings/security.vue    | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 0a996922e..dc7bb0676 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -479,6 +479,7 @@ youHaveNoGroups: "You have no groups"
 joinOrCreateGroup: "Get invited to a group or create your own."
 noHistory: "No history available"
 signinHistory: "Login history"
+signinHistoryExpires: "Data about past login attempts is automatically deleted after 60 days to comply with privacy regulations."
 disableAnimatedMfm: "Disable MFM with animation"
 doing: "Processing..."
 category: "Category"
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 83c22864a..ca5f0f5a4 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -12,20 +12,24 @@
 	
 	<FormSection>
 		<template #label>{{ i18n.ts.signinHistory }}</template>
-		<MkPagination :pagination="pagination">
-			<template #default="{items}">
-				<div>
-					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
-						<header>
-							<i v-if="item.success" class="fas fa-check icon succ"></i>
-							<i v-else class="fas fa-times-circle icon fail"></i>
-							<code class="ip _monospace">{{ item.ip }}</code>
-							<MkTime :time="item.createdAt" class="time"/>
-						</header>
+		<FormSlot>
+			<MkPagination :pagination="pagination">
+				<template #default="{items}">
+					<div>
+						<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
+							<header>
+								<i v-if="item.success" class="fas fa-check icon succ"></i>
+								<i v-else class="fas fa-times-circle icon fail"></i>
+								<code class="ip _monospace">{{ item.ip }}</code>
+								<MkTime :time="item.createdAt" class="time"/>
+							</header>
+						</div>
 					</div>
-				</div>
-			</template>
-		</MkPagination>
+				</template>
+				<template #empty>{{ i18n.ts.noMoreHistory }}</template>
+			</MkPagination>
+			<template #caption>{{ i18n.ts.signinHistoryExpires }}</template>
+		</FormSlot>
 	</FormSection>
 
 	<FormSection>