beyond_canvas 0.19.2.pre → 0.23.0.pre

data/app/assets/stylesheets/beyond_canvas/settings/_custom_variables.scss

@@ -0,0 +1,233 @@
+:root {
+  // ************************************************************
+  // Menu
+  // ************************************************************
+  --menu-height: 60px;
+}
+
+
+
+
+
+
+
+// ************************************************************
+// Colors
+// ************************************************************
+
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
+$palette-primary: rgb(78, 183, 168) !default;
+$palette-secondary: rgb(28, 53, 69) !default;
+$palette-cancel: rgb(153, 153, 153) !default;
+$palette-danger: rgb(218, 60, 60) !default;
+
+// ************************************************************
+// General styles
+// ************************************************************
+
+$main-transition: 0.125s ease-in;
+$main-color: red;
+
+// ************************************************************
+// Typography
+// ************************************************************
+
+$main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+$main-line-height: 1.5;
+$main-font-size: 14px;
+
+// ************************************************************
+// Headlines
+// ************************************************************
+
+$headline-line-height: 1;
+
+// ************************************************************
+// Links
+// ************************************************************
+
+$link-primary-color: darken($palette-primary, 10%) !default;
+$link-secondary-color: darken($palette-cancel, 10%) !default;
+$link-danger-color: darken($palette-danger, 10%) !default;
+$link-disabled-color: rgb(208,208,208) !default;
+
+// ************************************************************
+// Buttons
+// ************************************************************
+
+$button-primary-background: $palette-primary !default;
+$button-primary-color: $white !default;
+
+$button-secondary-background: $palette-cancel !default;
+$button-secondary-color: $white !default;
+
+$button-danger-background: $palette-danger !default;
+$button-danger-color: $white !default;
+
+$button-disabled-background: rgb(208,208,208) !default;
+$button-disabled-color: rgb(144,144,144) !default;
+$button-disabled-text-shadow: 1px 1px 0 $white !default;
+
+$button-border-radius: 3px !default;
+$button-box-shadow: true !default;
+$button-font-weight: 700;
+$button-padding: 6px 12px 7px;
+
+// ************************************************************
+// Cards
+// ************************************************************
+
+$card-padding: 40px;
+$card-margin: 30px;
+$card-separator-spacing: 40px;
+
+// ************************************************************
+// Containers
+// ************************************************************
+
+$container-spacing: 30px;
+
+// ************************************************************
+// Inputs
+// ************************************************************
+
+$input-border-color: rgb(217, 216, 195) !default;
+$input-border-color-focus: $palette-primary !default;
+$input-errors-color: $palette-danger !default;
+$input-disabled-background: rgb(245,244,239) !default;
+$input-disabled-color: rgb(163,161,137) !default;
+
+// ************************************************************
+// Checkboxes
+// ************************************************************
+
+$checkbox-checked-color: #97C344 !default; // This value MUST be HEX
+$checkbox-checked-background: #ffffff !default; // This value MUST be HEX
+$checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
+$checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
+
+// ************************************************************
+// Toggles
+// ************************************************************
+
+$toggle-border-color: #cbc9ad !default;
+$toggle-disabled-background: #f5f4ef !default;
+$toggle-checked-background: #97c344 !default; // This value MUST be HEX
+$toggle-checked-color: #ffffff !default; // This value MUST be HEX
+$toggle-unchecked-background: #c2bf9d !default; // This value MUST be HEX
+$toggle-unchecked-color: #ffffff !default; // This value MUST be HEX
+
+// ************************************************************
+// Radiobuttons
+// ************************************************************
+
+$radio-checked-color: #97C344 !default; // This value MUST be HEX
+$radio-checked-background: #ffffff !default; // This value MUST be HEX
+$radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
+$radio-unchecked-background: #ffffff !default; // This value MUST be HEX
+
+// ************************************************************
+// Hints
+// ************************************************************
+
+$hint-color: rgb(158, 158, 158) !default;
+
+// ************************************************************
+// Logo
+// ************************************************************
+
+$logo-margin-top-public: 0;
+$logo-margin-bottom-public: 34px;
+
+// ************************************************************
+// Comments
+// ************************************************************
+
+$comment-background: rgb(246, 246, 243) !default;
+$comment-color: rgb(170, 169, 156) !default;
+
+// ************************************************************
+// Breadcrums
+// ************************************************************
+
+$breadcrum-color: rgb(112, 110, 77) !default;
+$breadcrum-color-hover: rgb(67, 65, 46) !default;
+$breadcrum-color-current: rgb(112, 110, 77) !default;
+
+// ************************************************************
+// Titles
+// ************************************************************
+
+$title-color: rgb(122, 118, 76) !default;
+
+// ************************************************************
+// Menu
+// ************************************************************
+
+$menu-background: #1c3445 !default;
+$menu-height: 60px !default;
+$menu-logo-height: 30px !default;
+$menu-item-color: #9ab5c6 !default;
+$menu-item-hover-color: lighten($menu-item-color, 13%) !default;
+$menu-item-selected-color: #4eb7a8 !default;
+$menu-item-selected-hover-color: lighten($menu-item-selected-color, 13%) !default;
+
+// ************************************************************
+// Action bar
+// ************************************************************
+
+$action-bar-background: rgb(255, 255, 255) !default;
+$action-bar-shadow: 1px solid rgba(0, 0, 0, 0.2) !default;
+$action-bar-height: 73px !default;
+
+// ************************************************************
+// Markdown
+// ************************************************************
+
+$markdown-table-head-background: #f6f8fa;
+$markdown-table-border-color: #dfe2e5;
+$markdown-blockquote-font-color: #6a737d;
+$markdown-blockquote-border-color: #dfe2e5;
+$markdown-hr-background: #e1e4e8;
+
+// ************************************************************
+// Sidebar
+// ************************************************************
+
+$sidebar-width: 250px;
+$sidebar-background: #1d3544;
+$sidebar-header-background: #12222c;
+$sidebar-footer-background: #12222c;
+$sidebar-footer-icon-background: #9ab5c5;
+$sidebar-item-background: #9ab5c6;
+$sidebar-item-selected-background: #4eb7a8;
+
+// ************************************************************
+// Modals
+// ************************************************************
+
+$modal-padding: 20px;
+$modal-width: 650px;
+$modal-close-icon-color: #8b8b8b !default;
+$modal-background-color: rgba(0, 0, 0, 0.75) !default;
+
+// ************************************************************
+// Select2
+// ************************************************************
+
+$select2-border-color: $input-border-color !default;
+$select2-border-color-focus: $input-border-color-focus !default;
+$select2-close-icon-color: #79764b !default;
+$select2-close-icon-color-hover: darken($select2-close-icon-color, 15%) !default;
+$select2-tag-background: rgb(223, 222, 204) !default;
+$select2-tag-color: rgb(122, 118, 76) !default;
+$select2-disabled-background: rgb(245, 244, 239) !default;
+$select2-option-hover-background: rgb(229, 241, 240) !default;
+$select2-option-hover-color: rgb(62, 62, 62) !default;
+
+// ************************************************************
+// Collapsibles
+// ************************************************************
+
+$collapsible-color: $palette-primary !default;

data/app/assets/stylesheets/beyond_canvas/settings/_typography.scss

@@ -13,7 +13,7 @@ body, #{$all-text-inputs}, #{$all-buttons}, select {
 }
 
 body, #{$all-text-inputs}, select {
-  color: $main-color;
+  color: var(--workspace-text);
 }
 
 body, #{$all-text-inputs} {
@@ -25,7 +25,7 @@ select {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: $headline-color;
+  color: var(--workspace-headline);
   font-weight: bold;
   line-height: $headline-line-height;
 }
@@ -55,7 +55,7 @@ p {
 }
 
 a {
-  color: $main-color;
+  color: var(--workspace-text);
   outline: none;
   text-decoration: none;
 }
@@ -64,4 +64,8 @@ strong {
   font-weight: bold;
 }
 
+em {
+  font-style: italic;
+}
+
 // sass-lint:enable single-line-per-selector, no-vendor-prefixes

data/app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss

@@ -1,9 +1,9 @@
-@mixin background-color-darken($color, $percent) {
-  background-color: $color;
+@mixin background-color-darken($color, $hover-color) {
+  background-color: var(--#{color});
   transition: $main-transition;
 
   &:hover {
-    background-color: darken($color, $percent);
+    background-color: var(--#{hover-color});
     transition: $main-transition;
   }
 }
@@ -12,6 +12,15 @@
   color: $color;
   transition: $main-transition;
 
+  svg {
+    fill: $color;
+
+    &:hover {
+      fill: darken($color, $percent);
+      transition: $main-transition;
+    }
+  }
+
   &:hover {
     color: darken($color, $percent);
     transition: $main-transition;
@@ -22,3 +31,30 @@
   background-color: lighten($color, $percent);
   transition: $main-transition;
 }
+
+// SEE: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/62880368#62880368
+@mixin recolor($color: #000, $opacity: 1) {
+  $r: red($color) / 255;
+  $g: green($color) / 255;
+  $b: blue($color) / 255;
+  $a: $opacity;
+
+  // grayscale fallback if SVG from data url is not supported
+  $lightness: lightness($color);
+  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+
+  // color filter
+  $svg-filter-id: "recolor";
+  filter: url('data:image/svg+xml;utf8,\
+  <svg xmlns="http://www.w3.org/2000/svg">\
+    <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
+      <feColorMatrix type="matrix" values="\
+        0 0 0 0 #{$r}\
+        0 0 0 0 #{$g}\
+        0 0 0 0 #{$b}\
+        0 0 0 #{$a} 0\
+      "/>\
+    </filter>\
+  </svg>\
+  ##{$svg-filter-id}');
+}

data/app/controllers/beyond_canvas/authentications_controller.rb

@@ -7,8 +7,12 @@ module BeyondCanvas
     layout 'beyond_canvas/public'
 
     include ::BeyondCanvas::Authentication
+    include ::BeyondCanvas::CustomStyles
 
-    before_action :validate_app_installation_request!, only: :new
+    before_action :validate_app_installation_request!,
+                  only: :new,
+                  unless: -> { Rails.env.development? && BeyondCanvas.configuration.client_credentials }
+    before_action :clear_locale_cookie, only: [:new, :install]
 
     def new
       @shop = Shop.find_or_initialize_by(beyond_api_url: params[:api_url])
@@ -27,6 +31,7 @@ module BeyondCanvas
 
       if @shop.save
         @shop.authenticate(params[:shop][:code])
+        @shop.subscribe_to_beyond_webhooks
 
         redirect_to after_installation_path
       else
@@ -37,7 +42,7 @@ module BeyondCanvas
     private
 
     def shop_params
-      beyond_canvas_parameter_sanitizer.sanitize
+      beyond_canvas_parameter_sanitizer.sanitize.merge(http_host: request.env['HTTP_HOST'])
     end
 
     def after_preinstallation_path
@@ -54,16 +59,27 @@ module BeyondCanvas
 
     def preinstall
       @shop = Shop.create_or_find_by(beyond_api_url: params[:api_url])
+      @shop.http_host = request.env['HTTP_HOST']
       @shop.authenticate(params[:code])
+      @shop.subscribe_to_beyond_webhooks
 
       redirect_to after_preinstallation_path
     end
 
     def open_app(shop)
+      shop.authenticate(params[:code]) if params[:code]
+
       reset_session
       log_in shop
 
+      cookies.delete(:custom_styles_url)
+      set_custom_styles_url shop if BeyondCanvas.configuration.cockpit_app
+
       redirect_to after_sign_in_path
     end
+
+    def clear_locale_cookie
+      cookies.delete :locale if BeyondCanvas.configuration.cockpit_app
+    end
   end
 end

data/app/controllers/beyond_canvas/system_controller.rb

@@ -7,7 +7,9 @@ module BeyondCanvas
     include ::BeyondCanvas::LocaleManagement
 
     def update_locale
-      cookies[:locale] = { value: system_locale_params[:locale], expires: 1.day.from_now }
+      cookies[:locale] = {
+        value: system_locale_params[:locale]
+      }.merge COOKIES_ATTRIBUTES
 
       redirect_back(fallback_location: main_app.root_path)
     end

data/app/controllers/beyond_canvas/webhooks_controller.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require_dependency 'beyond_canvas/application_controller'
+
+module BeyondCanvas
+  class WebhooksController < ApplicationController # :nodoc:
+    skip_before_action :verify_authenticity_token
+
+    include ::BeyondCanvas::RequestValidation
+    include ::BeyondCanvas::StatusCodes
+
+    before_action :set_shop, only: [:webhook]
+
+    if Rails.env.production?
+      before_action only: [:webhook] do
+        signature = request.headers['x-epages-signature']
+        bad_request unless valid_signature?(signature, signature_params, @shop.beyond_shared_secret)
+      end
+    end
+
+    def webhook
+      begin
+        if @shop
+          body = JSON.parse(request.body.read)
+          event = request.headers.env['HTTP_X_EPAGES_WEBHOOK_EVENT_TYPE'].gsub('.', '_')
+          method = "handle_#{event}"
+          send method, body
+        end
+      rescue JSON::ParserError
+        render(json: { status: 400, error: 'Invalid payload' }) && (return)
+      rescue NoMethodError
+        render(json: { status: 500, message: 'https://github.com/ePages-de/beyond_canvas/wiki' }) && (return)
+      end
+      render json: { status: 200 }
+    end
+
+    private
+
+    def handle_app_uninstalled(_data)
+      @shop.delete_beyond_webhooks_subscriptions
+      @shop.destroy
+    end
+
+    def set_shop
+      @shop = Shop.find(params[:id])
+      @shop.refresh_token_if_needed
+    end
+  end
+end