@things-factory/oauth2-client 9.2.5 → 10.0.0-beta.10

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.
@@ -4,68 +4,57 @@ import '@material/web/button/outlined-button.js';
4
4
  import gql from 'graphql-tag';
5
5
  import { css, html } from 'lit';
6
6
  import { customElement, property } from 'lit/decorators.js';
7
- import { connect } from 'pwa-helpers/connect-mixin.js';
8
7
  import { client } from '@operato/graphql';
9
8
  import { notify } from '@operato/layout';
10
- import { navigate, PageView, store } from '@operato/shell';
11
- let Oauth2Clients = class Oauth2Clients extends connect(store)(PageView) {
9
+ import { navigate, PageView } from '@operato/shell';
10
+ let Oauth2Clients = class Oauth2Clients extends PageView {
12
11
  constructor() {
13
12
  super(...arguments);
14
13
  this.clients = [];
15
14
  }
16
15
  static { this.styles = [
17
16
  css `
18
- :host {
19
- display: flex;
17
+ :host { display: flex;
20
18
  flex-direction: column;
21
19
  background-color: var(--md-sys-color-background);
22
20
  padding: var(--spacing-large);
23
21
 
24
22
  overflow: auto;
25
- }
23
+ }
26
24
 
27
- md-elevated-button {
28
- text-transform: capitalize;
29
- }
25
+ md-elevated-button { text-transform: capitalize;
26
+ }
30
27
 
31
- md-outlined-button {
32
- float: right;
28
+ md-outlined-button { float: right;
33
29
  margin-top: var(--spacing-medium);
34
30
  text-transform: capitalize;
35
- }
31
+ }
36
32
 
37
- h2 {
38
- margin: var(--title-margin);
33
+ h2 { margin: var(--title-margin);
39
34
  font: var(--title-font);
40
35
  color: var(--title-text-color);
41
- }
36
+ }
42
37
 
43
- [page-description] {
44
- margin: var(--page-description-margin);
38
+ [page-description] { margin: var(--page-description-margin);
45
39
  font: var(--page-description-font);
46
40
  color: var(--page-description-color);
47
- }
41
+ }
48
42
 
49
- table {
50
- width: 100%;
43
+ table { width: 100%;
51
44
  margin: var(--spacing-large) 0;
52
45
  border-collapse: collapse;
53
- }
46
+ }
54
47
 
55
- tr {
56
- background-color: var(--tr-background-color);
57
- }
48
+ tr { background-color: var(--tr-background-color);
49
+ }
58
50
 
59
- tr:nth-child(odd) {
60
- background-color: var(--tr-background-odd-color);
61
- }
51
+ tr:nth-child(odd) { background-color: var(--tr-background-odd-color);
52
+ }
62
53
 
63
- tr:hover {
64
- background-color: var(--tr-background-hover-color);
65
- }
54
+ tr:hover { background-color: var(--tr-background-hover-color);
55
+ }
66
56
 
67
- th {
68
- border-top: var(--th-border-top);
57
+ th { border-top: var(--th-border-top);
69
58
  border-bottom: var(--td-border-bottom);
70
59
  padding: var(--th-padding);
71
60
 
@@ -73,39 +62,33 @@ let Oauth2Clients = class Oauth2Clients extends connect(store)(PageView) {
73
62
  color: var(--th-color);
74
63
  text-transform: var(--th-text-transform);
75
64
  text-align: left;
76
- }
65
+ }
77
66
 
78
- td {
79
- padding: var(--td-padding);
67
+ td { padding: var(--td-padding);
80
68
  border-bottom: var(--border-dim-color);
81
69
  line-height: 1.1;
82
- }
70
+ }
83
71
 
84
- td a {
85
- font: var(--td-font);
72
+ td a { font: var(--td-font);
86
73
  text-decoration: none;
87
74
  color: var(--md-sys-color-on-surface);
88
- }
75
+ }
89
76
 
90
- td a strong {
91
- font: bold 16px var(--theme-font);
77
+ td a strong { font: bold 16px var(--theme-font);
92
78
 
93
79
  display: block;
94
80
  text-decoration: none;
95
- }
81
+ }
96
82
 
97
- .text-align-center {
98
- text-align: center;
99
- }
83
+ .text-align-center { text-align: center;
84
+ }
100
85
 
101
- .text-align-right {
102
- text-align: right;
103
- }
86
+ .text-align-right { text-align: right;
87
+ }
104
88
  `
105
89
  ]; }
106
90
  get context() {
107
- return {
108
- title: `clients`
91
+ return { title: `clients`
109
92
  };
110
93
  }
111
94
  render() {
@@ -153,23 +136,18 @@ let Oauth2Clients = class Oauth2Clients extends connect(store)(PageView) {
153
136
  }
154
137
  }
155
138
  async fetchOauth2Clients() {
156
- const response = await client.query({
157
- query: gql `
158
- query {
159
- oauth2Clients {
160
- items {
161
- id
139
+ const response = await client.query({ query: gql `
140
+ query { oauth2Clients { items { id
162
141
  name
163
142
  description
164
- }
143
+ }
165
144
  total
166
- }
167
- }
145
+ }
146
+ }
168
147
  `
169
148
  });
170
149
  if (response.errors) {
171
- notify({
172
- level: 'error',
150
+ notify({ level: 'error',
173
151
  message: 'fetch oauth2 clients fail'
174
152
  });
175
153
  }
@@ -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;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"]}
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,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,QAAQ;IAApC;;QA4E6B,YAAO,GAAU,EAAE,CAAA;IAqEhD,CAAC;aAjJ+C,WAAM,GAAG;QACrD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA1EmD,CA0EnD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,SAAS;SACnD,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAE7C,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;IACJ,CAAC;IAEA,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,EAAE,KAAK,IAAI,EAAE,CAAA;QAC3I,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,kBAAkB;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQlF;SACL,CAAC,CAAA;QAEC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,MAAM,CAAC,EAAU,KAAK,EAAE,OAAO;gBACxD,OAAO,EAAE,2BAA2B;aAC1C,CAAC,CAAA;QACF,CAAC;aAAM,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAA;QACjD,CAAC;IACD,CAAC;;AApE2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAoB;AA5E1C,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAiJlB","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 { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('oauth2-clients')\nclass Oauth2Clients extends PageView { static styles = [\n css`\n :host { 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 { text-transform: capitalize;\n }\n\n md-outlined-button { float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table { width: 100%;\n margin: var(--spacing-large) 0;\n border-collapse: collapse;\n }\n\n tr { background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) { background-color: var(--tr-background-odd-color);\n }\n\n tr:hover { background-color: var(--tr-background-hover-color);\n }\n\n th { 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 { padding: var(--td-padding);\n border-bottom: var(--border-dim-color);\n line-height: 1.1;\n }\n\n td a { font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong { font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center { text-align: center;\n }\n\n .text-align-right { text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) clients: any[] = []\n\n get context() { return { title: `clients`\n }\n }\n\n render() { 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) { if (this.active) { this.clients = (await this.fetchOauth2Clients())?.items || []\n }\n }\n\n async fetchOauth2Clients() { const response = await client.query({ query: gql`\n query { oauth2Clients { items { id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (response.errors) { notify({ level: 'error',\n message: 'fetch oauth2 clients fail'\n })\n } else { return response.data.oauth2Clients\n }\n }\n}\n"]}