import { commitinfo } from '../00_commitinfo_data.js'; import * as plugins from '../plugins.js'; import * as appstate from '../appstate.js'; import { DeesElement, css, cssManager, customElement, html, state } from '@design.estate/dees-element'; import { CloudlyViewBackups } from './cloudly-view-backups.js'; import { CloudlyViewClusters } from './cloudly-view-clusters.js'; import { CloudlyViewDbs } from './cloudly-view-dbs.js'; import { CloudlyViewDeployments } from './cloudly-view-deployments.js'; import { CloudlyViewDns } from './cloudly-view-dns.js'; import { CloudlyViewImages } from './cloudly-view-images.js'; import { CloudlyViewLogs } from './cloudly-view-logs.js'; import { CloudlyViewMails } from './cloudly-view-mails.js'; import { CloudlyViewOverview } from './cloudly-view-overview.js'; import { CloudlyViewS3 } from './cloudly-view-s3.js'; import { CloudlyViewSecretBundles } from './cloudly-view-secretbundles.js'; import { CloudlyViewSecretGroups } from './cloudly-view-secretgroups.js'; import { CloudlyViewServices } from './cloudly-view-services.js'; declare global { interface HTMLElementTagNameMap { 'cvault-dashboard': CloudlyDashboard; } } @customElement('cloudly-dashboard') export class CloudlyDashboard extends DeesElement { @state() private jwt: string; @state() private data: appstate.IDataState = { secretGroups: [], secretBundles: [], clusters: [], }; constructor() { super(); const subcription = appstate.dataState .select((stateArg) => stateArg) .subscribe((dataArg) => { this.data = dataArg; }); this.rxSubscriptions.push(subcription); } public static styles = [ cssManager.defaultStyles, css` .maincontainer { position: relative; width: 100vw; height: 100vh; } h1 { font-weight: 400; font-size: 24px; font-family: 'Cal Sans'; } `, ]; public render() { return html`
`; } public async firstUpdated() { const simpleLogin = this.shadowRoot.querySelector('dees-simple-login'); simpleLogin.addEventListener('login', (e: CustomEvent) => { console.log(e.detail); this.login(e.detail.data.username, e.detail.data.password); }); this.addEventListener('contextmenu', (eventArg) => { plugins.deesCatalog.DeesContextmenu.openContextMenuWithOptions(eventArg, [ { name: 'About', iconName: 'mugHot', action: async () => { await plugins.deesCatalog.DeesModal.createAndShow({ heading: 'About', content: html`configvault ${commitinfo.version}`, menuOptions: [ { name: 'close', iconName: null, action: async (modalArg) => { await modalArg.destroy(); }, }, ], }); }, }, ]); }); // lets deal with initial state const domtools = await this.domtoolsPromise; const loginState = appstate.loginStatePart.getState(); console.log(loginState); if (loginState.jwt) { this.jwt = loginState.jwt; await simpleLogin.switchToSlottedContent(); await appstate.dataState.dispatchAction(appstate.getDataAction, null); } } private async login(username: string, password: string) { const domtools = await this.domtoolsPromise; console.log(`attempting to login...`); const simpleLogin = this.shadowRoot.querySelector('dees-simple-login'); const form = simpleLogin.shadowRoot.querySelector('dees-form'); form.setStatus('pending', 'Logging in...'); const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, { username, password, }); if (state.jwt) { console.log('got jwt'); this.jwt = state.jwt; form.setStatus('success', 'Logged in!'); await simpleLogin.switchToSlottedContent(); await appstate.dataState.dispatchAction(appstate.getDataAction, null); } else { form.setStatus('error', 'Login failed!'); await domtools.convenience.smartdelay.delayFor(2000); form.reset(); } } private async logout() {} }