@wral/studio.mods.auth 1.0.1 → 2.0.1

package/src/{components/login-form.mjs → login-form.mjs}

@@ -1,19 +1,9 @@
-/**
- * This login form is not part of any application route, because it represents
- * the public facing unauthenticated side of the application.
- *
- * Anything regarding login that is handled by an unauthenticated user should
- * be handled through here.
- *
- * Other routes assume the user is authenticated.
- */
 import { LitElement, html, css } from 'lit';
-import login from '../login.mjs';
-import { ForgotPasswordForm } from './forgot-password-form.mjs';
 import { createClient } from '@wral/sdk-auth';
+import './forgot-password-form.mjs';
 
 
-class LoginForm extends LitElement {
+class AuthLoginForm extends LitElement {
 
 	static get properties() {
 		return {
@@ -25,10 +15,9 @@ class LoginForm extends LitElement {
 		return css`
 			:host {
 				display: block;
-				font-family: Arial, sans-serif;
 			}
 			.login-form {
-				background-color: var(--color-gray-0, #fff);
+				background-color: var(--color-gray-50);
 				padding: var(--spacing-xl, 3rem);
 				border-radius: var(--radius-md, 5px);
 				box-shadow: var(--drop-shadow-md, none);
@@ -39,14 +28,14 @@ class LoginForm extends LitElement {
 				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);
+				border: 1px solid var(--color-gray-300, #CCC);
+				border-radius: var(--radius-sm, 3px);
+				color: var(--color-gray-700, #333);
+				background-color: var(--color-gray-100, #FFF);
 			}
 			form input[type="submit"] {
 				background-color: var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
+				color: var(--color-gray-50, #fff);
 				border: none;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				border-radius: var(--radius-dynamic, 5px);
@@ -57,15 +46,15 @@ class LoginForm extends LitElement {
 			}
 			form label {
 				font-size: 14px;
-				color: var(--color-gray-9, #333);
+				color: var(--color-gray-900, #333);
 				font-weight: bold;
 				margin-bottom: var(--spacing-sm, 0.5rem);
 			}
 			a.forgot {
 				color: var(--color-primary, inherit);
 				text-decoration: none;
-				font-size: 12px;
 				font-weight: bold;
+				font-size: 12px;
 			}
 			.error {
 				color: var(--color-error, red);
@@ -80,7 +69,7 @@ class LoginForm extends LitElement {
 			.header .intro {
 				width: 200px;
 				margin-bottom: 0;
-				color: var(--color-gray-3);
+				color: var(--color-gray-300, #333);
 			}
 			.header .brand {
 				font-size: 32px;
@@ -105,42 +94,55 @@ class LoginForm extends LitElement {
 
 	constructor() {
 		super();
-		this.formState = LoginForm.states.DEFAULT;
-		this.username = '';
-		this.password = '';
-		this.token = undefined;
+		this.formState = this.constructor.states.DEFAULT;
 		this.errors = [];
+		this.isBusy = false; // indicates some operation is in progress
 	}
 
-	onSubmit(e) {
-		e.preventDefault();
-		const formElem = e.explicitOriginalTarget.parentElement;
-		console.log(formElem);
+	login({ username, password }) {
+		const authClient = createClient({
+			baseUrl: this.api,
+		});
+		return authClient.mintToken({ username, password });
+	}
+
+	emitLoginSuccess(token) {
+		this.dispatchEvent(new CustomEvent('login-success', {
+			detail: { token },
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+		}));
+	}
+
+	handleSubmitLogin(event) {
+		event.preventDefault();
+		const formElem = event.currentTarget;
 		const formData = new FormData(formElem).entries().reduce((acc, [key, value]) => {
 			acc[key] = value;
 			return acc;
 		}, {});
 
-		login(this, formData).then(({token, challenge}) => {
-			if (challenge && challenge.name === 'NEW_PASSWORD_REQUIRED') {
-
+		this.isBusy = true;
+		this.errors = [];
+		this.requestUpdate();
+		this.login(formData).then(({ token, challenge }) => {
+			if (challenge?.name === 'NEW_PASSWORD_REQUIRED') {
 				// store these to use in later forms
 				this.token = token;
 				this.username = formData['username'];
 				this.password = formData['password'];
 
-				this.setState(LoginForm.states.CHALLENGE_CHANGE_PW);
-				// don't dispatch a success event with the token
+				this.setState(this.constructor.states.CHALLENGE_CHANGE_PW);
+				// don't dispatch a success event yet
 				// The user should change their password first
 				return;
 			}
-				
-			// emit a success event
-			this.dispatchEvent(new CustomEvent('login-success', {
-				detail: { token },
-			}));
+			
+			// Emit a success event
+			this.emitLoginSuccess(token);
 		}).catch((error) => {
-			console.log(error);
+			console.error(error);
 			this.errors = [error.message];
 			this.requestUpdate();
 		});
@@ -148,17 +150,17 @@ class LoginForm extends LitElement {
 
 	onSubmitChangePasswordChallenge(e) {
 		e.preventDefault();
-		const formElem = e.explicitOriginalTarget;
+		const formElem = e.currentTarget;
 		const formData = new FormData(formElem).entries().reduce((acc, [key, value]) => {
 			acc[key] = value;
 			return acc;
 		}, {});
-
-		// validate password
+		
+		// validate password, client-side
 		const password = formData['password'];
 		const confirmPassword = formData['confirm-password'];
 		if (password !== confirmPassword) {
-			this.errors = ['Passwords do not match.'];
+			this.errors = ['Passwords do not match'];
 			this.requestUpdate();
 			return;
 		}
@@ -171,81 +173,72 @@ class LoginForm extends LitElement {
 			currentPassword: this.password,
 			newPassword: password,
 		}).then(() => {
-			// emit a success event
-			this.dispatchEvent(new CustomEvent('login-success', {
-				detail: { token: this.token },
-			}));
+			this.emitLoginSuccess(this.token);
 		}).catch((error) => {
-			console.log(error);
+			console.error(error);
 			this.errors = [error.message];
 			this.requestUpdate();
 		});
 	}
 
-	setState(newState) {
-		if (newState !== this.formState) {
-			this.formState = newState;
-			this.errors = [];
-			this.requestUpdate();
-		}
+	setState(state) {
+		this.formState = state;
+		this.isBusy = false;
+		this.errors = [];
+		this.requestUpdate();
 	}
 
 	render() {
 		return html`<div class="login-form">
-			${this.renderHeader()}
-		${this.formState === LoginForm.states.FORGOT
-		 ? this.renderForgotPasswordForm() : ''}
-		${this.formState === LoginForm.states.CHALLENGE_CHANGE_PW
-		 ? this.renderChangePasswordForm() : ''}
-		${this.formState === LoginForm.states.DEFAULT
-		 ? this.renderLoginForm() : ''}
+			${ this.renderHeader() }
+			${ this.formState === this.constructor.states.DEFAULT ?
+		this.renderLoginForm() : '' }
+			${ this.formState === this.constructor.states.CHALLENGE_CHANGE_PW ?
+		this.renderChangePasswordForm() : '' }
+			${ this.formState === this.constructor.states.FORGOT ?
+		this.renderForgotPasswordForm() : '' }
 		</div>`;
 	}
 
-	/**
-	 * TODO: accept the header as a slot
-	 */
 	renderHeader() {
 		return html`<div class="header">
-			<div class="intro">
-				Welcome to
-			</div>
-			<div class="brand">
-				<em>WRAL</em>.studio
-			</div>
+			<div class="intro">Welcome to</div>
+			<div class="brand"><em>WRAL</em>.studio</div>
 		</div>`;
 	}
 
 	renderLoginForm() {
 		return html`
-		<form>
-					<label for="username">User</label>
-					<input
-						type="text"
-						name="username"
-						placeholder="Email or Username"
-						required
-					/>
-
-					<label for="password">Password</label>
-					<input
-						type="password"
-						name="password"
-						placeholder="Password"
-						required
-					/>
-					<div>
-						<a href="#" class="forgot"
-							@click=${() => {this.setState(LoginForm.states.FORGOT);}}
-						>Forgot password</a>
-					</div>
+			<form @submit=${this.handleSubmitLogin}>
+				<label for="username">User</label>
+				<input
+					type="text"
+					name="username"
+					placeholder="Email or Username"
+					required
+				/>
 
-					${this.errors
-		? this.errors.map(error => html`<p class="error">${error}</p>`)
-		: ''}
-					<input type="submit" value="Log in" @click=${this.onSubmit} />
+				<label for="password">Password</label>
+				<input
+					type="password"
+					name="password"
+					placeholder="Password"
+					required
+				/>
+				<div>
+					<a href="#" class="forgot"
+						@click=${() => {
+		this.setState(this.constructor.states.FORGOT);
+	}}>Forgot password</a>
+				</div>
+				${this.errors
+		? this.errors.map(error => html`<p class="error">${error}</p>`) : ''}
 
-				</form>`;
+				<input type="submit" value="Log in"
+					?disabled=${this.isBusy}
+				/>
+			</form>
+		`;
 	}
 
 	renderForgotPasswordForm() {
@@ -258,31 +251,41 @@ class LoginForm extends LitElement {
 
 	renderChangePasswordForm() {
 		return html`
-			<p>You have logged in successfully, but you must change your password.</p>
-			<form @submit=${this.onSubmitChangePasswordChallenge}>
-				<input type="hidden" name="username" value="${this.username}" />
-				<label for="password">New Password</label>
-				<input
-					type="password"
-					name="password"
-					placeholder="Password"
-					required
-				/>
-				<label for="confirm-password">Confirm Password</label>
-				<input
-					type="password"
-					name="confirm-password"
-					placeholder="Confirm Password"
-					required
-				/>
-				${this.errors
-		? this.errors.map(error => html`<p class="error">${error}</p>`) 
-		: ''}
-				<input type="submit" value="Change Password" />
-			</form>
+		<p>You have logged in successfully, but you must change your password.</p>
+		<form @submit="${this.onSubmitChangePasswordChallenge}">
+			<input type="hidden" name="username" value="${this.username}" />
+			<label for="password">New Password</label>
+			<input
+				type="password"
+				name="password"
+				placeholder="Password"
+				required
+			/>
+			<label for="confirm-password">Confirm Password</label>
+			<input
+				type="password"
+				name="confirm-password"
+				placeholder="Confirm Password"
+				required
+			/>
+			${this.errors
+		? this.errors.map(error => html`<p class="error">${error}</p>`) : ''}
+			<input type="submit" value="Change Password" />
+		</form>
 		`;
 	}
+
+}
+
+if (!customElements.get('auth-login-form')) {
+	customElements.define('auth-login-form', AuthLoginForm);
+}
+
+export function render(state, onLoginSuccess) {
+	return html`<auth-login-form slot="main"
+		api=${state?.apiBaseUrl}
+		@login-success=${onLoginSuccess}>
+	</auth-login-form>`;
 }
 
-customElements.define('auth-login-form', LoginForm);
-customElements.define('auth-forgot-password-form', ForgotPasswordForm);
+export default render;

package/src/token.mjs

@@ -1,40 +1,44 @@
+import { createClient } from '@wral/sdk-auth';
 
-/**
- * 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, '/')));
+export function getToken({ tokenKey }) {
+	return window.localStorage.getItem(tokenKey);
+}
+
+export function setToken({ tokenKey }, token) {
+	window.localStorage.setItem(tokenKey, token);
 }
 
+export function destroyToken({ tokenKey }) {
+	window.localStorage.removeItem(tokenKey);
+}
+
+export async function getFreshToken(state) {
+	const token = getToken(state);
+	if (!token || token.length < 1) {
+		throw new Error('No token found');
+	}
+	if (shouldRefreshToken(token)) {
+		const authClient = createClient({
+			baseUrl: state.apiBaseUrl,
+		});
+		return await authClient.refreshToken({ token }).then(({ token }) => token);
+	}
+	return token;
+}	
+
 /**
- * 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);
+ * Determine if a token needs to be refreshed, based on its expiration date
+ * @param {string} token
+ * @param {number} offset - milliseconds early to consider refreshing
+ * @param {number} now - current time
+ * @returns {boolean}
  */
 export function shouldRefreshToken(token, offset = 300, now = Date.now()) {
 	const decoded = decodeToken(token);
 	return decoded.exp * 1000 - offset < now;
 }
 
+export function decodeToken(token) {
+	return JSON.parse(window.atob(token.split('.')[1]
+		.replace(/-/g, '+').replace(/_/g, '/')));
+}

package/vellum/README.md

@@ -0,0 +1 @@
+This is an example Vellum app that consumes this auth mod

package/vellum/app-manager.mjs

@@ -0,0 +1,126 @@
+import { html } from 'lit';
+/**
+ * The App Manager has the responsibility of handling requests related to Apps
+ * It handles app registration (adding an app to the main application),
+ * and activation/deactivation of apps.
+ * @param toolkit
+ * @return void - Bootstraps app management within the toolkit as a side-effect
+ */
+export function init(toolkit) {
+
+	const modName = 'mod-app-manager';
+	const debug = true; // TODO: use data-debug attribute
+
+	const state = {
+		apps: new Map(),  // { id: { id, name, content, fragment } }
+		activeAppId: null,
+		toolkit,
+		debug: (...args) => debug && console.log('[app-manager]',...args),
+	};
+
+	Object.entries({
+		'app:register': registerApp,
+		'app:activate': activateApp,
+		'app:close': closeApp,
+	}).forEach(([actionType, fn]) => toolkit.dispatchAction({
+		type: 'action:register',
+		detail: {
+			actionType,
+			modName,
+			handler: (...args) => fn(state, ...args),
+		},
+	}));
+
+}
+
+function registerApp(state, detail) {
+	state.debug('registerApp', detail);
+	const { id, name, content } = detail;
+	if (!id || !name || !content) {
+		console.error('Invalid app registration', detail);
+		return; // TODO: consider throwing
+	}
+	state.apps.set(id, { id, name, content, fragment: null });
+
+	state.toolkit.dispatchAction({
+		type: 'layout:content:append',
+		detail: {
+			content: appToolbarButton(state, detail),
+			id: `app-btn-${id}`, // must match id in appToolbarButton
+		},
+	});
+
+}
+
+function activateApp(state, detail) {
+	const { id } = detail;
+	const { apps, activeAppId, toolkit } = state;
+
+	// no-op if already active
+	if (activeAppId === id) {
+		state.debug('activateApp - already active', id);
+		return;
+	}
+
+	if (!apps.has(id)) {
+		state.debug('activateApp - app not found', id);
+		console.error('App not found: ', id);
+		return; // TODO: consider throwing
+	}
+	const app = apps.get(id);
+
+	// remove existing app, save fragment for later
+	if (activeAppId) {
+		state.debug('activateApp - closing', activeAppId);
+		toolkit.dispatchAction({
+			type: 'layout:content:remove',
+			detail: {
+				id: `app-content-${activeAppId}`,
+				callback: (fragment) => {
+					const currentApp = apps.get(activeAppId);
+					state.debug('activateApp - closing callback', { activeAppId, fragment });
+					if (currentApp) currentApp.fragment = fragment;
+				},
+			},
+		});
+	}
+
+	// present the app, using prior fragment if available
+	const content = app.fragment || app.content();
+	state.debug('activateApp - presenting', { id, content });
+	toolkit.dispatchAction({
+		type: 'layout:content:append',
+		detail: { content, id: `app-content-${id}` },
+	});
+	state.activeAppId = id;
+
+}
+
+function closeApp(state) {
+	const { activeAppId, apps, toolkit } = state;
+	
+	// no-op if no active app
+	if (!activeAppId) return;
+	toolkit.dispatchAction({
+		type: 'layout:content:remove',
+		detail: { id: `app-content-${activeAppId}` },
+	});
+	const app = apps.get(activeAppId);
+	if (app) app.fragment = null;
+	state.activeAppId = null;
+}
+
+function appToolbarButton(state, detail) {
+	console.log('apToolbarButton', { state, detail });
+	return html`
+		<button slot="menu"
+			id="app-btn-${detail.id}"
+			@click=${() => state.toolkit.dispatchAction({
+		type: 'app:activate',
+		detail,
+	})}
+		>
+			${detail.name}
+		</button>
+	`;
+}

package/vellum/example-app.mjs

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+
+export async function init(toolkit, mod) {
+
+	let token = null;
+
+	const content = html`
+		<div slot="main" id="example-app">
+			<h1>Example</h1>
+			<p>This is an example app.</p>
+			<pre><code>${JSON.stringify(mod, null, 2)}</code></pre>
+		</div>
+	`;
+
+	toolkit.dispatchAction({
+		type: 'app:register',
+		detail: {
+			id: 'example',
+			name: 'Example App',
+			content: () => content,
+		},
+	});
+
+	toolkit.dispatchAction({
+		type: 'auth:requestToken',
+		detail: {
+			callback: (t) => {
+				token = t;
+				console.log("got a token!", token);
+			},
+		}
+	});
+
+}

package/vellum/index.mjs

@@ -0,0 +1,26 @@
+import 
+	VellumHarness
+ from '@thefarce/vellum';
+import { render } from './render.mjs';
+import { init as _init } from './mod-setup.mjs';
+
+/*
+ * Define the web-components that will make up the Studio App
+ */
+if (!customElements.get('wral-studio')) {
+	customElements.define('wral-studio', VellumHarness);
+}
+
+/*
+ * Add our custom renderer to the wral-studio App element
+ */
+document.addEventListener('DOMContentLoaded', () => {
+	const app = document.querySelector('wral-studio');
+	if (app) {
+		app.setRenderer(render);
+	} else {
+		console.error('Missing \'wral-studio\' element');
+	}
+});
+
+export const init = _init;