@wral/studio.mods.auth 1.0.1 → 2.0.0

package/vellum/layout.mjs

@@ -0,0 +1,85 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * The main (default) layout for the application consists of 3 elements:
+ * - Menu: a navigation toolbar that exposes apps and other high-level tools
+ * - Main: the main workspace of the application
+ * - Task: an optional small task panel for detail-oriented user interaction
+ */
+export class MenuMainTaskLayout extends LitElement {
+	
+	static get styles() {
+		return css`
+		.container {
+			display: flex;
+			flex-direction: row;
+			min-height: 100vh;
+			width: 100%;
+			background-color: var(--color-gray-50);
+		}
+		#menu {
+			display: flex;
+			flex-direction: column;
+			width: 250px;
+			background-color: var(--color-gray-100);
+			padding: var(--spacing-md, 0.5rem);
+			gap: var(--spacing-lg, 0.5rem);
+		}
+		#menu .toolbar {
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-md);
+			flex-grow: 1;
+		}
+		#main {
+			flex-grow: 1;
+			padding: var(--spacing-lg, 0.5rem);
+		}
+		#task {
+			background-color: var(--color-gray-100);
+			box-shadow: var(--drop-shadow-md);
+		}
+		#task :slotted(*) {
+			padding: var(--spacing-lg, 0.5rem);
+		}
+	`;
+	}
+
+	render() {
+		return html`
+			<div class="container">
+			<nav id="menu">
+				<div class="profile">👤</div>
+				<div class="toolbar">
+					<slot name="menu"></slot>
+				</div>
+			</nav>
+			<main id="main">
+				<slot name="main"></slot>
+			</main>
+			<aside id="task">
+				<slot name="task"></slot>
+			</aside>
+			</div>
+		`;
+	}
+}
+
+export function init(toolkit) {
+	const name = 'menu-main-task'; // layout name - should be unique to app
+	customElements.define('menu-main-task-layout', MenuMainTaskLayout);
+	const templateFn = () =>
+		html`<menu-main-task-layout></menu-main-task-layout>`;
+	
+	// Register this layout with the layout manager
+	toolkit.dispatchAction({
+		type: 'layout:register',
+		detail: { name, templateFn },
+	});
+
+	// Push this layout to the top of the display stack
+	toolkit.dispatchAction({
+		type: 'layout:push',
+		detail: { name },
+	});
+}

package/vellum/mod-setup.mjs

@@ -0,0 +1,22 @@
+import {
+	init as initLayoutManager,
+} from  '@thefarce/vellum.mods.managers.layouts.simple-web-component';
+import {
+	init as initLayout,
+} from './layout.mjs';
+import {
+	init as initAppManager,
+} from './app-manager.mjs';
+
+/*
+ * This module is the bootstrapping Vellum Mod for ths Studio App.
+ * It is responsible for setting up the Application with the basic action
+ * management and layout.
+ */
+export async function init(toolkit, mod) {
+	console.log("calling setup init");
+	await initLayoutManager(toolkit, mod);
+	await initLayout(toolkit, mod);
+	await initAppManager(toolkit, mod);
+	console.log("called setup init");
+}

package/vellum/render.mjs

@@ -0,0 +1,21 @@
+import { render as renderLit } from 'lit';
+
+/**
+ * Given some content, and a containing DOM element, render
+ * the content into the container.
+ * @param {string|Node|TemplateResult} content
+ * @param {HTMLElement} container
+ * @return void - manipulates container as a side-effect
+ */
+export function render(content, container) {
+	if (typeof content === 'string') {
+		// dangerously set the innerHTML of the container
+		container.innerHTML = content;
+	} else if (content instanceof Node) {
+		// remove all child nodes and replace with the new content
+		while (container.firstChild) container.removeChild(container.firstChild);
+		container.appendChild(content);
+	} else {
+		renderLit(content, container); // assume Lit TemplateResult
+	}
+}

package/vellum/themes/default/index.css

@@ -0,0 +1,89 @@
+:root {
+	--spacing-sm: 0.5rem;
+	--spacing-md: 1rem;
+	--spacing-lg: 2rem;
+	--spacing-xl: 3rem;
+
+	--radius-sm: 5px;
+	--radius-md: 8px;
+	--radius-lg: 10px;
+	--radius-full: 50%;
+	--radius-dynamic: clamp(var(--radius-sm), 1vw, var(--radius-lg));
+
+	--color-primary           : #001D68;
+	--color-primary-light     : #193377;
+	--color-primary-dark      : #00144A;
+	--color-secondary         : #2594E3;
+	--color-secondary-light   : #46A4E7;
+	--color-secondary-light-1 : #c3d6e3;
+	--color-secondary-dark    : #1D76B5;
+	--color-error             : var(--color-red-dark);
+	--color-red               : #D1232A;
+	--color-red-light         : #FF2B32;
+	--color-red-dark          : #D1232A;
+	--color-yellow            : #FFEC19;
+	--color-yellow-light      : #FFF15E;
+	--color-yellow-dark       : #E5D416;
+	--color-green             : #72B509;
+	--color-green-light       : #8EC33A;
+	--color-green-dark        : #66A208;
+	--color-purple            : #33109C;
+	--color-purple-light      : #4727A5;
+	--color-purple-dark       : #280C7C;
+	--color-orange            : #FF9505;
+	--color-orange-light      : #FFA21F;
+	--color-orange-dark       : #F58F00;
+	--color-white             : #FFFFFF;
+	--color-black             : #030711;
+
+	/* Adjust these colors in the dark theme as well */
+	--color-gray-50           : #F7F5F4; /* lightest */
+	--color-gray-100          : #E7E5E4;
+	--color-gray-200          : #D7D4D2;
+	--color-gray-300          : #7C7C7C;
+	--color-gray-400          : #6C6C6C;
+	--color-gray-500          : #565454;
+	--color-gray-600          : #424242;
+	--color-gray-700          : #263238;
+	--color-gray-800          : #1C2321; /* darkest */
+	--color-gray-900          : #1C2321; /* darkest */
+	--color-gray-950          : #1C2321; /* darkest */
+
+	--drop-shadow-md: 0 0 10px var(--color-gray-200);
+	--text-color: var(--color-gray-800);
+	--text-color-light: var(--color-gray-700);
+
+	--font-heading: Inter, sans-serif;
+	--font-body: Inter, sans-serif;
+}
+
+/**
+ * Dark Theme
+ */
+@media (prefers-color-scheme: dark) {
+	:root {
+		/* Invert grayscales */
+		--color-gray-950: #F7F5F4;
+		--color-gray-900: #E7E5E4;
+		--color-gray-800: #D7D4D2;
+		--color-gray-700: #7C7C7C;
+		--color-gray-600: #6C6C6C;
+		--color-gray-500: #565454;
+		--color-gray-400: #424242;
+		--color-gray-300: #263238;
+		--color-gray-200: #1C2321;
+		--color-gray-100: #1C2321;
+		--color-gray-50:  #111111;
+
+		--color-primary: var(--color-primary-light);
+		--color-error: var(--color-red-light);
+	}
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--color-gray-1);
+	color: var(--text-color);
+	font-family: var(--font-body);
+}

package/src/auth.mjs

@@ -1,208 +0,0 @@
-import { imply } from './utils.mjs';
-import { loginLayout } from './login-layout.mjs';
-import { html } from 'lit';
-import { shouldRefreshToken } from './token.mjs';
-import { pathnameToState } from './state.mjs';
-import { createClient } from '@wral/sdk-auth';
-import './components/auth-app.mjs';
-
-export function makeAuth(config) {
-	const auth = {
-		config,
-		log: (...args) => console.log('[auth]', ...args),
-	};
-	auth.mount = imply(mount, auth);
-	auth.handleTokenRequest = tokenRequestHandler(auth);
-	auth.handleDestroyAuth = loginDestroyHandler(auth);
-	auth.presentLoginForm = imply(presentLoginForm, auth);
-	auth.getToken = imply(getToken, auth);
-	auth.saveToken = imply(saveToken, auth);
-	auth.getFreshToken = imply(getFreshToken, auth);
-	auth.requestRender = (state) => renderApp(auth, state);
-
-	return auth;
-}
-
-/**
- * Call mount when initializing the mod for the first time.
- * It registers handlers with the vellum toolkit.
- * @param {Object} auth
- */
-export function mount(auth) {
-	const windowElem = auth.config.toolkit.element.ownerDocument.defaultView;
-	[{
-		type: 'action:register',
-		detail: {
-			actionType: 'auth:requestToken',
-			handler: auth.handleTokenRequest,
-			modName: 'auth',
-		},
-	},
-	{
-		type: 'action:register',
-		detail: {
-			actionType: 'auth:destroy',
-			handler: auth.handleDestroyAuth,
-			modName: 'auth',
-		},
-	},
-	{
-		type: 'layout:register',
-		detail: {
-			name: 'auth:login',
-			slots: ['main'],
-			templateFn: loginLayout(auth),
-		},
-	}].forEach(action => auth.config.toolkit.dispatchAction(action));
-	windowElem.addEventListener('popstate', historyStateHandler(auth));
-}
-
-export function renderApp(auth, state) {
-	const windowElem = auth.config.toolkit.element.ownerDocument.defaultView;
-	let appState = state;
-	if (!appState) {
-		appState = pathnameToState(auth, windowElem.location.pathname);
-	}
-	if (!appState) {
-		return; // nothing to do
-	}
-	auth.config.toolkit.dispatchAction({
-		type: 'layout:slot:replace',
-		detail: {
-			layout: 'menu-main-task-layout',
-			slot: 'main',
-			content: html`<auth-app .state=${appState} .auth=${auth}></auth-app>`,
-		},
-	});
-}
-
-/**
- * Returns an event handler for window.onpopstate.
- * @param {Object} auth
- * @returns {Function}
- */
-export function historyStateHandler(auth) {
-	return (event) => {
-		auth.log('onpopstate', event);
-		renderApp(auth);
-	};
-}
-
-/**
- * Generate a handler for token requests.
- * This handler should attempt to resolve to a fresh token, or reject.
- * If the currently held token is not fresh, the handler should present the
- * login form to the user.
- * @param {Object} auth
- * @returns {Function}
- */
-export function tokenRequestHandler(auth) {
-	let callbacks = [];
-	let isLoginPresent = false;
-
-	const onLogin = token => {
-		callbacks.forEach(callback => {
-			callback(token);
-		});
-		callbacks = [];
-	};
-
-	return async ({ callback }) => {
-		let token;
-		try {
-			token = await auth.getFreshToken();
-			callback(token);
-		} catch (err) {
-			callbacks.push(callback);
-			if (!isLoginPresent) {
-				auth.presentLoginForm({ onLogin });
-				isLoginPresent = true;
-			}
-			auth.log(err);
-		}
-	};
-}
-
-export function loginDestroyHandler(auth) {
-	return () => {
-		const storageKey = getTokenStorageKey(auth);
-		window.localStorage.removeItem(storageKey);
-		auth.config.toolkit.dispatchAction({
-			type: 'layout:pop',
-		});
-	};
-}
-
-/**
- * Present the login form to the user.
- * This also handles the dismissal of the login form.
- * @param {Object} auth
- * @param {Function} onLogin
- */
-export function presentLoginForm(auth, { onLogin }) {
-	const { toolkit } = auth.config;
-	const urlParams = new URLSearchParams(
-		toolkit.element.ownerDocument.defaultView.location.search);
-	const passwordResetConfirmation = urlParams.get('password_reset_confirmation');
-
-	// After the login form is dismissed, restore the previous layout
-	const dismiss = (event) => {
-		auth.log('login success', { event });
-		const { token } = event.detail;
-		auth.log('Login form dismissed', { args: [token] });
-		toolkit.dispatchAction({
-			type: 'layout:pop',
-		});
-		auth.saveToken({token});
-		onLogin({ token });
-	};
-
-	toolkit.dispatchAction({
-		type: 'layout:push',
-		detail: {
-			layout: 'auth:login',
-		},
-	});
-	toolkit.dispatchAction({
-		type: 'layout:slot:push',
-		detail: {
-			layout: 'auth:login',
-			slot: 'main',
-			content: html`<auth-login-form
-				api=${auth.config.api}
-				confirmation="${passwordResetConfirmation}"
-				@login-success=${dismiss}>
-			</auth-login-form>`,
-		},
-	});
-}
-
-export function saveToken(auth, { token }) {
-	auth.log('saving token', { args: [token] });
-	const key = getTokenStorageKey(auth);
-	window.localStorage.setItem(key, token);
-}
-
-export function getToken(auth) {
-	const key = getTokenStorageKey(auth);
-	return window.localStorage.getItem(key);
-}
-
-export async function getFreshToken(auth) {
-	const token = getToken(auth);
-	if (!token || token.length < 1) {
-		throw new Error('No token found');
-	}
-	if (shouldRefreshToken(token)) {
-		auth.log('refreshing token', { args: [token] });
-		const client = createClient({
-			baseUrl: auth.config.api,
-		});
-		return await client.refreshToken({ token }).then(({ token }) => token);
-	}
-	return token;
-}
-
-export function getTokenStorageKey({ storageKey='token' }) {
-	return storageKey;
-}

package/src/auth.test.mjs

@@ -1,97 +0,0 @@
-import {
-	makeAuth,
-	tokenRequestHandler,
-} from './auth.mjs';
-import { JSDOM } from 'jsdom';
-import { jest } from '@jest/globals';
-
-function mockToolkit() {
-	const dom = new JSDOM(`<!DOCTYPE html><body><studio-app>
-		<studio-mod id="mod-auth"></studio-mod>
-	</studio-app></body>`);
-	return {
-		element: dom.window.document.querySelector('studio-app'),
-		mod: {
-			element: dom.window.document.querySelector('#mod-auth'),
-		},
-		dispatchAction: jest.fn(),
-	};
-}
-
-describe('auth mod', () => {
-
-	describe('makeAuth', () => {
-
-		test('should return an object with method-like properties', () => {
-			const mod = makeAuth({
-				toolkit: mockToolkit(),
-			});
-			expect(mod).toHaveProperty('mount');
-			expect(mod).toHaveProperty('handleTokenRequest');
-			expect(mod).toHaveProperty('handleDestroyAuth');
-			expect(mod).toHaveProperty('presentLoginForm');
-			expect(mod).toHaveProperty('getToken');
-			expect(mod).toHaveProperty('saveToken');
-			expect(mod).toHaveProperty('getFreshToken');
-			expect(mod).toHaveProperty('requestRender');
-		});
-
-	});
-
-	describe('mount', () => {
-		test('registers action handlers and layout', () => {
-			const mod = makeAuth({
-				toolkit: mockToolkit(),
-			});
-			mod.mount();
-			expect(mod.config.toolkit.dispatchAction).toHaveBeenCalledWith({
-				type: 'action:register',
-				detail: {
-					actionType: 'auth:requestToken',
-					handler: expect.any(Function),
-					modName: 'auth',
-				},
-			});
-			expect(mod.config.toolkit.dispatchAction).toHaveBeenCalledWith({
-				type: 'action:register',
-				detail: {
-					actionType: 'auth:destroy',
-					handler: expect.any(Function),
-					modName: 'auth',
-				},
-			});
-			expect(mod.config.toolkit.dispatchAction).toHaveBeenCalledWith({
-				type: 'layout:register',
-				detail: {
-					name: 'auth:login',
-					slots: ['main'],
-					templateFn: expect.any(Function),
-				},
-			});
-		});
-	});
-
-	describe('tokenRequestHandler', () => {
-		test('returns a handler that resolves to a fresh token', async () => {
-			const handler = tokenRequestHandler({
-				getFreshToken: jest.fn(async () => 'token'),
-			});
-			const callback = jest.fn();
-			await handler({ callback });
-			expect(callback).toHaveBeenCalledWith('token');
-		});
-		test('presents login form if getFreshToken fails', async () => {
-			const presentLoginForm = jest.fn();
-			const handler = tokenRequestHandler({
-				log: jest.fn(),
-				getFreshToken: jest.fn().mockRejectedValue(new Error('fail')),
-				presentLoginForm,
-			});
-			const callback = jest.fn();
-			await handler({ callback });
-			expect(callback).not.toHaveBeenCalled();
-			expect(presentLoginForm).toHaveBeenCalled();
-		});
-	});
-
-});

package/src/components/auth-app.mjs

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-import { renderRoute } from '../routes/index.mjs';
-import appStyles from '../styles.mjs';
-
-class AuthApp extends LitElement {
-	static get styles() {
-		return [appStyles];
-	}
-	static get properties() {
-		return {
-			state: { type: Object },
-			auth: { type: Object },
-		};
-	}
-
-	render() {
-		const { state, auth } = this;
-		return renderRoute(state, auth);
-	}
-}
-
-export default AuthApp;
-
-if (!customElements.get('auth-app')) {
-	customElements.define('auth-app', AuthApp);
-}

package/src/config.mjs

@@ -1,27 +0,0 @@
-/**
- * Gets configuration for the Auth Mod from the attributes
- * of the mod element (in DOM).
- * @param {VellumToolkit} toolkit
- * @returns {Object}
- */
-export function getConfig(toolkit, mod) {
-	const modElement = mod.element;
-	const attrs = modElement.attributes;
-	console.log(attrs);
-	return {
-		api: attrs.api.value || requiredConfig('auth:api is required'),
-		forceLogin: attrs['force-login'] !== undefined, // TODO: handle false
-		storageKey: attrs['storage-key']?.value,
-		mount: attrs['path']?.value || '/auth',
-		toolkit,
-	};
-}
-
-/**
- * Helper for required config elements
- * This defines what to do when a required config is missing
- * @param {string} message
- */
-function requiredConfig(message) {
-	throw new Error(message);
-}

package/src/login-layout.mjs

@@ -1,32 +0,0 @@
-import { html, css } from 'lit';
-import './components/login-form.mjs';
-
-/**
- * Generate a login layout
- */
-export function loginLayout() {
-	return function(slots) {
-		const styles = css`
-			.login-layout {
-				display: flex;
-				flex-direction: column;
-				gap: 1rem;
-				justify-content: center;
-				align-items: center;
-				min-height: 100vh;
-				background-color: var(--color-gray-100, #f5f5f5);
-			}
-			.login-layout > * {
-				max-width: 400px;
-			}
-		`;
-		return html`
-			<style>${styles}</style>
-			<div class="login-layout">
-				${slots.main}
-			</div>
-		`;
-	};
-}
-
-export default loginLayout();

package/src/login.mjs

@@ -1,20 +0,0 @@
-import { createClient } from '@wral/sdk-auth';
-/**
- * Makes an API call to login, and resolves to a promise OR
- * rejects with an error or additional authentication challenges.
- * @param {Object} auth
- * @param {string} config.api base url of the api (without /v1)
- * @param {Object} params
- * @param {string} params.username user string
- * @param {string} params.password password string
- * @returns {Promise} resolves to a token
- */
-export function login({api}, credentials) {
-	const client = createClient({
-		baseUrl: api,
-	});
-	console.log('sending credentials to API', api);
-	return client.mintToken(credentials);
-}
-
-export default login;