npm - pict-section-login - Versions diffs - 0.0.1 - Mend

pict-section-login 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/example_applications/custom_login/Custom-Login-Application.js ADDED Viewed

@@ -0,0 +1,75 @@
+const libPictApplication = require('pict-application');
+const libPictSectionLogin = require('../../source/Pict-Section-Login.js');
+/**
+ * A custom login view that demonstrates pointing the section at an
+ * arbitrary endpoint.  The HTML page mocks window.fetch so this works
+ * entirely client-side with no server.
+ */
+class CustomLoginView extends libPictSectionLogin
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+	onLoginSuccess(pSessionData)
+	{
+		this.log.info('Custom login succeeded!', pSessionData);
+	}
+	onLoginFailed(pError)
+	{
+		this.log.warn('Custom login failed: ' + pError);
+	}
+	onLogout()
+	{
+		this.log.info('Custom logout complete.');
+	}
+}
+const _CustomLoginViewConfiguration = (
+{
+	"ViewIdentifier": "CustomLogin",
+	"TargetElementAddress": "#Pict-Login-Container",
+	"LoginEndpoint": "/api/custom-auth",
+	"LoginMethod": "POST",
+	"LogoutEndpoint": "/api/custom-logout",
+	"CheckSessionEndpoint": "/api/custom-session",
+	"CheckSessionOnLoad": false,
+	"ShowOAuthProviders": false
+});
+class CustomLoginApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this.pict.addView('CustomLogin', _CustomLoginViewConfiguration, CustomLoginView);
+	}
+	onAfterInitialize()
+	{
+		super.onAfterInitialize();
+		let tmpView = this.pict.views.CustomLogin;
+		if (tmpView)
+		{
+			tmpView.render();
+		}
+	}
+}
+module.exports = CustomLoginApplication;
+module.exports.default_configuration = (
+{
+	"Name": "Custom Login Example",
+	"Hash": "CustomLoginExample",
+	"MainViewportViewIdentifier": "CustomLogin",
+	"pict_configuration":
+	{
+		"Product": "CustomLogin-Example"
+	}
+});

package/example_applications/custom_login/html/index.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Custom Login - Pict Example</title>
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+		<!-- Red Rock Mesa Theme — Pict Example App -->
+		<style>
+			*, *::before, *::after { box-sizing: border-box; }
+			body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
+			/* --- Header Bar --- */
+			.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
+			.pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
+			.pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
+			.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
+			.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
+			/* --- Content Area --- */
+			.pict-example-content { padding: 1.5rem; }
+			/* --- Info Banner --- */
+			.pict-example-info { background: #264653; color: #FAEDCD; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.85rem; line-height: 1.5; }
+			.pict-example-info code { background: rgba(250,237,205,0.15); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.8rem; }
+		</style>
+		<script>
+			// =============================================================
+			// MOCK FETCH — Simulates a custom authentication backend.
+			// In a real application you would NOT do this; the section
+			// would simply point at your real API endpoint.
+			// =============================================================
+			(function ()
+			{
+				var _realFetch = window.fetch;
+				var _mockSession = null;
+				window.fetch = function (pURL, pOptions)
+				{
+					var tmpURL = typeof pURL === 'string' ? pURL : pURL.toString();
+					// --- POST /api/custom-auth ---
+					if (tmpURL === '/api/custom-auth' && pOptions && pOptions.method === 'POST')
+					{
+						var tmpBody = JSON.parse(pOptions.body || '{}');
+						var tmpUser = tmpBody.UserName || '';
+						var tmpPass = tmpBody.Password || '';
+						if (tmpUser === 'demo' && tmpPass === 'demo')
+						{
+							_mockSession = {
+								LoggedIn: true,
+								SessionID: 'mock-session-' + Date.now(),
+								UserID: 1,
+								UserRecord: { LoginID: 'demo', IDUser: 1, FullName: 'Demo User', Email: 'demo@example.com' }
+							};
+							return Promise.resolve(new Response(JSON.stringify(_mockSession), { status: 200, headers: { 'Content-Type': 'application/json' } }));
+						}
+						else
+						{
+							return Promise.resolve(new Response(JSON.stringify({ LoggedIn: false, Error: 'Invalid credentials. Try demo / demo.' }), { status: 200, headers: { 'Content-Type': 'application/json' } }));
+						}
+					}
+					// --- GET /api/custom-logout ---
+					if (tmpURL === '/api/custom-logout')
+					{
+						_mockSession = null;
+						return Promise.resolve(new Response(JSON.stringify({ LoggedIn: false }), { status: 200, headers: { 'Content-Type': 'application/json' } }));
+					}
+					// --- GET /api/custom-session ---
+					if (tmpURL === '/api/custom-session')
+					{
+						if (_mockSession)
+						{
+							return Promise.resolve(new Response(JSON.stringify(_mockSession), { status: 200, headers: { 'Content-Type': 'application/json' } }));
+						}
+						return Promise.resolve(new Response(JSON.stringify({ LoggedIn: false }), { status: 200, headers: { 'Content-Type': 'application/json' } }));
+					}
+					// All other requests pass through to the real fetch
+					return _realFetch.apply(window, arguments);
+				};
+			})();
+		</script>
+		<script src="./pict.js" type="text/javascript"></script>
+		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(CustomLoginExample, 1); });</script>
+	</head>
+	<body>
+		<div class="pict-example-header">
+			<div class="pict-example-badge">
+				<svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
+				Pict Example
+			</div>
+			<div class="pict-example-app-name">Custom Login</div>
+			<div class="pict-example-module">pict-section-login</div>
+		</div>
+		<div class="pict-example-content">
+			<div class="pict-example-info">
+				This example demonstrates <code>pict-section-login</code> pointed at a <strong>custom endpoint</strong>
+				(<code>/api/custom-auth</code>).  No server is needed &mdash; <code>window.fetch</code> is mocked
+				to simulate a backend.  Use <code>demo</code> / <code>demo</code> to log in.
+			</div>
+			<div id="Pict-Login-Container"></div>
+		</div>
+		<script src="./custom_login_example.js" type="text/javascript"></script>
+	</body>
+</html>

package/example_applications/custom_login/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+    "name": "custom_login_example",
+    "version": "1.0.0",
+    "description": "Custom login example — pict-section-login with a mocked custom endpoint",
+    "main": "Custom-Login-Application.js",
+    "scripts": {
+        "start": "node Custom-Login-Application.js",
+        "build": "npx quack build && npx quack copy"
+    },
+    "author": "steven velozo <steven@velozo.com>",
+    "license": "MIT",
+    "devDependencies": {
+    },
+    "copyFilesSettings": {
+        "whenFileExists": "overwrite"
+    },
+    "copyFiles": [
+        {
+            "from": "./html/*",
+            "to": "./dist/"
+        },
+        {
+            "from": "../../node_modules/pict/dist/*",
+            "to": "./dist/"
+        }
+    ]
+}

package/example_applications/harness_app/Harness-App-Application.js ADDED Viewed

@@ -0,0 +1,167 @@
+const libPictApplication = require('pict-application');
+const libPictRouter = require('pict-router');
+// Views
+const libViewLogin = require('./views/PictView-HarnessApp-Login.js');
+const libViewLayout = require('./views/PictView-HarnessApp-Layout.js');
+const libViewTopBar = require('./views/PictView-HarnessApp-TopBar.js');
+const libViewDashboard = require('./views/PictView-HarnessApp-Dashboard.js');
+const libViewBooks = require('./views/PictView-HarnessApp-Books.js');
+const libViewUsers = require('./views/PictView-HarnessApp-Users.js');
+class HarnessAppApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		// Router provider — SkipRouteResolveOnAdd is set in the config JSON
+		// so routes only resolve after the layout renders (not during construction).
+		this.pict.addProvider('PictRouter',
+			require('./providers/PictRouter-HarnessApp.json'),
+			libPictRouter);
+		// Login view (extends pict-section-login)
+		this.pict.addView('HarnessApp-Login', libViewLogin.default_configuration, libViewLogin);
+		// Layout shell (top bar + content area)
+		this.pict.addView('HarnessApp-Layout', libViewLayout.default_configuration, libViewLayout);
+		// Top bar navigation
+		this.pict.addView('HarnessApp-TopBar', libViewTopBar.default_configuration, libViewTopBar);
+		// Content views (rendered into the content area by the router)
+		this.pict.addView('HarnessApp-Dashboard', libViewDashboard.default_configuration, libViewDashboard);
+		this.pict.addView('HarnessApp-Books', libViewBooks.default_configuration, libViewBooks);
+		this.pict.addView('HarnessApp-Users', libViewUsers.default_configuration, libViewUsers);
+	}
+	onAfterInitializeAsync(fCallback)
+	{
+		// Render the login form first
+		this.pict.views['HarnessApp-Login'].render();
+		// Inject CSS so the login section styling is applied immediately
+		this.pict.CSSMap.injectCSS();
+		// Check if a session already exists (e.g. cookie from a previous visit).
+		// The login view's onSessionChecked hook will call showProtectedApp()
+		// if a valid session is found.
+		this.pict.views['HarnessApp-Login'].checkSession();
+		return super.onAfterInitializeAsync(fCallback);
+	}
+	// ===== Application-Level Navigation =====
+	/**
+	 * Switch from the login screen to the protected application.
+	 * Called by the login view after a successful login or session check.
+	 */
+	showProtectedApp()
+	{
+		// Hide the login container
+		let tmpLoginElements = this.pict.ContentAssignment.getElement('#HarnessApp-Login-Container');
+		if (tmpLoginElements && tmpLoginElements.length > 0)
+		{
+			tmpLoginElements[0].style.display = 'none';
+		}
+		// Show the protected app container
+		let tmpAppElements = this.pict.ContentAssignment.getElement('#HarnessApp-Container');
+		if (tmpAppElements && tmpAppElements.length > 0)
+		{
+			tmpAppElements[0].style.display = 'block';
+		}
+		// Render the layout shell (triggers TopBar, Dashboard, CSS injection, and router resolve)
+		this.pict.views['HarnessApp-Layout'].render();
+	}
+	/**
+	 * Switch from the protected application back to the login screen.
+	 * Called by the doLogout() method after the session is destroyed.
+	 */
+	showLogin()
+	{
+		// Clear session data
+		this.pict.AppData.Session = null;
+		// Hide the protected app container
+		let tmpAppElements = this.pict.ContentAssignment.getElement('#HarnessApp-Container');
+		if (tmpAppElements && tmpAppElements.length > 0)
+		{
+			tmpAppElements[0].style.display = 'none';
+		}
+		// Show the login container and re-render
+		let tmpLoginElements = this.pict.ContentAssignment.getElement('#HarnessApp-Login-Container');
+		if (tmpLoginElements && tmpLoginElements.length > 0)
+		{
+			tmpLoginElements[0].style.display = 'block';
+		}
+		// Reset the login view state and re-render
+		let tmpLoginView = this.pict.views['HarnessApp-Login'];
+		if (tmpLoginView)
+		{
+			tmpLoginView.authenticated = false;
+			tmpLoginView.sessionData = null;
+			tmpLoginView.initialRenderComplete = false;
+			tmpLoginView.render();
+		}
+	}
+	/**
+	 * Render a specific content view into the content container.
+	 * Called by the router when a route template matches.
+	 *
+	 * @param {string} pViewIdentifier - The view identifier to render
+	 */
+	showView(pViewIdentifier)
+	{
+		if (pViewIdentifier in this.pict.views)
+		{
+			this.pict.views[pViewIdentifier].render();
+		}
+		else
+		{
+			this.pict.log.warn('View [' + pViewIdentifier + '] not found; falling back to Dashboard.');
+			this.pict.views['HarnessApp-Dashboard'].render();
+		}
+	}
+	/**
+	 * Navigate to a route using pict-router.
+	 *
+	 * @param {string} pRoute - The route path (e.g. '/Dashboard', '/Books')
+	 */
+	navigateTo(pRoute)
+	{
+		this.pict.providers.PictRouter.navigate(pRoute);
+	}
+	/**
+	 * Log out and return to the login screen.
+	 * Called from the TopBar logout button.
+	 */
+	doLogout()
+	{
+		let tmpLoginView = this.pict.views['HarnessApp-Login'];
+		if (tmpLoginView)
+		{
+			tmpLoginView.logout(() =>
+			{
+				this.showLogin();
+			});
+		}
+		else
+		{
+			this.showLogin();
+		}
+	}
+}
+module.exports = HarnessAppApplication;
+module.exports.default_configuration = require('./Harness-App-Configuration.json');

package/example_applications/harness_app/Harness-App-Configuration.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+	"Name": "Harness App",
+	"Hash": "HarnessApp"
+}

package/example_applications/harness_app/html/index.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Bookstore Harness - Pict Login + Router</title>
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+		<!-- Red Rock Mesa Base Theme -->
+		<style>
+			*, *::before, *::after { box-sizing: border-box; }
+			body
+			{
+				margin: 0;
+				padding: 0;
+				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+				background: #FAEDCD;
+				color: #264653;
+			}
+			a { color: inherit; }
+			/* --- Login wrapper (centered on page) --- */
+			#HarnessApp-Login-Container
+			{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				min-height: 100vh;
+				padding: 2rem;
+			}
+			.harnessapp-login-header
+			{
+				text-align: center;
+				margin-bottom: 1.5rem;
+			}
+			.harnessapp-login-header h1
+			{
+				font-size: 1.6rem;
+				color: #264653;
+				margin: 0 0 0.25rem 0;
+			}
+			.harnessapp-login-header p
+			{
+				color: #888;
+				font-size: 0.85rem;
+				margin: 0;
+			}
+			.harnessapp-login-hint
+			{
+				margin-top: 1rem;
+				text-align: center;
+				font-size: 0.8rem;
+				color: #999;
+			}
+			.harnessapp-login-hint code
+			{
+				background: #264653;
+				color: #FAEDCD;
+				padding: 0.1rem 0.35rem;
+				border-radius: 3px;
+				font-size: 0.75rem;
+			}
+		</style>
+		<script src="./pict.js" type="text/javascript"></script>
+		<script type="text/javascript">
+			Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(HarnessApp, 1); });
+		</script>
+	</head>
+	<body>
+		<!-- ===== Login Screen (visible when unauthenticated) ===== -->
+		<div id="HarnessApp-Login-Container">
+			<div class="harnessapp-login-header">
+				<h1>Bookstore Harness</h1>
+				<p>pict-section-login + pict-router</p>
+			</div>
+			<!-- pict-section-login renders its login card into this container -->
+			<div id="Pict-Login-Container"></div>
+			<div class="harnessapp-login-hint">
+				Use any valid user (e.g. <code>admin</code>, <code>jdoe</code>, <code>bsmith</code>) with any password.
+			</div>
+		</div>
+		<!-- ===== Protected App (hidden until authenticated) ===== -->
+		<div id="HarnessApp-Container" style="display:none"></div>
+		<script src="./harness_app.js" type="text/javascript"></script>
+	</body>
+</html>

package/example_applications/harness_app/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+    "name": "harness_app",
+    "version": "1.0.0",
+    "description": "Full application example — pict-section-login + pict-router against retold-harness bookstore",
+    "main": "Harness-App-Application.js",
+    "scripts": {
+        "start": "node Harness-App-Application.js",
+        "build": "npx quack build && npx quack copy"
+    },
+    "author": "steven velozo <steven@velozo.com>",
+    "license": "MIT",
+    "devDependencies": {
+        "pict-router": "^1.0.8"
+    },
+    "copyFilesSettings": {
+        "whenFileExists": "overwrite"
+    },
+    "copyFiles": [
+        {
+            "from": "./html/*",
+            "to": "./dist/"
+        },
+        {
+            "from": "../../node_modules/pict/dist/*",
+            "to": "./dist/"
+        }
+    ]
+}

package/example_applications/harness_app/providers/PictRouter-HarnessApp.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+	"ProviderIdentifier": "Pict-Router",
+	"AutoInitialize": true,
+	"AutoInitializeOrdinal": 0,
+	"SkipRouteResolveOnAdd": true,
+	"Routes":
+	[
+		{
+			"path": "/Dashboard",
+			"template": "{~LV:Pict.PictApplication.showView(`HarnessApp-Dashboard`)~}"
+		},
+		{
+			"path": "/Books",
+			"template": "{~LV:Pict.PictApplication.showView(`HarnessApp-Books`)~}"
+		},
+		{
+			"path": "/Users",
+			"template": "{~LV:Pict.PictApplication.showView(`HarnessApp-Users`)~}"
+		}
+	]
+}