@things-factory/oauth2-client 9.1.13 → 10.0.0-beta.1

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.
Files changed (15) hide show
  1. package/dist-client/pages/oauth2-client/oauth2-client-list-page.d.ts +1 -7
  2. package/dist-client/pages/oauth2-client/oauth2-client-list-page.js +48 -90
  3. package/dist-client/pages/oauth2-client/oauth2-client-list-page.js.map +1 -1
  4. package/dist-client/pages/oauth2-client-register.d.ts +1 -9
  5. package/dist-client/pages/oauth2-client-register.js +36 -57
  6. package/dist-client/pages/oauth2-client-register.js.map +1 -1
  7. package/dist-client/pages/oauth2-client.d.ts +1 -9
  8. package/dist-client/pages/oauth2-client.js +88 -146
  9. package/dist-client/pages/oauth2-client.js.map +1 -1
  10. package/dist-client/pages/oauth2-clients.js +39 -61
  11. package/dist-client/pages/oauth2-clients.js.map +1 -1
  12. package/dist-client/route.d.ts +1 -1
  13. package/dist-client/tsconfig.tsbuildinfo +1 -1
  14. package/dist-server/tsconfig.tsbuildinfo +1 -1
  15. package/package.json +9 -9
package/dist-client/pages/oauth2-client.js CHANGED
@@ -6,10 +6,9 @@ import gql from 'graphql-tag';
6
6
  import { css, html } from 'lit';
7
7
  import { customElement, property, query, queryAll } from 'lit/decorators.js';
8
8
  import { asyncReplace } from 'lit/directives/async-replace.js';
9
- import { connect } from 'pwa-helpers/connect-mixin.js';
10
9
  import { client } from '@operato/graphql';
11
10
  import { notify } from '@operato/layout';
12
- import { navigate, PageView, store } from '@operato/shell';
11
+ import { navigate, PageView } from '@operato/shell';
13
12
  import { sleep } from '@operato/utils';
14
13
  const OAUTH2CLIENT = `
15
14
  id
@@ -36,45 +35,39 @@ tokenType
36
35
  updatedAt
37
36
  createdAt
38
37
  `;
39
- let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
38
+ let Oauth2Client = class Oauth2Client extends PageView {
40
39
  static { this.styles = [
41
40
  css `
42
- :host {
43
- display: flex;
41
+ :host { display: flex;
44
42
  flex-direction: column;
45
43
  overflow-y: auto;
46
44
  position: relative;
47
45
 
48
46
  background-color: var(--md-sys-color-background);
49
47
  padding: var(--spacing-large);
50
- }
48
+ }
51
49
 
52
- h2 {
53
- margin: var(--title-margin);
50
+ h2 { margin: var(--title-margin);
54
51
  font: var(--title-font);
55
52
  color: var(--title-text-color);
56
- }
53
+ }
57
54
 
58
- [page-description] {
59
- margin: var(--page-description-margin);
55
+ [page-description] { margin: var(--page-description-margin);
60
56
  font: var(--page-description-font);
61
57
  color: var(--page-description-color);
62
- }
58
+ }
63
59
 
64
- [icon] {
65
- position: absolute;
60
+ [icon] { position: absolute;
66
61
  top: 10px;
67
62
  right: 10px;
68
63
  max-width: 80px;
69
- }
64
+ }
70
65
 
71
- [icon] img {
72
- max-width: 100%;
66
+ [icon] img { max-width: 100%;
73
67
  max-height: 100%;
74
- }
68
+ }
75
69
 
76
- [button-primary] {
77
- background-color: var(--button-primary-background-color);
70
+ [button-primary] { background-color: var(--button-primary-background-color);
78
71
  border: var(--button-border);
79
72
  border-radius: var(--button-border-radius);
80
73
  margin: var(--button-margin);
@@ -84,92 +77,78 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
84
77
  text-transform: var(--button-text-transform);
85
78
 
86
79
  text-decoration: none;
87
- }
80
+ }
88
81
 
89
- [button-primary]:hover {
90
- background-color: var(--button-primary-active-background-color);
82
+ [button-primary]:hover { background-color: var(--button-primary-active-background-color);
91
83
  box-shadow: var(--button-active-box-shadow);
92
- }
84
+ }
93
85
 
94
- [fieldset-container] {
95
- background-color: var(--md-sys-color-surface);
86
+ [fieldset-container] { background-color: var(--md-sys-color-surface);
96
87
  margin: var(--spacing-large) 0 var(--spacing-medium) 0;
97
88
  padding: var(--spacing-medium);
98
89
  border-radius: var(--border-radius);
99
90
  box-shadow: var(--box-shadow);
100
91
 
101
- label {
102
- font: var(--label-font);
92
+ label { font: var(--label-font);
103
93
  color: var(--label-color, var(--md-sys-color-on-surface));
104
94
  text-transform: var(--label-text-transform);
105
- }
95
+ }
106
96
 
107
97
  input,
108
- select {
109
- border: var(--border-dim-color);
98
+ select { border: var(--border-dim-color);
110
99
  border-radius: var(--border-radius);
111
100
  margin: var(--input-margin);
112
101
  padding: var(--input-padding);
113
102
  font: var(--input-font);
114
103
 
115
104
  flex: 1;
116
- }
105
+ }
117
106
 
118
107
  select:focus,
119
108
  input:focus,
120
- button {
121
- outline: none;
122
- }
109
+ button { outline: none;
110
+ }
123
111
 
124
- form {
125
- max-width: var(--content-container-max-width);
126
- }
127
- }
112
+ form { max-width: var(--content-container-max-width);
113
+ }
114
+ }
128
115
 
129
- [fieldset-container] fieldset {
130
- margin: 0;
116
+ [fieldset-container] fieldset { margin: 0;
131
117
  margin-top: -15px;
132
- }
118
+ }
133
119
 
134
- fieldset {
135
- border-radius: var(--border-radius);
120
+ fieldset { border-radius: var(--border-radius);
136
121
  border: var(--border-dim-color);
137
122
  margin: var(--fieldset-margin);
138
123
  padding: var(--fieldset-padding);
139
- }
124
+ }
140
125
 
141
- legend {
142
- padding: var(--legend-padding);
126
+ legend { padding: var(--legend-padding);
143
127
  font-weight: bold;
144
128
  color: var(--legend-color);
145
- }
129
+ }
146
130
 
147
- [field-2column] {
148
- display: grid;
131
+ [field-2column] { display: grid;
149
132
  grid-template-columns: 1fr 1fr;
150
133
  grid-gap: 15px;
151
- }
134
+ }
152
135
 
153
- [field] {
154
- display: flex;
136
+ [field] { display: flex;
155
137
  flex-direction: column;
156
138
  position: relative;
157
- }
139
+ }
158
140
 
159
- [grid-span] {
160
- grid-column: span 2;
161
- }
141
+ [grid-span] { grid-column: span 2;
142
+ }
162
143
 
163
- button {
164
- display: flex;
144
+ button { display: flex;
165
145
  align-items: center;
166
146
  gap: var(--spacing-small);
167
- }
147
+ }
168
148
 
169
149
  button,
170
150
  input[type='submit'],
171
- [button-in-field] {
172
- background-color: var(--button-background-color);
151
+ [button-in-field] { background-color: var(--button-background-color);
173
152
  border: var(--button-border);
174
153
  border-radius: var(--button-border-radius);
175
154
  padding: var(--button-padding);
@@ -180,38 +159,31 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
180
159
  margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
181
160
  float: right;
182
161
  text-decoration: none;
183
- }
162
+ }
184
163
 
185
164
  button:hover,
186
- input[type='submit']:hover {
187
- border: var(--button-activ-border);
165
+ input[type='submit']:hover { border: var(--button-activ-border);
188
166
  box-shadow: var(--button-active-box-shadow);
189
- }
167
+ }
190
168
 
191
- [button-in-field] {
192
- border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
169
+ [button-in-field] { border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
193
170
  position: absolute;
194
171
  top: 12px;
195
172
  right: 0;
196
173
  max-height: 36px;
197
- }
174
+ }
198
175
 
199
- [input-hint] {
200
- font: var(--input-hint-font);
176
+ [input-hint] { font: var(--input-hint-font);
201
177
  color: var(--input-hint-color);
202
- }
178
+ }
203
179
 
204
- @media screen and (max-width: 480px) {
205
- [field] {
206
- grid-column: span 2;
207
- }
208
- }
180
+ @media screen and (max-width: 480px) { [field] { grid-column: span 2;
181
+ }
182
+ }
209
183
  `
210
184
  ]; }
211
185
  get context() {
212
- return {
213
- title: {
214
- icon: 'apps',
186
+ return { title: { icon: 'apps',
215
187
  text: this.oauth2Client?.name
216
188
  }
217
189
  };
@@ -414,8 +386,7 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
414
386
  }
415
387
  }
416
388
  firstUpdated() {
417
- this.clipboard = new Clipboard(this.copybuttons, {
418
- target: (trigger => trigger.parentElement.querySelector('input'))
389
+ this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input'))
419
390
  });
420
391
  }
421
392
  async pageUpdated(changes, lifecycle, before) {
@@ -440,16 +411,12 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
440
411
  }
441
412
  }
442
413
  async fetchOauth2Client() {
443
- const response = await client.query({
444
- query: gql `
445
- query($id: String!) {
446
- oauth2Client(id: $id) {
447
- ${OAUTH2CLIENT}
448
- }
449
- }
414
+ const response = await client.query({ query: gql `
415
+ query($id: String!) { oauth2Client(id: $id) { ${OAUTH2CLIENT}
416
+ }
417
+ }
450
418
  `,
451
- variables: {
452
- id: this.lifecycle.resourceId
419
+ variables: { id: this.lifecycle.resourceId
453
420
  }
454
421
  });
455
422
  this.oauth2Client = response.data.oauth2Client;
@@ -461,22 +428,17 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
461
428
  return patch;
462
429
  }, {});
463
430
  const id = this.lifecycle.resourceId;
464
- const response = await client.mutate({
465
- mutation: gql `
466
- mutation($id: String!, $patch: Oauth2ClientPatch!) {
467
- updateOauth2Client(id: $id, patch: $patch) {
468
- ${OAUTH2CLIENT}
469
- }
470
- }
431
+ const response = await client.mutate({ mutation: gql `
432
+ mutation($id: String!, $patch: Oauth2ClientPatch!) { updateOauth2Client(id: $id, patch: $patch) { ${OAUTH2CLIENT}
433
+ }
434
+ }
471
435
  `,
472
- variables: {
473
- id,
436
+ variables: { id,
474
437
  patch
475
438
  }
476
439
  });
477
440
  if (response.errors) {
478
- notify({
479
- level: 'error',
441
+ notify({ level: 'error',
480
442
  message: 'update oauth2 client fail'
481
443
  });
482
444
  }
@@ -487,19 +449,15 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
487
449
  async deleteOauth2Client(e) {
488
450
  e.preventDefault();
489
451
  const id = this.lifecycle.resourceId;
490
- const response = await client.mutate({
491
- mutation: gql `
492
- mutation ($id: String!) {
493
- deleteOauth2Client(id: $id)
494
- }
452
+ const response = await client.mutate({ mutation: gql `
453
+ mutation ($id: String!) { deleteOauth2Client(id: $id)
454
+ }
495
455
  `,
496
- variables: {
497
- id
456
+ variables: { id
498
457
  }
499
458
  });
500
459
  if (response.errors) {
501
- notify({
502
- level: 'error',
460
+ notify({ level: 'error',
503
461
  message: 'delete oauth2 client fail'
504
462
  });
505
463
  }
@@ -510,49 +468,39 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
510
468
  async generateOauth2AccessToken() {
511
469
  const id = this.lifecycle.resourceId;
512
470
  if (this.oauth2Client.grantType == 'code') {
513
- const response = await client.mutate({
514
- mutation: gql `
515
- mutation ($id: String!) {
516
- getOauth2AuthUrl(id: $id)
517
- }
471
+ const response = await client.mutate({ mutation: gql `
472
+ mutation ($id: String!) { getOauth2AuthUrl(id: $id)
473
+ }
518
474
  `,
519
- variables: {
520
- id: this.lifecycle.resourceId
475
+ variables: { id: this.lifecycle.resourceId
521
476
  }
522
477
  });
523
478
  if (!response.errors) {
524
479
  location.href = response.data.getOauth2AuthUrl;
525
480
  }
526
481
  else {
527
- notify({
528
- level: 'error',
482
+ notify({ level: 'error',
529
483
  message: 'getting application access token fail'
530
484
  });
531
485
  }
532
486
  }
533
487
  else {
534
- const response = await client.mutate({
535
- mutation: gql `
536
- mutation($id: String!) {
537
- getOauth2AccessToken(id: $id) {
538
- ${OAUTH2CLIENT}
539
- }
540
- }
488
+ const response = await client.mutate({ mutation: gql `
489
+ mutation($id: String!) { getOauth2AccessToken(id: $id) { ${OAUTH2CLIENT}
490
+ }
491
+ }
541
492
  `,
542
- variables: {
543
- id: this.lifecycle.resourceId
493
+ variables: { id: this.lifecycle.resourceId
544
494
  }
545
495
  });
546
496
  if (response.errors) {
547
- notify({
548
- level: 'error',
497
+ notify({ level: 'error',
549
498
  message: 'getting application access token fail'
550
499
  });
551
500
  }
552
501
  else {
553
502
  this.oauth2Client = response.data.getOauth2AccessToken;
554
- notify({
555
- level: 'info',
503
+ notify({ level: 'info',
556
504
  message: 'got application access token successfully'
557
505
  });
558
506
  }
@@ -560,28 +508,22 @@ let Oauth2Client = class Oauth2Client extends connect(store)(PageView) {
560
508
  }
561
509
  async refreshOauth2AccessToken() {
562
510
  const id = this.lifecycle.resourceId;
563
- const response = await client.mutate({
564
- mutation: gql `
565
- mutation($id: String!) {
566
- refreshOauth2AccessToken(id: $id) {
567
- ${OAUTH2CLIENT}
568
- }
569
- }
511
+ const response = await client.mutate({ mutation: gql `
512
+ mutation($id: String!) { refreshOauth2AccessToken(id: $id) { ${OAUTH2CLIENT}
513
+ }
514
+ }
570
515
  `,
571
- variables: {
572
- id: this.lifecycle.resourceId
516
+ variables: { id: this.lifecycle.resourceId
573
517
  }
574
518
  });
575
519
  if (response.errors) {
576
- notify({
577
- level: 'error',
520
+ notify({ level: 'error',
578
521
  message: 'getting application access token fail'
579
522
  });
580
523
  }
581
524
  else {
582
525
  this.oauth2Client = response.data.refreshOauth2AccessToken;
583
- notify({
584
- level: 'info',
526
+ notify({ level: 'info',
585
527
  message: 'got application access token successfully'
586
528
  });
587
529
  }
package/dist-client/pages/oauth2-client.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"oauth2-client.js","sourceRoot":"","sources":["../../client/pages/oauth2-client.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@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(--md-sys-color-background);\n padding: var(--spacing-large);\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 max-width: 80px;\n }\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\n [button-primary]:hover {\n background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] {\n background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\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 button {\n outline: none;\n }\n\n form {\n max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\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 position: relative;\n }\n\n [grid-span] {\n grid-column: span 2;\n }\n\n button {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\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(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\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\n [button-in-field] {\n border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\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 }) 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><md-icon>apps</md-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\n yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\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"]}
1
+ {"version":3,"file":"oauth2-client.js","sourceRoot":"","sources":["../../client/pages/oauth2-client.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@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 { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { navigate, PageView } 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 PageView { static styles = [\n css`\n :host { display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\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 [icon] { position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n\n [icon] img { max-width: 100%;\n max-height: 100%;\n }\n\n [button-primary] { 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\n [button-primary]:hover { background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] { background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n label { 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 { 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 button { outline: none;\n }\n\n form { max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset { margin: 0;\n margin-top: -15px;\n }\n\n fieldset { border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend { padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] { display: flex;\n flex-direction: column;\n position: relative;\n }\n\n [grid-span] { grid-column: span 2;\n }\n\n button { display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n button,\n input[type='submit'],\n [button-in-field] { 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(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\n\n button:hover,\n input[type='submit']:hover { border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [button-in-field] { border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] { font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) { [field] { 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() { return { title: { icon: 'apps',\n text: this.oauth2Client?.name\n }\n }\n }\n\n render() { var oauth2Client = this.oauth2Client || {}\n\n return html`\n <div>\n <h2><md-icon>apps</md-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=${ 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(${ 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 ${ 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 ${ 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=${ 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 ${ 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 => { e.preventDefault()\n await this.updateOauth2Client()\n await this.generateOauth2AccessToken()\n }}>get new access token</button>\n <button @click=${async e => { 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 => { e.preventDefault()\n await this.updateOauth2Client()\n }}>\n </form>\n `\n }\n\n updated(changes) { if (changes.has('oauth2Client')) { this._grantType = this.oauth2Client?.grantType\n }\n }\n\n firstUpdated() { this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { await this.fetchOauth2Client()\n }\n }\n\n async *expTimer(exp) { const DAY = 24 * 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) { 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\n yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n await sleep(1000)\n }\n }\n\n async fetchOauth2Client() { const response = await client.query({ query: gql`\n query($id: String!) { oauth2Client(id: $id) { ${OAUTH2CLIENT}\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n this.oauth2Client = response.data.oauth2Client\n }\n\n async updateOauth2Client() { const formData = new FormData(this.form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => { patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation($id: String!, $patch: Oauth2ClientPatch!) { updateOauth2Client(id: $id, patch: $patch) { ${OAUTH2CLIENT}\n }\n }\n `,\n variables: { id,\n patch\n }\n })\n\n if (response.errors) { notify({ level: 'error',\n message: 'update oauth2 client fail'\n })\n } else { this.oauth2Client = response.data.updateOauth2Client\n }\n }\n\n async deleteOauth2Client(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { deleteOauth2Client(id: $id)\n }\n `,\n variables: { id\n }\n })\n\n if (response.errors) { notify({ level: 'error',\n message: 'delete oauth2 client fail'\n })\n } else { navigate('oauth2-clients')\n }\n }\n\n async generateOauth2AccessToken() { const id = this.lifecycle.resourceId\n\n if (this.oauth2Client.grantType == 'code') { const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { getOauth2AuthUrl(id: $id)\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n if (!response.errors) { location.href = response.data.getOauth2AuthUrl\n } else { notify({ level: 'error',\n message: 'getting application access token fail'\n })\n }\n } else { const response = await client.mutate({ mutation: gql`\n mutation($id: String!) { getOauth2AccessToken(id: $id) { ${OAUTH2CLIENT}\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n if (response.errors) { notify({ level: 'error',\n message: 'getting application access token fail'\n })\n } else { this.oauth2Client = response.data.getOauth2AccessToken\n notify({ level: 'info',\n message: 'got application access token successfully'\n })\n }\n }\n }\n\n async refreshOauth2AccessToken() { const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation($id: String!) { refreshOauth2AccessToken(id: $id) { ${OAUTH2CLIENT}\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n if (response.errors) { notify({ level: 'error',\n message: 'getting application access token fail'\n })\n } else { this.oauth2Client = response.data.refreshOauth2AccessToken\n notify({ level: 'info',\n message: 'got application access token successfully'\n })\n }\n }\n}\n"]}