@things-factory/oauth2-client 8.0.0-beta.8 → 8.0.0

package/client/pages/oauth2-client.ts

@@ -0,0 +1,636 @@
+import '@material/web/icon/icon.js'
+import '@operato/help/ox-help-icon.js'
+
+import Clipboard from 'clipboard'
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+import { asyncReplace } from 'lit/directives/async-replace.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+import { navigate, PageView, store } from '@operato/shell'
+import { sleep } from '@operato/utils'
+
+const OAUTH2CLIENT = `
+id
+name
+description
+icon
+grantType
+clientId
+clientSecret
+callbackUrl
+authUrl
+accessTokenUrl
+webhook
+username
+password
+codeChallengeMethod
+codeVerifier
+scopes
+accessToken
+refreshToken
+jwtToken
+expires
+tokenType
+updatedAt
+createdAt
+`
+
+@customElement('oauth2-client')
+export class Oauth2Client extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        position: relative;
+
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+      }
+
+      h2 {
+        margin: var(--title-margin);
+        font: var(--title-font);
+        color: var(--title-text-color);
+      }
+
+      [page-description] {
+        margin: var(--page-description-margin);
+        font: var(--page-description-font);
+        color: var(--page-description-color);
+      }
+
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
+      }
+
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+
+        text-decoration: none;
+      }
+
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
+      }
+
+      [fieldset-container] {
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+
+        input,
+        select {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+
+        form {
+          max-width: var(--content-container-max-width);
+        }
+      }
+
+      [fieldset-container] fieldset {
+        margin: 0;
+        margin-top: -15px;
+      }
+
+      fieldset {
+        border-radius: var(--border-radius);
+        border: var(--border-dim-color);
+        margin: var(--fieldset-margin);
+        padding: var(--fieldset-padding);
+      }
+
+      legend {
+        padding: var(--legend-padding);
+        font-weight: bold;
+        color: var(--legend-color);
+      }
+
+      [field-2column] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 15px;
+      }
+
+      [field] {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+
+      [grid-span] {
+        grid-column: span 2;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
+      button,
+      input[type='submit'],
+      [button-in-field] {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+        float: right;
+        text-decoration: none;
+      }
+
+      button:hover,
+      input[type='submit']:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+
+      [button-in-field] {
+        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
+        position: absolute;
+        top: 12px;
+        right: 0;
+        max-height: 36px;
+      }
+
+      [input-hint] {
+        font: var(--input-hint-font);
+        color: var(--input-hint-color);
+      }
+
+      @media screen and (max-width: 480px) {
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) oauth2Client: any
+  @property({ type: String }) _grantType?: string
+
+  @query('form') form!: HTMLFormElement
+  @queryAll('[clipboard-copy]') copybuttons
+
+  private clipboard?: Clipboard
+  private _icon?: string
+
+  get context() {
+    return {
+      title: {
+        icon: 'apps',
+        text: this.oauth2Client?.name
+      }
+    }
+  }
+
+  render() {
+    var oauth2Client = this.oauth2Client || {}
+
+    return html`
+      <div>
+        <h2><md-icon>apps</md-icon>&nbsp;${oauth2Client.name || ''}</h2>
+        <p page-description>${oauth2Client.description || ''}</p>
+      </div>
+
+      <div icon>
+        <img src=${oauth2Client.icon}>
+      </div>
+
+      <form>
+        <div fieldset-container>
+          <fieldset>
+            <legend>oauth2 client</legend>
+            <div field-2column>
+              <div field grid-span>
+                <label for='name'>name</label>
+                <input type='text' id="name" name="name" .value=${oauth2Client.name || ''}>
+              </div>
+
+              <div field grid-span>
+                <label for='description'>description</label>
+                <input type='text' id="description" name="description" .value=${oauth2Client.description || ''}>
+              </div>
+
+              <div field grid-span>
+                <label for='icon'>icon</label>
+                <input type='text' id="icon" name="icon" 
+                  @change=${e => (this._icon = e.target.value)} 
+                  .value=${oauth2Client.icon || ''}
+                >
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
+        <div fieldset-container>
+          <fieldset>
+            <legend>authorization</legend>
+            <div field-2column>
+              <div field grid-span>
+                <label for='grant-type'>grant type
+                  <ox-help-icon topic='/oauth2-client/grant-type'></ox-help-icon>
+                </label>
+                <select type='text' id="grant-type" name="grantType" .value=${oauth2Client.grantType || 'code'} 
+                  @change=${e => (this._grantType = e.target.value)}>
+                  <option></option>
+                  <option value='code'>Authorization Code Grant</option>
+                  <option value='jwt'>JWT As Authorization Grant</option>
+                  <option value='owner'>Resource Owner Password Credentials Grant</option>
+                  <option value='credentials'>Client Credentials Grant</option>
+                </select>
+              </div>
+
+              <div field grid-span>
+                <label for='auth-url'>auth url</label>
+                <input type='text' id="auth-url" name="authUrl" .value=${oauth2Client.authUrl || ''}>
+                <div input-hint>The endpoint for authorization server. This is used to get the authorization code.</div>
+              </div>
+
+              <div field grid-span>
+                <label for='access-token-url'>access token url</label>
+                <input type='text' id="access-token-url" name="accessTokenUrl" .value=${
+                  oauth2Client.accessTokenUrl || ''
+                }>
+                <div input-hint>The endpoint for authentication server. This is used to exchange the authorization code for an access token.</div>
+              </div>
+
+              <div field grid-span>
+                <label for='callback-url'>callback url</label>
+                <input type='text' id="callback-url" name="callbackUrl" .value=${oauth2Client.callbackUrl || ''}>
+                <div input-hint>This is the callback url that you will be redirected to, after your application is authorized.
+                This is used to extract the authorization code or access token.
+                Normally, this callback url should match the one you use during the application registration process.
+                If you leave this field empty, default callback url(${
+                  location.origin
+                }/oauth2-client/callback</label>) will be used.</div>
+              </div>
+              
+              <div field grid-span>
+                <label for='client-id'>client id</label>
+                <input type='text' id="client-id" name="clientId" .value=${oauth2Client.clientId || ''}>
+                <div input-hint>The client identifier issued to the client during the application registration process.</div>
+              </div>
+
+              <div field grid-span>
+                <label for='client-secret'>client secret</label>
+                <input type='text' id="client-secret" name="clientSecret" .value=${oauth2Client.clientSecret || ''}>
+                <div input-hint>The client secret issued to the client during the application registration process.</div>
+              </div>
+
+              ${
+                this._grantType == 'owner'
+                  ? html`
+                      <div field grid-span>
+                        <label for="username">user name</label>
+                        <input type="text" id="username" name="username" .value=${oauth2Client.username || ''} />
+                      </div>
+
+                      <div field grid-span>
+                        <label for="password">password</label>
+                        <input type="password" id="password" name="password" .value=${oauth2Client.password || ''} />
+                      </div>
+                    `
+                  : html``
+              }
+
+              ${
+                this._grantType == 'jwt'
+                  ? html`
+                      <div field grid-span>
+                        <label for="jwt-token">jwt-token</label>
+                        <input type="text" id="jwt-token" name="jwtToken" .value=${oauth2Client.jwtToken || ''} />
+                        <div input-hint>The JWT Bearer Token for JWT As Authorization Grant</div>
+                      </div>
+                    `
+                  : html``
+              }
+
+              <!-- code PKCE grant type not supported yet
+              <div field grid-span>
+                <label for='code-challenge-method'>code challenge method</label>
+                <select type='text' id="code-challenge-method" name="codeChallengeMethod" .value=${
+                  oauth2Client.codeChallengeMethod
+                }>
+                  <option></option>
+                  <option>SHA-256</option>
+                  <option>Plain</option>
+                </select>
+                <div input-hint>Algorithm used for generating the code challenge</div>
+              </div>
+
+              <div field grid-span>
+                <label for='code-verifier'>code verifier
+                  <ox-help-icon topic='/oauth2-client/code-verifier'></ox-help-icon>
+                </label>
+                <input type='text' id="code-verifier" name="codeVerifier" .value=${oauth2Client.codeVerifier || ''}>
+                <div input-hint>A random, 43-128 character string used to connect the authorization request to the token request.
+                Uses the following characters: [A-Z]/[a-z]/[0-9]/"-"/"."/"_"/"~".</div>
+              </div>
+              -->
+              
+              <div field grid-span>
+                <label for='scopes'>scopes</label>
+                <input type='text' id="scopes" name="scopes" .value=${oauth2Client.scopes || ''}>
+                <div input-hint>The scopes of the access request. It may have multiple space-delimited values.</div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
+        <div fieldset-container>
+          <fieldset>
+            <div field grid-span>
+              <label for='token-type'>token type</label>
+              <input type='text' id="token-type" .value=${oauth2Client.tokenType || ''} readonly>
+              <div input-hint>Added to the authorization header before the access token.</div>
+            </div>
+
+            <legend>access token</legend>
+            <div field-2column>
+              <div field grid-span>
+                <label for="access-token">access token</label>
+                <input id="access-token" type="text" .value=${oauth2Client.accessToken || ''} readonly />
+                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
+                ${
+                  oauth2Client.expires
+                    ? html`<div input-hint>
+                        expired in ${new Date(Number(oauth2Client.expires))} :
+                        ${asyncReplace(this.expTimer(oauth2Client.expires))}
+                      </div>`
+                    : html``
+                }
+              </div>
+
+              <div field grid-span>
+                <label for="refresh-token">refresh token</label>
+                <input id="refresh-token" type="text" .value=${oauth2Client.refreshToken || ''} readonly />
+                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
+        <button @click=${e => this.deleteOauth2Client(e)}>delete this app</button>
+        <button @click=${async e => {
+          e.preventDefault()
+          await this.updateOauth2Client()
+          await this.generateOauth2AccessToken()
+        }}>get new access token</button>
+        <button @click=${async e => {
+          e.preventDefault()
+          await this.updateOauth2Client()
+          await this.refreshOauth2AccessToken()
+        }} ?disabled=${!oauth2Client.refreshToken}>refresh access token</button>
+        <input type="submit" value="update" @click=${async e => {
+          e.preventDefault()
+          await this.updateOauth2Client()
+        }}>
+      </form>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('oauth2Client')) {
+      this._grantType = this.oauth2Client?.grantType
+    }
+  }
+
+  firstUpdated() {
+    this.clipboard = new Clipboard(this.copybuttons, {
+      target: (trigger => trigger.parentElement.querySelector('input')) as any
+    })
+  }
+
+  async pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      await this.fetchOauth2Client()
+    }
+  }
+
+  async *expTimer(exp) {
+    const DAY = 24 * 60 * 60
+    const HOUR = 60 * 60
+    const MIN = 60
+
+    while (this.active) {
+      var remain = Math.floor((Number(exp) - Date.now()) / 1000)
+      const days = Math.floor(remain / DAY)
+      remain -= days * DAY
+      const hours = Math.floor(remain / HOUR)
+      remain -= hours * HOUR
+      const mins = Math.floor(remain / MIN)
+      const secs = remain - mins * MIN
+
+      yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`
+
+      await sleep(1000)
+    }
+  }
+
+  async fetchOauth2Client() {
+    const response = await client.query({
+      query: gql`
+        query($id: String!) {
+          oauth2Client(id: $id) {
+            ${OAUTH2CLIENT}
+          }
+        }
+      `,
+      variables: {
+        id: this.lifecycle.resourceId
+      }
+    })
+
+    this.oauth2Client = response.data.oauth2Client
+  }
+
+  async updateOauth2Client() {
+    const formData = new FormData(this.form)
+
+    const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {
+      patch[key] = value
+      return patch
+    }, {})
+
+    const id = this.lifecycle.resourceId
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation($id: String!, $patch: Oauth2ClientPatch!) {
+          updateOauth2Client(id: $id, patch: $patch) {
+            ${OAUTH2CLIENT}
+          }
+        }
+      `,
+      variables: {
+        id,
+        patch
+      }
+    })
+
+    if (response.errors) {
+      notify({
+        level: 'error',
+        message: 'update oauth2 client fail'
+      })
+    } else {
+      this.oauth2Client = response.data.updateOauth2Client
+    }
+  }
+
+  async deleteOauth2Client(e) {
+    e.preventDefault()
+
+    const id = this.lifecycle.resourceId
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!) {
+          deleteOauth2Client(id: $id)
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    if (response.errors) {
+      notify({
+        level: 'error',
+        message: 'delete oauth2 client fail'
+      })
+    } else {
+      navigate('oauth2-clients')
+    }
+  }
+
+  async generateOauth2AccessToken() {
+    const id = this.lifecycle.resourceId
+
+    if (this.oauth2Client.grantType == 'code') {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
+            getOauth2AuthUrl(id: $id)
+          }
+        `,
+        variables: {
+          id: this.lifecycle.resourceId
+        }
+      })
+
+      if (!response.errors) {
+        location.href = response.data.getOauth2AuthUrl
+      } else {
+        notify({
+          level: 'error',
+          message: 'getting application access token fail'
+        })
+      }
+    } else {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation($id: String!) {
+            getOauth2AccessToken(id: $id) {
+              ${OAUTH2CLIENT}
+            }
+          }
+        `,
+        variables: {
+          id: this.lifecycle.resourceId
+        }
+      })
+
+      if (response.errors) {
+        notify({
+          level: 'error',
+          message: 'getting application access token fail'
+        })
+      } else {
+        this.oauth2Client = response.data.getOauth2AccessToken
+        notify({
+          level: 'info',
+          message: 'got application access token successfully'
+        })
+      }
+    }
+  }
+
+  async refreshOauth2AccessToken() {
+    const id = this.lifecycle.resourceId
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation($id: String!) {
+          refreshOauth2AccessToken(id: $id) {
+            ${OAUTH2CLIENT}
+          }
+        }
+      `,
+      variables: {
+        id: this.lifecycle.resourceId
+      }
+    })
+
+    if (response.errors) {
+      notify({
+        level: 'error',
+        message: 'getting application access token fail'
+      })
+    } else {
+      this.oauth2Client = response.data.refreshOauth2AccessToken
+      notify({
+        level: 'info',
+        message: 'got application access token successfully'
+      })
+    }
+  }
+}