picocrank 1.25.2 → 1.27.0

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/NavigationGrid.vue

@@ -19,20 +19,22 @@
 					class="nav-button-indicator"
 					aria-label="Requires attention"
 				/>
-				<div class="nav-button-icon" :style="getIconStyle(link)">
-					<HugeiconsIcon
-						:icon="link.icon"
-						:width="iconSize"
-						:height="iconSize"
-					/>
-				</div>
-					<div class="nav-button-label">{{ link.title }}</div>
-					<div v-if="link.description" class="nav-button-description">
-						{{ link.description }}
+				<div class="nav-button-heading">
+					<div class="nav-button-icon" :style="getIconStyle(link)">
+						<HugeiconsIcon
+							:icon="link.icon"
+							:width="iconSize"
+							:height="iconSize"
+						/>
 					</div>
+					<div class="nav-button-label">{{ link.title }}</div>
+				</div>
+				<div v-if="link.description" class="nav-button-description">
+					{{ link.description }}
+				</div>
 			</button>
 		</div>
-		<div v-if="filteredLinks.length === 0" class="no-links">
+		<div v-if="filteredLinks.length === 0" class="navigation-grid-empty">
 			<p>No navigation links available</p>
 		</div>
 	</div>
@@ -40,7 +42,7 @@
 
 <script setup>
 import { computed, inject, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 const props = defineProps({
@@ -63,7 +65,7 @@ const props = defineProps({
 	// Icon size
 	iconSize: {
 		type: String,
-		default: '2em'
+		default: '1.5em'
 	},
 	// Exclude separator and html items
 	excludeNonButtons: {
@@ -73,7 +75,6 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const route = useRoute();
 
 // Inject navigation from Navigation component
 const navigation = inject('navigation', null);
@@ -157,179 +158,24 @@ function handleLinkClick(link) {
 </script>
 
 <style scoped>
-.navigation-grid-container {
-	width: 100%;
-}
-
-.navigation-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: 1rem;
-	padding: 1rem 0;
-}
-
-.navigation-grid.compact {
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 0.75rem;
-}
-
-.nav-button {
+.nav-button-heading {
 	display: flex;
-	flex-direction: column;
-	align-items: top;
-	justify-content: flex-start;
-	gap: 0.75rem;
-	padding: 1.25rem 0.75rem;
-	background: transparent;
-	border: 1px solid var(--nav-grid-border);
-	border-radius: 8px;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	text-align: left;
-	position: relative;
-}
-
-.navigation-grid.compact .nav-button {
-	padding: 0.75rem 0.5rem;
+	align-items: center;
 	gap: 0.5rem;
+	width: 100%;
+	min-width: 0;
 }
 
-.nav-button:hover {
-	border-color: var(--nav-grid-accent-fg);
-	background: var(--nav-grid-hover-bg);
-	transform: translateY(-2px);
-	box-shadow: 0 4px 8px var(--nav-grid-hover-shadow);
-}
-
-.nav-button:active {
-	transform: translateY(0);
-	box-shadow: 0 2px 4px var(--nav-grid-shadow);
-}
-
-.nav-button.active {
-	background: var(--nav-grid-accent-bg);
-	border-color: var(--nav-grid-accent-bg);
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button.active .nav-button-icon {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button-icon {
-	display: flex;
-	align-items: start;
-	justify-content: start;
-	color: var(--nav-grid-accent-fg);
-	transition: color 0.2s ease;
-	flex-shrink: 0;
-}
-
-.nav-button.active .nav-button-icon {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button:disabled,
-.nav-button.disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-}
-
-.nav-button:disabled:hover,
-.nav-button.disabled:hover {
-	border-color: var(--nav-grid-border);
-	transform: none;
-	box-shadow: none;
-	background: transparent;
-}
-
-.nav-button:disabled .nav-button-icon,
-.nav-button.disabled .nav-button-icon {
-	color: var(--nav-grid-disabled-fg);
-}
-
-.nav-button-indicator {
-	position: absolute;
-	top: 0.75rem;
-	right: 0.75rem;
-	width: 0.625rem;
-	height: 0.625rem;
-	border-radius: 50%;
-	background: var(--nav-grid-indicator-bg);
-	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
-	flex-shrink: 0;
-}
-
-.nav-button-count {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.5rem;
-	min-width: 1.25rem;
-	padding: 0.1rem 0.4rem;
-	border-radius: 999px;
-	background: var(--nav-grid-indicator-bg);
-	color: var(--nav-grid-indicator-fg);
-	font-size: 0.75em;
-	font-weight: 600;
-	line-height: 1.2;
-	text-align: center;
-	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
-	flex-shrink: 0;
-}
-
-.navigation-grid.compact .nav-button-indicator {
-	top: 0.5rem;
-	right: 0.5rem;
-}
-
-.navigation-grid.compact .nav-button-count {
-	top: 0.35rem;
-	right: 0.35rem;
-}
-
-.nav-button.active .nav-button-indicator,
-.nav-button.active .nav-button-count {
-	box-shadow: 0 0 0 2px var(--nav-grid-accent-bg);
-}
-
-.nav-button-label {
-	font-weight: bold;
-	font-size: 1.125rem;
-	word-break: break-word;
-	text-align: left;
-	line-height: 1.2;
-}
-
-.nav-button.active .nav-button-label {
-	color: var(--nav-grid-active-fg);
-}
-
-.nav-button-description {
-	font-weight: normal;
-	color: var(--nav-grid-muted-fg);
-	word-break: break-word;
-	text-align: left;
-	line-height: 1.5;
-}
-
-.nav-button.active .nav-button-description {
-	color: var(--nav-grid-active-fg);
+.navigation-grid.compact .nav-button-heading {
+	gap: 0.4rem;
 }
 
-.no-links {
-	padding: 2rem;
-	text-align: center;
-	color: var(--nav-grid-muted-fg);
+.nav-button-heading .nav-button-icon {
+	align-items: center;
 }
 
-@media (max-width: 768px) {
-	.navigation-grid {
-		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-		gap: 0.75rem;
-	}
-
-	.nav-button {
-		padding: 1rem 0.5rem;
-	}
+.nav-button-heading .nav-button-label {
+	flex: 1;
+	min-width: 0;
 }
 </style>

package/vue/components/NotificationBlock.vue

@@ -0,0 +1,120 @@
+<template>
+	<div
+		:class="rootClasses"
+		:role="role"
+		@click="handleClick"
+	>
+		<span class="notification-key">{{ displayLabel }}</span>
+		<span class="notification-body">
+			<slot>
+				<template v-if="hasLink">
+					<template v-if="messagePrefix">{{ messagePrefix }}</template><RouterLink
+						v-if="linkTo"
+						:to="linkTo"
+						@click.stop
+					>{{ linkLabel }}</RouterLink><a
+						v-else
+						:href="linkHref || '#'"
+						@click.stop
+					>{{ linkLabel }}</a><template v-if="messageSuffix">{{ messageSuffix }}</template>
+				</template>
+				<template v-else>{{ message }}</template>
+			</slot>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const TYPE_LABELS = {
+	info: 'INFO:',
+	note: 'NOTE:',
+	success: 'SUCCESS:',
+	good: 'SUCCESS:',
+	warning: 'WARNING:',
+	severe: 'SEVERE:',
+	critical: 'CRITICAL:',
+	error: 'CRITICAL:',
+	bad: 'CRITICAL:',
+	old: 'OLD:',
+}
+
+const props = defineProps({
+	type: {
+		type: String,
+		default: 'info',
+		validator: (value) => (
+			['info', 'note', 'success', 'good', 'warning', 'severe', 'critical', 'error', 'bad', 'old'].includes(value)
+		),
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	message: {
+		type: String,
+		default: '',
+	},
+	messagePrefix: {
+		type: String,
+		default: '',
+	},
+	linkLabel: {
+		type: String,
+		default: '',
+	},
+	linkHref: {
+		type: String,
+		default: '',
+	},
+	linkTo: {
+		type: [String, Object],
+		default: null,
+	},
+	messageSuffix: {
+		type: String,
+		default: '',
+	},
+	clickable: {
+		type: Boolean,
+		default: false,
+	},
+	dismissible: {
+		type: Boolean,
+		default: false,
+	},
+	role: {
+		type: String,
+		default: 'status',
+	},
+})
+
+const emit = defineEmits(['click', 'dismiss'])
+
+const displayLabel = computed(() => {
+	const trimmed = props.label.trim()
+	if (trimmed) {
+		return trimmed.endsWith(':') ? trimmed : `${trimmed}:`
+	}
+	return TYPE_LABELS[props.type]
+})
+
+const hasLink = computed(() => Boolean(
+	props.linkLabel && (props.linkHref || props.linkTo)
+))
+
+const rootClasses = computed(() => ({
+	notification: true,
+	[props.type]: true,
+	clickable: props.clickable || props.dismissible,
+}))
+
+function handleClick(event) {
+	emit('click', event)
+	if (props.dismissible) {
+		emit('dismiss', event)
+	}
+}
+</script>