pict-section-login 0.0.1

package/example_applications/harness_app/views/PictView-HarnessApp-Books.js

@@ -0,0 +1,172 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-Books",
+
+	DefaultRenderable: "HarnessApp-Books-Content",
+	DefaultDestinationAddress: "#HarnessApp-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.harnessapp-books h1
+		{
+			font-size: 1.8rem;
+			margin: 0 0 1rem 0;
+			color: #264653;
+		}
+		.harnessapp-books-table
+		{
+			width: 100%;
+			border-collapse: collapse;
+			background: #fff;
+			border: 1px solid #D4A373;
+			border-radius: 6px;
+			overflow: hidden;
+			box-shadow: 0 2px 8px rgba(38,70,83,0.08);
+		}
+		.harnessapp-books-table th
+		{
+			background: #264653;
+			color: #FAEDCD;
+			padding: 0.6rem 0.75rem;
+			text-align: left;
+			font-size: 0.8rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+		}
+		.harnessapp-books-table td
+		{
+			padding: 0.55rem 0.75rem;
+			border-bottom: 1px solid #E8D9C0;
+			font-size: 0.85rem;
+			color: #264653;
+		}
+		.harnessapp-books-table tr:nth-child(even) td
+		{
+			background: #FFF9F0;
+		}
+		.harnessapp-books-table tr:hover td
+		{
+			background: #FAEDCD;
+		}
+		.harnessapp-books-loading
+		{
+			padding: 2rem;
+			text-align: center;
+			color: #999;
+			font-size: 0.9rem;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "HarnessApp-Books-Template",
+			Template: /*html*/`
+<div class="harnessapp-books">
+	<h1>Books</h1>
+	<div id="HarnessApp-Books-TableContainer">
+		<div class="harnessapp-books-loading">Loading books&hellip;</div>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "HarnessApp-Books-Content",
+			TemplateHash: "HarnessApp-Books-Template",
+			DestinationAddress: "#HarnessApp-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class HarnessAppBooksView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		this._loadBooks();
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+
+	_loadBooks()
+	{
+		fetch('/1.0/Books/FilteredTo/Title~ILK~a/0/25')
+			.then((pResponse) =>
+			{
+				return pResponse.json();
+			})
+			.then((pData) =>
+			{
+				let tmpRecords = [];
+				if (Array.isArray(pData))
+				{
+					tmpRecords = pData;
+				}
+				else if (pData && Array.isArray(pData.Records))
+				{
+					tmpRecords = pData.Records;
+				}
+
+				this._renderTable(tmpRecords);
+			})
+			.catch((pError) =>
+			{
+				this.log.error('Failed to load books: ' + pError.message);
+				let tmpContainer = this.services.ContentAssignment.getElement('#HarnessApp-Books-TableContainer');
+				if (tmpContainer && tmpContainer.length > 0)
+				{
+					tmpContainer[0].innerHTML = '<div class="harnessapp-books-loading">Failed to load books. Is the server running?</div>';
+				}
+			});
+	}
+
+	_renderTable(pRecords)
+	{
+		let tmpContainer = this.services.ContentAssignment.getElement('#HarnessApp-Books-TableContainer');
+		if (!tmpContainer || tmpContainer.length < 1)
+		{
+			return;
+		}
+
+		if (pRecords.length < 1)
+		{
+			tmpContainer[0].innerHTML = '<div class="harnessapp-books-loading">No books found.</div>';
+			return;
+		}
+
+		let tmpHTML = '<table class="harnessapp-books-table">';
+		tmpHTML += '<thead><tr><th>ID</th><th>Title</th><th>Type</th><th>Language</th><th>Year</th></tr></thead>';
+		tmpHTML += '<tbody>';
+
+		for (let i = 0; i < pRecords.length; i++)
+		{
+			let tmpBook = pRecords[i];
+			tmpHTML += '<tr>';
+			tmpHTML += '<td>' + (tmpBook.IDBook || '') + '</td>';
+			tmpHTML += '<td>' + (tmpBook.Title || '') + '</td>';
+			tmpHTML += '<td>' + (tmpBook.Type || '') + '</td>';
+			tmpHTML += '<td>' + (tmpBook.Language || '') + '</td>';
+			tmpHTML += '<td>' + (tmpBook.PublishDate || '') + '</td>';
+			tmpHTML += '</tr>';
+		}
+
+		tmpHTML += '</tbody></table>';
+		tmpContainer[0].innerHTML = tmpHTML;
+	}
+}
+
+module.exports = HarnessAppBooksView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/harness_app/views/PictView-HarnessApp-Dashboard.js

@@ -0,0 +1,158 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-Dashboard",
+
+	DefaultRenderable: "HarnessApp-Dashboard-Content",
+	DefaultDestinationAddress: "#HarnessApp-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.harnessapp-dashboard h1
+		{
+			font-size: 1.8rem;
+			margin: 0 0 0.5rem 0;
+			color: #264653;
+		}
+		.harnessapp-dashboard p
+		{
+			font-size: 1rem;
+			line-height: 1.6;
+			color: #555;
+			max-width: 640px;
+			margin: 0 0 1.5rem 0;
+		}
+		.harnessapp-dashboard-cards
+		{
+			display: flex;
+			gap: 1.25rem;
+			flex-wrap: wrap;
+		}
+		.harnessapp-dashboard-card
+		{
+			flex: 1;
+			min-width: 220px;
+			background: #fff;
+			border: 1px solid #D4A373;
+			border-top: 4px solid #E76F51;
+			border-radius: 6px;
+			padding: 1.25rem;
+			cursor: pointer;
+			transition: box-shadow 0.15s, transform 0.15s;
+			box-shadow: 0 2px 8px rgba(38,70,83,0.08);
+		}
+		.harnessapp-dashboard-card:hover
+		{
+			box-shadow: 0 4px 16px rgba(38,70,83,0.15);
+			transform: translateY(-2px);
+		}
+		.harnessapp-dashboard-card h3
+		{
+			margin: 0 0 0.5rem;
+			color: #E76F51;
+			font-size: 1.05rem;
+		}
+		.harnessapp-dashboard-card p
+		{
+			margin: 0;
+			font-size: 0.9rem;
+			color: #666;
+		}
+		.harnessapp-dashboard-session-info
+		{
+			background: #264653;
+			color: #FAEDCD;
+			border-radius: 6px;
+			padding: 0.8rem 1rem;
+			font-size: 0.85rem;
+			margin-bottom: 1.5rem;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+		}
+		.harnessapp-dashboard-session-info .badge
+		{
+			background: #E76F51;
+			color: #fff;
+			font-size: 0.7rem;
+			font-weight: 700;
+			padding: 0.15rem 0.5rem;
+			border-radius: 9999px;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "HarnessApp-Dashboard-Template",
+			Template: /*html*/`
+<div class="harnessapp-dashboard">
+	<h1>Dashboard</h1>
+	<div class="harnessapp-dashboard-session-info" id="HarnessApp-Dashboard-SessionInfo"></div>
+	<p>
+		Welcome to the Bookstore Harness.  This application demonstrates
+		<strong>pict-section-login</strong> combined with <strong>pict-router</strong>
+		for route-based navigation with authentication.
+	</p>
+	<div class="harnessapp-dashboard-cards">
+		<div class="harnessapp-dashboard-card" onclick="{~P~}.PictApplication.navigateTo('/Books')">
+			<h3>Books</h3>
+			<p>Browse the book catalog from the Meadow ORM.</p>
+		</div>
+		<div class="harnessapp-dashboard-card" onclick="{~P~}.PictApplication.navigateTo('/Users')">
+			<h3>Users</h3>
+			<p>View registered users in the system.</p>
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "HarnessApp-Dashboard-Content",
+			TemplateHash: "HarnessApp-Dashboard-Template",
+			DestinationAddress: "#HarnessApp-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class HarnessAppDashboardView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Populate session info banner
+		let tmpSession = this.pict.AppData.Session;
+		let tmpInfoElements = this.services.ContentAssignment.getElement('#HarnessApp-Dashboard-SessionInfo');
+		if (tmpInfoElements && tmpInfoElements.length > 0 && tmpSession && tmpSession.UserRecord)
+		{
+			let tmpUser = tmpSession.UserRecord;
+			let tmpHTML = 'Logged in as <strong>' + (tmpUser.FullName || tmpUser.LoginID || '') + '</strong>';
+			if (tmpUser.IDUser)
+			{
+				tmpHTML += ' <span class="badge">ID ' + tmpUser.IDUser + '</span>';
+			}
+			if (tmpUser.Email)
+			{
+				tmpHTML += '&nbsp;&nbsp;' + tmpUser.Email;
+			}
+			tmpInfoElements[0].innerHTML = tmpHTML;
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = HarnessAppDashboardView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/harness_app/views/PictView-HarnessApp-Layout.js

@@ -0,0 +1,86 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-Layout",
+
+	DefaultRenderable: "HarnessApp-Layout-Shell",
+	DefaultDestinationAddress: "#HarnessApp-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		#HarnessApp-Container
+		{
+			display: flex;
+			flex-direction: column;
+			min-height: 100vh;
+		}
+		#HarnessApp-TopBar-Container
+		{
+			flex-shrink: 0;
+		}
+		#HarnessApp-Content-Container
+		{
+			flex: 1;
+			padding: 1.5rem;
+			max-width: 1100px;
+			width: 100%;
+			margin: 0 auto;
+			box-sizing: border-box;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "HarnessApp-Layout-Shell-Template",
+			Template: /*html*/`
+<div id="HarnessApp-TopBar-Container"></div>
+<div id="HarnessApp-Content-Container"></div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "HarnessApp-Layout-Shell",
+			TemplateHash: "HarnessApp-Layout-Shell-Template",
+			DestinationAddress: "#HarnessApp-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class HarnessAppLayoutView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Render the top bar
+		this.pict.views['HarnessApp-TopBar'].render();
+
+		// Inject all CSS
+		this.pict.CSSMap.injectCSS();
+
+		// If the URL contains a deep-link hash route (e.g. #/Books from a
+		// pasted bookmark), navigateCurrent() will navigate to it.
+		// Otherwise, show Dashboard as the default content and resolve.
+		if (this.pict.providers.PictRouter && !this.pict.providers.PictRouter.navigateCurrent())
+		{
+			this.pict.views['HarnessApp-Dashboard'].render();
+			this.pict.providers.PictRouter.resolve();
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = HarnessAppLayoutView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/harness_app/views/PictView-HarnessApp-Login.js

@@ -0,0 +1,58 @@
+const libPictSectionLogin = require('../../../source/Pict-Section-Login.js');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-Login",
+
+	DefaultRenderable: "Login-Container",
+	DefaultDestinationAddress: "#Pict-Login-Container",
+	TargetElementAddress: "#HarnessApp-Login-Container",
+
+	AutoRender: false,
+
+	// The application controls when to check the session,
+	// so we disable the auto-check built into the section.
+	CheckSessionOnLoad: false,
+	ShowOAuthProviders: false,
+
+	// orator-authentication endpoints (defaults match, but shown for clarity)
+	LoginEndpoint: "/1.0/Authenticate",
+	LoginMethod: "POST",
+	LogoutEndpoint: "/1.0/Deauthenticate",
+	CheckSessionEndpoint: "/1.0/CheckSession",
+
+	SessionDataAddress: "AppData.Session"
+};
+
+class HarnessAppLoginView extends libPictSectionLogin
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onLoginSuccess(pSessionData)
+	{
+		this.log.info('Login succeeded, switching to protected app.');
+		if (this.pict.PictApplication && typeof (this.pict.PictApplication.showProtectedApp) === 'function')
+		{
+			this.pict.PictApplication.showProtectedApp();
+		}
+	}
+
+	onSessionChecked(pSessionData)
+	{
+		if (pSessionData && pSessionData.LoggedIn)
+		{
+			this.log.info('Existing session found, switching to protected app.');
+			if (this.pict.PictApplication && typeof (this.pict.PictApplication.showProtectedApp) === 'function')
+			{
+				this.pict.PictApplication.showProtectedApp();
+			}
+		}
+	}
+}
+
+module.exports = HarnessAppLoginView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/harness_app/views/PictView-HarnessApp-TopBar.js

@@ -0,0 +1,157 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-TopBar",
+
+	DefaultRenderable: "HarnessApp-TopBar-Content",
+	DefaultDestinationAddress: "#HarnessApp-TopBar-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.harnessapp-topbar
+		{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background: #264653;
+			color: #FAEDCD;
+			padding: 0 1.25rem;
+			height: 52px;
+			border-bottom: 3px solid #E76F51;
+		}
+		.harnessapp-topbar-brand
+		{
+			font-size: 1.15rem;
+			font-weight: 700;
+			color: #E76F51;
+			text-decoration: none;
+			cursor: pointer;
+			letter-spacing: 0.02em;
+		}
+		.harnessapp-topbar-brand:hover
+		{
+			color: #F4845F;
+		}
+		.harnessapp-topbar-nav
+		{
+			display: flex;
+			align-items: center;
+			gap: 0.15rem;
+		}
+		.harnessapp-topbar-nav a
+		{
+			color: #D4A373;
+			text-decoration: none;
+			padding: 0.4rem 0.75rem;
+			border-radius: 4px;
+			font-size: 0.85rem;
+			cursor: pointer;
+			transition: background-color 0.15s, color 0.15s;
+		}
+		.harnessapp-topbar-nav a:hover
+		{
+			background: #1A3340;
+			color: #FAEDCD;
+		}
+		.harnessapp-topbar-session
+		{
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			font-size: 0.8rem;
+			color: #D4A373;
+		}
+		.harnessapp-topbar-session .dot
+		{
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background: #2A9D8F;
+			box-shadow: 0 0 4px rgba(42,157,143,0.5);
+		}
+		.harnessapp-topbar-logout
+		{
+			background: #E76F51;
+			color: #fff;
+			border: none;
+			padding: 0.3rem 0.8rem;
+			border-radius: 4px;
+			font-size: 0.75rem;
+			font-weight: 600;
+			cursor: pointer;
+			margin-left: 0.25rem;
+		}
+		.harnessapp-topbar-logout:hover
+		{
+			background: #C45A3E;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "HarnessApp-TopBar-Template",
+			Template: /*html*/`
+<div class="harnessapp-topbar">
+	<a class="harnessapp-topbar-brand" onclick="{~P~}.PictApplication.navigateTo('/Dashboard')">Bookstore</a>
+	<div class="harnessapp-topbar-nav">
+		<a onclick="{~P~}.PictApplication.navigateTo('/Dashboard')">Dashboard</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/Books')">Books</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/Users')">Users</a>
+	</div>
+	<div class="harnessapp-topbar-session">
+		<span class="dot"></span>
+		<span id="HarnessApp-TopBar-UserName"></span>
+		<button class="harnessapp-topbar-logout" type="button" onclick="{~P~}.PictApplication.doLogout()">Log out</button>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "HarnessApp-TopBar-Content",
+			TemplateHash: "HarnessApp-TopBar-Template",
+			DestinationAddress: "#HarnessApp-TopBar-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class HarnessAppTopBarView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Populate the user name from session data
+		let tmpSession = this.pict.AppData.Session;
+		let tmpDisplayName = '';
+
+		if (tmpSession && tmpSession.UserRecord)
+		{
+			tmpDisplayName = tmpSession.UserRecord.FullName
+				|| tmpSession.UserRecord.LoginID
+				|| '';
+		}
+
+		let tmpUserNameElements = this.services.ContentAssignment.getElement('#HarnessApp-TopBar-UserName');
+		if (tmpUserNameElements && tmpUserNameElements.length > 0)
+		{
+			tmpUserNameElements[0].textContent = tmpDisplayName;
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = HarnessAppTopBarView;
+
+module.exports.default_configuration = _ViewConfiguration;