picocrank 1.9.1 → 1.11.0

package/vue/views/Admin.vue

@@ -9,29 +9,29 @@
 				<h3>System Overview</h3>
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
 				
-				<div class="stats-grid">
-					<div class="stat-card">
+				<div class="grid-boxed">
+					<div class="stat-display">
 						<h4>Total Users</h4>
-						<div class="stat-value">1,247</div>
-						<div class="stat-change">+12% from last month</div>
+						<div class="stat fg-good">1,247</div>
+						<div class="subtle">+12% from last month</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>Active Sessions</h4>
-						<div class="stat-value">89</div>
-						<div class="stat-change">-3% from last hour</div>
+						<div class="stat fg-bad">89</div>
+						<div class="subtle">-3% from last hour</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>System Load</h4>
-						<div class="stat-value">67%</div>
-						<div class="stat-change">Normal</div>
+						<div class="stat fg-warning">67%</div>
+						<div class="subtle">Moderate</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>Storage Used</h4>
-						<div class="stat-value">2.4 GB</div>
-						<div class="stat-change">45% of total</div>
+						<div class="stat fg-good">2.4 GB</div>
+						<div class="subtle">45% of total</div>
 					</div>
 				</div>
 			</div>
@@ -64,7 +64,7 @@
 			
 			<div class="admin-section">
 				<h3>Quick Actions</h3>
-				<div class="action-buttons">
+				<div role = "toolbar">
 					<button class="action-btn">Create User</button>
 					<button class="action-btn">System Backup</button>
 					<button class="action-btn">View Logs</button>

package/vue/views/App.vue

@@ -10,33 +10,37 @@
 		</template>
 	</Header>
 
-	<div id = "layout">
-		<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
+	<Navigation ref="navigation">
+		<div id = "layout">
+			<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
 
-		<div id = "content">
-			<main>
-				<router-view />
-			</main>
+			<div id = "content">
+				<main>
+					<router-view />
+				</main>
 
-			<footer>
-				<span><a href = "https://github.com/jamesread/picocrank">PicoCrank</a></span>
-			</footer>
+				<footer>
+					<span><a href = "https://github.com/jamesread/picocrank">PicoCrank</a></span>
+				</footer>
+			</div>
 		</div>
-	</div>
+	</Navigation>
 </template>
 
 <script setup>
 	import { ref, onMounted, provide } from 'vue';
 	import { useRouter } from 'vue-router';
-	import { Pin02Icon } from '@hugeicons/core-free-icons'
+	import { Pin02Icon, SecurityValidationIcon, EditIcon, ViewIcon, HomeIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
+	import Navigation from './../components/Navigation.vue'
 	import '../../styles.css'
 	import logoUrl from '/logo.png';
 
 	const quickSearchRef = ref(null)
 	const router = useRouter();
 	const sidebar = ref(null);
+	const navigation = ref(null);
 	const sidebarEnabled = ref(true);
 
 	function toggleSidebar() {
@@ -54,17 +58,28 @@
 	provide('toggleSidebarEnabled', toggleSidebarEnabled);
 
 	onMounted(() => {
+		if (navigation.value) {
+			navigation.value.addRouterLink('Welcome')
+			navigation.value.addRouterLink('TableExample')
+			navigation.value.addRouterLink('CalendarExample')
+			navigation.value.addRouterLink('FormExample')
+			navigation.value.addRouterLink('TabsExample')
+			navigation.value.addSeparator('separator-1');
+			navigation.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
+			navigation.value.addSeparator('separator-2');
+			navigation.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
+			navigation.value.addSeparator('separator-3');
+			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Authentication</h2>', { name: 'auth-heading' })
+			navigation.value.addRouterLink('LoginExample')
+			navigation.value.addSeparator('separator-4');
+			navigation.value.addHtml('<h2 style = "padding: 0.75em;">User Control Panel</h2>', { name: 'user-panel-heading' })
+			navigation.value.addRouterLink('UserControlPanel')
+			navigation.value.addSeparator('separator-5');
+			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
+			navigation.value.addRouterLink('Admin')
+		}
+
 		if (sidebar.value) {
-			sidebar.value.addRouterLink('Welcome')
-			sidebar.value.addRouterLink('TableExample')
-			sidebar.value.addRouterLink('CalendarExample')
-			sidebar.value.addSeparator('separator-1');
-			sidebar.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
-			sidebar.value.addSeparator('separator-2');
-			sidebar.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
-			sidebar.value.addSeparator('separator-3');
-			sidebar.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
-			sidebar.value.addRouterLink('Admin')
 			sidebar.value.open();
 			sidebar.value.stick();
 		}

package/vue/views/FormExample.vue

@@ -0,0 +1,268 @@
+<template>
+	<Section 
+		title="Form Example" 
+		subtitle="A simple form with various input types"
+		>
+		<template #toolbar>
+			<button @click="resetForm">Reset</button>
+		</template>
+
+		<form @submit.prevent="handleSubmit">
+			<div class="form-group">
+				<label for="name">Name</label>
+				<input 
+					id="name"
+					v-model="formData.name" 
+					type="text" 
+					placeholder="Enter your name"
+					required
+				/>
+			</div>
+
+			<div class="form-group">
+				<label for="email">Email</label>
+				<input 
+					id="email"
+					v-model="formData.email" 
+					type="email" 
+					placeholder="Enter your email"
+					required
+				/>
+			</div>
+
+			<div class="form-group">
+				<label for="country">Country</label>
+				<select id="country" v-model="formData.country" required>
+					<option value="">Select a country</option>
+					<option value="us">United States</option>
+					<option value="uk">United Kingdom</option>
+					<option value="ca">Canada</option>
+					<option value="au">Australia</option>
+					<option value="de">Germany</option>
+					<option value="fr">France</option>
+				</select>
+			</div>
+
+			<div class="form-group">
+				<label for="message">Message</label>
+				<textarea 
+					id="message"
+					v-model="formData.message" 
+					placeholder="Enter your message"
+					rows="4"
+				></textarea>
+			</div>
+
+			<div class="form-group">
+				<label>
+					<input 
+						type="checkbox" 
+						v-model="formData.newsletter"
+					/>
+					Subscribe to newsletter
+				</label>
+			</div>
+
+			<div class="form-group">
+				<label>Preferred Contact Method</label>
+				<div class="radio-group">
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="email"
+						/>
+						Email
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="phone"
+						/>
+						Phone
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="mail"
+						/>
+						Mail
+					</label>
+				</div>
+			</div>
+
+			<div class="form-actions">
+				<button type="submit">Submit</button>
+				<button type="button" @click="resetForm">Clear</button>
+			</div>
+		</form>
+
+		<div v-if="submitted" class="form-result">
+			<h3>Form Submitted!</h3>
+			<pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+		</div>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+
+const formData = ref({
+	name: '',
+	email: '',
+	country: '',
+	message: '',
+	newsletter: false,
+	contactMethod: 'email'
+})
+
+const submitted = ref(false)
+
+function handleSubmit() {
+	submitted.value = true
+	console.log('Form submitted:', formData.value)
+	// In a real application, you would send this data to a server
+	alert('Form submitted! Check the console and the form result below.')
+}
+
+function resetForm() {
+	formData.value = {
+		name: '',
+		email: '',
+		country: '',
+		message: '',
+		newsletter: false,
+		contactMethod: 'email'
+	}
+	submitted.value = false
+}
+</script>
+
+<style scoped>
+.form-group {
+	margin-bottom: 1.5rem;
+}
+
+.form-group label {
+	display: block;
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group select,
+.form-group textarea {
+	width: 100%;
+	padding: 0.5rem;
+	border: 1px solid #ccc;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+}
+
+.form-group textarea {
+	resize: vertical;
+	font-family: inherit;
+}
+
+.form-group input[type="checkbox"],
+.form-group input[type="radio"] {
+	margin-right: 0.5rem;
+}
+
+.form-group label:has(input[type="checkbox"]) {
+	display: flex;
+	align-items: center;
+	font-weight: normal;
+}
+
+.radio-group {
+	display: flex;
+	gap: 1.5rem;
+	flex-wrap: wrap;
+}
+
+.radio-group label {
+	display: flex;
+	align-items: center;
+	font-weight: normal;
+}
+
+.form-actions {
+	display: flex;
+	gap: 1rem;
+	margin-top: 2rem;
+}
+
+.form-actions button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.form-actions button[type="submit"] {
+	background-color: #0366d6;
+	color: white;
+}
+
+.form-actions button[type="submit"]:hover {
+	background-color: #0256c2;
+}
+
+.form-actions button[type="button"] {
+	background-color: #6c757d;
+	color: white;
+}
+
+.form-actions button[type="button"]:hover {
+	background-color: #5a6268;
+}
+
+.form-result {
+	margin-top: 2rem;
+	padding: 1rem;
+	background-color: #f8f9fa;
+	border-radius: 0.25rem;
+	border: 1px solid #dee2e6;
+}
+
+.form-result h3 {
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+.form-result pre {
+	margin: 0;
+	padding: 1rem;
+	background-color: white;
+	border-radius: 0.25rem;
+	overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+	.form-group input[type="text"],
+	.form-group input[type="email"],
+	.form-group select,
+	.form-group textarea {
+		background-color: #333;
+		border-color: #555;
+		color: #fff;
+	}
+
+	.form-result {
+		background-color: #2d2d2d;
+		border-color: #444;
+	}
+
+	.form-result pre {
+		background-color: #1a1a1a;
+		color: #fff;
+	}
+}
+</style>
+

package/vue/views/Login.vue

@@ -0,0 +1,65 @@
+<template>
+	<Section title="Login" classes="">
+		<Login 
+			@local-login="handleLocalLogin"
+			@oauth-login="handleOAuthLogin"
+			@tab-change="onTabChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import Section from '../components/Section.vue';
+import Login from '../components/Login.vue';
+
+const router = useRouter();
+
+// Handle local login
+function handleLocalLogin(credentials) {
+	console.log('Local login attempt:', {
+		username: credentials.username,
+		password: '***' // Don't log passwords in production
+	});
+
+	// TODO: Implement actual authentication logic
+	// Example: Simulate API call
+	// try {
+	//   const response = await fetch('/api/auth/local', {
+	//     method: 'POST',
+	//     headers: { 'Content-Type': 'application/json' },
+	//     body: JSON.stringify(credentials)
+	//   });
+	//   
+	//   if (response.ok) {
+	//     const data = await response.json();
+	//     // Store token, redirect, etc.
+	//     router.push('/');
+	//   } else {
+	//     // Handle error
+	//   }
+	// } catch (error) {
+	//   // Handle error
+	// }
+
+	// Placeholder success
+	alert(`Local login would authenticate: ${credentials.username}`);
+}
+
+// Handle OAuth login
+function handleOAuthLogin(provider) {
+	console.log('OAuth login attempt:', provider);
+
+	// TODO: Implement actual OAuth redirect logic
+	// Example: Redirect to OAuth provider
+	// window.location.href = provider.authUrl;
+	
+	// Placeholder
+	alert(`OAuth login would redirect to: ${provider.name}`);
+}
+
+// Handle tab change
+function onTabChange(tab, tabId) {
+	console.log('Tab changed:', tab, tabId);
+}
+</script>

package/vue/views/LoginExample.vue

@@ -0,0 +1,117 @@
+<template>
+	<Section title="Login Example" subtitle="A reusable login form component with local and OAuth2 authentication">
+		<Login 
+			:oauth-providers="oauthProviders"
+			@local-login="handleLocalLogin"
+			@oauth-login="handleOAuthLogin"
+			@tab-change="onTabChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Section from '../components/Section.vue';
+import Login from '../components/Login.vue';
+
+const router = useRouter();
+
+// OAuth providers configuration
+const oauthProviders = ref([
+	{
+		id: 'google',
+		name: 'Google',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/google'
+	},
+	{
+		id: 'github',
+		name: 'GitHub',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/github'
+	},
+	{
+		id: 'microsoft',
+		name: 'Microsoft',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/microsoft'
+	},
+	{
+		id: 'facebook',
+		name: 'Facebook',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/facebook'
+	},
+	{
+		id: 'twitter',
+		name: 'Twitter',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/twitter'
+	},
+	{
+		id: 'apple',
+		name: 'Apple',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/apple'
+	}
+]);
+
+// Handle local login
+function handleLocalLogin(credentials) {
+	console.log('Local login attempt:', {
+		username: credentials.username,
+		password: '***' // Don't log passwords in production
+	});
+
+	// TODO: Implement actual authentication logic
+	// Example: Simulate API call
+	// try {
+	//   const response = await fetch('/api/auth/local', {
+	//     method: 'POST',
+	//     headers: { 'Content-Type': 'application/json' },
+	//     body: JSON.stringify(credentials)
+	//   });
+	//   
+	//   if (response.ok) {
+	//     const data = await response.json();
+	//     // Store token, redirect, etc.
+	//     router.push('/');
+	//   } else {
+	//     // Handle error - you can use the component's setLocalLoginError method
+	//   }
+	// } catch (error) {
+	//   // Handle error
+	// }
+
+	// Placeholder success
+	alert(`Local login would authenticate: ${credentials.username}`);
+}
+
+// Handle OAuth login
+function handleOAuthLogin(provider) {
+	console.log('OAuth login attempt:', provider);
+
+	// TODO: Implement actual OAuth redirect logic
+	// Example: Redirect to OAuth provider
+	// window.location.href = provider.authUrl;
+	
+	// Placeholder
+	alert(`OAuth login would redirect to: ${provider.name}`);
+}
+
+// Handle tab change
+function onTabChange(tab, tabId) {
+	console.log('Tab changed:', tab, tabId);
+}
+</script>
+
+<style scoped>
+/* Additional styles if needed */
+</style>