refactor(08-03): migrate session-revoked inline toast to toastStore.show()
- Remove sessionRevokedToast ref + setTimeout + inline HTML from SettingsAccountTab.vue
- Remove sessionRevokedToast ref + setTimeout + inline HTML from TotpEnrollment.vue
- Add toastStore.show('Other sessions have been terminated.', 'success') in changePassword
- Add toastStore.show('Other sessions have been terminated.', 'success') in disableTotp
- Add toastStore.show('Other sessions have been terminated.', 'success') in confirmEnrollment
- Update SettingsAccountTab.test.js to assert on mockShow instead of DOM text
- Update TotpEnrollment.test.js to assert on mockShow instead of DOM text
This commit is contained in:
curo1305
@@ -1,29 +1,6 @@
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Sessions-revoked toast (fixed top-right, auto-dismisses after 5s) -->
|
||||
<div
|
||||
v-if="sessionRevokedToast"
|
||||
class="fixed top-4 right-4 z-50 flex items-center gap-3 bg-white border border-green-200 rounded-xl shadow-lg px-5 py-4 max-w-sm"
|
||||
>
|
||||
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Other sessions have been terminated.</p>
|
||||
</div>
|
||||
<button
|
||||
@click="sessionRevokedToast = false"
|
||||
aria-label="Dismiss notification"
|
||||
class="text-gray-400 hover:text-gray-600 shrink-0"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 1. Account information -->
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-4">Account information</h3>
|
||||
@@ -192,6 +169,7 @@
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../../stores/auth.js'
|
||||
import { useToastStore } from '../../stores/toast.js'
|
||||
import * as api from '../../api/client.js'
|
||||
import PasswordStrengthBar from '../auth/PasswordStrengthBar.vue'
|
||||
import TotpEnrollment from '../auth/TotpEnrollment.vue'
|
||||
@@ -199,6 +177,7 @@ import ConfirmBlock from '../ui/ConfirmBlock.vue'
|
||||
import AppSpinner from '../ui/AppSpinner.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const toastStore = useToastStore()
|
||||
const router = useRouter()
|
||||
|
||||
// ── Change password ─────────────────────────────────────────────────────────
|
||||
@@ -208,7 +187,6 @@ const newPassword = ref('')
|
||||
const changingPassword = ref(false)
|
||||
const passwordError = ref(null)
|
||||
const passwordSuccess = ref(null)
|
||||
const sessionRevokedToast = ref(false)
|
||||
|
||||
async function changePassword() {
|
||||
changingPassword.value = true
|
||||
@@ -223,8 +201,7 @@ async function changePassword() {
|
||||
currentPassword.value = ''
|
||||
newPassword.value = ''
|
||||
if (data.sessions_revoked > 0) {
|
||||
sessionRevokedToast.value = true
|
||||
setTimeout(() => { sessionRevokedToast.value = false }, 5000)
|
||||
toastStore.show('Other sessions have been terminated.', 'success')
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e.message || ''
|
||||
@@ -260,8 +237,7 @@ async function disableTotp() {
|
||||
}
|
||||
confirmDisable2fa.value = false
|
||||
if (data.sessions_revoked > 0) {
|
||||
sessionRevokedToast.value = true
|
||||
setTimeout(() => { sessionRevokedToast.value = false }, 5000)
|
||||
toastStore.show('Other sessions have been terminated.', 'success')
|
||||
}
|
||||
} catch (e) {
|
||||
totpError.value = e.message
|
||||
|
||||
@@ -14,6 +14,12 @@ vi.mock('../../../api/client.js', () => ({
|
||||
totpDisable: vi.fn(),
|
||||
}))
|
||||
|
||||
// Mock toast store — capture show() calls so we can assert on them
|
||||
const mockShow = vi.fn()
|
||||
vi.mock('../../../stores/toast.js', () => ({
|
||||
useToastStore: () => ({ show: mockShow }),
|
||||
}))
|
||||
|
||||
import { useAuthStore } from '../../../stores/auth.js'
|
||||
import { changePassword as changePasswordMock, totpDisable as totpDisableMock } from '../../../api/client.js'
|
||||
import SettingsAccountTab from '../SettingsAccountTab.vue'
|
||||
@@ -38,6 +44,7 @@ const globalStubs = {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
mockShow.mockClear()
|
||||
})
|
||||
|
||||
// ─── GAP 1 & 2: Sessions revoked toast (CR-01, CR-03) ──────────────────────
|
||||
@@ -51,7 +58,7 @@ describe('SettingsAccountTab — sessions revoked toast (CR-01, CR-03)', () => {
|
||||
emits: ['confirmed', 'cancelled'],
|
||||
}
|
||||
|
||||
it('shows "Other sessions have been terminated." toast after changePassword returns sessions_revoked > 0 (CR-01)', async () => {
|
||||
it('calls toastStore.show("Other sessions have been terminated.") after changePassword returns sessions_revoked > 0 (CR-01)', async () => {
|
||||
useAuthStore.mockReturnValue({
|
||||
user: { email: 'test@example.com', handle: 'testuser', role: 'user', totp_enabled: false },
|
||||
logoutAll: vi.fn(),
|
||||
@@ -73,10 +80,10 @@ describe('SettingsAccountTab — sessions revoked toast (CR-01, CR-03)', () => {
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).toContain('Other sessions have been terminated.')
|
||||
expect(mockShow).toHaveBeenCalledWith('Other sessions have been terminated.', 'success')
|
||||
})
|
||||
|
||||
it('does NOT show toast after changePassword when sessions_revoked is 0 (CR-01 negative)', async () => {
|
||||
it('does NOT call toastStore.show after changePassword when sessions_revoked is 0 (CR-01 negative)', async () => {
|
||||
useAuthStore.mockReturnValue({
|
||||
user: { email: 'test@example.com', handle: 'testuser', role: 'user', totp_enabled: false },
|
||||
logoutAll: vi.fn(),
|
||||
@@ -97,10 +104,10 @@ describe('SettingsAccountTab — sessions revoked toast (CR-01, CR-03)', () => {
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).not.toContain('Other sessions have been terminated.')
|
||||
expect(mockShow).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('shows "Other sessions have been terminated." toast after disableTotp returns sessions_revoked > 0 (CR-03)', async () => {
|
||||
it('calls toastStore.show("Other sessions have been terminated.") after disableTotp returns sessions_revoked > 0 (CR-03)', async () => {
|
||||
const user = { email: 'test@example.com', handle: 'testuser', role: 'user', totp_enabled: true }
|
||||
useAuthStore.mockReturnValue({
|
||||
user,
|
||||
@@ -127,7 +134,7 @@ describe('SettingsAccountTab — sessions revoked toast (CR-01, CR-03)', () => {
|
||||
await wrapper.find('[data-action="confirm"]').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).toContain('Other sessions have been terminated.')
|
||||
expect(mockShow).toHaveBeenCalledWith('Other sessions have been terminated.', 'success')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user