beyond_canvas 0.16.2.pre → 0.17.0.pre

data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss

@@ -0,0 +1,29 @@
+.breadcrumbs {
+  font-size: 90%;
+  margin-bottom: 30px;
+
+  .home-icon {
+    width: 12px;
+    height: 12px;
+    fill: $breadcrum-color-current;
+  }
+
+  .arrow-right {
+    width: 8px;
+    height: 8px;
+    margin-left: 7px;
+    margin-right: 7px;
+    fill: $breadcrum-color;
+  }
+}
+
+.breadcrumb {
+  &__item {
+    color: $breadcrum-color-current;
+
+    &--current {
+      color: $breadcrum-color;
+      pointer-events: none;
+    }
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss

@@ -10,7 +10,7 @@
   border-width: 1px;
   border-style: solid;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   font-weight: $button-font-weight;
   justify-content: flex-end;
   line-height: 1;

data/app/assets/stylesheets/beyond_canvas/components/_debug.scss

@@ -0,0 +1,10 @@
+.debug_dump {
+  margin: 50px auto 0;
+  background-color: #dedede;
+  max-width: 50%;
+  width: 100%;
+  border: 1px solid #666666;
+  border-radius: 4px;
+  padding: 20px;
+  box-sizing: border-box;
+}

data/app/assets/stylesheets/beyond_canvas/components/_forms.scss

@@ -1,6 +1,5 @@
 %form__actions {
-  align-items: center;
-  display: flex;
+  overflow: auto;
 }
 
 .form {
@@ -14,29 +13,27 @@
   }
 
   &__actions {
-    &--spaced {
-      @extend %form__actions;
-
-      justify-content: space-between;
-    }
-
     &--left {
       @extend %form__actions;
 
-      justify-content: flex-start;
+      > * {
+        float: left;
 
-      *:not(:last-child) {
-        margin-right: 30px;
+        &:not(:first-child) {
+          margin-left: 30px;
+        }
       }
     }
 
     &--right {
       @extend %form__actions;
 
-      justify-content: flex-end;
+      > * {
+        float: right;
 
-      *:not(:first-child) {
-        margin-left: 30px;
+        &:not(:first-child) {
+          margin-right: 30px;
+        }
       }
     }
   }

data/app/assets/stylesheets/beyond_canvas/components/_main.scss

@@ -1,9 +1,12 @@
-%body {
-  background-color: $main-background;
+.main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: scroll;
 }
 
 .body--public {
-  @extend %body;
+  background-color: $main-background-public;
 
   .main-wrapper {
     @include margin(32px auto);
@@ -20,20 +23,16 @@
   }
 }
 
-.body--single-page {
-  @extend %body;
+.body--application {
+  background-color: $main-background-application;
 
   .main-wrapper {
-    @include margin(32px auto);
+    @include margin(25px auto 100px auto);
 
-    max-width: 876px;
-    width: 94%;
+    width: calc(100% - 50px);
 
-    .logo {
-      @include margin($logo-margin-top-public auto $logo-margin-bottom-public);
-
-      display: block;
-      width: 238px;
+    &--action_bar {
+      margin-top: 12px;
     }
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_margins.scss

@@ -6,4 +6,12 @@
   &--bottom {
     margin-bottom: 30px;
   }
+
+  &--left {
+    margin-left: 30px;
+  }
+
+  &--right {
+    margin-right: 30px;
+  }
 }

data/app/assets/stylesheets/beyond_canvas/components/_menu.scss

@@ -0,0 +1,40 @@
+.menu {
+  @include padding(0 15px);
+
+  height: $menu-height;
+  background-color: $menu-background;
+  align-items: center;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+
+  .logo {
+    height: $menu-logo-height;
+  }
+
+  &--center {
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  &__item {
+    @include margin(0 15px);
+    color: $menu-item-color;
+
+    &:hover {
+      color: $menu-item-hover-color;
+    }
+
+    &--active {
+      color: $menu-item-selected-color;
+
+      &:hover {
+        color: $menu-item-selected-hover-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_modals.scss

@@ -0,0 +1,27 @@
+.modal {
+
+  &__background {
+    width: 100%;
+    height: 100%;
+    background-color: $modal-background-color;
+    position: absolute;
+    z-index: 99999;
+    justify-content: center;
+    align-items: center;
+    display: none;
+
+    .card {
+      width: 100%;
+      max-width: $modal-width;
+      margin: 25px;
+    }
+  }
+
+  &__close {
+    @include position(absolute, $modal-padding $modal-padding null null);
+    @include size(14px);
+
+    cursor: pointer;
+    fill: $modal-close-icon-color;
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_sidebar.scss

@@ -0,0 +1,53 @@
+.sidebar {
+  height: 100vh;
+  width: $sidebar-width;
+  min-width: $sidebar-width;
+  background-color: $sidebar-background;
+  position: relative;
+
+  &__header, &__footer {
+    width: 100%;
+  }
+
+  &__header {
+    background-color: $sidebar-header-background;
+    height: 73px;
+    padding-left: 15px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  &__logo {
+    width: 128px;
+    height: 30px;
+    background-color: white;
+  }
+
+  &__item {
+    width: 120px;
+    height: 14px;
+    background-color: $sidebar-item-background;
+    margin: 16px 0 24px 35px;
+
+    &--selected {
+      background-color: $sidebar-item-selected-background;
+    }
+  }
+
+  &__footer {
+    background-color: $sidebar-footer-background;
+    height: 40px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    background-color: $sidebar-footer-icon-background;
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_titles.scss

@@ -0,0 +1,7 @@
+.title {
+  margin-bottom: 25px;
+  line-height: 1;
+  font-weight: normal;
+  font-size: 190%;
+  color: $title-color;
+}

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

@@ -13,7 +13,8 @@ $palette-danger: rgb(218, 60, 60) !default;
 // General styles
 // ************************************************************
 
-$main-background: rgb(233, 232, 220) !default;
+$main-background-public: rgb(233, 232, 220) !default;
+$main-background-application: rgb(233, 232, 220) !default;
 $main-transition: 0.125s ease-in;
 
 // ************************************************************
@@ -94,19 +95,19 @@ $input-errors-color: $palette-danger !default;
 // Checkboxes
 // ************************************************************
 
-$checkbox-checked-color: #97C344 !default;
-$checkbox-checked-background: #ffffff !default;
-$checkbox-unchecked-color: #C2BF9D !default;
-$checkbox-unchecked-background: #ffffff !default;
+$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
 
 // ************************************************************
 // Radiobuttons
 // ************************************************************
 
-$radio-checked-color: #97C344 !default;
-$radio-checked-background: #ffffff !default;
-$radio-unchecked-color: #C2BF9D !default;
-$radio-unchecked-background: #ffffff !default;
+$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
@@ -160,6 +161,39 @@ $notice-error-background: rgb(218, 60, 60) !default;
 $notice-border-radius: 4px !default;
 $notice-color: rgb(153, 153, 153) !default;
 
+// ************************************************************
+// Breadcrums
+// ************************************************************
+
+$breadcrum-color: rgb(122, 118, 76) !default;
+$breadcrum-color-current: rgb(61, 149, 137) !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
 // ************************************************************
@@ -169,3 +203,24 @@ $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: 10px;
+$modal-width: 650px;
+$modal-close-icon-color: #8b8b8b !default;
+$modal-background-color: rgba(0, 0, 0, 0.5) !default;

data/app/controllers/beyond_canvas/application_controller.rb

@@ -5,5 +5,7 @@ module BeyondCanvas
     protect_from_forgery with: :exception
 
     include ::BeyondCanvas::StatusCodes
+    include ::BeyondCanvas::AuthenticationsHelper
+    include ::BeyondCanvas::DebugHelper
   end
 end

data/app/controllers/beyond_canvas/authentications_controller.rb

@@ -7,56 +7,63 @@ module BeyondCanvas
     layout 'beyond_canvas/public'
 
     include ::BeyondCanvas::Authentication
-    include ::BeyondCanvas::ResourceManagement
 
     before_action :validate_app_installation_request!, only: :new
 
     def new
-      self.resource = resource_class.new
+      @shop = Shop.find_or_initialize_by(beyond_api_url: params[:api_url])
+
+      if @shop&.authenticated?
+        open_app(@shop)
+      elsif BeyondCanvas.configuration.preinstalled
+        preinstall
+      end
     end
 
-    def create
-      # Search for the api url. If there is no record it creates a new record.
-      resource_params = new_resource_params
-      self.resource = resource_class.find_or_create_by(beyond_api_url: resource_params[:api_url])
-      # Assign the attributes to the record
-      raise ActiveRecord::RecordNotSaved unless resource.update(resource_params)
-      # Get and save access_token and refresh_token using the authentication code
-      raise BeyondApi::Error if resource.authenticate.is_a?(BeyondApi::Error)
+    def install
+      @shop = Shop.create_with(shop_params).create_or_find_by(beyond_api_url: params[:shop][:api_url])
 
-      redirect_to after_create_path
-    rescue ActiveRecord::RecordNotSaved, BeyondApi::Error, StandardError => e
-      logger.error "[BeyondCanvas] #{e.message}".red
-      send "handle_#{e.class.name.split('::').first.underscore}_exception", e
-    end
+      @shop.assign_attributes(shop_params)
 
-    def update
-      create
+      if @shop.save
+        @shop.authenticate(params[:shop][:code])
+
+        redirect_to after_installation_path
+      else
+        render :new
+      end
     end
 
     private
 
-    def new_resource_params
-      send "new_#{resource_name}_params"
+    def shop_params
+      beyond_canvas_parameter_sanitizer.sanitize
     end
 
-    def after_create_path
-      new_resource_params[:return_url]
+    def after_preinstallation_path
+      params[:return_url]
     end
 
-    def handle_active_record_exception(_exception)
-      flash[:error] = t('beyond_canvas.authentications.failure')
-      render :new
+    def after_installation_path
+      params[:shop][:return_url]
     end
 
-    def handle_beyond_api_exception(_exception)
-      flash[:error] = t('beyond_canvas.authentications.failure')
-      render :new
+    def after_sign_in_path
+      BeyondCanvas.configuration.open_app_url
     end
 
-    def handle_standard_error_exception(_exception)
-      flash[:error] = t('beyond_canvas.authentications.failure')
-      render :new
+    def preinstall
+      @shop = Shop.create_or_find_by(beyond_api_url: params[:api_url])
+      @shop.authenticate(params[:code])
+
+      redirect_to after_preinstallation_path
+    end
+
+    def open_app(shop)
+      reset_session
+      log_in shop
+
+      redirect_to after_sign_in_path
     end
   end
 end