@things-factory/oauth2-client 5.0.7 → 6.0.0-alpha.0

package/dist-client/pages/oauth2-client.js

@@ -0,0 +1,586 @@
+import { __asyncGenerator, __await, __decorate, __metadata } from "tslib";
+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
+`;
+let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
+    get context() {
+        var _a;
+        return {
+            title: {
+                icon: 'apps',
+                text: (_a = this.oauth2Client) === null || _a === void 0 ? void 0 : _a.name
+            }
+        };
+    }
+    render() {
+        var oauth2Client = this.oauth2Client || {};
+        return html `
+      <div>
+        <h2><mwc-icon>apps</mwc-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) {
+        var _a;
+        if (changes.has('oauth2Client')) {
+            this._grantType = (_a = this.oauth2Client) === null || _a === void 0 ? void 0 : _a.grantType;
+        }
+    }
+    firstUpdated() {
+        this.clipboard = new Clipboard(this.copybuttons, {
+            target: (trigger => trigger.parentElement.querySelector('input'))
+        });
+    }
+    async pageUpdated(changes, lifecycle, before) {
+        if (this.active) {
+            await this.fetchOauth2Client();
+        }
+    }
+    expTimer(exp) {
+        return __asyncGenerator(this, arguments, function* expTimer_1() {
+            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 yield __await(`${days} days ${hours} hours ${mins} mins ${secs} seconds remain`);
+                yield __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'
+            });
+        }
+    }
+};
+Oauth2Client.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        position: relative;
+
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-wide);
+      }
+      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);
+      }
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+      input,
+      select {
+        border: var(--border-dark-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] {
+        background-color: var(--theme-white-color);
+        margin: var(--margin-wide) 0 var(--margin-default) 0;
+        padding: var(--padding-default);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+      }
+      [fieldset-container] fieldset {
+        margin: 0;
+        margin-top: -15px;
+      }
+      fieldset {
+        border-radius: var(--border-radius);
+        border: var(--border-dark-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,
+      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(--margin-default) 0 var(--margin-default) var(--margin-default);
+        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: 11px;
+        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;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], Oauth2Client.prototype, "oauth2Client", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Oauth2Client.prototype, "_grantType", void 0);
+__decorate([
+    query('form'),
+    __metadata("design:type", HTMLFormElement)
+], Oauth2Client.prototype, "form", void 0);
+__decorate([
+    queryAll('[clipboard-copy]'),
+    __metadata("design:type", Object)
+], Oauth2Client.prototype, "copybuttons", void 0);
+Oauth2Client = __decorate([
+    customElement('oauth2-client')
+], Oauth2Client);
+export { Oauth2Client };
+//# sourceMappingURL=oauth2-client.js.map

package/dist-client/pages/oauth2-client.js.map

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

package/dist-client/pages/oauth2-clients.d.ts

@@ -0,0 +1 @@
+export {};