beyond_canvas 0.19.2.pre → 0.23.0.pre

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -45
  3. data/app/assets/images/icons/adblocker.svg +5 -0
  4. data/app/assets/images/icons/checkbox_checked.svg +1 -1
  5. data/app/assets/images/icons/checkbox_unchecked.svg +1 -1
  6. data/app/assets/images/icons/external_link.svg +1 -0
  7. data/app/assets/images/icons/toggle.svg +1 -0
  8. data/app/assets/images/icons/toggle_checked.svg +3 -0
  9. data/app/assets/images/icons/toggle_unchecked.svg +3 -0
  10. data/app/assets/javascripts/beyond_canvas/base.js +107 -44
  11. data/app/assets/stylesheets/beyond_canvas/base.scss +21 -18
  12. data/app/assets/stylesheets/beyond_canvas/components/_action_bar.scss +11 -6
  13. data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss +8 -4
  14. data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss +50 -56
  15. data/app/assets/stylesheets/beyond_canvas/components/_cards.scss +20 -12
  16. data/app/assets/stylesheets/beyond_canvas/components/_collapse.scss +33 -0
  17. data/app/assets/stylesheets/beyond_canvas/components/_flash.scss +13 -12
  18. data/app/assets/stylesheets/beyond_canvas/components/_forms.scss +2 -2
  19. data/app/assets/stylesheets/beyond_canvas/components/_inputs.scss +186 -38
  20. data/app/assets/stylesheets/beyond_canvas/components/_links.scss +80 -4
  21. data/app/assets/stylesheets/beyond_canvas/components/_main.scss +3 -3
  22. data/app/assets/stylesheets/beyond_canvas/components/_menu.scss +13 -0
  23. data/app/assets/stylesheets/beyond_canvas/components/_modals.scss +48 -18
  24. data/app/assets/stylesheets/beyond_canvas/components/_notices.scss +12 -13
  25. data/app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss +5 -4
  26. data/app/assets/stylesheets/beyond_canvas/components/_select2.scss +70 -0
  27. data/app/assets/stylesheets/beyond_canvas/components/_statuses.scss +28 -0
  28. data/app/assets/stylesheets/beyond_canvas/components/_step_list.scss +67 -0
  29. data/app/assets/stylesheets/beyond_canvas/components/_tables.scss +10 -5
  30. data/app/assets/stylesheets/beyond_canvas/components/_titles.scss +1 -1
  31. data/app/assets/stylesheets/beyond_canvas/mailer.scss +2 -1
  32. data/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss +241 -0
  33. data/app/assets/stylesheets/beyond_canvas/settings/{_variables.scss → _constant_variables.scss} +60 -53
  34. data/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss +233 -0
  35. data/app/assets/stylesheets/beyond_canvas/settings/_typography.scss +7 -3
  36. data/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss +39 -3
  37. data/app/controllers/beyond_canvas/authentications_controller.rb +18 -2
  38. data/app/controllers/beyond_canvas/system_controller.rb +3 -1
  39. data/app/controllers/beyond_canvas/webhooks_controller.rb +49 -0
  40. data/app/controllers/concerns/beyond_canvas/add_blocker_check.rb +17 -0
  41. data/app/controllers/concerns/beyond_canvas/custom_styles.rb +54 -0
  42. data/app/controllers/concerns/beyond_canvas/locale_management.rb +31 -8
  43. data/app/controllers/concerns/beyond_canvas/request_validation.rb +6 -0
  44. data/app/form_builders/beyond_canvas/form_builder.rb +62 -49
  45. data/app/helpers/beyond_canvas/application_helper.rb +48 -4
  46. data/app/helpers/beyond_canvas/form_tag_helper.rb +130 -0
  47. data/app/helpers/beyond_canvas/statuses_helper.rb +26 -0
  48. data/app/javascript/beyond_canvas/base.js +1 -1
  49. data/app/javascript/beyond_canvas/initializers/buttons.js +49 -29
  50. data/app/javascript/beyond_canvas/initializers/collapse.js +8 -0
  51. data/app/javascript/beyond_canvas/initializers/flash.js +33 -11
  52. data/app/javascript/beyond_canvas/initializers/inputs.js +9 -4
  53. data/app/javascript/beyond_canvas/initializers/modals.js +46 -10
  54. data/app/views/beyond_canvas/mailer/_header.html.erb +2 -2
  55. data/app/views/beyond_canvas/shared/_breadcrumbs.html.erb +5 -2
  56. data/app/views/beyond_canvas/shared/_flash.html.erb +14 -10
  57. data/app/views/beyond_canvas/shared/_head.html.erb +4 -0
  58. data/app/views/beyond_canvas/shared/_locales.html.erb +1 -1
  59. data/app/views/layouts/beyond_canvas/application.html.erb +1 -2
  60. data/app/views/layouts/beyond_canvas/public.html.erb +1 -1
  61. data/config/initializers/beyond_canvas/constants.rb +13 -0
  62. data/config/initializers/beyond_canvas/session_store.rb +8 -0
  63. data/lib/beyond_canvas/configuration.rb +9 -1
  64. data/lib/beyond_canvas/engine.rb +7 -0
  65. data/lib/beyond_canvas/rails/routes.rb +27 -7
  66. data/lib/beyond_canvas/version.rb +1 -1
  67. data/lib/beyond_canvas/webhook_event_registration.rb +19 -0
  68. data/lib/beyond_canvas.rb +6 -4
  69. data/lib/generators/beyond_canvas/custom_styles/templates/beyond_canvas_custom_styles.scss +33 -0
  70. data/lib/generators/beyond_canvas/install/install_generator.rb +6 -0
  71. data/lib/generators/beyond_canvas/install/templates/beyond_canvas.rb.erb +38 -1
  72. data/lib/generators/beyond_canvas/model/model_generator.rb +3 -0
  73. data/lib/generators/beyond_canvas/webhook/templates/webhooks_controller.rb +22 -0
  74. data/lib/generators/beyond_canvas/webhook/webhook_generator.rb +15 -0
  75. data/lib/models/concerns/authentication.rb +10 -3
  76. data/lib/models/concerns/utils.rb +6 -5
  77. data/lib/models/concerns/webhook.rb +123 -0
  78. data/lib/models/shop.rb +1 -0
  79. metadata +73 -40
  80. data/app/assets/stylesheets/beyond_canvas/components/_comments.scss +0 -6
  81. data/app/assets/stylesheets/beyond_canvas/components/_containers.scss +0 -37
  82. data/app/views/beyond_canvas/shared/_modal.html.erb +0 -6
  83. data/config/routes.rb +0 -12
@@ -0,0 +1,233 @@
1
+ :root {
2
+ // ************************************************************
3
+ // Menu
4
+ // ************************************************************
5
+ --menu-height: 60px;
6
+ }
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+ // ************************************************************
15
+ // Colors
16
+ // ************************************************************
17
+
18
+ $white: rgb(255, 255, 255);
19
+ $black: rgb(0, 0, 0);
20
+ $palette-primary: rgb(78, 183, 168) !default;
21
+ $palette-secondary: rgb(28, 53, 69) !default;
22
+ $palette-cancel: rgb(153, 153, 153) !default;
23
+ $palette-danger: rgb(218, 60, 60) !default;
24
+
25
+ // ************************************************************
26
+ // General styles
27
+ // ************************************************************
28
+
29
+ $main-transition: 0.125s ease-in;
30
+ $main-color: red;
31
+
32
+ // ************************************************************
33
+ // Typography
34
+ // ************************************************************
35
+
36
+ $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
37
+ $main-line-height: 1.5;
38
+ $main-font-size: 14px;
39
+
40
+ // ************************************************************
41
+ // Headlines
42
+ // ************************************************************
43
+
44
+ $headline-line-height: 1;
45
+
46
+ // ************************************************************
47
+ // Links
48
+ // ************************************************************
49
+
50
+ $link-primary-color: darken($palette-primary, 10%) !default;
51
+ $link-secondary-color: darken($palette-cancel, 10%) !default;
52
+ $link-danger-color: darken($palette-danger, 10%) !default;
53
+ $link-disabled-color: rgb(208,208,208) !default;
54
+
55
+ // ************************************************************
56
+ // Buttons
57
+ // ************************************************************
58
+
59
+ $button-primary-background: $palette-primary !default;
60
+ $button-primary-color: $white !default;
61
+
62
+ $button-secondary-background: $palette-cancel !default;
63
+ $button-secondary-color: $white !default;
64
+
65
+ $button-danger-background: $palette-danger !default;
66
+ $button-danger-color: $white !default;
67
+
68
+ $button-disabled-background: rgb(208,208,208) !default;
69
+ $button-disabled-color: rgb(144,144,144) !default;
70
+ $button-disabled-text-shadow: 1px 1px 0 $white !default;
71
+
72
+ $button-border-radius: 3px !default;
73
+ $button-box-shadow: true !default;
74
+ $button-font-weight: 700;
75
+ $button-padding: 6px 12px 7px;
76
+
77
+ // ************************************************************
78
+ // Cards
79
+ // ************************************************************
80
+
81
+ $card-padding: 40px;
82
+ $card-margin: 30px;
83
+ $card-separator-spacing: 40px;
84
+
85
+ // ************************************************************
86
+ // Containers
87
+ // ************************************************************
88
+
89
+ $container-spacing: 30px;
90
+
91
+ // ************************************************************
92
+ // Inputs
93
+ // ************************************************************
94
+
95
+ $input-border-color: rgb(217, 216, 195) !default;
96
+ $input-border-color-focus: $palette-primary !default;
97
+ $input-errors-color: $palette-danger !default;
98
+ $input-disabled-background: rgb(245,244,239) !default;
99
+ $input-disabled-color: rgb(163,161,137) !default;
100
+
101
+ // ************************************************************
102
+ // Checkboxes
103
+ // ************************************************************
104
+
105
+ $checkbox-checked-color: #97C344 !default; // This value MUST be HEX
106
+ $checkbox-checked-background: #ffffff !default; // This value MUST be HEX
107
+ $checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
108
+ $checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
109
+
110
+ // ************************************************************
111
+ // Toggles
112
+ // ************************************************************
113
+
114
+ $toggle-border-color: #cbc9ad !default;
115
+ $toggle-disabled-background: #f5f4ef !default;
116
+ $toggle-checked-background: #97c344 !default; // This value MUST be HEX
117
+ $toggle-checked-color: #ffffff !default; // This value MUST be HEX
118
+ $toggle-unchecked-background: #c2bf9d !default; // This value MUST be HEX
119
+ $toggle-unchecked-color: #ffffff !default; // This value MUST be HEX
120
+
121
+ // ************************************************************
122
+ // Radiobuttons
123
+ // ************************************************************
124
+
125
+ $radio-checked-color: #97C344 !default; // This value MUST be HEX
126
+ $radio-checked-background: #ffffff !default; // This value MUST be HEX
127
+ $radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
128
+ $radio-unchecked-background: #ffffff !default; // This value MUST be HEX
129
+
130
+ // ************************************************************
131
+ // Hints
132
+ // ************************************************************
133
+
134
+ $hint-color: rgb(158, 158, 158) !default;
135
+
136
+ // ************************************************************
137
+ // Logo
138
+ // ************************************************************
139
+
140
+ $logo-margin-top-public: 0;
141
+ $logo-margin-bottom-public: 34px;
142
+
143
+ // ************************************************************
144
+ // Comments
145
+ // ************************************************************
146
+
147
+ $comment-background: rgb(246, 246, 243) !default;
148
+ $comment-color: rgb(170, 169, 156) !default;
149
+
150
+ // ************************************************************
151
+ // Breadcrums
152
+ // ************************************************************
153
+
154
+ $breadcrum-color: rgb(112, 110, 77) !default;
155
+ $breadcrum-color-hover: rgb(67, 65, 46) !default;
156
+ $breadcrum-color-current: rgb(112, 110, 77) !default;
157
+
158
+ // ************************************************************
159
+ // Titles
160
+ // ************************************************************
161
+
162
+ $title-color: rgb(122, 118, 76) !default;
163
+
164
+ // ************************************************************
165
+ // Menu
166
+ // ************************************************************
167
+
168
+ $menu-background: #1c3445 !default;
169
+ $menu-height: 60px !default;
170
+ $menu-logo-height: 30px !default;
171
+ $menu-item-color: #9ab5c6 !default;
172
+ $menu-item-hover-color: lighten($menu-item-color, 13%) !default;
173
+ $menu-item-selected-color: #4eb7a8 !default;
174
+ $menu-item-selected-hover-color: lighten($menu-item-selected-color, 13%) !default;
175
+
176
+ // ************************************************************
177
+ // Action bar
178
+ // ************************************************************
179
+
180
+ $action-bar-background: rgb(255, 255, 255) !default;
181
+ $action-bar-shadow: 1px solid rgba(0, 0, 0, 0.2) !default;
182
+ $action-bar-height: 73px !default;
183
+
184
+ // ************************************************************
185
+ // Markdown
186
+ // ************************************************************
187
+
188
+ $markdown-table-head-background: #f6f8fa;
189
+ $markdown-table-border-color: #dfe2e5;
190
+ $markdown-blockquote-font-color: #6a737d;
191
+ $markdown-blockquote-border-color: #dfe2e5;
192
+ $markdown-hr-background: #e1e4e8;
193
+
194
+ // ************************************************************
195
+ // Sidebar
196
+ // ************************************************************
197
+
198
+ $sidebar-width: 250px;
199
+ $sidebar-background: #1d3544;
200
+ $sidebar-header-background: #12222c;
201
+ $sidebar-footer-background: #12222c;
202
+ $sidebar-footer-icon-background: #9ab5c5;
203
+ $sidebar-item-background: #9ab5c6;
204
+ $sidebar-item-selected-background: #4eb7a8;
205
+
206
+ // ************************************************************
207
+ // Modals
208
+ // ************************************************************
209
+
210
+ $modal-padding: 20px;
211
+ $modal-width: 650px;
212
+ $modal-close-icon-color: #8b8b8b !default;
213
+ $modal-background-color: rgba(0, 0, 0, 0.75) !default;
214
+
215
+ // ************************************************************
216
+ // Select2
217
+ // ************************************************************
218
+
219
+ $select2-border-color: $input-border-color !default;
220
+ $select2-border-color-focus: $input-border-color-focus !default;
221
+ $select2-close-icon-color: #79764b !default;
222
+ $select2-close-icon-color-hover: darken($select2-close-icon-color, 15%) !default;
223
+ $select2-tag-background: rgb(223, 222, 204) !default;
224
+ $select2-tag-color: rgb(122, 118, 76) !default;
225
+ $select2-disabled-background: rgb(245, 244, 239) !default;
226
+ $select2-option-hover-background: rgb(229, 241, 240) !default;
227
+ $select2-option-hover-color: rgb(62, 62, 62) !default;
228
+
229
+ // ************************************************************
230
+ // Collapsibles
231
+ // ************************************************************
232
+
233
+ $collapsible-color: $palette-primary !default;
@@ -13,7 +13,7 @@ body, #{$all-text-inputs}, #{$all-buttons}, select {
13
13
  }
14
14
 
15
15
  body, #{$all-text-inputs}, select {
16
- color: $main-color;
16
+ color: var(--workspace-text);
17
17
  }
18
18
 
19
19
  body, #{$all-text-inputs} {
@@ -25,7 +25,7 @@ select {
25
25
  }
26
26
 
27
27
  h1, h2, h3, h4, h5, h6 {
28
- color: $headline-color;
28
+ color: var(--workspace-headline);
29
29
  font-weight: bold;
30
30
  line-height: $headline-line-height;
31
31
  }
@@ -55,7 +55,7 @@ p {
55
55
  }
56
56
 
57
57
  a {
58
- color: $main-color;
58
+ color: var(--workspace-text);
59
59
  outline: none;
60
60
  text-decoration: none;
61
61
  }
@@ -64,4 +64,8 @@ strong {
64
64
  font-weight: bold;
65
65
  }
66
66
 
67
+ em {
68
+ font-style: italic;
69
+ }
70
+
67
71
  // sass-lint:enable single-line-per-selector, no-vendor-prefixes
@@ -1,9 +1,9 @@
1
- @mixin background-color-darken($color, $percent) {
2
- background-color: $color;
1
+ @mixin background-color-darken($color, $hover-color) {
2
+ background-color: var(--#{color});
3
3
  transition: $main-transition;
4
4
 
5
5
  &:hover {
6
- background-color: darken($color, $percent);
6
+ background-color: var(--#{hover-color});
7
7
  transition: $main-transition;
8
8
  }
9
9
  }
@@ -12,6 +12,15 @@
12
12
  color: $color;
13
13
  transition: $main-transition;
14
14
 
15
+ svg {
16
+ fill: $color;
17
+
18
+ &:hover {
19
+ fill: darken($color, $percent);
20
+ transition: $main-transition;
21
+ }
22
+ }
23
+
15
24
  &:hover {
16
25
  color: darken($color, $percent);
17
26
  transition: $main-transition;
@@ -22,3 +31,30 @@
22
31
  background-color: lighten($color, $percent);
23
32
  transition: $main-transition;
24
33
  }
34
+
35
+ // SEE: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/62880368#62880368
36
+ @mixin recolor($color: #000, $opacity: 1) {
37
+ $r: red($color) / 255;
38
+ $g: green($color) / 255;
39
+ $b: blue($color) / 255;
40
+ $a: $opacity;
41
+
42
+ // grayscale fallback if SVG from data url is not supported
43
+ $lightness: lightness($color);
44
+ filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
45
+
46
+ // color filter
47
+ $svg-filter-id: "recolor";
48
+ filter: url('data:image/svg+xml;utf8,\
49
+ <svg xmlns="http://www.w3.org/2000/svg">\
50
+ <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
51
+ <feColorMatrix type="matrix" values="\
52
+ 0 0 0 0 #{$r}\
53
+ 0 0 0 0 #{$g}\
54
+ 0 0 0 0 #{$b}\
55
+ 0 0 0 #{$a} 0\
56
+ "/>\
57
+ </filter>\
58
+ </svg>\
59
+ ##{$svg-filter-id}');
60
+ }
@@ -7,8 +7,12 @@ module BeyondCanvas
7
7
  layout 'beyond_canvas/public'
8
8
 
9
9
  include ::BeyondCanvas::Authentication
10
+ include ::BeyondCanvas::CustomStyles
10
11
 
11
- before_action :validate_app_installation_request!, only: :new
12
+ before_action :validate_app_installation_request!,
13
+ only: :new,
14
+ unless: -> { Rails.env.development? && BeyondCanvas.configuration.client_credentials }
15
+ before_action :clear_locale_cookie, only: [:new, :install]
12
16
 
13
17
  def new
14
18
  @shop = Shop.find_or_initialize_by(beyond_api_url: params[:api_url])
@@ -27,6 +31,7 @@ module BeyondCanvas
27
31
 
28
32
  if @shop.save
29
33
  @shop.authenticate(params[:shop][:code])
34
+ @shop.subscribe_to_beyond_webhooks
30
35
 
31
36
  redirect_to after_installation_path
32
37
  else
@@ -37,7 +42,7 @@ module BeyondCanvas
37
42
  private
38
43
 
39
44
  def shop_params
40
- beyond_canvas_parameter_sanitizer.sanitize
45
+ beyond_canvas_parameter_sanitizer.sanitize.merge(http_host: request.env['HTTP_HOST'])
41
46
  end
42
47
 
43
48
  def after_preinstallation_path
@@ -54,16 +59,27 @@ module BeyondCanvas
54
59
 
55
60
  def preinstall
56
61
  @shop = Shop.create_or_find_by(beyond_api_url: params[:api_url])
62
+ @shop.http_host = request.env['HTTP_HOST']
57
63
  @shop.authenticate(params[:code])
64
+ @shop.subscribe_to_beyond_webhooks
58
65
 
59
66
  redirect_to after_preinstallation_path
60
67
  end
61
68
 
62
69
  def open_app(shop)
70
+ shop.authenticate(params[:code]) if params[:code]
71
+
63
72
  reset_session
64
73
  log_in shop
65
74
 
75
+ cookies.delete(:custom_styles_url)
76
+ set_custom_styles_url shop if BeyondCanvas.configuration.cockpit_app
77
+
66
78
  redirect_to after_sign_in_path
67
79
  end
80
+
81
+ def clear_locale_cookie
82
+ cookies.delete :locale if BeyondCanvas.configuration.cockpit_app
83
+ end
68
84
  end
69
85
  end
@@ -7,7 +7,9 @@ module BeyondCanvas
7
7
  include ::BeyondCanvas::LocaleManagement
8
8
 
9
9
  def update_locale
10
- cookies[:locale] = { value: system_locale_params[:locale], expires: 1.day.from_now }
10
+ cookies[:locale] = {
11
+ value: system_locale_params[:locale]
12
+ }.merge COOKIES_ATTRIBUTES
11
13
 
12
14
  redirect_back(fallback_location: main_app.root_path)
13
15
  end
@@ -0,0 +1,49 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_dependency 'beyond_canvas/application_controller'
4
+
5
+ module BeyondCanvas
6
+ class WebhooksController < ApplicationController # :nodoc:
7
+ skip_before_action :verify_authenticity_token
8
+
9
+ include ::BeyondCanvas::RequestValidation
10
+ include ::BeyondCanvas::StatusCodes
11
+
12
+ before_action :set_shop, only: [:webhook]
13
+
14
+ if Rails.env.production?
15
+ before_action only: [:webhook] do
16
+ signature = request.headers['x-epages-signature']
17
+ bad_request unless valid_signature?(signature, signature_params, @shop.beyond_shared_secret)
18
+ end
19
+ end
20
+
21
+ def webhook
22
+ begin
23
+ if @shop
24
+ body = JSON.parse(request.body.read)
25
+ event = request.headers.env['HTTP_X_EPAGES_WEBHOOK_EVENT_TYPE'].gsub('.', '_')
26
+ method = "handle_#{event}"
27
+ send method, body
28
+ end
29
+ rescue JSON::ParserError
30
+ render(json: { status: 400, error: 'Invalid payload' }) && (return)
31
+ rescue NoMethodError
32
+ render(json: { status: 500, message: 'https://github.com/ePages-de/beyond_canvas/wiki' }) && (return)
33
+ end
34
+ render json: { status: 200 }
35
+ end
36
+
37
+ private
38
+
39
+ def handle_app_uninstalled(_data)
40
+ @shop.delete_beyond_webhooks_subscriptions
41
+ @shop.destroy
42
+ end
43
+
44
+ def set_shop
45
+ @shop = Shop.find(params[:id])
46
+ @shop.refresh_token_if_needed
47
+ end
48
+ end
49
+ end