@smartnet360/svelte-components 0.0.124 → 0.0.125

package/dist/apps/antenna-tools/utils/db-utils.js

@@ -256,6 +256,114 @@ export async function clearAllAntennas() {
         throw error;
     }
 }
+/**
+ * Clear antennas by specific frequency bands
+ * @param bands - Array of band frequencies to delete (e.g., [700, 800, 1800])
+ * @returns Number of antennas deleted
+ */
+export async function clearAntennasByBands(bands) {
+    try {
+        trackDataOperation('clear', {
+            inProgress: true,
+            message: `Clearing bands: ${bands.join(', ')} MHz...`
+        });
+        // Get count before deletion
+        const toDelete = await db.antennas.where('frequency').anyOf(bands).toArray();
+        const deleteCount = toDelete.length;
+        // Delete matching antennas
+        await db.antennas.where('frequency').anyOf(bands).delete();
+        // Reload remaining antennas into store
+        const remaining = await db.antennas.toArray();
+        antennas.set(remaining);
+        updateDbStatus({
+            antennaCount: remaining.length,
+            lastUpdated: new Date()
+        });
+        trackDataOperation('clear', {
+            inProgress: false,
+            success: true,
+            message: `Deleted ${deleteCount} antennas from bands: ${bands.join(', ')} MHz`
+        });
+        return deleteCount;
+    }
+    catch (error) {
+        console.error('Error clearing antennas by bands:', error);
+        trackDataOperation('clear', {
+            inProgress: false,
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error clearing bands',
+            message: 'Failed to clear bands'
+        });
+        throw error;
+    }
+}
+/**
+ * Get count of antennas per frequency band
+ * @returns Map of band frequency to count
+ */
+export async function getAntennasCountByBand() {
+    const all = await db.antennas.toArray();
+    const counts = new Map();
+    for (const antenna of all) {
+        const current = counts.get(antenna.frequency) || 0;
+        counts.set(antenna.frequency, current + 1);
+    }
+    return counts;
+}
+/**
+ * Add antennas to database (merge mode - no clearing)
+ * Duplicates (same name + frequency + tilt) are overwritten
+ */
+export async function addAntennas(newAntennas) {
+    try {
+        trackDataOperation('import', { inProgress: true, message: 'Adding antennas...' });
+        let added = 0;
+        let updated = 0;
+        for (const antenna of newAntennas) {
+            // Check for existing antenna with same name, frequency, and tilt
+            const existing = await db.antennas
+                .where(['name', 'frequency', 'tilt'])
+                .equals([antenna.name, antenna.frequency, antenna.tilt])
+                .first();
+            if (existing) {
+                // Delete and re-add to update (simpler than partial update with arrays)
+                await db.antennas.delete(existing.id);
+                await db.antennas.add(antenna);
+                updated++;
+            }
+            else {
+                // Add new
+                await db.antennas.add(antenna);
+                added++;
+            }
+        }
+        // Reload store
+        const all = await db.antennas.toArray();
+        antennas.set(all);
+        localStorage.setItem('antenna-tools-data-imported', 'true');
+        updateDbStatus({
+            initialized: true,
+            antennaCount: all.length,
+            lastUpdated: new Date()
+        });
+        trackDataOperation('import', {
+            inProgress: false,
+            success: true,
+            message: `Added ${added}, updated ${updated} antennas`
+        });
+        return { added, updated };
+    }
+    catch (error) {
+        console.error('Error adding antennas:', error);
+        trackDataOperation('import', {
+            inProgress: false,
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+            message: 'Add failed'
+        });
+        throw error;
+    }
+}
 // ─────────────────────────────────────────────────────────────────────────────
 // UTILITY FUNCTIONS
 // ─────────────────────────────────────────────────────────────────────────────

package/dist/core/Auth/LoginForm.svelte

@@ -0,0 +1,397 @@
+<script lang="ts">
+	import type { AuthState } from './auth.svelte.js';
+
+	interface Props {
+		/** Auth state instance */
+		auth: AuthState;
+		/** Title for login form */
+		title?: string;
+		/** Subtitle/description */
+		subtitle?: string;
+		/** Logo URL (optional) */
+		logo?: string;
+		/** Callback on successful login */
+		onLogin?: () => void;
+	}
+
+	let {
+		auth,
+		title = 'Welcome',
+		subtitle = 'Sign in to access your tools',
+		logo,
+		onLogin
+	}: Props = $props();
+
+	// Form state
+	let username = $state('');
+	let password = $state('');
+	let agreedToMonitoring = $state(false);
+	let showPassword = $state(false);
+
+	// Form validation
+	const isFormValid = $derived(
+		username.trim().length > 0 && 
+		password.length > 0 && 
+		agreedToMonitoring
+	);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		
+		if (!isFormValid) return;
+
+		const success = await auth.login(username.trim(), password, agreedToMonitoring);
+		
+		if (success) {
+			username = '';
+			password = '';
+			agreedToMonitoring = false;
+			onLogin?.();
+		}
+	}
+
+	function togglePassword() {
+		showPassword = !showPassword;
+	}
+</script>
+
+<div class="login-page">
+	<div class="login-card">
+		<!-- Header -->
+		<div class="login-header">
+			{#if logo}
+				<img src={logo} alt="Logo" class="login-logo" />
+			{:else}
+				<div class="login-icon">
+					<i class="bi bi-broadcast-pin"></i>
+				</div>
+			{/if}
+			<h1>{title}</h1>
+			<p>{subtitle}</p>
+		</div>
+
+		<!-- Error -->
+		{#if auth.error}
+			<div class="login-error">
+				<i class="bi bi-exclamation-circle"></i>
+				<span>{auth.error}</span>
+				<button type="button" onclick={() => auth.clearError()} aria-label="Dismiss error">
+					<i class="bi bi-x"></i>
+				</button>
+			</div>
+		{/if}
+
+		<!-- Form -->
+		<form onsubmit={handleSubmit} class="login-form">
+			<div class="form-field">
+				<label for="username">Username</label>
+				<div class="input-wrapper">
+					<i class="bi bi-person"></i>
+					<input
+						type="text"
+						id="username"
+						bind:value={username}
+						placeholder="Enter username"
+						autocomplete="username"
+						disabled={auth.isLoading}
+					/>
+				</div>
+			</div>
+
+			<div class="form-field">
+				<label for="password">Password</label>
+				<div class="input-wrapper">
+					<i class="bi bi-lock"></i>
+					<input
+						type={showPassword ? 'text' : 'password'}
+						id="password"
+						bind:value={password}
+						placeholder="Enter password"
+						autocomplete="current-password"
+						disabled={auth.isLoading}
+					/>
+					<button
+						type="button"
+						class="toggle-password"
+						onclick={togglePassword}
+						tabindex={-1}
+						aria-label={showPassword ? 'Hide password' : 'Show password'}
+					>
+						<i class="bi {showPassword ? 'bi-eye-slash' : 'bi-eye'}"></i>
+					</button>
+				</div>
+			</div>
+
+			<label class="checkbox-field">
+				<input
+					type="checkbox"
+					bind:checked={agreedToMonitoring}
+					disabled={auth.isLoading}
+				/>
+				<span class="checkmark"></span>
+				<span class="checkbox-text">
+					I agree to activity monitoring for security purposes
+				</span>
+			</label>
+
+			<button
+				type="submit"
+				class="login-button"
+				disabled={!isFormValid || auth.isLoading}
+			>
+				{#if auth.isLoading}
+					<span class="spinner"></span>
+					Signing in...
+				{:else}
+					Sign In
+					<i class="bi bi-arrow-right"></i>
+				{/if}
+			</button>
+		</form>
+
+		<div class="login-footer">
+			<i class="bi bi-shield-check"></i>
+			LDAP Authentication
+		</div>
+	</div>
+</div>
+
+<style>
+	.login-page {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1.5rem;
+		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+	}
+
+	.login-card {
+		width: 100%;
+		max-width: 380px;
+		background: #fff;
+		border-radius: 16px;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+		overflow: hidden;
+	}
+
+	.login-header {
+		text-align: center;
+		padding: 2.5rem 2rem 1.5rem;
+		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+		color: #fff;
+	}
+
+	.login-logo {
+		height: 48px;
+		margin-bottom: 1rem;
+	}
+
+	.login-icon {
+		font-size: 2.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.login-header h1 {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0 0 0.25rem;
+	}
+
+	.login-header p {
+		font-size: 0.875rem;
+		opacity: 0.85;
+		margin: 0;
+	}
+
+	.login-error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 1rem 1.5rem 0;
+		padding: 0.75rem 1rem;
+		background: #fef2f2;
+		border: 1px solid #fecaca;
+		border-radius: 8px;
+		color: #dc2626;
+		font-size: 0.875rem;
+	}
+
+	.login-error button {
+		margin-left: auto;
+		background: none;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		padding: 0;
+		font-size: 1.25rem;
+		line-height: 1;
+	}
+
+	.login-form {
+		padding: 1.5rem 2rem 2rem;
+	}
+
+	.form-field {
+		margin-bottom: 1.25rem;
+	}
+
+	.form-field label {
+		display: block;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: #374151;
+		margin-bottom: 0.5rem;
+	}
+
+	.input-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	.input-wrapper > i:first-child {
+		position: absolute;
+		left: 0.875rem;
+		color: #9ca3af;
+		font-size: 1rem;
+	}
+
+	.input-wrapper input {
+		width: 100%;
+		padding: 0.75rem 0.875rem 0.75rem 2.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		font-size: 0.9375rem;
+		transition: border-color 0.15s, box-shadow 0.15s;
+	}
+
+	.input-wrapper input:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+	}
+
+	.input-wrapper input:disabled {
+		background: #f9fafb;
+		cursor: not-allowed;
+	}
+
+	.toggle-password {
+		position: absolute;
+		right: 0.5rem;
+		background: none;
+		border: none;
+		color: #9ca3af;
+		cursor: pointer;
+		padding: 0.5rem;
+		font-size: 1rem;
+	}
+
+	.toggle-password:hover {
+		color: #6b7280;
+	}
+
+	.checkbox-field {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.625rem;
+		cursor: pointer;
+		margin-bottom: 1.5rem;
+	}
+
+	.checkbox-field input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.checkmark {
+		flex-shrink: 0;
+		width: 18px;
+		height: 18px;
+		border: 2px solid #d1d5db;
+		border-radius: 4px;
+		transition: all 0.15s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.checkbox-field input:checked + .checkmark {
+		background: #3b82f6;
+		border-color: #3b82f6;
+	}
+
+	.checkbox-field input:checked + .checkmark::after {
+		content: '';
+		width: 5px;
+		height: 9px;
+		border: solid #fff;
+		border-width: 0 2px 2px 0;
+		transform: rotate(45deg);
+		margin-bottom: 2px;
+	}
+
+	.checkbox-text {
+		font-size: 0.8125rem;
+		color: #4b5563;
+		line-height: 1.4;
+	}
+
+	.login-button {
+		width: 100%;
+		padding: 0.875rem 1.5rem;
+		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+		color: #fff;
+		border: none;
+		border-radius: 8px;
+		font-size: 0.9375rem;
+		font-weight: 500;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		transition: opacity 0.15s, transform 0.15s;
+	}
+
+	.login-button:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.login-button:active:not(:disabled) {
+		transform: scale(0.98);
+	}
+
+	.login-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		border-top-color: #fff;
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to { transform: rotate(360deg); }
+	}
+
+	.login-footer {
+		text-align: center;
+		padding: 1rem;
+		background: #f8fafc;
+		border-top: 1px solid #e5e7eb;
+		font-size: 0.75rem;
+		color: #64748b;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+	}
+</style>

package/dist/core/Auth/LoginForm.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { AuthState } from './auth.svelte.js';
+interface Props {
+    /** Auth state instance */
+    auth: AuthState;
+    /** Title for login form */
+    title?: string;
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Logo URL (optional) */
+    logo?: string;
+    /** Callback on successful login */
+    onLogin?: () => void;
+}
+declare const LoginForm: import("svelte").Component<Props, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;

package/dist/core/Auth/auth.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { UserSession, User, FeatureAccess, AuthConfig } from './types.js';
+/**
+ * Create auth state store with Svelte 5 runes
+ * This must be called within a component context or .svelte.ts file
+ */
+export declare function createAuthState(config?: Partial<AuthConfig>): {
+    readonly session: UserSession | null;
+    readonly isLoading: boolean;
+    readonly error: string | null;
+    readonly initialized: boolean;
+    readonly isAuthenticated: boolean;
+    readonly user: User | null;
+    readonly permissions: FeatureAccess[];
+    readonly token: string | null;
+    login: (username: string, password: string, agreedToMonitoring: boolean) => Promise<boolean>;
+    loginDev: (devUser: User, devPermissions: FeatureAccess[]) => void;
+    logout: () => Promise<void>;
+    hasPermission: (featureId: string, level?: "view" | "edit" | "admin") => boolean;
+    canAccessRoute: (route: string, requiredPermission?: string) => boolean;
+    clearError: () => void;
+};
+export type AuthState = ReturnType<typeof createAuthState>;