@things-factory/auth-ui 7.0.1-alpha.105 → 7.0.1-alpha.106

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 (67) hide show
  1. package/client/components/contact-us.ts +4 -2
  2. package/client/components/create-domain-popup.ts +1 -1
  3. package/client/components/create-role.ts +15 -5
  4. package/client/components/create-user.ts +16 -6
  5. package/client/components/delete-user-popup.ts +1 -1
  6. package/client/components/domain-switch.ts +1 -1
  7. package/client/components/partner-info-card.ts +2 -2
  8. package/client/components/partner-role-editor.ts +5 -3
  9. package/client/components/profile-component.ts +3 -3
  10. package/client/components/role-privilege-editor.ts +5 -5
  11. package/client/components/user-role-editor.ts +5 -5
  12. package/client/entries/auth/activate.ts +2 -2
  13. package/client/entries/auth/checkin.ts +3 -3
  14. package/client/entries/auth/result.ts +4 -4
  15. package/client/entries/oauth2/oauth2-decision-page.ts +2 -2
  16. package/client/pages/app-binding/app-binding.ts +1 -1
  17. package/client/pages/app-binding/app-bindings.ts +1 -1
  18. package/client/pages/appliance/appliance.ts +1 -1
  19. package/client/pages/appliance/register.ts +1 -1
  20. package/client/pages/application/application.ts +1 -1
  21. package/client/pages/application/register.ts +1 -1
  22. package/client/themes/auth-theme.css +3 -3
  23. package/dist-client/components/contact-us.js +4 -2
  24. package/dist-client/components/contact-us.js.map +1 -1
  25. package/dist-client/components/create-domain-popup.js +1 -1
  26. package/dist-client/components/create-domain-popup.js.map +1 -1
  27. package/dist-client/components/create-role.js +14 -4
  28. package/dist-client/components/create-role.js.map +1 -1
  29. package/dist-client/components/create-user.js +14 -4
  30. package/dist-client/components/create-user.js.map +1 -1
  31. package/dist-client/components/delete-user-popup.js +1 -1
  32. package/dist-client/components/delete-user-popup.js.map +1 -1
  33. package/dist-client/components/domain-switch.js +1 -1
  34. package/dist-client/components/domain-switch.js.map +1 -1
  35. package/dist-client/components/partner-info-card.js +2 -2
  36. package/dist-client/components/partner-info-card.js.map +1 -1
  37. package/dist-client/components/partner-role-editor.js +5 -3
  38. package/dist-client/components/partner-role-editor.js.map +1 -1
  39. package/dist-client/components/profile-component.js +3 -3
  40. package/dist-client/components/profile-component.js.map +1 -1
  41. package/dist-client/components/role-privilege-editor.js +5 -5
  42. package/dist-client/components/role-privilege-editor.js.map +1 -1
  43. package/dist-client/components/user-role-editor.js +5 -5
  44. package/dist-client/components/user-role-editor.js.map +1 -1
  45. package/dist-client/entries/auth/activate.js +2 -2
  46. package/dist-client/entries/auth/activate.js.map +1 -1
  47. package/dist-client/entries/auth/checkin.js +3 -3
  48. package/dist-client/entries/auth/checkin.js.map +1 -1
  49. package/dist-client/entries/auth/result.js +4 -4
  50. package/dist-client/entries/auth/result.js.map +1 -1
  51. package/dist-client/entries/oauth2/oauth2-decision-page.js +2 -2
  52. package/dist-client/entries/oauth2/oauth2-decision-page.js.map +1 -1
  53. package/dist-client/pages/app-binding/app-binding.js +1 -1
  54. package/dist-client/pages/app-binding/app-binding.js.map +1 -1
  55. package/dist-client/pages/app-binding/app-bindings.js +1 -1
  56. package/dist-client/pages/app-binding/app-bindings.js.map +1 -1
  57. package/dist-client/pages/appliance/appliance.js +1 -1
  58. package/dist-client/pages/appliance/appliance.js.map +1 -1
  59. package/dist-client/pages/appliance/register.js +1 -1
  60. package/dist-client/pages/appliance/register.js.map +1 -1
  61. package/dist-client/pages/application/application.js +1 -1
  62. package/dist-client/pages/application/application.js.map +1 -1
  63. package/dist-client/pages/application/register.js +1 -1
  64. package/dist-client/pages/application/register.js.map +1 -1
  65. package/dist-client/themes/auth-theme.css +3 -3
  66. package/dist-client/tsconfig.tsbuildinfo +1 -1
  67. package/package.json +4 -4
package/client/components/contact-us.ts CHANGED
@@ -17,7 +17,7 @@ export class ContactUs extends localize(i18next)(LitElement) {
17
17
  return [
18
18
  css`
19
19
  :host {
20
- --md-theme-primary: var(--primary-color);
20
+ --md-theme-primary: var(--md-sys-color-primary);
21
21
  }
22
22
 
23
23
  * {
@@ -85,7 +85,9 @@ export class ContactUs extends localize(i18next)(LitElement) {
85
85
  }}
86
86
  ></md-filled-text-field>
87
87
  </div>
88
- <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}>${i18next.t('button.submit')}</md-elevated-button>
88
+ <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
89
+ >${i18next.t('button.submit')}</md-elevated-button
90
+ >
89
91
  <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
90
92
  </md-dialog>
91
93
  `
package/client/components/create-domain-popup.ts CHANGED
@@ -45,7 +45,7 @@ class CreateDomainPopup extends localize(i18next)(LitElement) {
45
45
  border-radius: var(--border-radius);
46
46
  margin: var(--input-margin);
47
47
  padding: var(--input-padding);
48
- background-color: var(--theme-white-color);
48
+ background-color: var(--md-sys-color-surface);
49
49
  font: var(--input-font);
50
50
 
51
51
  flex: 1;
package/client/components/create-role.ts CHANGED
@@ -13,7 +13,7 @@ class CreateRole extends localize(i18next)(LitElement) {
13
13
  static styles = css`
14
14
  :host {
15
15
  --md-text-field-fill-color: var(--theme-white-color);
16
- background-color: var(--theme-white-color);
16
+ background-color: var(--md-sys-color-surface);
17
17
  margin: var(--margin-wide) 0;
18
18
  padding: var(--padding-wide);
19
19
  border-radius: var(--border-radius);
@@ -50,10 +50,20 @@ class CreateRole extends localize(i18next)(LitElement) {
50
50
 
51
51
  render() {
52
52
  return html`
53
- <md-filled-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}></md-filled-text-field>
54
- <md-filled-text-field type="text" name="description" label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}></md-filled-text-field>
55
-
56
- <md-outlined-button @click=${this.onCreateRole.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
53
+ <md-filled-text-field
54
+ type="text"
55
+ name="name"
56
+ label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
57
+ ></md-filled-text-field>
58
+ <md-filled-text-field
59
+ type="text"
60
+ name="description"
61
+ label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
62
+ ></md-filled-text-field>
63
+
64
+ <md-outlined-button @click=${this.onCreateRole.bind(this)}
65
+ >${String(i18next.t('button.create'))}</md-outlined-button
66
+ >
57
67
  `
58
68
  }
59
69
 
package/client/components/create-user.ts CHANGED
@@ -8,7 +8,7 @@ class CreateUser extends LitElement {
8
8
  static styles = css`
9
9
  :host {
10
10
  --md-text-field-fill-color: var(--theme-white-color);
11
- background-color: var(--theme-white-color);
11
+ background-color: var(--md-sys-color-surface);
12
12
  margin: var(--margin-wide) 0;
13
13
  padding: var(--padding-wide);
14
14
  border-radius: var(--border-radius);
@@ -45,11 +45,21 @@ class CreateUser extends LitElement {
45
45
 
46
46
  render() {
47
47
  return html`
48
- <md-outlined-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}></md-outlined-text-field>
49
-
50
- <md-outlined-text-field type="email" name="email" label=${String(i18next.t('field.email'))}></md-outlined-text-field>
51
-
52
- <md-outlined-button @click=${this.onCreateUser.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
48
+ <md-outlined-text-field
49
+ type="text"
50
+ name="name"
51
+ label=${String(i18next.t('label.x name', { x: i18next.t('label.user') }))}
52
+ ></md-outlined-text-field>
53
+
54
+ <md-outlined-text-field
55
+ type="email"
56
+ name="email"
57
+ label=${String(i18next.t('field.email'))}
58
+ ></md-outlined-text-field>
59
+
60
+ <md-outlined-button @click=${this.onCreateUser.bind(this)}
61
+ >${String(i18next.t('button.create'))}</md-outlined-button
62
+ >
53
63
  `
54
64
  }
55
65
 
package/client/components/delete-user-popup.ts CHANGED
@@ -27,7 +27,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
27
27
 
28
28
  label {
29
29
  font: bold 14px var(--theme-font);
30
- color: var(--primary-color);
30
+ color: var(--md-sys-color-primary);
31
31
  }
32
32
 
33
33
  input {
package/client/components/domain-switch.ts CHANGED
@@ -41,7 +41,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
41
41
  span,
42
42
  select {
43
43
  flex: 1;
44
- color: var(--secondary-color);
44
+ color: var(--md-sys-color-secondary);
45
45
  font: bold 14px/20px var(--theme-font);
46
46
  }
47
47
 
package/client/components/partner-info-card.ts CHANGED
@@ -21,7 +21,7 @@ export class PartnerInfoCard extends LitElement {
21
21
  display: flex;
22
22
  max-height: 45vh;
23
23
  flex-direction: row;
24
- background-color: var(--theme-white-color);
24
+ background-color: var(--md-sys-color-surface-variant);
25
25
  margin: 0;
26
26
  padding: 0;
27
27
  border-radius: var(--border-radius);
@@ -31,7 +31,7 @@ export class PartnerInfoCard extends LitElement {
31
31
  [field-2column] {
32
32
  overflow: auto;
33
33
  flex: 1;
34
- background-color: var(--theme-white-color);
34
+ background-color: var(--md-sys-color-surface-variant);
35
35
  padding: var(--padding-default);
36
36
  border-radius: var(--border-radius);
37
37
  display: grid;
package/client/components/partner-role-editor.ts CHANGED
@@ -21,10 +21,10 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
 
24
- border: 1px solid var(--primary-color);
24
+ border: 1px solid var(--md-sys-color-primary);
25
25
  padding: var(--padding-default);
26
26
  font: normal 15px var(--theme-font);
27
- color: var(--secondary-color);
27
+ color: var(--md-sys-color-secondary);
28
28
  }
29
29
 
30
30
  md-elevated-button {
@@ -52,7 +52,9 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
52
52
 
53
53
  <div class="button-container">
54
54
  <md-elevated-button @click=${this.onSave}>${i18next.t('button.save')}</md-elevated-button>
55
- <md-elevated-button @click=${this.onTerminateContract} danger>${i18next.t('button.terminate contract')}</md-elevated-button>
55
+ <md-elevated-button @click=${this.onTerminateContract} danger
56
+ >${i18next.t('button.terminate contract')}</md-elevated-button
57
+ >
56
58
  </div>
57
59
  `
58
60
  }
package/client/components/profile-component.ts CHANGED
@@ -53,7 +53,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
53
53
  background: url(/assets/images/icon-profile.png) center top no-repeat;
54
54
  margin: var(--profile-icon-margin);
55
55
  padding: 180px 20px 20px 20px;
56
- color: var(--secondary-color);
56
+ color: var(--md-sys-color-secondary);
57
57
  font: var(--header-bar-title);
58
58
  text-align: center;
59
59
  }
@@ -69,7 +69,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
69
69
 
70
70
  label {
71
71
  font: bold 14px var(--theme-font);
72
- color: var(--primary-color);
72
+ color: var(--md-sys-color-primary);
73
73
  text-transform: capitalize;
74
74
  grid-column: 1;
75
75
  }
@@ -101,7 +101,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
101
101
  }
102
102
 
103
103
  footer a {
104
- color: var(--primary-color);
104
+ color: var(--md-sys-color-primary);
105
105
  text-decoration: none;
106
106
  font-weight: bold;
107
107
  }
package/client/components/role-privilege-editor.ts CHANGED
@@ -16,16 +16,16 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
16
16
  display: flex;
17
17
  flex-direction: column;
18
18
 
19
- border: 1px solid var(--primary-color);
19
+ border: 1px solid var(--md-sys-color-primary);
20
20
  font: normal 15px var(--theme-font);
21
- color: var(--secondary-color);
21
+ color: var(--md-sys-color-secondary);
22
22
  }
23
23
  div {
24
24
  margin: var(--margin-default);
25
25
  }
26
26
  ul {
27
27
  flex: 1;
28
- background-color: var(--theme-white-color);
28
+ background-color: var(--md-sys-color-surface-variant);
29
29
  overflow: auto;
30
30
  display: grid;
31
31
  grid-template-columns: 1fr 1fr;
@@ -53,14 +53,14 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
53
53
 
54
54
  md-elevated-button {
55
55
  margin: 5px;
56
- background-color: var(--theme-white-color);
56
+ background-color: var(--md-sys-color-surface-variant);
57
57
  }
58
58
 
59
59
  [danger] {
60
60
  --md-theme-primary: var(--md-danger-button-primary-color);
61
61
  }
62
62
  md-outlined-button {
63
- background-color: var(--theme-white-color);
63
+ background-color: var(--md-sys-color-surface-variant);
64
64
  }
65
65
 
66
66
  @media screen and (max-width: 480px) {
package/client/components/user-role-editor.ts CHANGED
@@ -26,9 +26,9 @@ class UserRoleEditor extends connect(store)(LitElement) {
26
26
  display: flex;
27
27
  flex-direction: column;
28
28
 
29
- border: 1px solid var(--primary-color);
29
+ border: 1px solid var(--md-sys-color-primary);
30
30
  font: normal 15px var(--theme-font);
31
- color: var(--secondary-color);
31
+ color: var(--md-sys-color-secondary);
32
32
  }
33
33
  ul {
34
34
  flex: 1;
@@ -46,7 +46,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
46
46
  input[readonly] {
47
47
  border: none;
48
48
  background-color: transparent;
49
- color: var(--secondary-color);
49
+ color: var(--md-sys-color-secondary);
50
50
  font: var(--input-font);
51
51
  }
52
52
  li {
@@ -58,7 +58,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
58
58
  [detail] md-icon {
59
59
  --md-icon-size: var(--fontsize-default);
60
60
  vertical-align: middle;
61
- color: var(--primary-color);
61
+ color: var(--md-sys-color-primary);
62
62
  }
63
63
  [detail] li {
64
64
  display: flex;
@@ -76,7 +76,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
76
76
  }
77
77
 
78
78
  md-outlined-button {
79
- background-color: var(--theme-white-color);
79
+ background-color: var(--md-sys-color-surface-variant);
80
80
  }
81
81
 
82
82
  @media screen and (max-width: 480px) {
package/client/entries/auth/activate.ts CHANGED
@@ -70,9 +70,9 @@ export class AuthActivate extends localize(i18next)(LitElement) {
70
70
 
71
71
  md-elevated-button {
72
72
  --md-theme-primary: var(--auth-button-background-color);
73
- --md-theme-on-primary: var(--primary-color);
73
+ --md-theme-on-primary: var(--md-sys-color-primary);
74
74
  --md-button-horizontal-padding: var(--padding-default);
75
- --md-button-ink-color: var(--primary-color);
75
+ --md-button-ink-color: var(--md-sys-color-primary);
76
76
  }
77
77
 
78
78
  contact-us {
package/client/entries/auth/checkin.ts CHANGED
@@ -26,7 +26,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
26
26
  height: 100dvh;
27
27
  }
28
28
  .header {
29
- background-color: var(--primary-color);
29
+ background-color: var(--md-sys-color-primary);
30
30
  height: var(--checkin-header-height);
31
31
  }
32
32
  .content {
@@ -37,7 +37,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
37
37
  .domains {
38
38
  margin: var(--margin-wide) 0;
39
39
  padding: 0;
40
- background-color: var(--theme-white-color);
40
+ background-color: var(--md-sys-color-surface);
41
41
  border-radius: var(--border-radius);
42
42
  border: var(--border-dark-color);
43
43
  list-style: none;
@@ -47,7 +47,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
47
47
  margin-bottom: -1px;
48
48
  padding: var(--padding-default) var(--padding-wide);
49
49
  font-size: 18px;
50
- color: var(--secondary-color);
50
+ color: var(--md-sys-color-secondary);
51
51
  text-align: left;
52
52
 
53
53
  cursor: pointer;
package/client/entries/auth/result.ts CHANGED
@@ -61,14 +61,14 @@ export class AuthResult extends localize(i18next)(LitElement) {
61
61
  background: url(/assets/images/icon-profile.png) center top no-repeat;
62
62
  margin: var(--profile-icon-margin);
63
63
  padding: 180px 20px 20px 20px;
64
- color: var(--secondary-color);
64
+ color: var(--md-sys-color-secondary);
65
65
  font: var(--header-bar-title);
66
66
  text-align: center;
67
67
  }
68
68
 
69
69
  label {
70
70
  font: bold 14px var(--theme-font);
71
- color: var(--primary-color);
71
+ color: var(--md-sys-color-primary);
72
72
  }
73
73
  #button-area {
74
74
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
@@ -76,9 +76,9 @@ export class AuthResult extends localize(i18next)(LitElement) {
76
76
  }
77
77
  md-elevated-button {
78
78
  --md-theme-primary: var(--auth-button-background-color);
79
- --md-theme-on-primary: var(--primary-color);
79
+ --md-theme-on-primary: var(--md-sys-color-primary);
80
80
  --md-button-horizontal-padding: var(--padding-default);
81
- --md-button-ink-color: var(--primary-color);
81
+ --md-button-ink-color: var(--md-sys-color-primary);
82
82
  }
83
83
  .lottie-container {
84
84
  width: 100%;
package/client/entries/oauth2/oauth2-decision-page.ts CHANGED
@@ -19,11 +19,11 @@ class OAuth2DecisionPage extends LitElement {
19
19
  display: flex;
20
20
  flex-direction: column;
21
21
 
22
- border: 1px solid var(--primary-color);
22
+ border: 1px solid var(--md-sys-color-primary);
23
23
  margin: var(--margin-default);
24
24
  padding: var(--padding-default);
25
25
  font: normal 15px var(--theme-font);
26
- color: var(--secondary-color);
26
+ color: var(--md-sys-color-secondary);
27
27
  }
28
28
 
29
29
  [field-2column] {
package/client/pages/app-binding/app-binding.ts CHANGED
@@ -70,7 +70,7 @@ class AppBinding extends connect(store)(PageView) {
70
70
  max-width: var(--content-container-max-width);
71
71
  }
72
72
  [fieldset-container] {
73
- background-color: var(--theme-white-color);
73
+ background-color: var(--md-sys-color-surface);
74
74
  margin: var(--margin-wide) 0 var(--margin-default) 0;
75
75
  padding: var(--padding-default);
76
76
  border-radius: var(--border-radius);
package/client/pages/app-binding/app-bindings.ts CHANGED
@@ -62,7 +62,7 @@ class AppBindings extends connect(store)(PageView) {
62
62
  color: var(--td-color);
63
63
  }
64
64
  td a {
65
- color: var(--primary-color);
65
+ color: var(--md-sys-color-primary);
66
66
  font: bold 16px var(--theme-font);
67
67
 
68
68
  display: block;
package/client/pages/appliance/appliance.ts CHANGED
@@ -58,7 +58,7 @@ class Appliance extends connect(store)(PageView) {
58
58
  max-width: var(--content-container-max-width);
59
59
  }
60
60
  [fieldset-container] {
61
- background-color: var(--theme-white-color);
61
+ background-color: var(--md-sys-color-surface);
62
62
  margin: var(--margin-wide) 0 var(--margin-default) 0;
63
63
  padding: var(--padding-default);
64
64
  border-radius: var(--border-radius);
package/client/pages/appliance/register.ts CHANGED
@@ -34,7 +34,7 @@ class ApplianceRegister extends connect(store)(PageView) {
34
34
  }
35
35
 
36
36
  [form-container] {
37
- background-color: var(--theme-white-color);
37
+ background-color: var(--md-sys-color-surface);
38
38
  padding: var(--padding-wide);
39
39
  border-radius: var(--border-radius);
40
40
  box-shadow: var(--box-shadow);
package/client/pages/application/application.ts CHANGED
@@ -67,7 +67,7 @@ class Application extends connect(store)(PageView) {
67
67
  max-width: var(--content-container-max-width);
68
68
  }
69
69
  [fieldset-container] {
70
- background-color: var(--theme-white-color);
70
+ background-color: var(--md-sys-color-surface);
71
71
  margin: var(--margin-wide) 0 var(--margin-default) 0;
72
72
  padding: var(--padding-default);
73
73
  border-radius: var(--border-radius);
package/client/pages/application/register.ts CHANGED
@@ -49,7 +49,7 @@ class ApplicationRegister extends connect(store)(PageView) {
49
49
  }
50
50
 
51
51
  [form-container] {
52
- background-color: var(--theme-white-color);
52
+ background-color: var(--md-sys-color-surface);
53
53
  padding: var(--padding-wide);
54
54
  border-radius: var(--border-radius);
55
55
  box-shadow: var(--box-shadow);
package/client/themes/auth-theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  body {
2
2
  /* login page style*/
3
- --auth-background: var(--primary-color);
3
+ --auth-background: var(--md-sys-color-primary);
4
4
  --auth-brand-name: bold 20px var(--theme-font);
5
5
  --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
6
6
  --auth-brand-welcome-msg: normal 12px var(--theme-font);
@@ -16,7 +16,7 @@ body {
16
16
  --auth-input-border-light: 1px solid var(--opacity-light-color);
17
17
  --auth-input-color: var(--theme-white-color);
18
18
 
19
- --auth-button-background-color: var(--theme-white-color);
19
+ --auth-button-background-color: var(--md-sys-color-surface-variant);
20
20
  --auth-button-background-focus-color: var(--status-success-color);
21
21
  --auth-button-font: bold 20px var(--theme-font);
22
22
  --auth-button-padding: 9px 12px 7px 12px;
@@ -44,7 +44,7 @@ body {
44
44
  /* domain select page style*/
45
45
  --checkin-background-color: var(--md-sys-color-background);
46
46
  --checkin-header-height: 45px;
47
- --checkin-header-background-color: var(--primary-color);
47
+ --checkin-header-background-color: var(--md-sys-color-primary);
48
48
  --checkin-header-title-font: bold 19px var(--theme-font);
49
49
  --checkin-header-title-color: var(--theme-white-color);
50
50
  --checkin-wrap-max-width: 500px;
package/dist-client/components/contact-us.js CHANGED
@@ -13,7 +13,7 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
13
13
  return [
14
14
  css `
15
15
  :host {
16
- --md-theme-primary: var(--primary-color);
16
+ --md-theme-primary: var(--md-sys-color-primary);
17
17
  }
18
18
 
19
19
  * {
@@ -75,7 +75,9 @@ let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
75
75
  }}
76
76
  ></md-filled-text-field>
77
77
  </div>
78
- <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}>${i18next.t('button.submit')}</md-elevated-button>
78
+ <md-elevated-button slot="primaryAction" type="submit" @click=${e => this._submit(e)}
79
+ >${i18next.t('button.submit')}</md-elevated-button
80
+ >
79
81
  <md-text-button slot="secondaryAction" dialogAction="cancel">${i18next.t('button.cancel')}</md-text-button>
80
82
  </md-dialog>
81
83
  `;
package/dist-client/components/contact-us.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"contact-us.js","sourceRoot":"","sources":["../../client/components/contact-us.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@material/web/dialog/dialog.js'\n\nimport '@operato/i18n'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('contact-us')\nexport class ContactUs extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n --md-theme-primary: var(--primary-color);\n }\n\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n #input-form {\n display: grid;\n grid-template-rows: 1fr 1fr 3fr;\n grid-gap: 10px 0;\n }\n `\n ]\n }\n\n @query('#dialog') dialog!: HTMLElement & { open: boolean }\n @query('#subject-input') subjectInput!: HTMLInputElement\n @query('#sender-input') senderInput!: HTMLInputElement\n @query('#content-input') contentInput!: HTMLInputElement\n\n render() {\n return html`\n <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>\n\n <md-dialog id=\"dialog\" heading=${i18next.t('title.need help')}>\n <form action=\"\" method=\"POST\">\n <input id=\"subject-input\" name=\"subject\" type=\"hidden\" />\n <input id=\"sender-input\" name=\"sender\" type=\"hidden\" />\n <input id=\"content-input\" name=\"content\" type=\"hidden\" />\n </form>\n <div id=\"input-form\">\n <md-filled-text-field\n type=\"text\"\n label=${i18next.t('label.subject')}\n dialogInitialFocus\n required\n @input=${e => {\n const val = e.target.value\n this.subjectInput.value = val\n }}\n ></md-filled-text-field>\n <md-filled-text-field\n type=\"text\"\n name=\"sender\"\n label=${i18next.t('label.email')}\n required\n @input=${e => {\n const val = e.target.value\n this.senderInput.value = val\n }}\n ></md-filled-text-field>\n <md-filled-text-field\n name=\"content\"\n type=\"textarea\"\n label=${i18next.t('label.content')}\n required\n @keydown=${e => e.stopPropagation()}\n @input=${e => {\n const val = e.target.value\n this.contentInput.value = val\n }}\n ></md-filled-text-field>\n </div>\n <md-elevated-button slot=\"primaryAction\" type=\"submit\" @click=${e => this._submit(e)}>${i18next.t('button.submit')}</md-elevated-button>\n <md-text-button slot=\"secondaryAction\" dialogAction=\"cancel\">${i18next.t('button.cancel')}</md-text-button>\n </md-dialog>\n `\n }\n\n _checkValidity(): boolean {\n return false\n }\n\n _submit(e: MouseEvent) {\n if (!this._checkValidity()) return\n\n const form = e.target as HTMLFormElement\n\n const formData = new FormData(form)\n let json = {}\n\n //convert form into json\n for (const [key, value] of formData.entries()) {\n json[key] = value\n }\n\n auth.changePassword(json)\n\n form.reset()\n }\n}\n"]}
1
+ {"version":3,"file":"contact-us.js","sourceRoot":"","sources":["../../client/components/contact-us.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAC5C,OAAO,yCAAyC,CAAA;AAChD,OAAO,8CAA8C,CAAA;AACrD,OAAO,gCAAgC,CAAA;AAEvC,OAAO,eAAe,CAAA;AAEtB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAC1D,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;OAkBF;SACF,CAAA;IACH,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;;uCAE3D,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;;;;;;;;;oBAS/C,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;;qBAGzB,CAAC,CAAC,EAAE;YACX,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YAC1B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,GAAG,CAAA;QAC/B,CAAC;;;;;oBAKO,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;qBAEvB,CAAC,CAAC,EAAE;YACX,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,GAAG,CAAA;QAC9B,CAAC;;;;;oBAKO,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;uBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;qBAC1B,CAAC,CAAC,EAAE;YACX,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YAC1B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,GAAG,CAAA;QAC/B,CAAC;;;wEAG2D,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;aAC/E,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;uEAEgC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;KAE5F,CAAA;IACH,CAAC;IAED,cAAc;QACZ,OAAO,KAAK,CAAA;IACd,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YAAE,OAAM;QAElC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnC,IAAI,IAAI,GAAG,EAAE,CAAA;QAEb,wBAAwB;QACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE;YAC7C,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;SAClB;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;QAEzB,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;CACF,CAAA;AA7EC;IAAC,KAAK,CAAC,SAAS,CAAC;;yCAAyC;AAC1D;IAAC,KAAK,CAAC,gBAAgB,CAAC;8BAAgB,gBAAgB;+CAAA;AACxD;IAAC,KAAK,CAAC,eAAe,CAAC;8BAAe,gBAAgB;8CAAA;AACtD;IAAC,KAAK,CAAC,gBAAgB,CAAC;8BAAgB,gBAAgB;+CAAA;AA5B7C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAsGrB;SAtGY,SAAS","sourcesContent":["import '@material/web/button/text-button.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@material/web/dialog/dialog.js'\n\nimport '@operato/i18n'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('contact-us')\nexport class ContactUs extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n --md-theme-primary: var(--md-sys-color-primary);\n }\n\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n #input-form {\n display: grid;\n grid-template-rows: 1fr 1fr 3fr;\n grid-gap: 10px 0;\n }\n `\n ]\n }\n\n @query('#dialog') dialog!: HTMLElement & { open: boolean }\n @query('#subject-input') subjectInput!: HTMLInputElement\n @query('#sender-input') senderInput!: HTMLInputElement\n @query('#content-input') contentInput!: HTMLInputElement\n\n render() {\n return html`\n <md-elevated-button @click=${e => (this.dialog.open = true)}>${i18next.t('button.need help')}</md-elevated-button>\n\n <md-dialog id=\"dialog\" heading=${i18next.t('title.need help')}>\n <form action=\"\" method=\"POST\">\n <input id=\"subject-input\" name=\"subject\" type=\"hidden\" />\n <input id=\"sender-input\" name=\"sender\" type=\"hidden\" />\n <input id=\"content-input\" name=\"content\" type=\"hidden\" />\n </form>\n <div id=\"input-form\">\n <md-filled-text-field\n type=\"text\"\n label=${i18next.t('label.subject')}\n dialogInitialFocus\n required\n @input=${e => {\n const val = e.target.value\n this.subjectInput.value = val\n }}\n ></md-filled-text-field>\n <md-filled-text-field\n type=\"text\"\n name=\"sender\"\n label=${i18next.t('label.email')}\n required\n @input=${e => {\n const val = e.target.value\n this.senderInput.value = val\n }}\n ></md-filled-text-field>\n <md-filled-text-field\n name=\"content\"\n type=\"textarea\"\n label=${i18next.t('label.content')}\n required\n @keydown=${e => e.stopPropagation()}\n @input=${e => {\n const val = e.target.value\n this.contentInput.value = val\n }}\n ></md-filled-text-field>\n </div>\n <md-elevated-button slot=\"primaryAction\" type=\"submit\" @click=${e => this._submit(e)}\n >${i18next.t('button.submit')}</md-elevated-button\n >\n <md-text-button slot=\"secondaryAction\" dialogAction=\"cancel\">${i18next.t('button.cancel')}</md-text-button>\n </md-dialog>\n `\n }\n\n _checkValidity(): boolean {\n return false\n }\n\n _submit(e: MouseEvent) {\n if (!this._checkValidity()) return\n\n const form = e.target as HTMLFormElement\n\n const formData = new FormData(form)\n let json = {}\n\n //convert form into json\n for (const [key, value] of formData.entries()) {\n json[key] = value\n }\n\n auth.changePassword(json)\n\n form.reset()\n }\n}\n"]}
package/dist-client/components/create-domain-popup.js CHANGED
@@ -112,7 +112,7 @@ CreateDomainPopup.styles = [
112
112
  border-radius: var(--border-radius);
113
113
  margin: var(--input-margin);
114
114
  padding: var(--input-padding);
115
- background-color: var(--theme-white-color);
115
+ background-color: var(--md-sys-color-surface);
116
116
  font: var(--input-font);
117
117
 
118
118
  flex: 1;
package/dist-client/components/create-domain-popup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAGvD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAiD3D,MAAM;QACJ,OAAO,IAAI,CAAA;;;aAGF,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC;;;qBAGnD,IAAI,CAAC,eAAe;;;;;;iBAMxB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;qCAIV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;KAExF,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAA,CAAC,YAAY;IACrC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAClD,CAAC;IAED,eAAe,CAAC,CAAC;QACf,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAA;QACpC,MAAM,MAAM,GAAG,cAAc,CAAA;QAE7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YACpC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC7C;aAAM;YACL,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;SAChD;IACH,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,WAAW,GAA+B,EAAE,CAAA;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QACrE,MAAM,MAAM,GAAG,kBAAkB,CAAA;QAEjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YAClC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,6DAA6D,CAAC,CAAC,CAAA;SAChG;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;OAOZ;YACD,SAAS,EAAE,EAAE,WAAW,EAAE;SAC3B,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,MAAM,QAAQ,CAAC,IAAI,CAAC;gBAClB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAClC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC;gBAChF,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;aACrD,CAAC,CAAA;YAEF,OAAO,CAAC,IAAI,EAAE,CAAA;YAEd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;SAClD;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AA9HM,wBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAED;IAAC,KAAK,CAAC,oBAAoB,CAAC;8BAAa,gBAAgB;oDAAA;AA/CrD,iBAAiB;IADtB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CAgItB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n overflow: auto;\n }\n\n input.checkValidName {\n background-color: #fce6e6;\n }\n\n md-elevated-button {\n display: flex;\n justify-content: center;\n }\n\n label {\n display: flex;\n flex-direction: column;\n\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n background-color: var(--theme-white-color);\n font: var(--input-font);\n\n flex: 1;\n }\n\n [field] {\n grid-column: span 2;\n }\n `\n ]\n\n @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n render() {\n return html`\n <div field grid-span>\n <label\n >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n type=\"text\"\n name=\"name\"\n @input=${this.checkValidation}\n autofocus\n /></label>\n </div>\n\n <div field grid-span>\n <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n </div>\n\n <div class=\"button-container\">\n <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>\n </div>\n `\n }\n\n firstUpdated() {\n this.nameInput.focus() // autofocus\n }\n\n get inputData() {\n return this.renderRoot.querySelectorAll('input')\n }\n\n checkValidation(e) {\n const currentInput = e.currentTarget\n const regExp = /^[a-zA-Z ]+$/\n\n if (!regExp.test(currentInput.value)) {\n currentInput.classList.add('checkValidName')\n } else {\n currentInput.classList.remove('checkValidName')\n }\n }\n\n async onCreateDomain() {\n const domainInput: { [prop: string]: string } = {}\n this.inputData.forEach(data => (domainInput[data.name] = data.value))\n const regExp = /^[a-zA-z0-9- ]+$/\n\n if (!regExp.test(domainInput.name)) {\n return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation domainRegister($domainInput: DomainGeneratorInput!) {\n domainRegister(domainInput: $domainInput) {\n id\n name\n }\n }\n `,\n variables: { domainInput }\n })\n\n if (!response.errors) {\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n history.back()\n\n this.dispatchEvent(new CustomEvent('fetch-data'))\n }\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
1
+ {"version":3,"file":"create-domain-popup.js","sourceRoot":"","sources":["../../client/components/create-domain-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('create-domain-popup')\nclass CreateDomainPopup extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n overflow: auto;\n }\n\n input.checkValidName {\n background-color: #fce6e6;\n }\n\n md-elevated-button {\n display: flex;\n justify-content: center;\n }\n\n label {\n display: flex;\n flex-direction: column;\n\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n background-color: var(--md-sys-color-surface);\n font: var(--input-font);\n\n flex: 1;\n }\n\n [field] {\n grid-column: span 2;\n }\n `\n ]\n\n @query('input[name=\"name\"]') nameInput!: HTMLInputElement\n\n render() {\n return html`\n <div field grid-span>\n <label\n >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input\n type=\"text\"\n name=\"name\"\n @input=${this.checkValidation}\n autofocus\n /></label>\n </div>\n\n <div field grid-span>\n <label>${i18next.t('label.description')}<input type=\"text\" name=\"description\" /></label>\n </div>\n\n <div class=\"button-container\">\n <md-elevated-button @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</md-elevated-button>\n </div>\n `\n }\n\n firstUpdated() {\n this.nameInput.focus() // autofocus\n }\n\n get inputData() {\n return this.renderRoot.querySelectorAll('input')\n }\n\n checkValidation(e) {\n const currentInput = e.currentTarget\n const regExp = /^[a-zA-Z ]+$/\n\n if (!regExp.test(currentInput.value)) {\n currentInput.classList.add('checkValidName')\n } else {\n currentInput.classList.remove('checkValidName')\n }\n }\n\n async onCreateDomain() {\n const domainInput: { [prop: string]: string } = {}\n this.inputData.forEach(data => (domainInput[data.name] = data.value))\n const regExp = /^[a-zA-z0-9- ]+$/\n\n if (!regExp.test(domainInput.name)) {\n return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'))\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation domainRegister($domainInput: DomainGeneratorInput!) {\n domainRegister(domainInput: $domainInput) {\n id\n name\n }\n }\n `,\n variables: { domainInput }\n })\n\n if (!response.errors) {\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n history.back()\n\n this.dispatchEvent(new CustomEvent('fetch-data'))\n }\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
package/dist-client/components/create-role.js CHANGED
@@ -9,10 +9,20 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js';
9
9
  let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
10
10
  render() {
11
11
  return html `
12
- <md-filled-text-field type="text" name="name" label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}></md-filled-text-field>
13
- <md-filled-text-field type="text" name="description" label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}></md-filled-text-field>
12
+ <md-filled-text-field
13
+ type="text"
14
+ name="name"
15
+ label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
16
+ ></md-filled-text-field>
17
+ <md-filled-text-field
18
+ type="text"
19
+ name="description"
20
+ label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
21
+ ></md-filled-text-field>
14
22
 
15
- <md-outlined-button @click=${this.onCreateRole.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>
23
+ <md-outlined-button @click=${this.onCreateRole.bind(this)}
24
+ >${String(i18next.t('button.create'))}</md-outlined-button
25
+ >
16
26
  `;
17
27
  }
18
28
  async onCreateRole() {
@@ -61,7 +71,7 @@ let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
61
71
  CreateRole.styles = css `
62
72
  :host {
63
73
  --md-text-field-fill-color: var(--theme-white-color);
64
- background-color: var(--theme-white-color);
74
+ background-color: var(--md-sys-color-surface);
65
75
  margin: var(--margin-wide) 0;
66
76
  padding: var(--padding-wide);
67
77
  border-radius: var(--border-radius);
package/dist-client/components/create-role.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n --md-text-field-fill-color: var(--theme-white-color);\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0;\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n display: grid;\n grid-template-columns: 1fr 2fr auto;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n\n align-items: center;\n }\n\n md-outlined-button {\n margin: var(--input-margin);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n grid-template-columns: 1fr 1fr;\n }\n\n md-outlined-button {\n grid-column: span 2;\n\n margin: var(--input-margin);\n }\n }\n `\n\n @query('[name=name]') nameInput!: HTMLInputElement\n @query('[name=description]') descriptionInput!: HTMLInputElement\n\n render() {\n return html`\n <md-filled-text-field type=\"text\" name=\"name\" label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}></md-filled-text-field>\n <md-filled-text-field type=\"text\" name=\"description\" label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}></md-filled-text-field>\n\n <md-outlined-button @click=${this.onCreateRole.bind(this)}>${String(i18next.t('button.create'))}</md-outlined-button>\n `\n }\n\n async onCreateRole() {\n let role: { name?: string; description?: string } = {}\n\n const name = this.nameInput.value.trim()\n const description = this.descriptionInput.value\n\n if (!name) {\n return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n }\n\n role.name = name\n role.description = description\n\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.mutate({\n mutation: gql`\n mutation createRole($role: NewRole!) {\n createRole(role: $role) {\n name\n }\n }\n `,\n variables: { role },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.data_uploaded_successfully'),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n this.nameInput.value = ''\n this.descriptionInput.value = ''\n }\n }\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
1
+ {"version":3,"file":"create-role.js","sourceRoot":"","sources":["../../client/components/create-role.ts"],"names":[],"mappings":";AAAA,OAAO,8CAA8C,CAAA;AAErD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAuCpD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;;;gBAKjE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;;;mCAGrD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;WACpD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,IAAI,GAA4C,EAAE,CAAA;QAEtD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;QACxC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;SAC7F;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;QAE9B,IACE,MAAM,QAAQ,CAAC,IAAI,CAAC;YAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/E,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;YACpD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,EACF;YACA,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;gBACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;SAMZ;gBACD,SAAS,EAAE,EAAE,IAAI,EAAE;gBACnB,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACpB,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAA;gBAExD,MAAM,QAAQ,CAAC,IAAI,CAAC;oBAClB,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBAClC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC;oBAClD,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;iBACrD,CAAC,CAAA;gBAEF,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;gBACzB,IAAI,CAAC,gBAAgB,CAAC,KAAK,GAAG,EAAE,CAAA;aACjC;SACF;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AA5GM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAA;AAED;IAAC,KAAK,CAAC,aAAa,CAAC;8BAAa,gBAAgB;6CAAA;AAClD;IAAC,KAAK,CAAC,oBAAoB,CAAC;8BAAoB,gBAAgB;oDAAA;AArC5D,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CA8Gf","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('create-role')\nclass CreateRole extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n --md-text-field-fill-color: var(--theme-white-color);\n background-color: var(--md-sys-color-surface);\n margin: var(--margin-wide) 0;\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n display: grid;\n grid-template-columns: 1fr 2fr auto;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n\n align-items: center;\n }\n\n md-outlined-button {\n margin: var(--input-margin);\n }\n\n @media screen and (max-width: 480px) {\n :host {\n grid-template-columns: 1fr 1fr;\n }\n\n md-outlined-button {\n grid-column: span 2;\n\n margin: var(--input-margin);\n }\n }\n `\n\n @query('[name=name]') nameInput!: HTMLInputElement\n @query('[name=description]') descriptionInput!: HTMLInputElement\n\n render() {\n return html`\n <md-filled-text-field\n type=\"text\"\n name=\"name\"\n label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}\n ></md-filled-text-field>\n <md-filled-text-field\n type=\"text\"\n name=\"description\"\n label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}\n ></md-filled-text-field>\n\n <md-outlined-button @click=${this.onCreateRole.bind(this)}\n >${String(i18next.t('button.create'))}</md-outlined-button\n >\n `\n }\n\n async onCreateRole() {\n let role: { name?: string; description?: string } = {}\n\n const name = this.nameInput.value.trim()\n const description = this.descriptionInput.value\n\n if (!name) {\n return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n }\n\n role.name = name\n role.description = description\n\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.mutate({\n mutation: gql`\n mutation createRole($role: NewRole!) {\n createRole(role: $role) {\n name\n }\n }\n `,\n variables: { role },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.data_uploaded_successfully'),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n this.nameInput.value = ''\n this.descriptionInput.value = ''\n }\n }\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}