@wral/studio.mods.auth 0.3.7 → 1.0.0

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

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

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

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

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

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

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

package/src/tool-dummy.mjs

@@ -1,84 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { getStudio } from '@wral/studio-tools';
-import { defineTool } from '@wral/studio-ui/define-tool';
-import { getToken } from './lib.mjs';
-
-import './components/studio-profile-view.mjs';
-
-/* Console use should be permitted in this component, since its only
- * purpose is as a fixture for development and debugging. */
-/* eslint-disable no-console */
-
-class DummyTool extends LitElement {
-  constructor() {
-    super();
-    this.studio = getStudio();
-    this.handleClick = this.handleClick.bind(this);
-    this.handleLogout = this.handleLogout.bind(this);
-    this.token = null;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-    `;
-  }
-
-  handleClick() {
-    console.log("Dummy tool is requesting a token");
-    this.getToken().then((token) => {
-      console.log("Dummy tool received token:", token);
-      this.token = token;
-      this.requestUpdate();
-    }).catch((error) => {
-      console.error("Dummy tool did not receive token:", error);
-    });
-  }
-
-  handleLogout() {
-    this.studio.pub('studio.wral::mod-auth', 'logout');
-    this.token = null;
-    this.requestUpdate();
-  }
-
-  getToken() {
-    return getToken(this.studio);
-  }
-
-  render() {
-    return html`
-      <h1>Dummy Tool</h1>
-      <p>This tool represents a studio mod that needs an auth token.  The
-      token will be requested when the button is clicked.</p>
-      <button @click="${this.handleClick}">Click me</button>
-      <div>${this.token ? 'You are authenticated' : 'Token not requested'}</div>
-      <div>
-      ${this.token && html`
-        <button @click="${this.handleLogout}">Request Logout</button>
-      `}
-      </div>
-      ${this.token ? html`<studio-profile-view token="${this.token}">
-      </studio-profile-view>` : null}
-    `;
-  }
-
-}
-
-const dummyTool = defineTool({
-  component: DummyTool,
-  token: 'dummy-tool',
-  label: 'Dummy Tool',
-  description: 'Dummy Tool',
-  icon: '🤖',
-  toolHtml: html`<tool-dummy-tool exportparts="title,description"></tool-dummy-tool>`,
-  buttonHtml: html`<tool-dummy-tool-button exportparts="button,icon">
-    </tool-dummy-tool-button>`,
-});
-export default dummyTool;
-
-export function init(studio) {
-  // Force this tool to activate on init
-  studio.pub('system::workspace', 'present', dummyTool);
-}