pict-section-login 0.0.1

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

@@ -0,0 +1,188 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "HarnessApp-Users",
+
+	DefaultRenderable: "HarnessApp-Users-Content",
+	DefaultDestinationAddress: "#HarnessApp-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.harnessapp-users h1
+		{
+			font-size: 1.8rem;
+			margin: 0 0 1rem 0;
+			color: #264653;
+		}
+		.harnessapp-users-grid
+		{
+			display: flex;
+			gap: 1rem;
+			flex-wrap: wrap;
+		}
+		.harnessapp-user-card
+		{
+			background: #fff;
+			border: 1px solid #D4A373;
+			border-radius: 6px;
+			padding: 1rem 1.25rem;
+			min-width: 200px;
+			flex: 0 0 auto;
+			box-shadow: 0 2px 8px rgba(38,70,83,0.08);
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+		}
+		.harnessapp-user-card-avatar
+		{
+			width: 36px;
+			height: 36px;
+			border-radius: 50%;
+			background: #264653;
+			color: #FAEDCD;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-weight: 700;
+			font-size: 0.85rem;
+			flex-shrink: 0;
+		}
+		.harnessapp-user-card-info
+		{
+			font-size: 0.85rem;
+			color: #264653;
+		}
+		.harnessapp-user-card-info .login-id
+		{
+			font-weight: 600;
+			font-size: 0.9rem;
+		}
+		.harnessapp-user-card-info .full-name
+		{
+			color: #888;
+			font-size: 0.8rem;
+		}
+		.harnessapp-user-card-info .user-id
+		{
+			background: #264653;
+			color: #FAEDCD;
+			font-size: 0.65rem;
+			font-weight: 700;
+			padding: 0.1rem 0.4rem;
+			border-radius: 9999px;
+			margin-left: 0.25rem;
+		}
+		.harnessapp-users-loading
+		{
+			padding: 2rem;
+			text-align: center;
+			color: #999;
+			font-size: 0.9rem;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "HarnessApp-Users-Template",
+			Template: /*html*/`
+<div class="harnessapp-users">
+	<h1>Users</h1>
+	<div id="HarnessApp-Users-GridContainer">
+		<div class="harnessapp-users-loading">Loading users&hellip;</div>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "HarnessApp-Users-Content",
+			TemplateHash: "HarnessApp-Users-Template",
+			DestinationAddress: "#HarnessApp-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class HarnessAppUsersView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		this._loadUsers();
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+
+	_loadUsers()
+	{
+		fetch('/1.0/Demo/Users')
+			.then((pResponse) =>
+			{
+				return pResponse.json();
+			})
+			.then((pData) =>
+			{
+				let tmpUsers = (pData && Array.isArray(pData.Users)) ? pData.Users : [];
+				this._renderGrid(tmpUsers);
+			})
+			.catch((pError) =>
+			{
+				this.log.error('Failed to load users: ' + pError.message);
+				let tmpContainer = this.services.ContentAssignment.getElement('#HarnessApp-Users-GridContainer');
+				if (tmpContainer && tmpContainer.length > 0)
+				{
+					tmpContainer[0].innerHTML = '<div class="harnessapp-users-loading">Failed to load users. Is the server running?</div>';
+				}
+			});
+	}
+
+	_renderGrid(pUsers)
+	{
+		let tmpContainer = this.services.ContentAssignment.getElement('#HarnessApp-Users-GridContainer');
+		if (!tmpContainer || tmpContainer.length < 1)
+		{
+			return;
+		}
+
+		if (pUsers.length < 1)
+		{
+			tmpContainer[0].innerHTML = '<div class="harnessapp-users-loading">No users found.</div>';
+			return;
+		}
+
+		let tmpHTML = '<div class="harnessapp-users-grid">';
+
+		for (let i = 0; i < pUsers.length; i++)
+		{
+			let tmpUser = pUsers[i];
+			let tmpInitial = (tmpUser.LoginID || '?').charAt(0).toUpperCase();
+
+			tmpHTML += '<div class="harnessapp-user-card">';
+			tmpHTML += '<div class="harnessapp-user-card-avatar">' + tmpInitial + '</div>';
+			tmpHTML += '<div class="harnessapp-user-card-info">';
+			tmpHTML += '<div class="login-id">' + (tmpUser.LoginID || '') + ' <span class="user-id">ID ' + (tmpUser.IDUser || '') + '</span></div>';
+			if (tmpUser.FullName)
+			{
+				tmpHTML += '<div class="full-name">' + tmpUser.FullName + '</div>';
+			}
+			tmpHTML += '</div>';
+			tmpHTML += '</div>';
+		}
+
+		tmpHTML += '</div>';
+		tmpContainer[0].innerHTML = tmpHTML;
+	}
+}
+
+module.exports = HarnessAppUsersView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/example_applications/oauth_login/OAuth-Login-Application.js

@@ -0,0 +1,78 @@
+const libPictApplication = require('pict-application');
+const libPictSectionLogin = require('../../source/Pict-Section-Login.js');
+
+/**
+ * orator-authentication with OAuth.
+ *
+ * Enables ShowOAuthProviders so the section fetches the provider list
+ * from /1.0/OAuth/Providers and renders branded sign-in buttons for
+ * Google, Microsoft, etc.  Standard username/password login is still
+ * available alongside the OAuth buttons.
+ */
+class OAuthLoginView extends libPictSectionLogin
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onLoginSuccess(pSessionData)
+	{
+		this.log.info('Authenticated (standard):', pSessionData);
+	}
+
+	onSessionChecked(pSessionData)
+	{
+		if (pSessionData && pSessionData.LoggedIn)
+		{
+			this.log.info('Active session found:', pSessionData);
+		}
+	}
+}
+
+const _OAuthLoginViewConfiguration = (
+{
+	"ViewIdentifier": "OAuthLogin",
+	"TargetElementAddress": "#Pict-Login-Container",
+	"ShowOAuthProviders": true
+	// All endpoint defaults match orator-authentication:
+	//   LoginEndpoint:          "/1.0/Authenticate"      (POST)
+	//   LogoutEndpoint:         "/1.0/Deauthenticate"
+	//   CheckSessionEndpoint:   "/1.0/CheckSession"
+	//   OAuthProvidersEndpoint: "/1.0/OAuth/Providers"
+	//   OAuthBeginEndpoint:     "/1.0/OAuth/Begin"
+	//   CheckSessionOnLoad:     true
+});
+
+class OAuthLoginApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.pict.addView('OAuthLogin', _OAuthLoginViewConfiguration, OAuthLoginView);
+	}
+
+	onAfterInitialize()
+	{
+		super.onAfterInitialize();
+		let tmpView = this.pict.views.OAuthLogin;
+		if (tmpView)
+		{
+			tmpView.render();
+		}
+	}
+}
+
+module.exports = OAuthLoginApplication;
+
+module.exports.default_configuration = (
+{
+	"Name": "OAuth Login Example",
+	"Hash": "OAuthLoginExample",
+	"MainViewportViewIdentifier": "OAuthLogin",
+	"pict_configuration":
+	{
+		"Product": "OAuthLogin-Example"
+	}
+});

package/example_applications/oauth_login/html/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>OAuth 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; }
+			.pict-example-info ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }
+			.pict-example-info li { margin-bottom: 0.25rem; }
+		</style>
+		<script src="./pict.js" type="text/javascript"></script>
+		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(OAuthLoginExample, 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">OAuth Login</div>
+			<div class="pict-example-module">pict-section-login</div>
+		</div>
+		<div class="pict-example-content">
+			<div class="pict-example-info">
+				This example uses <code>pict-section-login</code> with <strong>OAuth enabled</strong>
+				(<code>ShowOAuthProviders: true</code>).  It requires:
+				<ul>
+					<li>A running Orator server with <code>orator-authentication</code></li>
+					<li>OAuth providers configured (e.g. Google, Microsoft) in the server&rsquo;s <code>OAuthProviders</code> option</li>
+				</ul>
+				On load the section queries <code>/1.0/OAuth/Providers</code> and renders branded buttons
+				for each configured provider alongside the standard username/password form.
+			</div>
+			<div id="Pict-Login-Container"></div>
+		</div>
+		<script src="./oauth_login_example.js" type="text/javascript"></script>
+	</body>
+</html>

package/example_applications/oauth_login/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "oauth_login_example",
+    "version": "1.0.0",
+    "description": "OAuth login example — pict-section-login with Google/Microsoft OAuth + standard login",
+    "main": "OAuth-Login-Application.js",
+    "scripts": {
+        "start": "node OAuth-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/orator_login/Orator-Login-Application.js

@@ -0,0 +1,61 @@
+const libPictApplication = require('pict-application');
+const libPictSectionLogin = require('../../source/Pict-Section-Login.js');
+
+/**
+ * Standard orator-authentication login.
+ *
+ * All endpoint defaults already match orator-authentication, so we only
+ * need to specify the view identifier and target element.  This is the
+ * minimal configuration for a production-style integration.
+ */
+class OratorLoginView extends libPictSectionLogin
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+}
+
+const _OratorLoginViewConfiguration = (
+{
+	"ViewIdentifier": "OratorLogin",
+	"TargetElementAddress": "#Pict-Login-Container"
+	// All other settings use defaults that match orator-authentication:
+	//   LoginEndpoint:        "/1.0/Authenticate"    (POST)
+	//   LogoutEndpoint:       "/1.0/Deauthenticate"
+	//   CheckSessionEndpoint: "/1.0/CheckSession"
+	//   CheckSessionOnLoad:   true
+});
+
+class OratorLoginApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.pict.addView('OratorLogin', _OratorLoginViewConfiguration, OratorLoginView);
+	}
+
+	onAfterInitialize()
+	{
+		super.onAfterInitialize();
+		let tmpView = this.pict.views.OratorLogin;
+		if (tmpView)
+		{
+			tmpView.render();
+		}
+	}
+}
+
+module.exports = OratorLoginApplication;
+
+module.exports.default_configuration = (
+{
+	"Name": "Orator Login Example",
+	"Hash": "OratorLoginExample",
+	"MainViewportViewIdentifier": "OratorLogin",
+	"pict_configuration":
+	{
+		"Product": "OratorLogin-Example"
+	}
+});

package/example_applications/orator_login/html/index.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Orator 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 src="./pict.js" type="text/javascript"></script>
+		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(OratorLoginExample, 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">Orator Login</div>
+			<div class="pict-example-module">pict-section-login</div>
+		</div>
+		<div class="pict-example-content">
+			<div class="pict-example-info">
+				This example uses <code>pict-section-login</code> with the <strong>default endpoints</strong>
+				that match <code>orator-authentication</code>.  It requires a running Orator server on the
+				same origin with orator-authentication configured.  On page load the section automatically
+				calls <code>/1.0/CheckSession</code> to restore any existing session from the cookie.
+			</div>
+			<div id="Pict-Login-Container"></div>
+		</div>
+		<script src="./orator_login_example.js" type="text/javascript"></script>
+	</body>
+</html>

package/example_applications/orator_login/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "orator_login_example",
+    "version": "1.0.0",
+    "description": "Standard orator-authentication login example — pict-section-login with default endpoints",
+    "main": "Orator-Login-Application.js",
+    "scripts": {
+        "start": "node Orator-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/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "pict-section-login",
+    "version": "0.0.1",
+    "description": "Pict login section for authentication UIs — works with orator-authentication or any custom backend",
+    "main": "source/Pict-Section-Login.js",
+    "scripts": {
+        "start": "node source/Pict-Section-Login.js",
+        "build": "npx quack build",
+        "test": "npx quack test",
+        "tests": "npx quack test -g",
+        "coverage": "npx quack coverage",
+        "test-browser": "npx mocha test/Browser_Integration_tests.js --timeout 60000",
+        "example": "npx quack examples"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/stevenvelozo/pict-section-login.git"
+    },
+    "author": "steven velozo <steven@velozo.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/stevenvelozo/pict-section-login/issues"
+    },
+    "homepage": "https://github.com/stevenvelozo/pict-section-login#readme",
+    "devDependencies": {
+        "browser-env": "^3.3.0",
+        "pict": "^1.0.350",
+        "pict-application": "^1.0.33",
+        "puppeteer": "^24.38.0",
+        "quackage": "^1.0.59"
+    },
+    "mocha": {
+        "diff": true,
+        "extension": [
+            "js"
+        ],
+        "package": "./package.json",
+        "reporter": "spec",
+        "slow": "75",
+        "timeout": "5000",
+        "ui": "tdd",
+        "watch-files": [
+            "source/**/*.js",
+            "test/**/*.js"
+        ],
+        "watch-ignore": [
+            "lib/vendor"
+        ]
+    },
+    "dependencies": {
+        "pict-view": "^1.0.67"
+    }
+}