Implement code word based remote authentication (#1)
Add comprehensive remote authentication system allowing users to log in from one device by authenticating from another trusted device. Features include: - Proof of Work (PoW) protection using PBKDF2-SHA512 to prevent abuse - Simple pairing codes (3 words) protected by dynamic PoW difficulty - Autocomplete pairing code input with error checking - Real-time WebSocket communication between devices Unlike device addition links and reset links with QR codes that only allow adding an authentication method, and that work offline over the duration of several days, this mechanism is strictly online, with 5 minute time limit.
This commit is contained in:
@@ -0,0 +1,894 @@
|
||||
<template>
|
||||
<div class="pairing-entry">
|
||||
<form @submit.prevent="submitCode" class="pairing-form">
|
||||
<!-- Code input (shown when device info not yet received) -->
|
||||
<div v-if="!deviceInfo" class="input-row">
|
||||
<div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused }">
|
||||
<!-- Visual slot-machine display overlay -->
|
||||
<div class="slot-machine" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError }" aria-hidden="true">
|
||||
<div v-for="(word, index) in displayWords" :key="index" class="slot-reel" :class="{ 'invalid-word': word.invalid, 'empty': !word.text && !word.typedPrefix }">
|
||||
<div class="slot-word">
|
||||
<template v-if="word.typedPrefix">
|
||||
<span class="typed-prefix">{{ word.typedPrefix }}</span><span class="hint-suffix">{{ word.hintSuffix }}</span>
|
||||
<span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
|
||||
</template>
|
||||
<template v-else-if="word.text">
|
||||
{{ word.text }}
|
||||
<span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': 0, '--word-len': 0 }"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden input for actual text entry -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="code"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
autocapitalize="none"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
class="pairing-input hidden-input"
|
||||
@input="handleInput"
|
||||
@keydown="deferUpdateCursor"
|
||||
@mouseup="updateCursorPos"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
</div>
|
||||
<!-- Processing status beside input -->
|
||||
<div v-if="processingStatus" class="processing-status">
|
||||
<span class="processing-icon">{{ processingStatus === 'pow' ? '🔐' : '📡' }}</span>
|
||||
<span class="processing-spinner-small"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device info display (shown when 3 words match a request) -->
|
||||
<div v-else-if="deviceInfo" class="device-info">
|
||||
<p class="device-permit-text">Permit {{ deviceInfo.action === 'register' ? 'registration' : 'login' }} to <strong>{{ deviceInfo.host }}</strong></p>
|
||||
<p class="device-meta">{{ deviceInfo.user_agent_pretty }}</p>
|
||||
|
||||
<p v-if="error" class="error-message" style="margin-top: 0.5rem;">{{ error }}</p>
|
||||
|
||||
<div class="button-row" style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondary"
|
||||
:disabled="loading"
|
||||
@click="deny"
|
||||
style="flex: 1;"
|
||||
>
|
||||
Deny
|
||||
</button>
|
||||
<button
|
||||
ref="submitBtnRef"
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="btn-primary"
|
||||
style="flex: 1;"
|
||||
>
|
||||
{{ loading ? 'Authenticating…' : 'Authorize' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error && !deviceInfo" class="error-message">{{ error }}</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { startAuthentication } from '@simplewebauthn/browser'
|
||||
import aWebSocket from '@/utils/awaitable-websocket'
|
||||
import { dec as b64dec, enc as b64enc } from '@/utils/base64url'
|
||||
import { getSettings } from '@/utils/settings'
|
||||
import { getUniqueMatch, isValidWord, isValidPrefix } from '@/utils/wordlist'
|
||||
import { solvePoW } from '@/utils/pow'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, default: 'Help Another Device Sign In' },
|
||||
description: { type: String, default: 'Enter the code shown on the device that needs to sign in.' },
|
||||
placeholder: { type: String, default: 'Enter three words' },
|
||||
action: { type: String, default: 'login' } // 'login' or 'register'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
const settings = ref(null)
|
||||
let ws = null
|
||||
let authStore = null
|
||||
|
||||
// Try to get authStore (might fail if Pinia not installed in this app instance)
|
||||
try { authStore = useAuthStore() } catch (e) { /* ignore */ }
|
||||
|
||||
const inputRef = ref(null)
|
||||
const submitBtnRef = ref(null)
|
||||
const code = ref('')
|
||||
const isProcessing = ref(false)
|
||||
const processingStatus = ref('')
|
||||
const deviceInfo = ref(null)
|
||||
const autocompleteHint = ref('')
|
||||
|
||||
// Watch deviceInfo and emit visibility change
|
||||
watch(deviceInfo, (newVal) => {
|
||||
emit('deviceInfoVisible', !!newVal)
|
||||
})
|
||||
|
||||
const hasInvalidWord = ref(false)
|
||||
const serverError = ref(false)
|
||||
const cursorPos = ref(0)
|
||||
const isFocused = ref(false)
|
||||
let wsConnecting = false
|
||||
let currentChallenge = null
|
||||
let currentWork = null
|
||||
let powPromise = null
|
||||
let powSolution = null
|
||||
let lookupTimeout = null
|
||||
let lastLookedUpCode = null
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
function showMessage(message, type = 'info', duration = 3000) {
|
||||
if (authStore) {
|
||||
authStore.showMessage(message, type, duration)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSettings() {
|
||||
try {
|
||||
const data = await getSettings()
|
||||
settings.value = data
|
||||
} catch (err) {
|
||||
console.warn('Unable to load settings', err)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Input Mode Logic ---
|
||||
|
||||
function getWordAtCursor(input, cursor) {
|
||||
if (!input || cursor < 0) return { word: '', start: 0, end: 0 }
|
||||
let start = cursor, end = cursor
|
||||
while (start > 0 && /[a-zA-Z]/.test(input[start - 1])) start--
|
||||
while (end < input.length && /[a-zA-Z]/.test(input[end])) end++
|
||||
return { word: input.slice(start, end), start, end }
|
||||
}
|
||||
|
||||
function getWords(input) {
|
||||
return input.trim().split(/[.\s]+/).filter(w => w.length > 0)
|
||||
}
|
||||
|
||||
function countCompleteWords(input) {
|
||||
const endsWithSeparator = /[.\s]$/.test(input)
|
||||
const words = getWords(input)
|
||||
return endsWithSeparator ? words.length : Math.max(0, words.length - 1)
|
||||
}
|
||||
|
||||
function analyzeWords(input) {
|
||||
if (!input) return { valid: true, segments: [] }
|
||||
const segments = []
|
||||
const endsWithSeparator = /[.\s]$/.test(input)
|
||||
let match, regex = /([a-zA-Z]+)|([.\s]+)/g
|
||||
while ((match = regex.exec(input)) !== null) {
|
||||
if (match[1]) segments.push({ text: match[1], isWord: true, start: match.index })
|
||||
else if (match[2]) segments.push({ text: match[2], isWord: false, start: match.index })
|
||||
}
|
||||
const words = segments.filter(s => s.isWord)
|
||||
let allValid = true
|
||||
words.forEach((wordSeg, idx) => {
|
||||
const isLastWord = idx === words.length - 1
|
||||
const word = wordSeg.text.toLowerCase()
|
||||
if (isLastWord && !endsWithSeparator) wordSeg.invalid = !isValidPrefix(word)
|
||||
else wordSeg.invalid = !isValidWord(word)
|
||||
if (wordSeg.invalid) allValid = false
|
||||
})
|
||||
return { valid: allValid, segments }
|
||||
}
|
||||
|
||||
const coloredSegments = computed(() => {
|
||||
const { segments } = analyzeWords(code.value)
|
||||
return segments.map(s => ({ text: s.text, invalid: s.invalid || false }))
|
||||
})
|
||||
|
||||
function checkWordsValidity(input) { return analyzeWords(input).valid }
|
||||
function allWordsValid(input) { return getWords(input).length > 0 && getWords(input).every(w => isValidWord(w)) }
|
||||
|
||||
// Get the current partial word being typed (not yet a complete word)
|
||||
function getCurrentPartialWord(input) {
|
||||
const endsWithSeparator = /[.\s]$/.test(input)
|
||||
if (endsWithSeparator) return ''
|
||||
const match = input.match(/[a-zA-Z]+$/)
|
||||
return match ? match[0].toLowerCase() : ''
|
||||
}
|
||||
|
||||
// Calculate cursor position in the normalized display (wordIndex, charIndex within word)
|
||||
// Returns { wordIndex: number, charIndex: number } where charIndex is position within the word text
|
||||
function calcDisplayCursor(input, rawCursorPos) {
|
||||
if (!input || rawCursorPos === 0) {
|
||||
return { wordIndex: 0, charIndex: 0 }
|
||||
}
|
||||
|
||||
// Parse input to find word boundaries
|
||||
const beforeCursor = input.slice(0, rawCursorPos)
|
||||
const wordMatches = [...beforeCursor.matchAll(/[a-zA-Z]+/g)]
|
||||
|
||||
// Check if cursor is in whitespace after words
|
||||
const endsWithSeparator = /[.\s]$/.test(beforeCursor)
|
||||
|
||||
if (wordMatches.length === 0) {
|
||||
// No words before cursor, cursor is at start of first word
|
||||
return { wordIndex: 0, charIndex: 0 }
|
||||
}
|
||||
|
||||
const lastMatch = wordMatches[wordMatches.length - 1]
|
||||
const lastMatchEnd = lastMatch.index + lastMatch[0].length
|
||||
|
||||
if (endsWithSeparator || rawCursorPos > lastMatchEnd) {
|
||||
// Cursor is after the last word (in whitespace), so it's at start of next word
|
||||
return { wordIndex: Math.min(wordMatches.length, 2), charIndex: 0 }
|
||||
}
|
||||
|
||||
// Cursor is within the last word
|
||||
const charIndex = rawCursorPos - lastMatch.index
|
||||
return { wordIndex: wordMatches.length - 1, charIndex: charIndex }
|
||||
}
|
||||
|
||||
// Compute display words for slot-machine overlay (always 3 slots)
|
||||
const displayWords = computed(() => {
|
||||
const words = getWords(code.value)
|
||||
const result = []
|
||||
|
||||
// Get analysis for validation
|
||||
const { segments } = analyzeWords(code.value)
|
||||
const wordSegments = segments.filter(s => s.isWord)
|
||||
|
||||
// Get current partial word and autocomplete hint
|
||||
const partialWord = getCurrentPartialWord(code.value)
|
||||
const hint = autocompleteHint.value
|
||||
const endsWithSeparator = /[.\s]$/.test(code.value)
|
||||
|
||||
// Calculate where cursor should be displayed
|
||||
const cursor = calcDisplayCursor(code.value, cursorPos.value)
|
||||
|
||||
// Always show exactly 3 slots
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const isCursorSlot = cursor.wordIndex === i
|
||||
|
||||
if (i < words.length) {
|
||||
const word = words[i].toLowerCase()
|
||||
const isInvalid = wordSegments[i]?.invalid || false
|
||||
const isLastWord = i === words.length - 1
|
||||
|
||||
if (isLastWord && !endsWithSeparator && hint && partialWord) {
|
||||
// Show typed prefix + hint suffix in the same slot
|
||||
// Total visible length is the full hint word
|
||||
const totalLen = hint.length
|
||||
result.push({
|
||||
text: '',
|
||||
typedPrefix: partialWord,
|
||||
hintSuffix: hint.slice(partialWord.length),
|
||||
invalid: isInvalid,
|
||||
hasCursor: isCursorSlot,
|
||||
cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
|
||||
wordLen: totalLen
|
||||
})
|
||||
} else {
|
||||
// Complete word - show cursor at appropriate position
|
||||
result.push({
|
||||
text: word,
|
||||
invalid: isInvalid,
|
||||
hasCursor: isCursorSlot,
|
||||
cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
|
||||
wordLen: word.length
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Empty slot
|
||||
result.push({
|
||||
text: '',
|
||||
invalid: false,
|
||||
hasCursor: isCursorSlot,
|
||||
cursorCharIndex: 0,
|
||||
wordLen: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
const hasThreeValidWords = computed(() => {
|
||||
const words = getWords(code.value)
|
||||
return words.length === 3 && words.every(w => isValidWord(w))
|
||||
})
|
||||
|
||||
function normalizeCode(input) {
|
||||
return input.trim().toLowerCase().split(/[.\s]+/).filter(w => w).join('.')
|
||||
}
|
||||
|
||||
function startPowSolving() {
|
||||
if (!currentChallenge || powPromise) return
|
||||
const challenge = b64dec(currentChallenge)
|
||||
powPromise = solvePoW(challenge, currentWork).then(solution => {
|
||||
powSolution = solution
|
||||
powPromise = null
|
||||
})
|
||||
}
|
||||
|
||||
async function getPowSolution() {
|
||||
if (powSolution) { const s = powSolution; powSolution = null; return s }
|
||||
if (powPromise) { await powPromise; const s = powSolution; powSolution = null; return s }
|
||||
if (!currentChallenge) throw new Error('No PoW challenge available')
|
||||
const challenge = b64dec(currentChallenge)
|
||||
return await solvePoW(challenge, currentWork)
|
||||
}
|
||||
|
||||
function updateChallenge(pow) {
|
||||
if (pow?.challenge) {
|
||||
currentChallenge = pow.challenge
|
||||
currentWork = pow.work
|
||||
powSolution = null
|
||||
powPromise = null
|
||||
startPowSolving()
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureConnection() {
|
||||
if (ws || wsConnecting) return
|
||||
wsConnecting = true
|
||||
try {
|
||||
const authHost = settings.value?.auth_host
|
||||
const wsPath = '/auth/ws/remote-auth/pair'
|
||||
const wsUrl = authHost && location.host !== authHost ? `//${authHost}${wsPath}` : wsPath
|
||||
ws = await aWebSocket(wsUrl)
|
||||
const msg = await ws.receive_json()
|
||||
if (msg.status && msg.detail) throw new Error(msg.detail)
|
||||
if (!msg.pow?.challenge) throw new Error('Server did not send PoW challenge')
|
||||
updateChallenge(msg.pow)
|
||||
} catch (err) {
|
||||
console.error('WebSocket connection error:', err)
|
||||
ws = null
|
||||
throw err
|
||||
} finally {
|
||||
wsConnecting = false
|
||||
}
|
||||
}
|
||||
|
||||
// Defer cursor position update to after browser processes the key
|
||||
function deferUpdateCursor(event) {
|
||||
// Handle Tab/Space for autocomplete immediately
|
||||
if (event.key === 'Tab' || event.key === ' ') {
|
||||
handleKeydown(event)
|
||||
return
|
||||
}
|
||||
// Defer cursor update to next tick
|
||||
setTimeout(updateCursorPos, 0)
|
||||
}
|
||||
|
||||
// Update cursor position from input
|
||||
function updateCursorPos() {
|
||||
cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
|
||||
}
|
||||
|
||||
function updateAutocomplete() {
|
||||
cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
|
||||
const { word, end } = getWordAtCursor(code.value, cursorPos.value)
|
||||
const completeWordCount = countCompleteWords(code.value)
|
||||
if (completeWordCount >= 3 || !word || word.length < 1 || cursorPos.value !== end) {
|
||||
autocompleteHint.value = ''
|
||||
return
|
||||
}
|
||||
const match = getUniqueMatch(word.toLowerCase())
|
||||
if (match && match !== word.toLowerCase()) autocompleteHint.value = match
|
||||
else autocompleteHint.value = ''
|
||||
}
|
||||
|
||||
function applyAutocomplete() {
|
||||
if (!autocompleteHint.value) return false
|
||||
const { word, start, end } = getWordAtCursor(code.value, cursorPos.value)
|
||||
if (!word) return false
|
||||
const before = code.value.slice(0, start)
|
||||
const wordsBefore = getWords(before).length
|
||||
const isThirdWord = wordsBefore === 2
|
||||
const suffix = isThirdWord ? '' : ' '
|
||||
const after = code.value.slice(end)
|
||||
code.value = before + autocompleteHint.value + suffix + after.trimStart()
|
||||
const newPos = start + autocompleteHint.value.length + suffix.length
|
||||
nextTick(() => {
|
||||
inputRef.value?.setSelectionRange(newPos, newPos)
|
||||
cursorPos.value = newPos
|
||||
})
|
||||
autocompleteHint.value = ''
|
||||
return true
|
||||
}
|
||||
|
||||
// Try to split concatenated words (e.g., "alienalien" -> "alien alien")
|
||||
function trySplitWords(input) {
|
||||
// Only process if there's a continuous string of letters at the end
|
||||
const match = input.match(/^(.*?)([a-zA-Z]+)$/)
|
||||
if (!match) return input
|
||||
|
||||
const prefix = match[1] // Everything before the letter sequence
|
||||
const letters = match[2].toLowerCase()
|
||||
|
||||
// Try to find valid word boundaries in the letter sequence
|
||||
const foundWords = []
|
||||
let remaining = letters
|
||||
|
||||
while (remaining.length > 0) {
|
||||
let foundWord = null
|
||||
|
||||
// Try to find the longest valid word from the start
|
||||
for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
|
||||
const candidate = remaining.slice(0, len)
|
||||
if (isValidWord(candidate)) {
|
||||
foundWord = candidate
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (foundWord) {
|
||||
foundWords.push(foundWord)
|
||||
remaining = remaining.slice(foundWord.length)
|
||||
|
||||
// Stop after 3 words
|
||||
if (foundWords.length >= 3) {
|
||||
remaining = ''
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// No valid word found, keep the remaining as-is
|
||||
foundWords.push(remaining)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Only return split version if we found at least one complete word
|
||||
// and there's a clear boundary (more than one segment, or the segment is a complete word)
|
||||
if (foundWords.length > 1 || (foundWords.length === 1 && isValidWord(foundWords[0]) && remaining === '')) {
|
||||
return prefix + foundWords.join(' ')
|
||||
}
|
||||
|
||||
return input
|
||||
}
|
||||
|
||||
function handleInput() {
|
||||
// Immediately update cursor position
|
||||
cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
|
||||
|
||||
// First, try to auto-split concatenated words
|
||||
const splitCode = trySplitWords(code.value)
|
||||
if (splitCode !== code.value) {
|
||||
code.value = splitCode
|
||||
nextTick(() => {
|
||||
const newLen = splitCode.length
|
||||
inputRef.value?.setSelectionRange(newLen, newLen)
|
||||
cursorPos.value = newLen
|
||||
})
|
||||
}
|
||||
|
||||
const words = getWords(code.value)
|
||||
if (words.length >= 3) {
|
||||
const normalized = words.slice(0, 3).join(' ')
|
||||
if (code.value !== normalized) {
|
||||
const cursorWasAtEnd = cursorPos.value >= code.value.length
|
||||
code.value = normalized
|
||||
if (cursorWasAtEnd) {
|
||||
nextTick(() => {
|
||||
inputRef.value?.setSelectionRange(normalized.length, normalized.length)
|
||||
cursorPos.value = normalized.length
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateAutocomplete()
|
||||
if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
|
||||
deviceInfo.value = null
|
||||
error.value = null
|
||||
serverError.value = false
|
||||
hasInvalidWord.value = !checkWordsValidity(code.value)
|
||||
const currentWords = getWords(code.value)
|
||||
if (currentWords.length >= 1 && !ws && !wsConnecting) ensureConnection()
|
||||
if (currentWords.length === 3) {
|
||||
if (!allWordsValid(code.value)) return
|
||||
lookupTimeout = setTimeout(() => { lookupDeviceInfo() }, 150)
|
||||
}
|
||||
}
|
||||
|
||||
async function lookupDeviceInfo() {
|
||||
if (isProcessing.value || loading.value) return
|
||||
if (!hasThreeValidWords.value) return
|
||||
const normalizedCode = normalizeCode(code.value)
|
||||
if (normalizedCode === lastLookedUpCode && deviceInfo.value) return
|
||||
|
||||
isProcessing.value = true
|
||||
processingStatus.value = 'pow'
|
||||
error.value = null
|
||||
serverError.value = false
|
||||
|
||||
try {
|
||||
await ensureConnection()
|
||||
if (!ws) throw new Error('Failed to connect')
|
||||
const solution = await getPowSolution()
|
||||
const powB64 = b64enc(solution)
|
||||
const currentCode = normalizeCode(code.value)
|
||||
if (!hasThreeValidWords.value) return
|
||||
processingStatus.value = 'server'
|
||||
ws.send_json({ code: currentCode, pow: powB64 })
|
||||
const res = await ws.receive_json()
|
||||
updateChallenge(res.pow)
|
||||
if (typeof res.status === 'number' && res.status >= 400) {
|
||||
error.value = res.detail || 'Request failed'
|
||||
serverError.value = true
|
||||
deviceInfo.value = null
|
||||
lastLookedUpCode = null
|
||||
return
|
||||
}
|
||||
if (res.status === 'found' && res.host) {
|
||||
code.value = currentCode.replace(/\./g, ' ')
|
||||
deviceInfo.value = {
|
||||
host: res.host,
|
||||
user_agent_pretty: res.user_agent_pretty,
|
||||
client_ip: res.client_ip,
|
||||
action: res.action || 'login'
|
||||
}
|
||||
lastLookedUpCode = currentCode
|
||||
nextTick(() => { submitBtnRef.value?.focus() })
|
||||
} else {
|
||||
error.value = 'Unexpected response from server'
|
||||
serverError.value = true
|
||||
deviceInfo.value = null
|
||||
lastLookedUpCode = null
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Lookup error:', err)
|
||||
error.value = err.message || 'Lookup failed'
|
||||
serverError.value = true
|
||||
deviceInfo.value = null
|
||||
lastLookedUpCode = null
|
||||
if (ws) { ws.close(); ws = null }
|
||||
} finally {
|
||||
isProcessing.value = false
|
||||
processingStatus.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event) {
|
||||
if (event.key === 'Tab') {
|
||||
if (autocompleteHint.value) {
|
||||
const applied = applyAutocomplete()
|
||||
if (applied) { event.preventDefault(); handleInput(); return }
|
||||
}
|
||||
if (code.value.trim()) event.preventDefault()
|
||||
return
|
||||
}
|
||||
if (event.key === ' ' && autocompleteHint.value) {
|
||||
const applied = applyAutocomplete()
|
||||
if (applied) { event.preventDefault(); handleInput() }
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCode() {
|
||||
if (!deviceInfo.value || loading.value) return
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
if (!ws) await ensureConnection()
|
||||
if (!ws) throw new Error('Failed to connect')
|
||||
const solution = await getPowSolution()
|
||||
const powB64 = b64enc(solution)
|
||||
ws.send_json({ authenticate: true, pow: powB64 })
|
||||
const res = await ws.receive_json()
|
||||
if (typeof res.status === 'number' && res.status >= 400) throw new Error(res.detail || 'Authentication failed')
|
||||
if (!res.optionsJSON) throw new Error(res.detail || 'Failed to get authentication options')
|
||||
const authResponse = await startAuthentication(res)
|
||||
ws.send_json(authResponse)
|
||||
const result = await ws.receive_json()
|
||||
if (typeof result.status === 'number' && result.status >= 400) throw new Error(result.detail || 'Authentication failed')
|
||||
if (result.status === 'success') {
|
||||
showMessage('Device authenticated successfully!', 'success', 3000)
|
||||
emit('completed')
|
||||
reset()
|
||||
} else {
|
||||
throw new Error(result.detail || 'Authentication failed')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Pairing error:', err)
|
||||
const message = err.name === 'NotAllowedError'
|
||||
? 'Passkey authentication was cancelled'
|
||||
: (err.message || 'Authentication failed')
|
||||
error.value = message
|
||||
// Don't show toast - error is shown in dialog
|
||||
emit('error', message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
if (ws) { ws.close(); ws = null }
|
||||
}
|
||||
}
|
||||
|
||||
async function deny() {
|
||||
// Send deny message to server before closing websocket
|
||||
if (ws) {
|
||||
try {
|
||||
ws.send_json({ deny: true })
|
||||
// Give the server a moment to process the denial
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
} catch (e) {
|
||||
console.error('Error sending deny message:', e)
|
||||
}
|
||||
ws.close()
|
||||
ws = null
|
||||
}
|
||||
|
||||
// Reset to initial state
|
||||
reset()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
code.value = ''
|
||||
error.value = null
|
||||
serverError.value = false
|
||||
deviceInfo.value = null
|
||||
isProcessing.value = false
|
||||
processingStatus.value = ''
|
||||
autocompleteHint.value = ''
|
||||
hasInvalidWord.value = false
|
||||
lastLookedUpCode = null
|
||||
if (ws) { ws.close(); ws = null }
|
||||
currentChallenge = null
|
||||
currentWork = null
|
||||
powPromise = null
|
||||
powSolution = null
|
||||
}
|
||||
|
||||
// --- Lifecycle ---
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchSettings()
|
||||
inputRef.value?.focus()
|
||||
// Initialize cursor position
|
||||
nextTick(() => {
|
||||
cursorPos.value = inputRef.value?.selectionStart ?? 0
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
|
||||
if (ws) { ws.close(); ws = null }
|
||||
})
|
||||
|
||||
defineExpose({ reset, deny, code, handleInput, loading, error })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Input Mode Styles */
|
||||
.pairing-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pairing-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Slot machine visual display (matches RemoteAuthInline) */
|
||||
.slot-machine {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slot-machine.has-error {
|
||||
border-color: var(--color-error, #ef4444);
|
||||
background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
|
||||
}
|
||||
|
||||
.slot-machine.is-complete {
|
||||
border-color: var(--color-success, #10b981);
|
||||
}
|
||||
|
||||
.slot-reel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 1 33.333%;
|
||||
min-width: 0;
|
||||
height: 1.8em;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.slot-reel:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.slot-word {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slot-word .typed-prefix {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.slot-word .hint-suffix {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.cursor-overlay {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 1.2em;
|
||||
background: var(--color-text);
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
/* Position based on character index - calculate from center of slot */
|
||||
left: calc(50% + (var(--cursor-pos) - var(--word-len, 0) / 2) * 0.65em);
|
||||
transform: translateX(-1px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.input-wrapper.focused .cursor-overlay {
|
||||
opacity: 1;
|
||||
animation: cursorBlink 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 49% {
|
||||
opacity: 1;
|
||||
}
|
||||
50%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-reel.invalid-word .slot-word {
|
||||
color: var(--color-error, #ef4444);
|
||||
}
|
||||
|
||||
.slot-reel.invalid-word .slot-word .typed-prefix {
|
||||
color: var(--color-error, #ef4444);
|
||||
}
|
||||
|
||||
.slot-reel.invalid-word .cursor-overlay {
|
||||
background: var(--color-error, #ef4444);
|
||||
}
|
||||
|
||||
.slot-reel.empty .slot-word {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Hidden input - keeps focus and handles keyboard input */
|
||||
.pairing-input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
caret-color: transparent;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pairing-input.hidden-input {
|
||||
color: transparent;
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.pairing-input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pairing-input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.processing-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.processing-icon {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.processing-spinner-small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.device-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.device-permit-text {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.device-meta {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-error, #ef4444);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user