@things-factory/oauth2-client 9.0.0-beta.76 → 9.0.0

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.
@@ -13,84 +13,8 @@ let Oauth2Clients = class Oauth2Clients extends connect(store)(PageView) {
13
13
  super(...arguments);
14
14
  this.clients = [];
15
15
  }
16
- get context() {
17
- return {
18
- title: `clients`
19
- };
20
- }
21
- render() {
22
- var clients = this.clients || [];
23
- return html `
24
- <div>
25
- <h2>Registered Oauth2 Clients</h2>
26
- <p page-description>
27
- What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re
28
- building for.
29
- </p>
30
- <md-elevated-button @click=${e => navigate('oauth2-client-register')}
31
- >register new oauth2 client</md-elevated-button
32
- >
33
- </div>
34
-
35
- <div>
36
- <table>
37
- <tr>
38
- <th>app name</th>
39
- <th>API health</th>
40
- <th>Installs</th>
41
- <th>status</th>
42
- </tr>
43
- ${clients.map(client => html `
44
- <tr>
45
- <td>
46
- <a href=${`oauth2-client/${client.id}`}>
47
- <strong>${client.name}</strong>
48
- ${client.description}
49
- </a>
50
- </td>
51
- <td class="text-align-center">OK</td>
52
- <td class="text-align-right">1</td>
53
- <td class="text-align-center">draft</td>
54
- </tr>
55
- `)}
56
- </table>
57
- </div>
58
- `;
59
- }
60
- async pageUpdated(changes, lifecycle, before) {
61
- var _a;
62
- if (this.active) {
63
- this.clients = ((_a = (await this.fetchOauth2Clients())) === null || _a === void 0 ? void 0 : _a.items) || [];
64
- }
65
- }
66
- async fetchOauth2Clients() {
67
- const response = await client.query({
68
- query: gql `
69
- query {
70
- oauth2Clients {
71
- items {
72
- id
73
- name
74
- description
75
- }
76
- total
77
- }
78
- }
79
- `
80
- });
81
- if (response.errors) {
82
- notify({
83
- level: 'error',
84
- message: 'fetch oauth2 clients fail'
85
- });
86
- }
87
- else {
88
- return response.data.oauth2Clients;
89
- }
90
- }
91
- };
92
- Oauth2Clients.styles = [
93
- css `
16
+ static { this.styles = [
17
+ css `
94
18
  :host {
95
19
  display: flex;
96
20
  flex-direction: column;
@@ -178,7 +102,82 @@ Oauth2Clients.styles = [
178
102
  text-align: right;
179
103
  }
180
104
  `
181
- ];
105
+ ]; }
106
+ get context() {
107
+ return {
108
+ title: `clients`
109
+ };
110
+ }
111
+ render() {
112
+ var clients = this.clients || [];
113
+ return html `
114
+ <div>
115
+ <h2>Registered Oauth2 Clients</h2>
116
+ <p page-description>
117
+ What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re
118
+ building for.
119
+ </p>
120
+ <md-elevated-button @click=${e => navigate('oauth2-client-register')}
121
+ >register new oauth2 client</md-elevated-button
122
+ >
123
+ </div>
124
+
125
+ <div>
126
+ <table>
127
+ <tr>
128
+ <th>app name</th>
129
+ <th>API health</th>
130
+ <th>Installs</th>
131
+ <th>status</th>
132
+ </tr>
133
+ ${clients.map(client => html `
134
+ <tr>
135
+ <td>
136
+ <a href=${`oauth2-client/${client.id}`}>
137
+ <strong>${client.name}</strong>
138
+ ${client.description}
139
+ </a>
140
+ </td>
141
+ <td class="text-align-center">OK</td>
142
+ <td class="text-align-right">1</td>
143
+ <td class="text-align-center">draft</td>
144
+ </tr>
145
+ `)}
146
+ </table>
147
+ </div>
148
+ `;
149
+ }
150
+ async pageUpdated(changes, lifecycle, before) {
151
+ if (this.active) {
152
+ this.clients = (await this.fetchOauth2Clients())?.items || [];
153
+ }
154
+ }
155
+ async fetchOauth2Clients() {
156
+ const response = await client.query({
157
+ query: gql `
158
+ query {
159
+ oauth2Clients {
160
+ items {
161
+ id
162
+ name
163
+ description
164
+ }
165
+ total
166
+ }
167
+ }
168
+ `
169
+ });
170
+ if (response.errors) {
171
+ notify({
172
+ level: 'error',
173
+ message: 'fetch oauth2 clients fail'
174
+ });
175
+ }
176
+ else {
177
+ return response.data.oauth2Clients;
178
+ }
179
+ }
180
+ };
182
181
  __decorate([
183
182
  property({ type: Array }),
184
183
  __metadata("design:type", Array)
@@ -1 +1 @@
1
- {"version":3,"file":"oauth2-clients.js","sourceRoot":"","sources":["../../client/pages/oauth2-clients.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAApD;;QA4F6B,YAAO,GAAU,EAAE,CAAA;IAkFhD,CAAC;IAhFC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,SAAS;SACjB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,wBAAwB,CAAC;;;;;;;;;;;;;YAahE,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;4BAGE,iBAAiB,MAAM,CAAC,EAAE,EAAE;8BAC1B,MAAM,CAAC,IAAI;sBACnB,MAAM,CAAC,WAAW;;;;;;;aAO3B,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;QAC/D,CAAC;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;OAWT;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YACpB,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,2BAA2B;aACrC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAA;QACpC,CAAC;IACH,CAAC;;AA5KM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF;CACF,AAzFY,CAyFZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAoB;AA5F1C,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CA8KlB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.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'\n\n@customElement('oauth2-clients')\nclass Oauth2Clients extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button {\n text-transform: capitalize;\n }\n\n md-outlined-button {\n float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table {\n width: 100%;\n margin: var(--spacing-large) 0;\n border-collapse: collapse;\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n th {\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td {\n padding: var(--td-padding);\n border-bottom: var(--border-dim-color);\n line-height: 1.1;\n }\n\n td a {\n font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong {\n font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center {\n text-align: center;\n }\n\n .text-align-right {\n text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) clients: any[] = []\n\n get context() {\n return {\n title: `clients`\n }\n }\n\n render() {\n var clients = this.clients || []\n\n return html`\n <div>\n <h2>Registered Oauth2 Clients</h2>\n <p page-description>\n What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re\n building for.\n </p>\n <md-elevated-button @click=${e => navigate('oauth2-client-register')}\n >register new oauth2 client</md-elevated-button\n >\n </div>\n\n <div>\n <table>\n <tr>\n <th>app name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${clients.map(\n client => html`\n <tr>\n <td>\n <a href=${`oauth2-client/${client.id}`}>\n <strong>${client.name}</strong>\n ${client.description}\n </a>\n </td>\n <td class=\"text-align-center\">OK</td>\n <td class=\"text-align-right\">1</td>\n <td class=\"text-align-center\">draft</td>\n </tr>\n `\n )}\n </table>\n </div>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.clients = (await this.fetchOauth2Clients())?.items || []\n }\n }\n\n async fetchOauth2Clients() {\n const response = await client.query({\n query: gql`\n query {\n oauth2Clients {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (response.errors) {\n notify({\n level: 'error',\n message: 'fetch oauth2 clients fail'\n })\n } else {\n return response.data.oauth2Clients\n }\n }\n}\n"]}
1
+ {"version":3,"file":"oauth2-clients.js","sourceRoot":"","sources":["../../client/pages/oauth2-clients.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAApD;;QA4F6B,YAAO,GAAU,EAAE,CAAA;IAkFhD,CAAC;aA7KQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF;KACF,AAzFY,CAyFZ;IAID,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,SAAS;SACjB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,wBAAwB,CAAC;;;;;;;;;;;;;YAahE,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;4BAGE,iBAAiB,MAAM,CAAC,EAAE,EAAE;8BAC1B,MAAM,CAAC,IAAI;sBACnB,MAAM,CAAC,WAAW;;;;;;;aAO3B,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,EAAE,KAAK,IAAI,EAAE,CAAA;QAC/D,CAAC;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;OAWT;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YACpB,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,2BAA2B;aACrC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAA;QACpC,CAAC;IACH,CAAC;;AAjF0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAoB;AA5F1C,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CA8KlB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.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'\n\n@customElement('oauth2-clients')\nclass Oauth2Clients extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button {\n text-transform: capitalize;\n }\n\n md-outlined-button {\n float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table {\n width: 100%;\n margin: var(--spacing-large) 0;\n border-collapse: collapse;\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n th {\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td {\n padding: var(--td-padding);\n border-bottom: var(--border-dim-color);\n line-height: 1.1;\n }\n\n td a {\n font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong {\n font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center {\n text-align: center;\n }\n\n .text-align-right {\n text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) clients: any[] = []\n\n get context() {\n return {\n title: `clients`\n }\n }\n\n render() {\n var clients = this.clients || []\n\n return html`\n <div>\n <h2>Registered Oauth2 Clients</h2>\n <p page-description>\n What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re\n building for.\n </p>\n <md-elevated-button @click=${e => navigate('oauth2-client-register')}\n >register new oauth2 client</md-elevated-button\n >\n </div>\n\n <div>\n <table>\n <tr>\n <th>app name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${clients.map(\n client => html`\n <tr>\n <td>\n <a href=${`oauth2-client/${client.id}`}>\n <strong>${client.name}</strong>\n ${client.description}\n </a>\n </td>\n <td class=\"text-align-center\">OK</td>\n <td class=\"text-align-right\">1</td>\n <td class=\"text-align-center\">draft</td>\n </tr>\n `\n )}\n </table>\n </div>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.clients = (await this.fetchOauth2Clients())?.items || []\n }\n }\n\n async fetchOauth2Clients() {\n const response = await client.query({\n query: gql`\n query {\n oauth2Clients {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (response.errors) {\n notify({\n level: 'error',\n message: 'fetch oauth2 clients fail'\n })\n } else {\n return response.data.oauth2Clients\n }\n }\n}\n"]}