feat: use NcListItem

js/bruteforcesettings-main.js.LICENSE.txt

@@ -1,10 +1,3 @@
-/*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
 /*!
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: GPL-3.0-or-later

js/bruteforcesettings-vendors-node_modules_nextcloud_dialogs_dist_chunks_FilePicker-CsU6FfAP_mjs.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */

package.json

@@ -22,6 +22,7 @@
     "@nextcloud/axios": "^2.5.1",
     "@nextcloud/dialogs": "^6.0.1",
     "@nextcloud/initial-state": "^2.2.0",
+    "@nextcloud/l10n": "^3.3.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.20.0",
     "vue": "^2.7.14",

src/App.vue

@@ -19,14 +19,12 @@
 		</NcNoteCard>
 
 		<!-- Whitelist -->
-		<table id="whitelist-list">
-			<tbody>
-				<BruteForceItem v-for="item in items"
-					:key="item.id"
-					:item="item"
-					@delete="deleteWhitelist" />
-			</tbody>
-		</table>
+		<ul class="whitelist-list">
+			<BruteForceItem v-for="item in items"
+				:key="item.id"
+				:item="item"
+				@delete="deleteWhitelist" />
+		</ul>
 
 		<NcCheckboxRadioSwitch :model-value="isApplyAllowListToRateLimitEnabled"
 			:disabled="loading"
@@ -44,7 +42,7 @@
 				name="ip"
 				:label="t('bruteforcesettings','IP address')"
 				placeholder="2001:db8::" />
-			<!-- TRANSLATORS : "Mask" is an IP adress mask-->
+			<!-- TRANSLATORS : "Mask" is an IP address mask-->
 			<NcInputField id="mask"
 				class="whitelist__mask"
 				:value.sync="newWhitelist.mask"
@@ -73,12 +71,13 @@ import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
+import { t } from '@nextcloud/l10n'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
@@ -147,6 +146,7 @@ export default {
 			})
 	},
 	methods: {
+		t,
 		deleteWhitelist(id) {
 			axios.delete(generateUrl('apps/bruteforcesettings/ipwhitelist/{id}', { id }))
 				.then((response) => {
@@ -184,13 +184,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#whitelist-list {
-	min-width: 262px;
+.whitelist-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	margin-block: calc(var(--default-grid-baseline) * 2);
+	width: 250px;
+	max-height: 400px;
+	overflow-y: auto;
 }
 
 .whitelist__form {
 	display: flex;
-	gap: 8px;
+	gap: calc(var(--default-grid-baseline) * 2);
 	align-items: center;
 }
 

src/components/BruteForceItem.vue

@@ -7,57 +7,52 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<tr>
-		<td><span>{{ ip }}/{{ mask }}</span></td>
-		<td class="action-column">
+	<NcListItem class="whitelist-item"
+		:name="`${ip}/${mask}`">
+		<template #extra-actions>
 			<NcButton :title="t('bruteforcesettings', 'Delete entry for {subnet}', { subnet: ip + '/' + mask })"
-				type="tertiary"
+				variant="tertiary"
 				@click="$emit('delete', id)">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
 			</NcButton>
-		</td>
-	</tr>
+		</template>
+	</NcListItem>
 </template>
 
 <script>
 import Delete from 'vue-material-design-icons/Delete.vue'
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'BruteForceItem',
 	components: {
 		Delete,
 		NcButton,
+		NcListItem,
 	},
 	props: {
 		item: {
 			type: Object,
 			required: true,
 		},
 	},
+
+	emits: ['delete'],
+
 	data() {
 		return {
 			id: this.item.id,
 			ip: this.item.ip,
 			mask: this.item.mask,
 		}
 	},
+
+	methods: {
+		t,
+	},
 }
 </script>
-
-<style scoped>
-	td span {
-		padding: 10px 15px;
-		display: inline-block;
-	}
-
-	.action-column {
-		width: 46px;
-	}
-
-	.action-column a {
-		display: inline-block;
-	}
-</style>