@wral/studio.mods.auth 0.3.7 → 1.0.0

package/src/helper.test.mjs

@@ -0,0 +1,44 @@
+import * as helper from './helper.mjs';
+import { jest } from '@jest/globals';
+
+describe('auth mod helper', () => {
+
+	describe('exports', () => {
+		it('exports a getToken function', () => {
+			expect(typeof helper.getToken).toBe('function');
+		});
+	});
+
+	describe('getToken', () => {
+		it('returns a promise', () => {
+			const result = helper.getToken({dispatchEvent: jest.fn()});
+			expect(result).toBeInstanceOf(Promise);
+		});
+		it('throws if not called with a DOM element', async () => {
+			await expect(() => helper.getToken()).rejects.toThrow();
+		});
+		it('dispatches an event with a callback', async () => {
+			const myElem = {
+				dispatchEvent: jest.fn(),
+			};
+			const promise = helper.getToken(myElem);
+			expect(myElem.dispatchEvent).toHaveBeenCalledWith(
+				new CustomEvent('harness:action', {
+					detail: {
+						type: 'auth:requestToken',
+						detail: {
+							callback: expect.any(Function),
+						},
+					},
+					bubbles: true,
+					composed: true,
+					cancelable: true,
+				}),
+			);
+			const callback = myElem.dispatchEvent.mock.calls[0][0].detail.detail.callback;
+			callback('token');
+			expect(await promise).toBe('token');
+		});
+	});
+
+});

package/src/index.mjs

@@ -0,0 +1,17 @@
+import { getToken as getTokenHelper } from './helper.mjs';
+import { getConfig } from './config.mjs';
+import { makeAuth } from './auth.mjs';
+
+export function init(toolkit, mod) {
+	const config = getConfig(toolkit, mod);
+	const auth = makeAuth(config);
+	auth.mount();
+	auth.requestRender(); // initial render
+
+	/* If we'd like to force a login immediately, request the token. */
+	if (config.forceLogin) {
+		getTokenHelper(toolkit.element).then((token) => {
+			auth.log('You have logged in successfully!', token);
+		});
+	}
+}

package/src/login-layout.mjs

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,20 @@
+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;

package/src/routes/change-password.mjs

@@ -0,0 +1,158 @@
+import { LitElement, html, css } from 'lit';
+import { getToken } from '../helper.mjs';
+import { createClient } from '@wral/sdk-auth';
+
+export function render(state, auth) {
+	return html`
+		<auth-change-password-form .auth=${auth}></auth-change-password-form>
+	`;
+}
+
+class ChangePasswordForm extends LitElement {
+
+	static get styles() {
+		return css`
+			:host {
+				color: var(--color-text);
+				display: block;
+				font-family: var(--font-body);
+			}
+			h1,h2,h3,h4,h5,h6,label { font-family: var(--font-heading) }
+			label {
+				display: block;
+				font-size: var(--font-size-base);
+				margin-top: var(--spacing-md, 0.5rem);
+			}
+			input[type="text"],
+			input[type="password"] {
+				width: 100%;
+				margin: 5px 0 15px 0;
+				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+				box-sizing: border-box;
+				border: 1px solid var(--color-gray-300, #ccc);
+				border-radius: var(--radius-sm, 5px);
+				color: var(--color-gray-9, #333);
+				background-color: var(--color-gray-0, transparent);
+			}
+			input[type="submit"] {
+				background-color: var(--color-primary, inherit);
+				color: var(--color-gray-0, #fff);
+				border: none;
+				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+				border-radius: var(--radius-dynamic, 5px);
+				width: 200px;
+				cursor: pointer;
+			}
+			.error {
+				color: var(--color-error);
+			}
+		`;
+	}
+
+	static get properties() {
+		return {
+			auth: { type: Object },
+		};
+	}
+
+	constructor() {
+		super();
+		this.errors = {};
+		this.success = null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		// discard result, we're only interested in the side-effect of being logged in
+		getToken(this);
+	}
+
+	async onSubmit(e) {
+		e.preventDefault();
+
+		// Ensure passwords match
+		if (e.target.newPassword.value !== e.target.confirmPassword.value) {
+			this.errors['confirmPassword'] = 'Passwords do not match';
+			this.requestUpdate();
+			return;
+		}
+
+		// Check that new password is actually different
+		if (e.target.newPassword.value === e.target.currentPassword.value) {
+			this.errors['newPassword'] = 'The new password is the same as your '
+			+ 'current password.';
+			this.requestUpdate();
+			return;
+		}
+
+		const apiKey = await getToken(this);
+
+		// TODO: send request to API
+		const authClient = createClient({
+			baseUrl: this.auth.config.api,
+			apiKey,
+		});
+		await authClient.updatePassword({
+			currentPassword: e.target.currentPassword.value,
+			newPassword: e.target.newPassword.value,
+		}).then(() => {
+			this.errors = {};
+			this.success = 'Password changed.';
+			this.requestUpdate();
+		}).catch((error) => {
+			this.errors['submit'] = error.message;
+			this.requestUpdate();
+		});
+	}
+
+	render() {
+		return html`
+			<h1>Change your password</h1>
+			<p>Enter your current password and choose a new password.</p>
+			<form @submit=${this.onSubmit}>
+				<div class="field">
+					<label for="currentPassword">Current Password</label>
+					<input
+						type="password"
+						name="currentPassword"
+						placeholder="Current Password"
+						required
+					/>
+					${this.errors['currentPassword'] 
+		? html`<p class="error">${this.errors['currentPassword']}</p>` : ''}
+				</div>
+				<div class="field">
+					<label for="newPassword">New Password</label>
+					<input
+						type="password"
+						name="newPassword"
+						placeholder="New Password"
+						required
+					/>
+					${this.errors['newPassword']
+		? html`<p class="error">${this.errors['newPassword']}</p>` : ''}
+				</div>
+				<div class="field">
+					<label for="confirmPassword">Confirm Password</label>
+					<input
+						type="password"
+						name="confirmPassword"
+						placeholder="Confirm Password"
+						required
+					/>
+					${this.errors['confirmPassword']
+		? html`<p class="error">${this.errors['confirmPassword']}</p>` : ''}
+				</div>
+				<input type="submit" value="Change Password" />
+				${this.errors['submit']
+		? html`<p class="error">${this.errors['submit']}</p>` : ''}
+				${this.success ? html`<p class="success">${this.success}</p>` : ''}
+			</form>
+		`;
+	}
+
+}
+
+if (!customElements.get('auth-change-password-form')) {
+	customElements.define('auth-change-password-form', ChangePasswordForm);
+}

package/src/routes/dashboard.mjs

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import { pushState } from '../state.mjs';
+
+
+export function render(state, auth) {
+	const { history } = auth.config.toolkit.element.ownerDocument.defaultView;
+	const navigateTo = (path, title) => () => {
+		pushState(auth, history, { path, title });
+	};
+	return html`
+	<h1>Auth Dashboard</h1>
+	<ul>
+	<li><a href="#" @click=${navigateTo('/change-password')}>Change Password</a></li>
+	<li><a href="#" @click=${auth.handleDestroyAuth}>Logout</a></li>
+	</ul>
+	`;
+}

package/src/routes/index.mjs

@@ -0,0 +1,15 @@
+import * as dashboard from './dashboard.mjs';
+import * as changePassword from './change-password.mjs';
+
+export const routes = [
+	{ path: '/', render: dashboard.render },
+	{ path: '/change-password', render: changePassword.render },
+];
+
+export function renderRoute(state, auth) {
+	const { path } = state;
+	const route = routes.find((r) => r.path === path);
+	if (route) {
+		return route.render(state, auth);
+	}
+}

package/src/state.mjs

@@ -0,0 +1,61 @@
+/**
+ * Ensure pathname has a consistent format, with a leading slash, and no
+ * trailing slash.  This lets the application be more tolerant of input.
+ * @param {string} pathname
+ * @returns {string}
+ */
+export function coercePathname(pathname) {
+	return (pathname.startsWith('/') ? pathname : `/${pathname}`) // ensure leading slash
+		.replace(/\/{2,}/g, '/') // remove consecutive slashes
+		.replace(/(?<=.)\/$/, ''); // remove trailing slash (not at beginning)
+}
+
+/**
+ * Push a new state to the history (presumably window.history).
+ * After the application changes state, call pushState to enable this history
+ * to be tracked.
+ *
+ * To take advantage of the forward and back button behavior, be sure to handle
+ * window.onpopstate events.
+ * @param {Object} auth
+ * @param {History} history
+ * @param {Object} state
+ * @returns {void}
+ */
+export function pushState(auth, history, state) {
+	const pathname = stateToPathname(auth, state);
+	history.pushState(state, state.title, pathname);
+	auth.requestRender(state);
+}
+
+/**
+ * Produce a state object from a pathname
+ * @param {Object} auth
+ * @param {string} pathname
+ * @returns {Object}
+ */
+export function pathnameToState(auth, pathname) {
+	const { mount } = auth.config;
+	const { history } = auth.config.toolkit.element.ownerDocument.defaultView;
+
+	// no state if pathname is not prefixed with mount
+	if (!pathname.startsWith(mount)) {
+		return null;
+	}
+	// remove mount from pathname
+	return {
+		path: coercePathname(pathname.slice(mount.length)),
+		push: (state) => pushState(auth, history, state),
+	};
+}
+
+/**
+ * Produce a pathname from a state object
+ * @param {Object} auth
+ * @param {Object} state
+ * @returns {string}
+ */
+export function stateToPathname(auth, state) {
+	const { mount } = auth.config;
+	return coercePathname(`${mount}/${state.path}`);
+}

package/src/state.test.mjs

@@ -0,0 +1,58 @@
+import {
+	coercePathname,
+	pushState,
+	pathnameToState,
+} from './state.mjs';
+import { jest } from '@jest/globals';
+
+describe('state', () => {
+	
+	describe('coercePathname', () => {
+		// input, expected 
+		const cases = [
+			['', '/'],
+			['//', '/'],
+			['auth', '/auth'],
+			['foo/bar', '/foo/bar'],
+			['foo//bar', '/foo/bar'],
+			['foo//bar/', '/foo/bar'],
+		];
+		cases.forEach(([input, expected]) => {
+			it(`should coerce ${input} to ${expected}`, () => {
+				expect(coercePathname(input)).toBe(expected);
+			});
+		});
+	});
+
+	describe('pushState', () => {
+		it('pushes a state object to history', () => {
+			const history = {
+				pushState: jest.fn(),
+			};
+			const auth = {
+				requestRender: jest.fn(),
+				config: { mount: 'foo' },
+			};
+			const newState = {
+				title: 'Some Title',
+				path: 'bar',
+			};
+			pushState(auth, history, newState);
+			expect(history.pushState)
+				.toHaveBeenCalledWith(newState, newState.title, '/foo/bar');
+		});
+	});
+
+	describe.skip('pathnameToState', () => {
+		// TODO: refactor to not expect auth.config.toolkit.element.ownerDocument.defaultView
+		it('produces a state object from a pathname', () => {
+			const auth = {
+				config: { mount: 'foo' },
+			};
+			const pathname = '/foo/bar';
+			expect(pathnameToState(auth, pathname)).toEqual({
+				path: 'bar',
+			});
+		});
+	});
+});

package/src/styles.mjs

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+
+export const styles = css`
+	:host {
+
+	}
+`;
+
+export default styles;

package/src/token.mjs

@@ -0,0 +1,40 @@
+
+/**
+ * Decodes a JWT (JSON Web Token) to extract its payload as an object.
+ * 
+ * @param {string} token - The JWT to decode.
+ * @returns {Object} The decoded payload of the token.
+ * 
+ * @example
+ * // Decode a sample JWT
+ * const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9'
+ * + '.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2M'
+ * + 'jM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
+ * const payload = decodeToken(token);
+ * console.log('Decoded Payload:', payload);
+ */
+export function decodeToken(token) {
+	return JSON.parse(window.atob(token.split('.')[1]
+		.replace(/-/g, '+').replace(/_/g, '/')));
+}
+
+/**
+ * Determines if the token needs to be refreshed based on its expiry time.
+ * 
+ * @param {string} token - The authentication token to check.
+ * @param {number} [offset=300] - The offset in milliseconds to consider
+ *                                for refreshing before actual expiry.
+ * @param {number} [now=Date.now()] - The current timestamp, primarily used 
+ *                                    for testing.
+ * @returns {boolean} True if the token needs to be refreshed, false otherwise.
+ * 
+ * @example
+ * // Check if token needs to be refreshed
+ * const tokenNeedsRefresh = shouldRefreshToken('someToken', 300);
+ * console.log('Token needs refresh:', tokenNeedsRefresh);
+ */
+export function shouldRefreshToken(token, offset = 300, now = Date.now()) {
+	const decoded = decodeToken(token);
+	return decoded.exp * 1000 - offset < now;
+}
+

package/src/utils.mjs

@@ -0,0 +1,3 @@
+export function imply(fn, ...implied) {
+	return (...args) => fn(...implied, ...args);
+}

package/vellum-fixture.mjs

@@ -0,0 +1,86 @@
+/**
+ * This is a Vellum fixture application that resembles an environment that would
+ * use this Auth mod.
+ */
+import {
+	VellumHarness,
+	VellumModLoader,
+	initLayoutManager,
+	initThemeManager,
+} from '@thefarce/vellum';
+import { html, css } from 'lit';
+
+export function init(...args) {
+	initLayoutManager(...args);
+	initThemeManager(...args);
+	const [ toolkit ] = args;
+	toolkit.dispatchAction({
+		type: 'layout:register',
+		detail: {
+			name: 'menu-main-task-layout',
+			slots: ['menu','main','task'],
+			templateFn: layoutTemplate,
+		},
+	});
+	toolkit.dispatchAction({
+		type: 'layout:push',
+		detail: { layout: 'menu-main-task-layout' },
+	});
+}
+
+
+/* Define some core web components */
+Object.entries({
+	'studio-app': VellumHarness,
+	'studio-mod': VellumModLoader,
+}).forEach(([name, webComponent]) => {
+	if (!customElements.get(name)) {
+		customElements.define(name, webComponent);
+	}
+});
+
+function layoutTemplate(slots) {
+	const styles = css`
+		.menu-main-task-layout {
+			display: flex;
+			height: 100vh;
+		}
+		.menu-main-task-layout > .toolbar-slot {
+			position: fixed;
+			width: var(--menu-width, 200px);
+			background-color: var(--color-gray-100, #f7f5f4);
+			height: 100vh;
+			box-sizing: border-box;
+			padding: var(--spacing-md, 1rem);
+		}
+		.menu-main-task-layout > .main-slot {
+			background-color: var(--color-gray-0, #fff);
+			flex-grow: 1;
+			margin-left: var(--menu-width, 250px);
+			padding: var(--spacing-lg, 2rem);
+		}
+		.menu-main-task-layout > .task-slot {
+			padding: var(--spacing-lg, 2rem);
+			box-sizing: border-box;
+			background-color: var(--color-gray-100, #f7f5f4);
+		}
+	`;
+	return html`
+		<style>${styles}</style>
+		<div class="menu-main-task-layout">
+			<aside class="toolbar-slot">
+				<p>Application Menu</p>
+				${slots.menu && slots.menu.length > 0
+				? slots.menu.map(item => item)
+				: html``}
+			</aside>
+			<main class="main-slot">
+				${slots.main && slots.main.length > 0
+				? slots.main.map(item => item)
+				: html``}
+			</main>
+			${slots.task && slots.task.length > 0
+			? html`<div class="task-slot">${slots.task.map(item => item)}</div>`
+			: html``}
+		</div>`;
+}

package/vite.config.mjs

@@ -0,0 +1,12 @@
+export default {
+	build: {
+		lib: {
+			entry: {
+				'auth': 'src/auth.mjs',
+				'lib': 'src/helper.mjs',
+			},
+			formats: ['es', 'cjs'],
+			fileName: (format) => `[name].${format}.js`,
+		},
+	},
+}

package/components.html

@@ -1,43 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Components</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="robots" content="noindex, nofollow">
-    <script type="module" src="./src/components/studio-login.mjs"></script>
-    <script type="module" src="./src/components/studio-reset-password.mjs"></script>
-    <script type="module" src="./src/components/studio-change-password.mjs"></script>
-    <!-- Load studio-app from CDN -->
-  </head>
-  <body>
-    <h1>Studio Auth Mod</h1>
-    <h2>Web Components</h2>
-    <div>
-      <h3>studio-login</h3>
-      <p>This represents a login form that uses the WRAL Auth API.</p>
-
-      <studio-login id="login"></studio-login>
-      <script>
-        const loginForm = document.querySelector('#login');
-        loginForm.addEventListener('login-attempt', console.log);
-      </script>
-
-    </div>
-    <div>
-      <h3>studio-reset-password</h3>
-      <p>This component provides an interface for requesting a password reset.</p>
-      <studio-reset-password></studio-reset-password>
-
-      <p>It can also be triggered with an existing confirmation code</p>
-      <studio-reset-password triggered confirmationCode="123456"
-      hideConfirmationCode></studio-reset-password>
-    </div>
-
-    <div>
-      <h3>studio-change-password</h3>
-      <p>This component provides an interface for requesting a password change.</p>
-      <studio-change-password></studio-change-password>
-    </div>
-  </body>
-</html>

package/development.md

@@ -1,41 +0,0 @@
-# Development Notes
-
-## Messages
-
-This mod communicates with other mods in by publishing and subscribing to
-events.
-
-### Requesting an Auth Token
-
-Mods can request an auth token by publishing a `token-request` event with a
-callback.  The callback will be invoked with the token or an error if the
-request fails.
-
-#### Example
-
-```js
-studio.pub('studio.wral::mod-auth', 'token-request', {
-    callback: (token, error) => {
-        if (error) {
-            console.error(error);
-        } else {
-            console.log(token);
-        }
-    },
-});
-```
-
-## Publications
-
-This mod publishes events for other mods to respond to.
-
-### Present login form
-
-This mod publishes `system:auth::present-login-form` with the HTML for the login
-form.
-
-```js
-studio.pub('system:auth', 'present-login-form');
-```
-
-This mod registers the `<login-form>` web component.