picocrank 1.26.0 → 1.28.0

package/vue/components/Header.spec.js

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import Header from './Header.vue'
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		{ path: '/login', name: 'Login', component: { template: '<div>Login</div>' } },
+	],
+})
+
+const globalStubs = {
+	HugeiconsIcon: true,
+	Breadcrumbs: true,
+	TopBar: true,
+	Sidebar: true,
+}
+
+describe('Header loginRoute', () => {
+	it('shows a Login link when username is empty and loginRoute is set', async () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: '',
+				loginRoute: { name: 'Login' },
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		const loginLink = wrapper.find('a.login-link')
+		expect(loginLink.exists()).toBe(true)
+		expect(loginLink.text()).toBe('Login')
+	})
+
+	it('shows the username control instead of Login when username is set', () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: 'tester',
+				loginRoute: { name: 'Login' },
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		expect(wrapper.find('a.login-link').exists()).toBe(false)
+		expect(wrapper.find('.user-info span').text()).toBe('tester')
+	})
+
+	it('shows neither Login nor username when loginRoute is not set', () => {
+		const wrapper = mount(Header, {
+			props: {
+				username: '',
+				sidebarEnabled: false,
+			},
+			global: {
+				plugins: [router],
+				stubs: globalStubs,
+			},
+		})
+
+		expect(wrapper.find('a.login-link').exists()).toBe(false)
+		expect(wrapper.find('.user-info').exists()).toBe(false)
+	})
+})

package/vue/components/Header.vue

@@ -55,6 +55,13 @@
 					<HugeiconsIcon :icon="UserIcon" width="1em" height="1em" aria-hidden="true" />
 					<span>{{ username }}</span>
 				</button>
+				<RouterLink
+					v-else-if="showLoginLink"
+					:to="loginRoute"
+					class="user-info flex-row neutral login-link"
+				>
+					<span>Login</span>
+				</RouterLink>
 			</slot>
 		</div>
 	</header>
@@ -65,6 +72,7 @@
 
 <script setup>
 	import { computed, ref } from "vue";
+	import { RouterLink } from "vue-router";
 	import { HugeiconsIcon } from "@hugeicons/vue";
 	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon, UserIcon } from "@hugeicons/core-free-icons";
 
@@ -110,6 +118,10 @@
 			type: String,
 			default: "",
 		},
+		loginRoute: {
+			type: [String, Object],
+			default: null,
+		},
 		title: {
 			type: String,
 			default: "Untitled",
@@ -155,6 +167,10 @@
 		() => props.breadcrumbs && !isMobile.value,
 	);
 
+	const showLoginLink = computed(
+		() => !props.username.trim() && props.loginRoute != null && props.loginRoute !== '',
+	);
+
 	function toggleNavSidebar() {
 		if (needsFallbackSidebar.value) {
 			fallbackSidebar.value?.toggle();
@@ -201,6 +217,11 @@
 	font-weight: normal;
 }
 
+.login-link {
+	text-decoration: none;
+	color: inherit;
+}
+
 .user-info span {
 	padding-right: 0;
 	font-weight: normal;
@@ -218,6 +239,7 @@
 
 /* Match Femtocrank header chrome (same idea as #sidebar-button:hover) */
 .header-actions > button,
+.header-actions > a.login-link,
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
@@ -233,6 +255,7 @@
 }
 
 .header-actions > button:hover,
+.header-actions > a.login-link:hover,
 .header-actions :deep(button:hover),
 .user-info:hover {
 	background-color: var(--header-hover-background-color);
@@ -298,4 +321,8 @@ header .search-trigger:hover {
 header .user-info {
 	font-weight: normal;
 }
+
+header .login-link {
+	font-weight: normal;
+}
 </style>

package/vue/components/Login.vue

@@ -1,30 +1,50 @@
 <template>
-	<div class="login-container">
+	<div class="login-container" :class="{ 'local-only': localOnly }">
 		<Tabs :tabs="loginTabs" @tab-change="onTabChange">
 			<!-- Local Login Tab -->
 			<template #tab-local>
 				<div class="login-section">
-					<form @submit.prevent="handleLocalLogin" class="local-login-form">
-						<input
-							id="username"
-							type="text"
-							v-model="localLogin.username"
-							required
-							autocomplete="username"
-							placeholder="Username"
-						/>
-						<input
-							id="password"
-							type="password"
-							v-model="localLogin.password"
-							required
-							autocomplete="current-password"
-							placeholder="Password"
-						/>
+					<div
+						v-if="localLoginLoading"
+						class="local-login-loading"
+						role="status"
+						aria-live="polite"
+					>
+						<span class="local-login-spinner" aria-hidden="true" />
+						<p>{{ localLoginLoadingMessage }}</p>
+					</div>
+					<form v-else @submit.prevent="handleLocalLogin" class="local-login-form">
+						<FormField label="Username" for="username" label-skip v-model:error="usernameError">
+							<input
+								id="username"
+								type="text"
+								v-model="localLogin.username"
+								required
+								autocomplete="username"
+								placeholder="Username"
+								aria-label="Username"
+							/>
+						</FormField>
+						<FormField label="Password" for="password" label-skip v-model:error="passwordError">
+							<input
+								id="password"
+								type="password"
+								v-model="localLogin.password"
+								required
+								autocomplete="current-password"
+								placeholder="Password"
+								aria-label="Password"
+							/>
+						</FormField>
 						<button type="submit" class="good">Login</button>
-						<div v-if="localLoginError" class="error-message">
-							{{ localLoginError }}
-						</div>
+						<NotificationBlock
+							v-if="formError"
+							class="login-form-error"
+							type="bad"
+							label="Error"
+							:message="formError"
+							role="alert"
+						/>
 					</form>
 				</div>
 			</template>
@@ -70,6 +90,8 @@
 <script setup>
 import { ref, reactive, watch, computed, useSlots } from 'vue';
 import Tabs from './Tabs.vue';
+import FormField from './FormField.vue';
+import NotificationBlock from './NotificationBlock.vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 const props = defineProps({
@@ -95,6 +117,15 @@ const props = defineProps({
 	showDefaultTabs: {
 		type: Boolean,
 		default: true
+	},
+	// Username & password only — no OAuth or custom tabs; hides the tab bar
+	localOnly: {
+		type: Boolean,
+		default: false
+	},
+	loadingMessage: {
+		type: String,
+		default: 'Signing in…'
 	}
 });
 
@@ -119,8 +150,9 @@ const loginTabs = ref([]);
 function initializeTabs() {
 	const tabs = [];
 	
-	// Add default tabs if enabled
-	if (props.showDefaultTabs) {
+	if (props.localOnly) {
+		tabs.push({ id: 'local', label: props.tabLabels.local || 'Username & Password' });
+	} else if (props.showDefaultTabs) {
 		tabs.push(
 			{ id: 'local', label: props.tabLabels.local || 'Username & Password' },
 			{ id: 'oauth', label: props.tabLabels.oauth || 'OAuth2' }
@@ -128,7 +160,7 @@ function initializeTabs() {
 	}
 	
 	// Add custom tabs
-	if (props.customTabs && props.customTabs.length > 0) {
+	if (!props.localOnly && props.customTabs && props.customTabs.length > 0) {
 		tabs.push(...props.customTabs);
 	}
 	
@@ -139,7 +171,7 @@ function initializeTabs() {
 initializeTabs();
 
 // Watch for changes to customTabs or showDefaultTabs
-watch(() => [props.customTabs, props.showDefaultTabs], () => {
+watch(() => [props.customTabs, props.showDefaultTabs, props.localOnly], () => {
 	initializeTabs();
 }, { deep: true });
 
@@ -149,7 +181,26 @@ const localLogin = reactive({
 	password: ''
 });
 
-const localLoginError = ref('');
+const usernameError = ref('');
+const passwordError = ref('');
+const formError = ref('');
+const localLoginLoading = ref(false);
+const localLoginLoadingMessage = ref('');
+
+function clearLocalLoginErrors() {
+	usernameError.value = '';
+	passwordError.value = '';
+	formError.value = '';
+}
+
+watch(
+	() => [localLogin.username, localLogin.password],
+	() => {
+		if (formError.value) {
+			formError.value = '';
+		}
+	},
+);
 
 // OAuth providers - provided by parent component
 const oauthProviders = ref(props.oauthProviders);
@@ -163,9 +214,10 @@ watch(() => props.oauthProviders, (newProviders) => {
 
 // Handle local login
 function handleLocalLogin() {
-	localLoginError.value = '';
-	
-	// Emit event for parent component to handle
+	clearLocalLoginErrors();
+	localLoginLoading.value = true;
+	localLoginLoadingMessage.value = props.loadingMessage;
+
 	emit('local-login', {
 		username: localLogin.username,
 		password: localLogin.password
@@ -176,7 +228,8 @@ function handleLocalLogin() {
 function resetLocalForm() {
 	localLogin.username = '';
 	localLogin.password = '';
-	localLoginError.value = '';
+	clearLocalLoginErrors();
+	localLoginLoading.value = false;
 }
 
 // Handle OAuth login
@@ -189,15 +242,28 @@ function handleOAuthLogin(provider) {
 
 // Handle tab change
 function onTabChange(tab, tabId) {
-	// Clear errors when switching tabs
-	localLoginError.value = '';
+	clearLocalLoginErrors();
 	oauthError.value = '';
+	localLoginLoading.value = false;
 	emit('tab-change', tab, tabId);
 }
 
-// Method to set error messages
+function setLocalLoginErrors(errors = {}) {
+	localLoginLoading.value = false;
+	usernameError.value = errors.username || '';
+	passwordError.value = errors.password || '';
+	formError.value = errors.form || '';
+}
+
 function setLocalLoginError(message) {
-	localLoginError.value = message;
+	setLocalLoginErrors({ form: message });
+}
+
+function setLocalLoginLoading(loading, message) {
+	localLoginLoading.value = loading;
+	if (loading) {
+		localLoginLoadingMessage.value = message ?? props.loadingMessage;
+	}
 }
 
 function setOAuthError(message) {
@@ -214,6 +280,8 @@ defineExpose({
 	addOAuthProvider,
 	resetLocalForm,
 	setLocalLoginError,
+	setLocalLoginErrors,
+	setLocalLoginLoading,
 	setOAuthError,
 	localLogin
 });
@@ -225,6 +293,15 @@ defineExpose({
 	margin: 2rem auto;
 }
 
+.login-container.local-only {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.login-container.local-only :deep(.tabs-header) {
+	display: none;
+}
+
 .login-section {
 	display: flex;
 	flex-direction: column;
@@ -239,17 +316,46 @@ defineExpose({
 	width: 100%;
 }
 
-.local-login-form input {
-	padding: 0.75rem;
-	border-radius: 4px;
-	font-size: 1em;
+.local-login-form :deep(.form-field-control) {
+	width: 100%;
+}
+
+.local-login-form :deep(input) {
 	width: 100%;
 	box-sizing: border-box;
 }
 
-.local-login-form input:focus-visible {
-	outline: 2px solid var(--login-input-focus-outline);
-	outline-offset: 2px;
+.local-login-loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	width: 100%;
+	min-height: 9rem;
+	padding: 1rem 0;
+	color: var(--login-muted-fg);
+	text-align: center;
+}
+
+.local-login-loading p {
+	margin: 0;
+	font-size: 0.95em;
+}
+
+.local-login-spinner {
+	width: 2rem;
+	height: 2rem;
+	border: 3px solid var(--login-spinner-track);
+	border-top-color: var(--login-spinner-fg);
+	border-radius: 50%;
+	animation: local-login-spin 0.75s linear infinite;
+}
+
+@keyframes local-login-spin {
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 .local-login-form button {
@@ -266,6 +372,11 @@ defineExpose({
 	opacity: 0.9;
 }
 
+.local-login-form :deep(.login-form-error) {
+	width: 100%;
+	font-size: 0.9em;
+}
+
 .oauth-providers {
 	display: flex;
 	flex-direction: column;

package/vue/components/Pagination.vue

@@ -185,19 +185,20 @@ watch(() => props.pageSize, (newSize) => {
 
 .button:disabled {
   background: transparent;
+  color: var(--button-transparent-disabled-fg);
   cursor: not-allowed;
 }
 
+.button.active:disabled {
+  color: var(--text-color);
+}
+
 #page-size {
   background: transparent;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
-option {
-  background: #545f69;
-}
-
 /* Responsive design */
 @media (max-width: 768px) {
   .pagination {

package/vue/components/Tabs.spec.js

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Tabs from './Tabs.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+describe('Tabs disabled support', () => {
+	const tabs = [
+		{ id: 'first', label: 'First' },
+		{ id: 'second', label: 'Second', disabled: true },
+		{ id: 'third', label: 'Third' },
+	]
+
+	function mountTabs(overrides = {}) {
+		return mount(Tabs, {
+			attachTo: document.body,
+			props: {
+				tabs,
+				defaultTab: 'first',
+				...overrides.props,
+			},
+			slots: {
+				'tab-first': '<p>First panel</p>',
+				'tab-second': '<p>Second panel</p>',
+				'tab-third': '<p>Third panel</p>',
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		})
+	}
+
+	it('marks disabled tabs with disabled and aria-disabled', () => {
+		const wrapper = mountTabs()
+
+		const disabledTab = wrapper.find('#tab-second')
+		expect(disabledTab.attributes('disabled')).toBeDefined()
+		expect(disabledTab.attributes('aria-disabled')).toBe('true')
+	})
+
+	it('does not select a disabled tab on click', async () => {
+		const wrapper = mountTabs()
+
+		await wrapper.find('#tab-second').trigger('click')
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+		expect(wrapper.emitted('tab-change')).toBeUndefined()
+	})
+
+	it('skips disabled tabs when moving focus with arrow keys', async () => {
+		const wrapper = mountTabs()
+
+		await wrapper.find('#tab-first').trigger('keydown', { key: 'ArrowRight' })
+		await nextTick()
+
+		expect(wrapper.find('#tab-third').attributes('tabindex')).toBe('0')
+		expect(wrapper.find('#tab-third').attributes('aria-selected')).toBe('true')
+	})
+
+	it('selects the first enabled tab when defaultTab is disabled', async () => {
+		const wrapper = mountTabs({
+			props: {
+				defaultTab: 'second',
+			},
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+	})
+
+	it('moves off a tab when it becomes disabled', async () => {
+		const wrapper = mountTabs({
+			props: {
+				tabs: [
+					{ id: 'first', label: 'First' },
+					{ id: 'second', label: 'Second' },
+				],
+				defaultTab: 'second',
+			},
+			slots: {
+				'tab-first': '<p>First panel</p>',
+				'tab-second': '<p>Second panel</p>',
+			},
+		})
+
+		await wrapper.setProps({
+			tabs: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second', disabled: true },
+			],
+		})
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+	})
+})