feat(opsserver,web): replace the Angular UI and REST management layer with a TypedRequest-based ops server and bundled web frontend
This commit is contained in:
289
ts_web/elements/sg-app-shell.ts
Normal file
289
ts_web/elements/sg-app-shell.ts
Normal file
@@ -0,0 +1,289 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as appstate from '../appstate.js';
|
||||
import * as interfaces from '../../ts_interfaces/index.js';
|
||||
import { appRouter } from '../router.js';
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
state,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import type { SgViewDashboard } from './sg-view-dashboard.js';
|
||||
import type { SgViewOrganizations } from './sg-view-organizations.js';
|
||||
import type { SgViewPackages } from './sg-view-packages.js';
|
||||
import type { SgViewTokens } from './sg-view-tokens.js';
|
||||
import type { SgViewSettings } from './sg-view-settings.js';
|
||||
import type { SgViewAdmin } from './sg-view-admin.js';
|
||||
|
||||
@customElement('sg-app-shell')
|
||||
export class SgAppShell extends DeesElement {
|
||||
@state()
|
||||
accessor loginState: appstate.ILoginState = { identity: null, isLoggedIn: false };
|
||||
|
||||
@state()
|
||||
accessor uiState: appstate.IUiState = { activeView: 'dashboard' };
|
||||
|
||||
@state()
|
||||
accessor loginLoading: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor loginError: string = '';
|
||||
|
||||
@state()
|
||||
accessor authProviders: interfaces.data.IPublicAuthProvider[] = [];
|
||||
|
||||
@state()
|
||||
accessor localAuthEnabled: boolean = true;
|
||||
|
||||
private viewTabs = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layoutDashboard',
|
||||
element: (async () => (await import('./sg-view-dashboard.js')).SgViewDashboard)(),
|
||||
},
|
||||
{
|
||||
name: 'Organizations',
|
||||
iconName: 'lucide:building2',
|
||||
element: (async () => (await import('./sg-view-organizations.js')).SgViewOrganizations)(),
|
||||
},
|
||||
{
|
||||
name: 'Packages',
|
||||
iconName: 'lucide:package',
|
||||
element: (async () => (await import('./sg-view-packages.js')).SgViewPackages)(),
|
||||
},
|
||||
{
|
||||
name: 'Tokens',
|
||||
iconName: 'lucide:key',
|
||||
element: (async () => (await import('./sg-view-tokens.js')).SgViewTokens)(),
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
element: (async () => (await import('./sg-view-settings.js')).SgViewSettings)(),
|
||||
},
|
||||
{
|
||||
name: 'Admin',
|
||||
iconName: 'lucide:shield',
|
||||
element: (async () => (await import('./sg-view-admin.js')).SgViewAdmin)(),
|
||||
},
|
||||
];
|
||||
|
||||
private resolvedViewTabs: Array<{ name: string; iconName?: string; element: any }> = [];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
document.title = 'Stack.Gallery Registry';
|
||||
|
||||
// Make appRouter globally accessible for view elements
|
||||
(globalThis as any).__sgAppRouter = appRouter;
|
||||
|
||||
const loginSubscription = appstate.loginStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((loginState) => {
|
||||
this.loginState = loginState;
|
||||
});
|
||||
this.rxSubscriptions.push(loginSubscription);
|
||||
|
||||
const uiSubscription = appstate.uiStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((uiState) => {
|
||||
this.uiState = uiState;
|
||||
this.syncAppdashView(uiState.activeView);
|
||||
});
|
||||
this.rxSubscriptions.push(uiSubscription);
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.maincontainer {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.loginState.isLoggedIn) {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<sg-login-view
|
||||
.providers=${this.authProviders}
|
||||
.localAuthEnabled=${this.localAuthEnabled}
|
||||
.loading=${this.loginLoading}
|
||||
.error=${this.loginError}
|
||||
@login=${(e: CustomEvent) => this.handleLocalLogin(e)}
|
||||
@oauth-login=${(e: CustomEvent) => this.handleOAuthLogin(e)}
|
||||
@ldap-login=${(e: CustomEvent) => this.handleLdapLogin(e)}
|
||||
></sg-login-view>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<dees-simple-appdash
|
||||
name="Stack.Gallery"
|
||||
.viewTabs=${this.resolvedViewTabs}
|
||||
.selectedView=${this.resolvedViewTabs.find(
|
||||
(t) => t.name.toLowerCase().replace(/\s+/g, '-') === this.uiState.activeView,
|
||||
) || this.resolvedViewTabs[0]}
|
||||
>
|
||||
</dees-simple-appdash>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
// Fetch auth providers for login page
|
||||
this.fetchAuthProviders();
|
||||
|
||||
// Resolve async view tab imports
|
||||
const allTabs = await Promise.all(
|
||||
this.viewTabs.map(async (tab) => ({
|
||||
name: tab.name,
|
||||
iconName: tab.iconName,
|
||||
element: await tab.element,
|
||||
})),
|
||||
);
|
||||
|
||||
// Filter admin tab based on user role
|
||||
this.resolvedViewTabs = this.loginState.identity?.isSystemAdmin
|
||||
? allTabs
|
||||
: allTabs.filter((t) => t.name !== 'Admin');
|
||||
|
||||
this.requestUpdate();
|
||||
await this.updateComplete;
|
||||
|
||||
const appDash = this.shadowRoot!.querySelector('dees-simple-appdash') as any;
|
||||
if (appDash) {
|
||||
appDash.addEventListener('view-select', (e: CustomEvent) => {
|
||||
const viewName = e.detail.view.name.toLowerCase().replace(/\s+/g, '-');
|
||||
appRouter.navigateToView(viewName);
|
||||
});
|
||||
appDash.addEventListener('logout', async () => {
|
||||
await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
|
||||
});
|
||||
|
||||
// Load initial view
|
||||
if (this.resolvedViewTabs.length > 0) {
|
||||
const currentActiveView = appstate.uiStatePart.getState().activeView;
|
||||
const initialView = this.resolvedViewTabs.find(
|
||||
(t) => t.name.toLowerCase().replace(/\s+/g, '-') === currentActiveView,
|
||||
) || this.resolvedViewTabs[0];
|
||||
await appDash.loadView(initialView);
|
||||
}
|
||||
}
|
||||
|
||||
// Check for stored session
|
||||
const loginState = appstate.loginStatePart.getState();
|
||||
if (loginState.identity?.jwt) {
|
||||
if (loginState.identity.expiresAt > Date.now()) {
|
||||
// Validate token with server in the background
|
||||
try {
|
||||
await appstate.settingsStatePart.dispatchAction(appstate.fetchMeAction, null);
|
||||
} catch {
|
||||
console.warn('Stored session invalid, returning to login');
|
||||
await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
|
||||
}
|
||||
} else {
|
||||
// Token expired, try refresh
|
||||
const newState = await appstate.loginStatePart.dispatchAction(
|
||||
appstate.refreshTokenAction, null,
|
||||
);
|
||||
if (!newState.isLoggedIn) {
|
||||
// Refresh failed
|
||||
await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async fetchAuthProviders() {
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetAuthProviders
|
||||
>('/typedrequest', 'getAuthProviders');
|
||||
const response = await typedRequest.fire({});
|
||||
this.authProviders = response.providers;
|
||||
this.localAuthEnabled = response.localAuthEnabled;
|
||||
} catch {
|
||||
// Default to local auth if we can't fetch providers
|
||||
this.localAuthEnabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
private async handleLocalLogin(e: CustomEvent) {
|
||||
const { email, password } = e.detail;
|
||||
this.loginLoading = true;
|
||||
this.loginError = '';
|
||||
try {
|
||||
const newState = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
|
||||
email,
|
||||
password,
|
||||
});
|
||||
if (!newState.isLoggedIn) {
|
||||
this.loginError = 'Invalid email or password';
|
||||
}
|
||||
} catch {
|
||||
this.loginError = 'Login failed. Please try again.';
|
||||
}
|
||||
this.loginLoading = false;
|
||||
}
|
||||
|
||||
private async handleOAuthLogin(e: CustomEvent) {
|
||||
const { providerId } = e.detail;
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_OAuthAuthorize
|
||||
>('/typedrequest', 'oauthAuthorize');
|
||||
const response = await typedRequest.fire({ providerId });
|
||||
// Redirect to OAuth provider
|
||||
window.location.href = response.redirectUrl;
|
||||
} catch {
|
||||
this.loginError = 'OAuth login failed. Please try again.';
|
||||
}
|
||||
}
|
||||
|
||||
private async handleLdapLogin(e: CustomEvent) {
|
||||
const { providerId, username, password } = e.detail;
|
||||
this.loginLoading = true;
|
||||
this.loginError = '';
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_LdapLogin
|
||||
>('/typedrequest', 'ldapLogin');
|
||||
const response = await typedRequest.fire({ providerId, username, password });
|
||||
if (response.identity) {
|
||||
appstate.loginStatePart.setState({
|
||||
identity: response.identity,
|
||||
isLoggedIn: true,
|
||||
});
|
||||
} else {
|
||||
this.loginError = response.errorMessage || 'LDAP login failed';
|
||||
}
|
||||
} catch {
|
||||
this.loginError = 'LDAP login failed. Please try again.';
|
||||
}
|
||||
this.loginLoading = false;
|
||||
}
|
||||
|
||||
private syncAppdashView(viewName: string): void {
|
||||
const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
|
||||
if (!appDash || this.resolvedViewTabs.length === 0) return;
|
||||
const targetTab = this.resolvedViewTabs.find(
|
||||
(t) => t.name.toLowerCase().replace(/\s+/g, '-') === viewName,
|
||||
);
|
||||
if (!targetTab) return;
|
||||
appDash.loadView(targetTab);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user