fix(ui): display missing zwlr keys

src/components/custom/MissingKeysAlert.vue

@@ -4,11 +4,19 @@
 		dense
 		border="left"
 		type="warning"
-		v-if="missingKeys.length > 0"
+		v-if="missingKeys.length > 0 || missingZwlrKeys.length > 0"
 	>
-		Some security keys are missing:
-		<strong>{{ missingKeys.join(', ') }}</strong
-		>. Please check your Z-Wave settings.
+		<p v-if="missingKeys.length > 0">
+			Some Z-Wave security keys are missing:
+			<strong>{{ missingKeys.join(', ') }}</strong>
+		</p>
+
+		<p v-if="missingZwlrKeys.length > 0">
+			Some Z-Wave Long Range security keys are missing:
+			<strong>{{ missingZwlrKeys.join(', ') }}</strong>
+		</p>
+
+		<span>Please make sure to set the keys in Settings.</span>
 	</v-alert>
 </template>
 
@@ -17,19 +25,32 @@ import { mapState } from 'pinia'
 import useBaseStore from '../../stores/base'
 
 export default {
+	data: () => ({
+		requiredKeys: [
+			'S2_Unauthenticated',
+			'S2_Authenticated',
+			'S2_AccessControl',
+			'S0_Legacy',
+		],
+	}),
 	computed: {
 		...mapState(useBaseStore, ['zwave']),
 		missingKeys() {
 			const keys = this.zwave.securityKeys || {}
 
-			const requiredKeys = [
-				'S2_Unauthenticated',
-				'S2_Authenticated',
-				'S2_AccessControl',
-				'S0_Legacy',
-			]
 			const missing = []
-			for (const key of requiredKeys) {
+			for (const key of this.requiredKeys) {
+				if (!keys[key] || keys[key].length !== 32) {
+					missing.push(key)
+				}
+			}
+			return missing
+		},
+		missingZwlrKeys() {
+			const keys = this.zwave.securityKeysLongRange || {}
+
+			const missing = []
+			for (const key of this.requiredKeys) {
 				if (!keys[key] || keys[key].length !== 32) {
 					missing.push(key)
 				}