diff --git a/ui/src/Settings.svelte b/ui/src/Settings.svelte
index 96a5f84..5c4f909 100644
--- a/ui/src/Settings.svelte
+++ b/ui/src/Settings.svelte
@@ -22,7 +22,7 @@
tracerouteRateLimit,
nodeInactiveTimer
} from 'api/src/vars'
- import { hasAccess, userKey } from './lib/util'
+ import { hasAccess, userKey, blockUserKey } from './lib/util'
import { State } from 'api/src/lib/state'
import { tick } from 'svelte'
import axios from 'axios'
@@ -115,10 +115,10 @@
This key of your choosing will be required to have access to certain features when connected remotely such as Connect and Disconnect.
- Enter this key into
+ Remote users will enter this key into
Client Access Key to gain access.
- {:else}
+ {:else if !$blockUserKey}
+ {:else}
+ The client access key entered is incorrect. Please verify the key matches exactly including case-sensitive characters.
{/if}
diff --git a/ui/src/lib/util.ts b/ui/src/lib/util.ts
index 2fa8135..cd6f430 100644
--- a/ui/src/lib/util.ts
+++ b/ui/src/lib/util.ts
@@ -3,10 +3,28 @@ import { tick } from 'svelte'
import { derived, get, writable } from 'svelte/store'
import { enableAudioAlerts } from '../Settings.svelte'
+export let blockUserKey = writable(false)
export const userKey = writable(localStorage.getItem('userKey') || '')
-userKey.subscribe((value) => localStorage.setItem('userKey', value))
+
export const hasAccess = derived([accessKey, userKey], ([$accessKey, $userKey]) => window.location.hostname == 'localhost' || ($accessKey != '' && $accessKey == $userKey))
-window['userKey'] = userKey
+
+let failedUserKeyAttempts = 0
+userKey.subscribe(async (value) => {
+ await tick()
+
+ if (get(hasAccess)) {
+ failedUserKeyAttempts = 0
+ } else {
+ failedUserKeyAttempts += 1
+ blockUserKey.set(true)
+ setTimeout(() => {
+ blockUserKey.set(false)
+ }, Math.min(1000 * failedUserKeyAttempts, 10000))
+ }
+
+ console.log({ failedUserKeyAttempts })
+ localStorage.setItem('userKey', value)
+})
export function unixSecondsTimeAgo(seconds) {
return seconds ? timeAgo(Date.now() / 1000 - seconds) : ''