Remove trash bin icons from tab order. Instead, implement Delete key support (Backspace accepted on Apple devices).
This commit is contained in:
@@ -14,6 +14,7 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
@focusin="handleCredentialFocus(credential.credential_uuid)"
|
@focusin="handleCredentialFocus(credential.credential_uuid)"
|
||||||
@focusout="handleCredentialBlur($event)"
|
@focusout="handleCredentialBlur($event)"
|
||||||
|
@keydown="handleDelete($event, credential)"
|
||||||
>
|
>
|
||||||
<div class="item-top">
|
<div class="item-top">
|
||||||
<div class="item-icon">
|
<div class="item-icon">
|
||||||
@@ -38,6 +39,7 @@
|
|||||||
class="btn-card-delete"
|
class="btn-card-delete"
|
||||||
:disabled="credential.is_current_session"
|
:disabled="credential.is_current_session"
|
||||||
:title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
|
:title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
|
||||||
|
tabindex="-1"
|
||||||
>🗑️</button>
|
>🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,6 +84,14 @@ const handleCredentialBlur = (event) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleDelete = (event, credential) => {
|
||||||
|
const apple = navigator.userAgent.includes('Mac OS')
|
||||||
|
if (event.key === 'Delete' || apple && event.key === 'Backspace') {
|
||||||
|
event.preventDefault()
|
||||||
|
if (props.allowDelete && !credential.is_current_session) emit('delete', credential)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const getCredentialAuthName = (credential) => {
|
const getCredentialAuthName = (credential) => {
|
||||||
const info = props.aaguidInfo?.[credential.aaguid]
|
const info = props.aaguidInfo?.[credential.aaguid]
|
||||||
return info ? info.name : 'Unknown Authenticator'
|
return info ? info.name : 'Unknown Authenticator'
|
||||||
|
|||||||
@@ -24,6 +24,7 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
@focusin="handleSessionFocus(session)"
|
@focusin="handleSessionFocus(session)"
|
||||||
@focusout="handleSessionBlur($event)"
|
@focusout="handleSessionBlur($event)"
|
||||||
|
@keydown="handleDelete($event, session)"
|
||||||
>
|
>
|
||||||
<div class="item-top">
|
<div class="item-top">
|
||||||
<h4 class="item-title">{{ session.user_agent }}</h4>
|
<h4 class="item-title">{{ session.user_agent }}</h4>
|
||||||
@@ -37,6 +38,7 @@
|
|||||||
class="btn-card-delete"
|
class="btn-card-delete"
|
||||||
:disabled="isTerminating(session.id)"
|
:disabled="isTerminating(session.id)"
|
||||||
:title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
|
:title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
|
||||||
|
tabindex="-1"
|
||||||
>🗑️</button>
|
>🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -92,6 +94,14 @@ const handleSessionBlur = (event) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleDelete = (event, session) => {
|
||||||
|
const apple = navigator.userAgent.includes('Mac OS')
|
||||||
|
if (event.key === 'Delete' || apple && event.key === 'Backspace') {
|
||||||
|
event.preventDefault()
|
||||||
|
if (!isTerminating(session.id)) emit('terminate', session)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
|
const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
|
||||||
|
|
||||||
const hostUrl = (host) => {
|
const hostUrl = (host) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user