ultravisor 1.0.25 → 1.0.26

package/webinterface/package.json

@@ -22,6 +22,7 @@
 		"pict-section-markdowneditor": "^1.0.7",
 		"pict-section-modal": "^0.0.1",
 		"pict-section-objecteditor": "^1.0.1",
+		"pict-section-usermanagement": "^0.0.1",
 		"pict-view": "^1.0.67"
 	},
 	"devDependencies": {

package/webinterface/source/Pict-Application-Ultravisor.js

@@ -31,7 +31,10 @@ const libViewBeaconList = require('./views/PictView-Ultravisor-BeaconList.js');
 const libViewReachabilityMap = require('./views/PictView-Ultravisor-ReachabilityMap.js');
 const libViewOperationDescriptionEditor = require('./views/PictView-Ultravisor-OperationDescriptionEditor.js');
 const libViewFleet = require('./views/PictView-Ultravisor-Fleet.js');
+const libViewLogin = require('./views/PictView-Ultravisor-Login.js');
+const libViewUserManagement = require('./views/PictView-Ultravisor-UserManagement.js');
 const libPictSectionModal = require('pict-section-modal');
+const libPictSectionUserManagement = require('pict-section-usermanagement');
 
 class UltravisorApplication extends libPictApplication
 {
@@ -68,9 +71,36 @@ class UltravisorApplication extends libPictApplication
 		this.pict.addView('Ultravisor-ReachabilityMap', libViewReachabilityMap.default_configuration, libViewReachabilityMap);
 		this.pict.addView('Ultravisor-OperationDescriptionEditor', libViewOperationDescriptionEditor.default_configuration, libViewOperationDescriptionEditor);
 		this.pict.addView('Ultravisor-Fleet', libViewFleet.default_configuration, libViewFleet);
-
-		// Modal/toast notification system (replaces browser alert/confirm)
+		this.pict.addView('Ultravisor-Login', libViewLogin.default_configuration, libViewLogin);
+		this.pict.addView('Ultravisor-UserManagement', libViewUserManagement.default_configuration, libViewUserManagement);
+
+		// Modal/toast notification system (replaces browser alert/confirm).
+		// Two registrations: 'Modal' is the legacy hash existing call sites
+		// use; 'Pict-Section-Modal' is what pict-section-usermanagement's
+		// confirm/toast hooks look up. Both addView calls produce
+		// independent instances of the same section, which is fine because
+		// the modal section is stateless across constructions.
 		this.pict.addView('Modal', {}, libPictSectionModal);
+		this.pict.addView('Pict-Section-Modal', {}, libPictSectionModal);
+
+		// pict-section-usermanagement — install() registers the provider
+		// + 5 views (Login, CurrentUser, UserList, UserEdit,
+		// PasswordChange). Default browser fetch() is the transport,
+		// hitting orator-authentication's /1.0/Authenticate + the
+		// auth-beacon /Users routes mounted by ultravisor's API server.
+		// OnLogin / OnLogout hooks let us re-render the topbar and
+		// reroute on session-state flips without each view subscribing
+		// to AppData.
+		let tmpSelf = this;
+		libPictSectionUserManagement.install(this.pict,
+		{
+			ProviderOptions: { BaseURL: '/1.0/' },
+			ViewOptions:
+			{
+				Login:       { OnLogin:  () => tmpSelf._afterLogin() },
+				CurrentUser: { OnLogout: () => tmpSelf._afterLogout() }
+			}
+		});
 
 		// Register pict-section-form service types so Form panels can use them
 		this.pict.addServiceType('PictFormMetacontroller', libPictSectionForm.PictFormMetacontroller);
@@ -139,6 +169,31 @@ class UltravisorApplication extends libPictApplication
 		this.pict.providers.PictRouter.navigate(pRoute);
 	}
 
+	/**
+	 * Hook fired by pict-section-usermanagement's Login view after a
+	 * successful sign-in. Re-render the TopBar so the CurrentUser badge
+	 * appears, then bounce to the dashboard so the user lands on a
+	 * useful page rather than the login form's success message.
+	 */
+	_afterLogin()
+	{
+		let tmpTopBar = this.pict.views['Ultravisor-TopBar'];
+		if (tmpTopBar) tmpTopBar.render();
+		this.navigateTo('/Home');
+	}
+
+	/**
+	 * Hook fired by pict-section-usermanagement's CurrentUser view
+	 * after a logout. Drop back to /Login so it's obvious the session
+	 * is gone (vs. seeing a stale dashboard with no badge).
+	 */
+	_afterLogout()
+	{
+		let tmpTopBar = this.pict.views['Ultravisor-TopBar'];
+		if (tmpTopBar) tmpTopBar.render();
+		this.navigateTo('/Login');
+	}
+
 	showView(pViewIdentifier)
 	{
 		if (pViewIdentifier in this.pict.views)

package/webinterface/source/providers/PictRouter-Ultravisor-Configuration.json

@@ -61,6 +61,14 @@
 		{
 			"path": "/Docs",
 			"template": "{~LV:Pict.PictApplication.showView(`Ultravisor-Documentation`)~}"
+		},
+		{
+			"path": "/Login",
+			"template": "{~LV:Pict.PictApplication.showView(`Ultravisor-Login`)~}"
+		},
+		{
+			"path": "/Users",
+			"template": "{~LV:Pict.PictApplication.showView(`Ultravisor-UserManagement`)~}"
 		}
 	]
 }

package/webinterface/source/views/PictView-Ultravisor-Login.js

@@ -0,0 +1,74 @@
+/**
+ * PictView-Ultravisor-Login
+ *
+ * Thin host wrapper around `pict-section-usermanagement`'s Login
+ * view. The section's Login renders into `#PictUM-Login`; this view
+ * just provides that mount point inside ultravisor's main content
+ * panel and delegates to the section view's render.
+ *
+ * The section's Login carries its own theme-neutral CSS, so this
+ * view doesn't need to restyle the form — but does add a small
+ * "Ultravisor — sign in" page heading so the page doesn't feel
+ * floating.
+ */
+
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'Ultravisor-Login',
+	AutoInitialize: true,
+	AutoRender: false,
+
+	DefaultRenderable: 'Ultravisor-Login-Content',
+	DefaultDestinationAddress: '#Ultravisor-Content-Container',
+
+	Templates:
+	[
+		{
+			Hash: 'Ultravisor-Login-Template',
+			Template: /*html*/`
+<div class="ultravisor-login-page">
+	<div id="PictUM-Login"></div>
+</div>`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'Ultravisor-Login-Content',
+			TemplateHash: 'Ultravisor-Login-Template',
+			DestinationAddress: '#Ultravisor-Content-Container',
+			RenderMethod: 'replace'
+		}
+	],
+
+	CSS: /*css*/`
+		.ultravisor-login-page {
+			min-height: calc(100vh - 56px);
+			display: flex; align-items: center; justify-content: center;
+			padding: 32px 16px;
+		}
+	`
+};
+
+class UltravisorLoginView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		// Render the section's Login view into the mount point we just
+		// painted. The section view tracks its own destination via
+		// DefaultDestinationAddress: '#PictUM-Login', so a plain render()
+		// call is enough.
+		let tmpInner = this.pict && this.pict.views && this.pict.views['PictUM-Login'];
+		if (tmpInner) tmpInner.render();
+		this.pict.CSSMap.injectCSS();
+		return super.onAfterRender
+			? super.onAfterRender(pRenderable, pAddress, pRecord, pContent)
+			: undefined;
+	}
+}
+
+module.exports = UltravisorLoginView;
+module.exports.default_configuration = _ViewConfiguration;

package/webinterface/source/views/PictView-Ultravisor-TopBar.js

@@ -219,9 +219,15 @@ const _ViewConfiguration =
 		<a onclick="{~P~}.PictApplication.navigateTo('/Manifests')">Manifests</a>
 		<a onclick="{~P~}.PictApplication.navigateTo('/Beacons')">Beacons</a>
 		<a onclick="{~P~}.PictApplication.navigateTo('/Fleet')">Fleet</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/Users')">Users</a>
 		<a onclick="{~P~}.PictApplication.navigateTo('/Docs')">Docs</a>
 	</div>
 	<div class="ultravisor-topbar-right">
+		<!-- pict-section-usermanagement's CurrentUser badge renders here.
+		     The view tracks #PictUM-CurrentUser as its destination;
+		     onAfterRender() below calls its render() so the badge
+		     appears alongside the status indicator. -->
+		<span id="PictUM-CurrentUser"></span>
 		<div class="ultravisor-topbar-status" id="Ultravisor-TopBar-StatusArea"></div>
 		<div class="ultravisor-settings-wrap">
 			<button class="ultravisor-settings-gear" onclick="{~P~}.views['Ultravisor-TopBar'].toggleThemePanel()" title="Settings">
@@ -287,6 +293,25 @@ class UltravisorTopBarView extends libPictView
 		// Render theme swatches
 		this._renderThemeGrid();
 
+		// Render the user-management current-user badge into our slot.
+		// On first paint there's no session yet — the section view
+		// drives a CheckSession on its own first render. After that
+		// it just paints from AppData.UserManagement.CurrentUser.
+		let tmpCurrentUserView = this.pict.views['PictUM-CurrentUser'];
+		if (tmpCurrentUserView)
+		{
+			let tmpProvider = this.pict.providers['Pict-UserManagement-Provider'];
+			if (tmpProvider && !this._didInitialSessionCheck)
+			{
+				this._didInitialSessionCheck = true;
+				tmpProvider.checkSession(() => tmpCurrentUserView.render());
+			}
+			else
+			{
+				tmpCurrentUserView.render();
+			}
+		}
+
 		// Set up click-outside-to-close handler
 		if (this._boundCloseHandler)
 		{

package/webinterface/source/views/PictView-Ultravisor-UserManagement.js

@@ -0,0 +1,159 @@
+/**
+ * PictView-Ultravisor-UserManagement
+ *
+ * Hosts the user-management surface inside ultravisor's main content
+ * panel. Composes three section views:
+ *
+ *   - PictUM-UserList         (admin: search/list/edit/delete users)
+ *   - PictUM-UserEdit         (admin: create/edit user form)
+ *   - PictUM-PasswordChange   (any session: self change-password)
+ *
+ * The section's CurrentUser badge is rendered in the TopBar, not here
+ * — the page itself doesn't need its own session indicator.
+ *
+ * Sub-tabs (Users | Change my password) keep the admin and self
+ * surfaces separate. A non-admin landing on /Users sees only the
+ * password tab; the admin tab self-hides via the section's 401/403
+ * error path.
+ */
+
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: 'Ultravisor-UserManagement',
+	AutoInitialize: true,
+	AutoRender: false,
+
+	DefaultRenderable: 'Ultravisor-UserManagement-Content',
+	DefaultDestinationAddress: '#Ultravisor-Content-Container',
+
+	Templates:
+	[
+		{
+			Hash: 'Ultravisor-UserManagement-Template',
+			Template: /*html*/`
+<div class="ultravisor-um-page">
+	<div class="ultravisor-um-tabs">
+		<button type="button" class="ultravisor-um-tab" id="UV-UM-Tab-Users"
+			onclick="{~P~}.views['Ultravisor-UserManagement'].switchTab('users')">Users</button>
+		<button type="button" class="ultravisor-um-tab" id="UV-UM-Tab-Pwd"
+			onclick="{~P~}.views['Ultravisor-UserManagement'].switchTab('change-password')">Change my password</button>
+	</div>
+	<div class="ultravisor-um-content">
+		<div id="UV-UM-Pane-Users">
+			<div id="PictUM-UserList"></div>
+			<div id="PictUM-UserEdit" style="margin-top: 16px;"></div>
+		</div>
+		<div id="UV-UM-Pane-Pwd" style="display:none;">
+			<div id="PictUM-PasswordChange"></div>
+		</div>
+	</div>
+</div>`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'Ultravisor-UserManagement-Content',
+			TemplateHash: 'Ultravisor-UserManagement-Template',
+			DestinationAddress: '#Ultravisor-Content-Container',
+			RenderMethod: 'replace'
+		}
+	],
+
+	CSS: /*css*/`
+		.ultravisor-um-page { padding: 24px; }
+		.ultravisor-um-tabs {
+			display: flex; gap: 4px; margin-bottom: 16px;
+			border-bottom: 1px solid var(--uv-border, #2a2a2a);
+		}
+		.ultravisor-um-tab {
+			background: transparent; border: 0; cursor: pointer;
+			padding: 10px 18px; color: var(--uv-text-tertiary, #888);
+			font-size: 14px; font-weight: 500;
+			border-bottom: 2px solid transparent;
+		}
+		.ultravisor-um-tab:hover { color: var(--uv-text, #ddd); }
+		.ultravisor-um-tab-active {
+			color: var(--uv-text, #ddd);
+			border-bottom-color: var(--uv-brand, #2563eb);
+		}
+	`
+};
+
+class UltravisorUserManagementView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this._activeTab = 'users';
+	}
+
+	switchTab(pTab)
+	{
+		this._activeTab = pTab;
+		this._refreshTabState();
+		// Render the section view that's now visible. Other panes stay
+		// in the DOM (display:none) so their form state survives toggles.
+		let tmpProvider = this._provider();
+		if (pTab === 'users' && tmpProvider) { tmpProvider.loadUsers(); }
+		this._renderChildren();
+	}
+
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		this._refreshTabState();
+		// Kick a load so the list paints on first arrival; the section's
+		// UserList itself doesn't auto-fetch.
+		let tmpProvider = this._provider();
+		if (this._activeTab === 'users' && tmpProvider)
+		{
+			tmpProvider.loadUsers(() => this._renderChildren());
+		}
+		this._renderChildren();
+		this.pict.CSSMap.injectCSS();
+		return super.onAfterRender
+			? super.onAfterRender(pRenderable, pAddress, pRecord, pContent)
+			: undefined;
+	}
+
+	_refreshTabState()
+	{
+		let tmpUsersTab = document.getElementById('UV-UM-Tab-Users');
+		let tmpPwdTab = document.getElementById('UV-UM-Tab-Pwd');
+		let tmpUsersPane = document.getElementById('UV-UM-Pane-Users');
+		let tmpPwdPane = document.getElementById('UV-UM-Pane-Pwd');
+		if (tmpUsersTab)
+		{
+			tmpUsersTab.className = 'ultravisor-um-tab' + (this._activeTab === 'users' ? ' ultravisor-um-tab-active' : '');
+		}
+		if (tmpPwdTab)
+		{
+			tmpPwdTab.className = 'ultravisor-um-tab' + (this._activeTab === 'change-password' ? ' ultravisor-um-tab-active' : '');
+		}
+		if (tmpUsersPane) tmpUsersPane.style.display = (this._activeTab === 'users') ? '' : 'none';
+		if (tmpPwdPane) tmpPwdPane.style.display = (this._activeTab === 'change-password') ? '' : 'none';
+	}
+
+	_renderChildren()
+	{
+		// Render section views into their mount points. Each view tracks
+		// its own destination — calling render() is enough.
+		let tmpList = this.pict.views['PictUM-UserList'];
+		let tmpEdit = this.pict.views['PictUM-UserEdit'];
+		let tmpPwd = this.pict.views['PictUM-PasswordChange'];
+		if (tmpList) tmpList.render();
+		if (tmpEdit) tmpEdit.render();
+		if (tmpPwd) tmpPwd.render();
+	}
+
+	_provider()
+	{
+		return this.pict.providers && this.pict.providers['Pict-UserManagement-Provider'];
+	}
+}
+
+module.exports = UltravisorUserManagementView;
+module.exports.default_configuration = _ViewConfiguration;