@quandis/qbo4.security 4.0.1-CI-20250604-212147

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@quandis/qbo4.security",
+  "version": "4.0.1-CI-20250604-212147",
+  "type": "module",
+  "types": "./src/Program.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/Program.js"
+    }
+  },
+  "files": [
+    "wwwroot/js/",
+    "wwwroot/css/",
+    "src/",
+    "scss/"
+  ],
+  "dependencies": {
+    "@quandis/qbo4.ui": "^4.0.1-CI-20250523-132334",
+    "@vaadin/router": "^2.0.0",
+    "bootstrap": "^5.3.6",
+    "lit": "^3.3.0",
+    "reflect-metadata": "^0.2.2",
+    "ts-loader": "^9.5.2",
+    "tsyringe": "^4.10.0"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^7.0.2",
+    "autoprefixer": "^10.4.21",
+    "clean-css": "^5.3.3",
+    "eslint": "^9.27.0",
+    "glob": "^11.0.2",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss-cli": "^11.0.1",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.89.0",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-merge": "^6.0.1"
+  },
+  "scripts": {
+    "sass": "sass --load-path=node_modules --quiet scss/:wwwroot/css && node cssshake.js",
+    "packdev": "webpack --config webpack.dev.js --no-color",
+    "packprod": "webpack --config webpack.prod.js --no-color",
+    "build": "ncu -u && npm install && npm run sass && tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.security.tgz"
+  }
+}

package/readme.md

@@ -0,0 +1,264 @@
+# Overview
+
+The `@quandis/qbo4.Configuration.Web` package offers:
+
+- Management of options classes via dependency injection
+- A `QboTemplate` web component base class that supports configuration driven rendering options
+
+
+# Options Classes
+
+Similar to Microsoft's `IConfiguration`, the `qbo4.Configuration` package's classes manage configuration settings 
+for a web application via dependency injection.
+
+Including the `qbo4.Configuration.js` script will provide:
+
+`qbo4.services`: a container for dependency injection (including `qbo4.services.container` for direct access to the `tsyringe` container)
+`qbo4.configuration`: a set of classes to manage configuration settings
+`IConfiguration`: an interface to manage configuration settings
+
+It provides for dependency injections via the `tsyringe` package.
+
+## Typescript Usage
+
+```typescript
+import 'reflect-metadata';
+import { Configuration, IConfiguration, IConfigurationSource, IConfigurationSourceToken, IConfigurationToken, JsonConfigurationSource, services } from '@quandis/qbo4.configuration';
+
+
+class OptionsA { public name: string = ''; }
+class OptionsB { public count: number = 0; }
+
+const source1 = new JsonConfigurationSource({ A: { name: 'Alice' }, B: { count: 27 } });
+const source2 = new JsonConfigurationSource({ A: { name: 'Bob' }, C: { enabled: true } });
+services.container.register<IConfigurationSource>(IConfigurationSourceToken, { useValue: source1 });
+services.container.register<IConfigurationSource>(IConfigurationSourceToken, { useValue: source2 });
+
+const config: IConfiguration = services.container.resolve<IConfiguration>(IConfigurationToken);
+expect(config).not.null;
+const a = config.getSection('A').bind(OptionsA);
+expect(a.name).equal('Bob');
+
+const b = config.getSection('B').bind(OptionsB);
+expect(b.count).equal(27);
+```
+
+## Browser Usage
+
+```html
+<html>
+  <head>
+	<script src="//configuration/js/qbo4.Configuration.js"></script>
+	<script type="text/javascript">
+        const aiConfig = new qbo4.logging.JsonConfigurationSource({ 'ApplicationInsights': { instrumentationKey: '651cc99f-0b30-4f27-8918-e53dfed1a2c2' } });
+        qbo4.services.container.register(qbo4.logging.IConfigurationSourceToken, { useValue: aiConfig });
+		// now the configuration settings are available for dependency injection
+
+		// later in your code, web components, or scripts:
+		const instances = qbo4.services.container.resolveAll<SomeInterface>(SomeInterfaceToken);
+
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+## Example: ApplicationInsights Logger
+
+Assume we want to inject an `ApplicationInsights` logger, where the `InstrumentationKey` is stored in the configuration settings.
+
+```typescript
+// An options class
+export class ApplicationInsightsOptions {
+	public InstrumentationKey: string = '';
+}
+
+// Prepare the options for dependency injection (a tsyring pattern)
+export const ApplicationInsightsOptionsToken: InjectionToken<ApplicationInsightsOptions> = 'ApplicationInsightsOptions';
+
+// The logger class
+@injectable()
+export class ApplicationInsights {
+	constructor(
+		@inject(ApplicationInsightsOptionsToken) private options: ApplicationInsightsOptions
+	) {
+		// Initialize the logger
+		// ...
+	}
+}
+
+// Prepare the class for dependency injection
+export const ApplicationInsightsToken: InjectionToken<ApplicationInsights> = 'ApplicationInsights';
+```
+
+# QboTemplate Web Component
+
+The `QboTemplate` web component enables power users to configure the rendering of a web component a runtime.
+Assume we have a `Contact` web component that renders a contact's name, address, and other information,
+and we choose to support different layouts based on a `type` attribute:
+
+```html
+<qbo-contact type="fullname"></qbo-contact>
+```
+
+should render:
+
+```html
+<input name="first" placeholder="First name"/>
+<input name="middle" placeholder="Middle name"/>
+<input name="last" placeholder="Last name"/>
+```
+
+Such a web component might look like this:
+
+```typescript
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('qbo-contact')
+export class ContactComponent extends LitElement {
+    jsonData: object = {
+        'Contact': {
+            'First': 'James',
+            'Middle': 'Tiberious',
+			'Last': 'Kirk'
+        }
+    }
+
+	render() {
+		return html`
+			<input name="first" placeholder="First name" value="${this.jsonData['Contact']['First']}"/>
+			<input name="middle" placeholder="Middle name" value="${this.jsonData['Contact']['Middle']}"/>
+			<input name="last" placeholder="Last name" value="${this.jsonData['Contact']['Last']}"/>
+		`;
+	}
+}
+```
+
+Futher assume that you want to allow a power user to configure the layout of the `qbo-contact` web component at runtime.
+To accomplish this, shift the `ContactComponent` to derive from a `QboTemplate` class:
+
+```typescript
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { templates, TemplateFunction, QboTemplate } from '@quandis/qbo4.configuration';
+
+export class ContactComponent extends QboTemplate {
+    constructor() {
+        super();  
+        this.type ??= 'default'; 
+    }
+
+    jsonData: object = {
+        'Contact': {
+            'First': 'James',
+            'Middle': 'Tiberious',
+			'Last': 'Kirk'
+        }
+    }
+
+	// Notice: no render method here - see below.
+}
+
+const contactTemplates = new Map<string, TemplateFunction>();
+
+contactTemplates.set('default', (component: any) => {
+    return html`<input name="first" placeholder="First name" value="${component.jsonData['Contact']['First']}"/>
+		<input name="middle" placeholder="Middle name" value="${component.jsonData['Contact']['Middle']}"/>
+		<input name="last" placeholder="Last name" value="${component.jsonData['Contact']['Last']}"/>`;
+});
+
+contactTemplates.set('reverse', (component: any) => {
+    return html`<input name="last" placeholder="Last name" value="${component.jsonData['Contact']['First']}"/>,
+		<input name="first" placeholder="Last name" value="${component.jsonData['Contact']['Last']}"/>
+		<input name="middle" placeholder="Middle name" value="${component.jsonData['Contact']['Middle']}"/>`
+});
+
+// template is a global variable set by the qbo4.configuration package
+templates.set('ContactComponent', contactTemplates);
+```
+
+Now you can render the `qbo-contact` web component with a `type` attribute:
+
+```html
+<!-- This will render last name, first name, middle name -->
+<qbo-contact type="reverse"></qbo-contact>
+
+<!-- This will render first name, middle name, last name -->
+<qbo-contact type="default"></qbo-contact>
+
+<!-- So will this, because we set type = 'default' in the constructor -->
+<qbo-contact></qbo-contact>
+```
+
+> Note that the template functions accept a `component` parameter, which is the instance of the `ContactComponent` class.
+Ensure you reference your component's properties via `component` rather than `this`.
+
+Mapping `type` to different rendering functions is all well and good, but not particularly interesting.
+
+The interesting part is allowing a power user to create new rendering functions (or edit existing ones) at runtime.
+
+The `QboTemplate` class will listen for a `ctrl-dblclick` event if it is contained in an element with a `qbo-design` class
+(indicating that we are in 'design' mode).
+
+When the `ctrl-dblclick` event is triggered, a dialog will open, presenting the user with something like:
+
+---
+**Edit Template**
+
+[ default &#8595; ] <- *a datalist of available templates*
+
+```html
+1 <input name="first" placeholder="First name" value="${component.jsonData.Contact.First]}"/>
+2 <input name="middle" placeholder="Middle name" value="${component.jsonData.Contact.Middle]}"/>
+3 <input name="last" placeholder="Last name" value="${component.jsonData.Contact.Last}"/>
+```
+^ *an editor for editing the rendering function*
+
+[ *Ask AI to code...* ]
+
+[ Save ] [ Cancel ]
+
+---
+
+Feature include:
+
+- As the power user modifies the template, the underlying UI will update in real-time.
+  - Any syntax errors will be trapped and displayed in the editor
+- The editor can be dragged and resized as needed
+- The `type` at the top can be selected from a `datalist`, and new types can be entered.
+- The `Ask AI to code...` input will apply Generative AI to modify the code as you describe.
+- Clicking `Save` will save the template in configuration (server-side), and be available for use.
+- Clicking `Cancel` will discard any changes, reverting to the original rendering.
+
+## How it Works
+
+Deployment of `@qbo4.Configuration` web components is paired with deployment of the `qbo4.Configuration.Web` Razor Class Library,
+which includes server-side functionality to store are retrieve template code. 
+The `QboTemplate` class will interact with the server-side `/template` endpoint to store and retrieve templates.
+
+The `QboTemplate` class will render the web component based on the `type` attribute, using the `templates` map.
+If the `type` is not found in the `templates` map, the component will `fetch` templates stored in configuration
+from the `/template/search/{ComponentClassName}` endpoint.
+
+> If a component's `Typescript` class defines a `type` that also exists in configuration, the configuration will take precedence.
+
+## Spiderman Clause
+
+With great power comes great responsibility. Only trusted user should be allowed to edit templates. 
+The ultimate control of this remains server-side with the authorization policies of the `/template` endpoints.
+For the front-end, the `QboTemplate` class will only allow editing of templates if the containing element has a `qbo-design` class.
+We recommend that the `qbo-design` class be added to the `body` for trusted power users only. 
+This will prevent accidental editing attempts of templates by regular users.
+
+As with all qbo-based configuration, enable and test in a lower environment before deploying to production.
+
+# RoadMap
+
+- add intellisense to CodeMirror for component-specific properties (including Json data)
+- shift the Editor to a separate web component
+- enable custom Editors, to simplify changes to complex controls
+- create a GUI designer that detects available web components via DI
+- propagate changes to a components `type` property to parent components
+  - if a user creates a new `type` of an address control called `streetview`, and the address control is part of a property control, save the property control such that it uses `<qbo-address type="streetview">`

package/scss/qbo-security.scss

@@ -0,0 +1,173 @@
+/*@import "../node_modules/bootstrap/dist/css/bootstrap";*/
+
+.custom-style {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: var(--qbo-font, Arial, sans-serif);
+    background-color: #f5f5f5;
+}
+
+/*form {
+    background: var(--qbo-background-color, white);
+    border: 1px solid var(--qbo-border-color, #e0e0e0);
+    padding: 2rem;
+    border-radius: var(--qbo-border-radius, 12px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    width: 100%;
+    max-width: 500px;
+}*/
+
+label {
+    display: block;
+    margin-bottom: var(--qbo-label-margin-bottom, 0.5rem);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--qbo-color, #333);
+}
+
+input {
+    display: block;
+    margin-bottom: var(--qbo-margin-vertical, 1rem);
+    width: 100%;
+    padding: var(--qbo-padding, 0.65rem 0.75rem);
+    border: 1px solid var(--qbo-border-color, #ccc);
+    border-radius: var(--qbo-border-radius, 8px);
+    font-size: 1rem;
+    transition: border-color 0.2s;
+}
+
+input:focus {
+    border-color: var(--qbo-focus-border-color, #007bff);
+    outline: none;
+    box-shadow: 0 0 0 0.2rem var(--qbo-focus-box-shadow, rgba(0, 123, 255, 0.25));
+}
+
+button {
+    width: 100%;
+    padding: var(--qbo-button-padding, 0.75rem);
+    background-color: var(--qbo-button-bg, var(--qbo-primary-bg, #007bff));
+    color: var(--qbo-button-color, var(--qbo-primary-color, #fff));
+    font-weight: bold;
+    font-size: 1rem;
+    border: 1px solid var(--qbo-button-border, var(--qbo-primary-border, #007bff));
+    border-radius: var(--qbo-button-border-radius, 8px);
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+button:hover:not(:disabled) {
+    background-color: var(--qbo-button-bg-hover, var(--qbo-primary-hover-bg, #0056b3));
+    border-color: var(--qbo-button-border-hover, var(--qbo-primary-hover-border, #004085));
+}
+
+button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.qbo-row {
+    display: flex;
+    flex-direction: row;
+/*    align-items: flex-start;
+    flex-wrap: wrap;*/
+}
+.qbo-gap-xl {
+    column-gap: 3rem;
+}
+
+.qbo-form .form-check {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem; /* space between checkbox and text */
+}
+
+.qbo-form .form-check input[type="checkbox"],
+.qbo-form .form-check input[type="radio"] {
+    width: auto;
+    margin: 0;
+}
+
+.qbo-form .form-check label {
+    margin-bottom: 0;
+    font-weight: 400;
+    color: var(--qbo-color);
+}
+
+.form-container {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    width: 100%;
+    max-width: 400px;
+    box-sizing: border-box;
+}
+
+.toggle-button {
+    margin-top: -0.75rem;
+    margin-bottom: 1rem;
+    background: none;
+    border: none;
+    color: var(--qbo-primary-bg, #007bff);
+    cursor: pointer;
+    font-size: 0.85rem;
+    padding: 0;
+    text-align: left;
+}
+
+/*.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    color: var( --qbo-nav-color, #333);
+}*/
+
+.logo {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #333;
+}
+
+.logo img {
+    height: 40px;
+    margin-right: 10px;
+}   
+
+.alert {
+    background-color: #ffefef;
+    border: 1px solid #e57373;
+    color: #b71c1c;
+    padding: 0.75rem;
+    border-radius: var(--qbo-border-radius, 6px);
+    margin-bottom: var(--qbo-margin-vertical, 1rem);
+}
+
+.success-message {
+    padding: 1rem;
+    border-radius: var(--qbo-border-radius, 8px);
+    border: 1px solid var(--qbo-success-border, #4caf50);
+    background-color: var(--qbo-success-bg, #e8f5e9);
+    color: var(--qbo-success-color, #2e7d32);
+
+    button {
+        background-color: var(--qbo-success-bg, #4caf50);
+        margin-top: 1rem;
+    }
+
+    button:hover {
+        background-color: var(--qbo-success-hover-bg, #388e3c);
+    }
+}
+
+/*.password-field {
+    position: relative;
+
+    input {
+        padding-right: 60px;
+    }
+}*/

package/src/Program.d.ts

@@ -0,0 +1,9 @@
+import 'reflect-metadata';
+export * from './qbo-login.js';
+export * from './qbo-register.js';
+export * from './qbo-password.js';
+export * from './qbo-2fa.js';
+export * from './qbo-invite.js';
+export * from './qbo-utils.js';
+export * from './qbo-navbar.js';
+export * from './qbo-form-header.js';

package/src/Program.js

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+export * from './qbo-login.js';
+export * from './qbo-register.js';
+export * from './qbo-password.js';
+export * from './qbo-2fa.js';
+export * from './qbo-invite.js';
+export * from './qbo-utils.js';
+export * from './qbo-navbar.js';
+export * from './qbo-form-header.js';
+//# sourceMappingURL=Program.js.map

package/src/Program.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Program.js","sourceRoot":"","sources":["Program.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,sBAAsB,CAAC"}

package/src/Program.ts

@@ -0,0 +1,11 @@
+import 'reflect-metadata';
+
+export * from './qbo-login.js';
+export * from './qbo-register.js';
+export * from './qbo-password.js';
+export * from './qbo-2fa.js';
+export * from './qbo-invite.js';
+export * from './qbo-utils.js';
+export * from './qbo-navbar.js';
+
+export * from './qbo-form-header.js';

package/src/qbo-2fa.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+export declare class QboTwoFactor extends LitElement {
+    static styles: import("lit").CSSResult;
+    isPhoneChange: boolean;
+    isPhoneAdd: boolean;
+    isEmailConfirmation: boolean;
+    private email;
+    private phoneNumber;
+    private authenticator;
+    private authenticatorContent;
+    private code;
+    private provider;
+    private status;
+    private statusType;
+    private isResetAuthenticator;
+    private isCodeSent;
+    private isAuthenticatorSetup;
+    private skippedAuthenticatorEnrollment;
+    private isSignedIn2FA;
+    private handleSendCode;
+    private handleSignIn2FA;
+    private handlePhoneAdd;
+    private handlePhoneAddVerify;
+    private handleChangePhone;
+    private handleVerifyEmail;
+    private handleResendConfirmationEmail;
+    private handleVerifyPhone;
+    private handleAuthenticatorEnrollment;
+    private handleAuthenticatorEnrollmentVerify;
+    private handleResendCode;
+    private switchToPhoneChange;
+    private startAuthenticatorEnrollment;
+    private renderEnrollAuthenticator;
+    private renderEmailVerify;
+    private renderPhoneAdd;
+    private renderPhoneChange;
+    private renderPostSignInOptions;
+    private render2FASignIn;
+    render(): import("lit-html").TemplateResult<1>;
+}