@things-factory/oauth2-client 8.0.0-beta.8 → 8.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.
@@ -0,0 +1,188 @@
1
+ import '@material/web/button/elevated-button.js'
2
+ import '@material/web/button/outlined-button.js'
3
+
4
+ import gql from 'graphql-tag'
5
+ import { css, html } from 'lit'
6
+ import { customElement, property } from 'lit/decorators.js'
7
+ import { connect } from 'pwa-helpers/connect-mixin.js'
8
+
9
+ import { client } from '@operato/graphql'
10
+ import { notify } from '@operato/layout'
11
+ import { navigate, PageView, store } from '@operato/shell'
12
+
13
+ @customElement('oauth2-clients')
14
+ class Oauth2Clients extends connect(store)(PageView) {
15
+ static styles = [
16
+ css`
17
+ :host {
18
+ display: flex;
19
+ flex-direction: column;
20
+ background-color: var(--md-sys-color-background);
21
+ padding: var(--spacing-large);
22
+
23
+ overflow: auto;
24
+ }
25
+
26
+ md-elevated-button {
27
+ text-transform: capitalize;
28
+ }
29
+
30
+ md-outlined-button {
31
+ float: right;
32
+ margin-top: var(--spacing-medium);
33
+ text-transform: capitalize;
34
+ }
35
+
36
+ h2 {
37
+ margin: var(--title-margin);
38
+ font: var(--title-font);
39
+ color: var(--title-text-color);
40
+ }
41
+
42
+ [page-description] {
43
+ margin: var(--page-description-margin);
44
+ font: var(--page-description-font);
45
+ color: var(--page-description-color);
46
+ }
47
+
48
+ table {
49
+ width: 100%;
50
+ margin: var(--spacing-large) 0;
51
+ border-collapse: collapse;
52
+ }
53
+
54
+ tr {
55
+ background-color: var(--tr-background-color);
56
+ }
57
+
58
+ tr:nth-child(odd) {
59
+ background-color: var(--tr-background-odd-color);
60
+ }
61
+
62
+ tr:hover {
63
+ background-color: var(--tr-background-hover-color);
64
+ }
65
+
66
+ th {
67
+ border-top: var(--th-border-top);
68
+ border-bottom: var(--td-border-bottom);
69
+ padding: var(--th-padding);
70
+
71
+ font: var(--th-font);
72
+ color: var(--th-color);
73
+ text-transform: var(--th-text-transform);
74
+ text-align: left;
75
+ }
76
+
77
+ td {
78
+ padding: var(--td-padding);
79
+ border-bottom: var(--border-dim-color);
80
+ line-height: 1.1;
81
+ }
82
+
83
+ td a {
84
+ font: var(--td-font);
85
+ text-decoration: none;
86
+ color: var(--md-sys-color-on-surface);
87
+ }
88
+
89
+ td a strong {
90
+ font: bold 16px var(--theme-font);
91
+
92
+ display: block;
93
+ text-decoration: none;
94
+ }
95
+
96
+ .text-align-center {
97
+ text-align: center;
98
+ }
99
+
100
+ .text-align-right {
101
+ text-align: right;
102
+ }
103
+ `
104
+ ]
105
+
106
+ @property({ type: Array }) clients: any[] = []
107
+
108
+ get context() {
109
+ return {
110
+ title: `clients`
111
+ }
112
+ }
113
+
114
+ render() {
115
+ var clients = this.clients || []
116
+
117
+ return html`
118
+ <div>
119
+ <h2>Registered Oauth2 Clients</h2>
120
+ <p page-description>
121
+ What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re
122
+ building for.
123
+ </p>
124
+ <md-elevated-button @click=${e => navigate('oauth2-client-register')}
125
+ >register new oauth2 client</md-elevated-button
126
+ >
127
+ </div>
128
+
129
+ <div>
130
+ <table>
131
+ <tr>
132
+ <th>app name</th>
133
+ <th>API health</th>
134
+ <th>Installs</th>
135
+ <th>status</th>
136
+ </tr>
137
+ ${clients.map(
138
+ client => html`
139
+ <tr>
140
+ <td>
141
+ <a href=${`oauth2-client/${client.id}`}>
142
+ <strong>${client.name}</strong>
143
+ ${client.description}
144
+ </a>
145
+ </td>
146
+ <td class="text-align-center">OK</td>
147
+ <td class="text-align-right">1</td>
148
+ <td class="text-align-center">draft</td>
149
+ </tr>
150
+ `
151
+ )}
152
+ </table>
153
+ </div>
154
+ `
155
+ }
156
+
157
+ async pageUpdated(changes, lifecycle, before) {
158
+ if (this.active) {
159
+ this.clients = (await this.fetchOauth2Clients())?.items || []
160
+ }
161
+ }
162
+
163
+ async fetchOauth2Clients() {
164
+ const response = await client.query({
165
+ query: gql`
166
+ query {
167
+ oauth2Clients {
168
+ items {
169
+ id
170
+ name
171
+ description
172
+ }
173
+ total
174
+ }
175
+ }
176
+ `
177
+ })
178
+
179
+ if (response.errors) {
180
+ notify({
181
+ level: 'error',
182
+ message: 'fetch oauth2 clients fail'
183
+ })
184
+ } else {
185
+ return response.data.oauth2Clients
186
+ }
187
+ }
188
+ }
@@ -0,0 +1,15 @@
1
+ export default function route(page: string) {
2
+ switch (page) {
3
+ case 'oauth2-client-register':
4
+ import('./pages/oauth2-client-register')
5
+ return page
6
+
7
+ case 'oauth2-client':
8
+ import('./pages/oauth2-client')
9
+ return page
10
+
11
+ case 'oauth2-clients':
12
+ import('./pages/oauth2-clients')
13
+ return page
14
+ }
15
+ }
@@ -0,0 +1,13 @@
1
+ {
2
+ "extends": "../../tsconfig-base.json",
3
+ "compilerOptions": {
4
+ "experimentalDecorators": true,
5
+ "skipLibCheck": true,
6
+ "strict": true,
7
+ "declaration": true,
8
+ "module": "esnext",
9
+ "outDir": "../dist-client",
10
+ "baseUrl": "./"
11
+ },
12
+ "include": ["./**/*"]
13
+ }
@@ -101,7 +101,6 @@ Oauth2ClientRegister.styles = [
101
101
  :host {
102
102
  display: flex;
103
103
  flex-direction: column;
104
- color: var(--md-sys-color-on-background);
105
104
  background-color: var(--md-sys-color-background);
106
105
  padding: var(--spacing-large);
107
106
 
@@ -109,19 +108,16 @@ Oauth2ClientRegister.styles = [
109
108
 
110
109
  overflow: auto;
111
110
  }
112
-
113
111
  h2 {
114
112
  margin: var(--title-margin);
115
113
  font: var(--title-font);
116
114
  color: var(--title-text-color);
117
115
  }
118
-
119
116
  [page-description] {
120
117
  margin: var(--page-description-margin);
121
118
  font: var(--page-description-font);
122
119
  color: var(--page-description-color);
123
120
  }
124
-
125
121
  [icon] {
126
122
  position: absolute;
127
123
  top: 10px;
@@ -129,18 +125,19 @@ Oauth2ClientRegister.styles = [
129
125
 
130
126
  max-width: 80px;
131
127
  }
132
-
133
128
  [icon] img {
134
129
  max-width: 100%;
135
130
  max-height: 100%;
136
131
  }
137
132
 
133
+ :host * {
134
+ display: block;
135
+ }
138
136
  label {
139
137
  font: var(--label-font);
140
138
  color: var(--label-color, var(--md-sys-color-on-surface));
141
139
  text-transform: var(--label-text-transform);
142
140
  }
143
-
144
141
  input,
145
142
  select {
146
143
  border: var(--border-dim-color);
@@ -151,7 +148,6 @@ Oauth2ClientRegister.styles = [
151
148
 
152
149
  flex: 1;
153
150
  }
154
-
155
151
  select:focus,
156
152
  input:focus {
157
153
  outline: none;
@@ -162,21 +158,13 @@ Oauth2ClientRegister.styles = [
162
158
  grid-template-columns: 1fr 1fr;
163
159
  grid-gap: 15px;
164
160
  }
165
-
166
161
  [field] {
167
162
  display: flex;
168
163
  flex-direction: column;
169
164
  }
170
-
171
165
  [grid-span] {
172
166
  grid-column: span 2;
173
167
  }
174
-
175
- md-elevated-button {
176
- margin-top: 30px;
177
- width: 100%;
178
- }
179
-
180
168
  @media screen and (max-width: 480px) {
181
169
  [field] {
182
170
  grid-column: span 2;
@@ -1 +1 @@
1
- {"version":3,"file":"oauth2-client-register.js","sourceRoot":"","sources":["../../client/pages/oauth2-client-register.ts"],"names":[],"mappings":";AAAA,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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,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;AAGnD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IA+FhE,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,4BAA4B;SACpC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;QAIP,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,KAAK;;WAExB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;+DAgB+C,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;qCAgB5D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;;KAElE,CAAA;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB,CAAC,CAAC;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACxF,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACzB,OAAO,YAAY,CAAA;QACrB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,YAAY;aACb;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,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAA;YAC9C,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAA;QACjC,CAAC;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAC1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACnB,CAAC;IACH,CAAC;;AA1LM,2BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqFF;CACF,AAvFY,CAuFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAe;AAE3B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;kDAAA;AA7F1B,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CA4LhC","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } 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-client-register')\nexport class Oauth2ClientRegister extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n position: relative;\n\n overflow: auto;\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 [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n input,\n select {\n border: var(--border-dim-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\n select:focus,\n input:focus {\n outline: none;\n }\n\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] {\n display: flex;\n flex-direction: column;\n }\n\n [grid-span] {\n grid-column: span 2;\n }\n\n md-elevated-button {\n margin-top: 30px;\n width: 100%;\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @property({ type: String }) _icon?: string\n\n @query('form') form!: HTMLFormElement\n\n get context() {\n return {\n title: `oauth2 client registration`\n }\n }\n\n render() {\n return html`\n <h2>Register new oauth2 client</h2>\n <p page-description>You can register new oauth2 client here</p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input type=\"text\" id=\"name\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input type=\"text\" id=\"description\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input type=\"text\" id=\"icon\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\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\" />\n The client identifier issued to the client during the application registration process.\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\" />\n The client secret issued to the client during the application registration process.\n </div>\n </div>\n\n <md-elevated-button @click=${this.createOauth2Client.bind(this)}>register</md-elevated-button>\n </form>\n `\n }\n\n async createOauth2Client(e) {\n e.preventDefault()\n\n const formData = new FormData(this.form)\n\n const oauth2Client = Array.from(formData.entries()).reduce((oauth2Client, [key, value]) => {\n oauth2Client[key] = value\n return oauth2Client\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($oauth2Client: NewOauth2Client!) {\n createOauth2Client(oauth2Client: $oauth2Client) {\n id\n }\n }\n `,\n variables: {\n oauth2Client\n }\n })\n\n if (response.errors) {\n notify({\n level: 'error',\n message: 'create oauth2 client fail'\n })\n } else {\n const id = response.data.createOauth2Client.id\n navigate(`oauth2-client/${id}`)\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}
1
+ {"version":3,"file":"oauth2-client-register.js","sourceRoot":"","sources":["../../client/pages/oauth2-client-register.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } 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-client-register')\nexport class Oauth2ClientRegister 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 position: relative;\n\n overflow: auto;\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\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n :host * {\n display: block;\n }\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n input,\n select {\n border: var(--border-dim-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 outline: none;\n }\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 }\n [grid-span] {\n grid-column: span 2;\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @property({ type: String }) _icon?: string\n\n @query('form') form!: HTMLFormElement\n\n get context() {\n return {\n title: `oauth2 client registration`\n }\n }\n\n render() {\n return html`\n <h2>Register new oauth2 client</h2>\n <p page-description>You can register new oauth2 client here</p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input type=\"text\" id=\"name\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input type=\"text\" id=\"description\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input type=\"text\" id=\"icon\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\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\" />\n The client identifier issued to the client during the application registration process.\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\" />\n The client secret issued to the client during the application registration process.\n </div>\n </div>\n\n <md-elevated-button @click=${this.createOauth2Client.bind(this)}>register</md-elevated-button>\n </form>\n `\n }\n\n async createOauth2Client(e) {\n e.preventDefault()\n\n const formData = new FormData(this.form)\n\n const oauth2Client = Array.from(formData.entries()).reduce((oauth2Client, [key, value]) => {\n oauth2Client[key] = value\n return oauth2Client\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($oauth2Client: NewOauth2Client!) {\n createOauth2Client(oauth2Client: $oauth2Client) {\n id\n }\n }\n `,\n variables: {\n oauth2Client\n }\n })\n\n if (response.errors) {\n notify({\n level: 'error',\n message: 'create oauth2 client fail'\n })\n } else {\n const id = response.data.createOauth2Client.id\n navigate(`oauth2-client/${id}`)\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}