@wral/studio.mods.auth 1.0.0 → 2.0.0

package/src/routes/change-password.mjs

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

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

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

@@ -1,61 +0,0 @@
-/**
- * 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

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

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

package/src/utils.mjs

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

package/vellum-fixture.mjs

@@ -1,86 +0,0 @@
-/**
- * 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>`;
-}