npm - @wral/studio.mods.auth - Versions diffs - 0.3.7 - Mend

@wral/studio.mods.auth 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.eslintrc.mjs +67 -0
package/.husky/pre-commit +1 -0
package/README.md +56 -0
package/bitbucket-pipelines.yml +107 -0
package/components.html +43 -0
package/development.md +41 -0
package/dist/auth.cjs.js +1479 -0
package/dist/auth.es.js +3379 -0
package/dist/lib.cjs.js +1 -0
package/dist/lib.es.js +12 -0
package/eslint.config.mjs +39 -0
package/index.html +20 -0
package/package.json +44 -0
package/src/auth.mjs +73 -0
package/src/components/mod-auth-login-form.mjs +133 -0
package/src/components/studio-change-password.mjs +84 -0
package/src/components/studio-login.mjs +94 -0
package/src/components/studio-profile-view.mjs +56 -0
package/src/components/studio-reset-password.mjs +110 -0
package/src/lib.mjs +16 -0
package/src/tool-dummy.mjs +84 -0
package/src/util.mjs +194 -0
package/src/util.test.mjs +171 -0
package/vite.config.js +12 -0
package/web-test-runner.config.mjs +28 -0

package/dist/lib.cjs.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(t){return new Promise((o,n)=>{t.pub("studio.wral::mod-auth","token-request",{callback:(u,e)=>{e&&n(e),o(u)}})})}exports.getToken=i;

package/dist/lib.es.js ADDED Viewed

@@ -0,0 +1,12 @@
+function a(t) {
+  return new Promise((n, o) => {
+    t.pub("studio.wral::mod-auth", "token-request", {
+      callback: (u, e) => {
+        e && o(e), n(u);
+      }
+    });
+  });
+}
+export {
+  a as getToken
+};

package/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,39 @@
+export default [
+	{
+		"ignores": ["coverage", "dist/**", "node_modules"],
+		"rules": {
+			"no-console": [
+				"error",
+			],
+			"no-unused-vars": [
+				"error",
+			],
+			"no-unused-private-class-members": [
+				"error",
+			],
+			"curly": [
+				"warn",
+			],
+      'max-len': [
+        'warn',
+        {
+          code: 90,
+          comments: 80,
+          ignoreUrls: true,
+          ignoreRegExpLiterals: true,
+        },
+      ],
+      'object-curly-spacing': ['off'],
+      'comma-dangle': [
+        'warn',
+        {
+          arrays: 'always-multiline',
+          objects: 'always-multiline',
+          imports: 'always-multiline',
+          exports: 'always-multiline',
+          functions: 'ignore',
+        },
+      ],
+		},
+	},
+];

package/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>My Studio</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="robots" content="noindex, nofollow">
+        <!-- Load studio-app from CDN -->
+        <script src="https://cdn.wral.studio/release/v2.2.3/studio-app.js"></script>
+    </head>
+    <body>
+        <studio-app>
+            <studio-mod src="http://localhost:5173/src/auth.mjs"
+              apiBaseUrl="https://api.wral.com/dev/auth"
+            ></studio-mod>
+            <studio-mod src="http://localhost:5173/src/tool-dummy.mjs"
+            ></studio-mod>
+        </studio-app>
+    </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+	"name": "@wral/studio.mods.auth",
+	"version": "0.3.7",
+	"description": "Auth mod for Studio",
+	"main": "dist/lib.cjs.js",
+	"module": "dist/lib.es.js",
+	"scripts": {
+		"prepare": "husky",
+		"lint": "eslint . --config eslint.config.mjs",
+		"update:modules": "npx npm-check-updates --interactive",
+		"build": "vite build",
+		"dev": "vite",
+		"test": "web-test-runner --node-resolve --coverage --polyfills && npm run lint"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://bitbucket.org/cbcnm/studio.mods.auth.git"
+	},
+	"author": "Kenneth Barbour <kbarbour@wral.com>",
+	"license": "UNLICENSED",
+	"bugs": {
+		"url": "https://bitbucket.org/cbcnm/studio.mods.auth/issues"
+	},
+	"homepage": "https://bitbucket.org/cbcnm/studio.mods.auth#readme",
+	"dependencies": {
+		"@shoelace-style/shoelace": "^2.16.0",
+		"@wral/sdk-auth": "^0.2.1",
+		"@wral/studio-tools": "^0.9.2",
+		"@wral/studio-ui": "^2.4.8",
+		"lit": "^3.2.0"
+	},
+	"devDependencies": {
+		"@open-wc/testing": "^4.0.0",
+		"@web/test-runner": "^0.19.0",
+		"@web/test-runner-coverage-v8": "^0.8.0",
+		"@web/test-runner-playwright": "^0.11.0",
+		"chai": "^5.1.1",
+		"eslint": "^9.10.0",
+		"husky": "^9.1.5",
+		"playwright": "^1.47.0",
+		"sinon": "^18.0.1",
+		"vite": "^5.4.4"
+	}
+}

package/src/auth.mjs ADDED Viewed

@@ -0,0 +1,73 @@
+import { getToken, logout } from './util.mjs';
+/**
+ * Initializes authentication-related subscriptions with the given studio
+ * instance and configuration.  This function sets up listeners for token
+ * requests and logout actions.
+ *
+ * @module studio-mod_auth
+ * @param {Object} studio - The studio instance where the authentication
+ * module is registered.
+ * @param {Object} config - Configuration object for the initialization
+ * (currently not used in the function).
+ */
+export function init(studio, config) {
+  /**
+   * Event Subscription: 'token-request'
+   * Handles requests for authentication tokens.
+   *
+   * @event studio.wral::mod-auth::token-request
+   * @type {object}
+	 * @property {Object} state - Contains the state information from the
+	 * event trigger.
+	 * @property {Function} state.value.callback - Callback function to handle
+	 * the token response.
+	 * @param {string|null} state.value.token - Expected to receive parameters
+	 * `token` (string|null) if successful, or `error` (Error|null) if an
+	 * error occurs.
+   *
+   * Usage:
+   * studio.pub('studio.wral::mod-auth', 'token-request', {
+   *   state: {
+   *     value: {
+   *       callback: (token, error) => {
+   *         if (error) {
+   *           console.error('Error retrieving token:', error);
+   *         } else {
+   *           console.log('Received token:', token);
+   *         }
+   *       }
+   *     }
+   *   }
+   * });
+   */
+  studio.sub('studio.wral::mod-auth', 'token-request', ({state}) => {
+    const { callback } = state.value;
+    if (callback) {
+      getToken({ studio, config })
+        .then(token => callback(token))
+        .catch(error => callback(null, error));
+    } else {
+      /** Warn consumers of this mod if a message has been sent without a
+       * callback. */
+			/* eslint-disable no-console */
+      console.warn("No token callback defined");
+    }
+  });
+  /**
+   * Event Subscription: 'logout'
+   * Initiates the logout process upon receiving the event.
+   *
+   * @event studio.wral::mod-auth::logout
+   *
+   * Usage:
+   * studio.pub('studio.wral::mod-auth', 'logout');
+   */
+  studio.sub('studio.wral::mod-auth', 'logout', () => {
+    logout({ studio });
+  });
+  // studio.pub('system::workspace', 'present', studioProfileView);
+}

package/src/components/mod-auth-login-form.mjs ADDED Viewed

@@ -0,0 +1,133 @@
+import { LitElement, html, css } from 'lit';
+import { createClient } from '@wral/sdk-auth';
+import './studio-login.mjs';
+import './studio-change-password.mjs';
+/**
+ * This is a login form for the auth module. It consumes the generic
+ * studio-login component.
+ *
+ * This component is responsible for sending requests to the auth API
+ * to generate a JWT token, and for enforcing a password change flow.
+ *
+ * @attribute apibaseurl
+ *
+ * @example
+ * <mod-auth-login-form
+ *  apibaseurl="https://api.wral.com/auth"
+ *  @login-success=${({ detail }) => console.log(detail.token)}
+ * >
+ * </mod-auth-login-form>
+ *
+ * @fires login-success
+ */
+class ModAuthLoginForm extends LitElement {
+  constructor() {
+    super();
+    this.apibaseurl = '';
+    this.error = '';
+    this.isAwaiting = false;
+    this.lastResult = undefined;
+    this.forceChangePassword = false;
+    this.handleLogin = this.handleLogin.bind(this);
+    this.handleLoginResult = this.handleLoginResult.bind(this);
+    this.handleLoginError = this.handleLoginError.bind(this);
+    this.renderPasswordChangeForm = this.renderPasswordChangeForm.bind(this);
+  }
+  static properties = {
+    apibaseurl: { type: String },
+    error: { type: String },
+  };
+  static styles = css`
+    :host {
+      display: block;
+      max-width: 400px;
+      margin: 0 auto;
+    }
+  `;
+  handleLogin(event) {
+    this.isAwaiting = true;
+    const { username, password } = event.detail;
+    const client = createClient({ baseUrl: this.apibaseurl });
+    this.requestUpdate();
+    client.mintToken({ username, password })
+      .then(this.handleLoginResult)
+      .catch(this.handleLoginError);
+  }
+  handleLoginResult(result) {
+    this.error = '';
+    this.isAwaiting = false;
+    this.lastResult = result;
+    if (result.challenge?.name === 'NEW_PASSWORD_REQUIRED') {
+      this.forceChangePassword = true;
+      this.error = 'You must set a new password to continue.';
+    } else {
+      this.dispatchEvent(new CustomEvent('login-success', { detail: result }));
+    }
+    this.requestUpdate();
+  }
+  handleLoginError(error) {
+    // Debugging login errors is a high priority
+    /* eslint-disable no-console */
+    console.error("Error logging in:", error);
+    this.error = error?.body?.error?.message || 'Invalid username or password';
+    this.isAwaiting = false;
+    this.requestUpdate();
+  }
+  handleChangePassword(event) {
+    const { currentPassword, newPassword } = event.detail;
+    const { token } = this.lastResult;
+    const client = createClient({ baseUrl: this.apibaseurl });
+    this.requestUpdate();
+    client.updatePassword({ token, currentPassword, newPassword })
+      .then(() => {
+        this.forceChangePassword = false;
+        this.error = 'Login with your new password.';
+        this.isAwaiting = false;
+        this.requestUpdate();
+      })
+      .catch((error) => {
+        this.error = error?.body?.error?.message || error.message;
+        this.isAwaiting = false;
+        this.requestUpdate();
+      });
+  }
+  renderPasswordChangeForm() {
+    return html`
+      <div>
+      ${this.error ? html`<div class="error">${this.error}</div>` : null}
+      <studio-change-password @change-password=${this.handleChangePassword}>
+      </studio-change-password>
+      </div>
+    `;
+  }
+  renderLoginForm() {
+    return html`
+        ${this.error ? html`<div class="error">${this.error}</div>` : null}
+        <studio-login
+          @login-attempt=${this.handleLogin}
+          ?disabled=${this.isAwaiting}
+        ></studio-login>
+    `;
+  }
+  render() {
+    // TODO: handle resets with a route
+    if (this.forceChangePassword) {
+      return this.renderPasswordChangeForm();
+    } else {
+      return this.renderLoginForm();
+    }
+  }
+}
+window.customElements.define('mod-auth-login-form', ModAuthLoginForm);

package/src/components/studio-change-password.mjs ADDED Viewed

@@ -0,0 +1,84 @@
+import { LitElement, html, css } from 'lit';
+/**
+ * Describes a generic change password form.
+ *
+ * @attribute currentPassword - The current password
+ * @attribute newPassword - The new password
+ * @attribute confirmPassword - The new password confirmation
+ *
+ * @fires change-password - Fired when the user submits the change password form
+ */
+class StudioChangePassword extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+    input, button {
+      width: 100%;
+      margin-bottom: 10px;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+  `;
+  static properties = {
+    currentPassword: { type: String },
+    newPassword: { type: String },
+    confirmPassword: { type: String },
+  };
+  constructor() {
+    super();
+    this.currentPassword = '';
+    this.newPassword = '';
+    this.confirmPassword = '';
+  }
+  render() {
+    return html`
+      <form @submit="${this.handleSubmit}">
+        <input type="password" name="currentPassword"
+          autocomplete="current-password"
+          placeholder="Current Password"
+          .value="${this.currentPassword}"
+          @input="${this.updateProperty('currentPassword')}"
+        >
+        <input type="password" name="newPassword"
+          placeholder="New Password"
+          .value="${this.newPassword}"
+          @input="${this.updateProperty('newPassword')}"
+        >
+        <input type="password" name="confirmPassword"
+          placeholder="Confirm New Password"
+          .value="${this.confirmPassword}"
+          @input="${this.updateProperty('confirmPassword')}"
+        >
+        <button type="submit">Change Password</button>
+      </form>
+    `;
+  }
+  updateProperty(property) {
+    return (e) => {
+      this[property] = e.target.value;
+    };
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.newPassword === this.confirmPassword) {
+      this.dispatchEvent(new CustomEvent('change-password', {
+        detail: {
+          currentPassword: this.currentPassword,
+          newPassword: this.newPassword,
+        },
+      }));
+    } else {
+      alert('The new passwords do not match.');
+    }
+  }
+}
+customElements.define('studio-change-password', StudioChangePassword);

package/src/components/studio-login.mjs ADDED Viewed

@@ -0,0 +1,94 @@
+import { LitElement, html, css } from 'lit';
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/input/input.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+/**
+ * Login Form for the Studio
+ * @customElement studio-login
+ * @example
+ * <studio-login></studio-login>
+ *
+ * @fires login-attempt - Fired when the user submits the login form
+ */
+class StudioLogin extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      box-sizing: border-box;
+    }
+    sl-card {
+      width: 300px;
+      --padding: var(--sl-card-padding);
+      --background-color: var(--sl-card-background-color);
+      --border-radius: var(--sl-card-border-radius);
+      --box-shadow: var(--sl-card-shadow);
+    }
+    sl-input, sl-button {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  `;
+  static properties = {
+    username: { type: String },
+    password: { type: String },
+    disabled: { type: Boolean, reflect: true },
+  };
+  constructor() {
+    super();
+    this.username = '';
+    this.password = '';
+    this.disabled = false;
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent('login-attempt', {
+        detail: {
+          username: this.username,
+          password: this.password,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+  handleInputChange(e) {
+    const { name, value } = e.target;
+    this[name] = value;
+  }
+  render() {
+    return html`
+      <sl-card>
+        <form @submit="${this.handleSubmit}">
+          <sl-input
+            name="username"
+            placeholder="Username or Email"
+            .value="${this.username}"
+            autocomplete="username"
+            @sl-change="${this.handleInputChange}">
+          </sl-input>
+          <sl-input
+            type="password"
+            name="password"
+            placeholder="Password"
+            .value="${this.password}"
+            autocomplete="current-password"
+            @sl-change="${this.handleInputChange}">
+          </sl-input>
+          <sl-button type="submit" ?disabled="${this.disabled}">Login</sl-button>
+        </form>
+      </sl-card>
+    `;
+  }
+}
+customElements.define('studio-login', StudioLogin);

package/src/components/studio-profile-view.mjs ADDED Viewed

@@ -0,0 +1,56 @@
+import { LitElement, html } from 'lit';
+import { getToken } from '../lib.mjs';
+import { getStudio } from '@wral/studio-tools';
+/**
+ * Parses the payload of a JWT, without any validation.
+ * @param {string} token - The JWT token
+ * @returns {object} The parsed token's payload
+ */
+function parseToken(token) {
+  return JSON.parse(atob(token.split('.')[1]));
+}
+class StudioProfileView extends LitElement {
+  constructor() {
+    super();
+    this.token = null;
+    this.studio = getStudio();
+  }
+  firstUpdated() {
+    this.fetchToken().then(() => {
+      this.requestUpdate();
+    })
+  }
+  async fetchToken() {
+    return this.token = await getToken(this.studio);
+  }
+  render() {
+    if (!this.token) {
+      return html`<div>You are not logged in</div>`;
+    }
+    const payload = parseToken(this.token);
+    return html`<div>
+      <h2>Your Profile</h2>
+      <div class="username">${payload.username || payload.sub}</div>
+      <div>
+      <h3>Permissions</h3>
+      <ul>
+        ${(payload.scope || '').split(' ')
+          .map(permission => html`<li>${permission}</li>`)}
+      </ul>
+      </div>
+      <div>
+        <studio-change-password></studio-change-password>
+      </div>
+    </div>`;
+  }
+}
+customElements.define('studio-profile-view', StudioProfileView);
+export default html`<studio-profile-view id="profile"></studio-profile-view>`

package/src/components/studio-reset-password.mjs ADDED Viewed

@@ -0,0 +1,110 @@
+import { LitElement, html, css } from 'lit';
+/**
+ * Describes a reset password form
+ *
+ * @example
+ * <studio-reset-password></studio-reset-password>
+ *
+ * @attribute hide-confirmation-code - Hides the confirmation code input
+ * @attribute triggered - Indicates that the reset password form was triggered
+ *
+ * @fires request-trigger - Fired when the user submits the login form
+ * @fires reset-password - Fired when the user submits the reset password form
+ *
+ * @TODO: refactor password reset as a form and add browser validation
+ */
+class StudioResetPassword extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+    input, button {
+      width: 100%;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+      padding: 8px;
+    }
+  `;
+  static properties = {
+    email: { type: String },
+    confirmationCode: { type: String },
+    hideConfirmationCode: { type: Boolean },
+    newPassword: { type: String },
+    triggered: { type: Boolean },
+  };
+  constructor() {
+    super();
+    this.email = '';
+    this.confirmationCode = '';
+    this.newPassword = '';
+    this.hideConfirmationCode = false;
+  }
+  handleInput(field) {
+    return (e) => {
+      this[field] = e.target.value;
+    };
+  }
+  triggerRequest() {
+    const event = new CustomEvent('request-trigger', {
+      detail: { email: this.email },
+      cancelable: true,
+    });
+    this.dispatchEvent(event);
+    // If the event is not cancelled, set the stage to 2
+    if (!event.defaultPrevented) {
+      this.triggered = true;
+    }
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('password-reset', {
+      detail: {
+        email: this.email,
+        confirmationCode: this.confirmationCode,
+        newPassword: this.newPassword,
+      },
+    }));
+  }
+  render() {
+    return html`
+      <form @submit="${this.handleSubmit}">
+        ${!this.triggered ? html`
+          <input type="email"
+            name="email"
+            placeholder="Email"
+            autocomplete="email"
+            .value="${this.email}"
+            required
+            @input="${this.handleInput('email')}">
+          <button type="button" @click="${this.triggerRequest}">Request Reset</button>
+        ` : html`
+          <input name="confirmationCode"
+            type=${this.hideConfirmationCode ? 'hidden' : 'text'}
+            autocomplete="one-time-code"
+            placeholder="Confirmation Code"
+            .value="${this.confirmationCode}"
+            @input="${this.handleInput('confirmationCode')}">
+          <input type="password" name="newPassword"
+            autocomplete="new-password"
+            placeholder="New Password"
+            .value="${this.newPassword}"
+            @input="${this.handleInput('newPassword')}"
+            required
+            >
+          <button type="submit">Reset Password</button>
+        `}
+      </form>
+    `;
+  }
+}
+customElements.define('studio-reset-password', StudioResetPassword);

package/src/lib.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Get an auth token
+ * @param {Studio} studio
+ * @return {Promise<string>} bearer token
+ */
+export function getToken(studio) {
+    return new Promise((resolve, reject) => {
+      studio.pub('studio.wral::mod-auth', 'token-request', {
+        callback: (token, error) => {
+          if (error) {
+            reject(error);
+          }
+          resolve(token);
+        }});
+    });
+}