trestle-auth 0.2.5 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ef9ad52449a79a688c9ee2a6e7b86c35179b4c0bad12390f69cb31cf25704ff
-  data.tar.gz: 30f3172c89781a4baa176f1dffa233efbb1060a7cf5171aa93339b7aa27d1d3f
+  metadata.gz: c66ad14a57d22f21b9e9b170a48a505060704b557c0abde4e56526f1b7d95561
+  data.tar.gz: b8d449820f15f9923724d58650f965715cf420073d52d52d4353e20f6de14068
 SHA512:
-  metadata.gz: c51b04bb59d56bf4e65f268944fb1b1f0e92001ad83115f630a24381bc70f7474491456126bfffad1372612150d75481dd98bb46cbc2e200116efb4cc1983c89
-  data.tar.gz: f5dfe2f6cf6298d8b8ff39be723498951d40a77f53671e4845a85c23c7bfddc09f27ff21fdf06e583f33e8254d9f9c3e37faa33b873e2af732e91be0df776b06
+  metadata.gz: d58fe42ceab549559ffa679ef6e028695c27d815e4958278300a0de0ff943ff0f8480519e3bfd1cd59fac6e3763afdfa3829dc31c8d6475018f7ef8c21d4e738
+  data.tar.gz: af0149b4c92cad0b37bf42f82369507a2d3a57c46a8ed116ef2781965a7b837688c7a7fd0c50fd0087493b39b74266d0ba062a2e25c700747c47b4730591a835

data/.browserslistrc

@@ -0,0 +1,2 @@
+> 0.25%
+

data/.gitignore

@@ -7,3 +7,4 @@
 /pkg/
 /spec/reports/
 /tmp/
+/node_modules/

data/app/assets/bundle/trestle/auth/bundle.css

@@ -0,0 +1 @@
+.auth-body{display:-webkit-box;display:flex;color:#fff}.auth-body .container{margin:auto;width:320px}.auth-header{text-align:center;margin-bottom:20px}.auth-header h1{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:1.75rem;font-weight:500;text-shadow:rgba(0,0,0,.5) 0 1px 1px;padding:.75rem 1rem}.auth-header img{max-width:80%;max-height:100%}.auth-header span{margin-left:10px}.login-form .form-control,.login-form .input-group-text{background:hsla(0,0%,100%,.1);border:0}.login-form .form-control{color:#fff;font-size:1.1rem;padding:1.75rem .75rem}.login-form .form-control:focus{outline-color:transparent;outline-style:none;box-shadow:none}.login-form .form-control::-webkit-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control::-moz-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-ms-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control::-ms-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control::placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-webkit-autofill{-webkit-text-fill-color:#fff}.login-form .form-control:-webkit-autofill,.login-form .form-control:-webkit-autofill:active,.login-form .form-control:-webkit-autofill:focus,.login-form .form-control:-webkit-autofill:hover{-webkit-transition:background-color 9999999s ease-in-out 0s;transition:background-color 9999999s ease-in-out 0s}.login-form .input-group-prepend{margin-right:0}.login-form .input-group-text{color:hsla(0,0%,100%,.5);padding:.375rem .25rem .375rem 1rem}.login-form .btn-primary{box-shadow:0 0 2px rgba(0,0,0,.1);padding-top:.75rem;padding-bottom:.75rem}.login-form .alert-danger{background-color:rgba(222,116,113,.75)}.login-form .remember-me{font-size:.95rem;line-height:1.5;padding-left:0}.login-form .remember-me .custom-control-label{display:block;cursor:pointer;background:rgba(0,0,0,.075);color:hsla(0,0%,100%,.75);border-radius:.25rem;padding:.75em 1.5em .75em 3.25em}.login-form .remember-me .custom-control-label:hover{background:rgba(0,0,0,.125)}.login-form .remember-me .custom-control-label:after,.login-form .remember-me .custom-control-label:before{top:.925em;left:1.1em}

data/app/assets/bundle/trestle/auth/userbox.css

@@ -0,0 +1 @@
+.userbox{-webkit-box-ordinal-group:100;order:99;padding:2px 0}.userbox>a{color:#333;display:block;padding:2px 0;font-weight:400;line-height:40px}.userbox>a:focus,.userbox>a:hover{text-decoration:none}.userbox .avatar{vertical-align:top;margin-left:6px}.userbox .dropdown-toggle:after{vertical-align:middle}@media (max-width:767.98px){.userbox{display:block;position:relative;z-index:5}.userbox .name{display:none}.userbox .avatar{border:1px solid hsla(0,0%,100%,.25)}}

data/app/assets/stylesheets/trestle/_custom-auth.css

@@ -0,0 +1,6 @@
+/*
+ * This file is left as an extension point for user customization.
+ *
+ * It will be overridden by the similarly named file within
+ * the app/assets folder of the Rails application.
+ */

data/app/assets/stylesheets/trestle/auth.css

@@ -0,0 +1,2 @@
+//= require trestle/auth/bundle
+//= require trestle/_custom-auth

data/app/helpers/trestle/auth/title_helper.rb

@@ -2,7 +2,9 @@ module Trestle
   module Auth
     module TitleHelper
       def trestle_auth_title
-        if Trestle.config.site_logo
+        if Trestle.config.auth.logo
+          image_tag(Trestle.config.auth.logo)
+        elsif Trestle.config.site_logo
           image_tag(Trestle.config.site_logo)
         elsif Trestle.config.site_logo_small
           safe_join([

data/app/views/layouts/trestle/auth.html.erb

@@ -5,24 +5,27 @@
     <meta content='width=device-width, initial-scale=1' name='viewport'>
     <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
 
-    <meta content='no-cache' name='turbolinks-cache-control'>
+    <% if Trestle.config.turbolinks %>
+      <meta content='no-cache' name='turbolinks-cache-control'>
+    <% end %>
 
     <%= csrf_meta_tags %>
 
     <title><%= Trestle.config.site_title %></title>
 
+    <%= stylesheet_link_tag "trestle/admin", 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag "trestle/theme", 'data-turbolinks-track': 'reload' if Trestle.config.theme %>
+    <%= stylesheet_link_tag "trestle/custom", 'data-turbolinks-track': 'reload' %>
+
     <%= stylesheet_link_tag "trestle/auth", 'data-turbolinks-track': 'reload' %>
 
-    <%= javascript_include_tag "turbolinks" if defined?(Turbolinks) %>
-    <%= javascript_include_tag "trestle/auth", 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag "turbolinks" if Trestle.config.turbolinks %>
+
+    <%= hook "auth.head" %>
   </head>
 
-  <body>
+  <body class="auth-body theme-bg-dark">
     <main class="container">
-      <header class="auth-header">
-        <h1><%= trestle_auth_title %></h1>
-      </header>
-
       <%= yield %>
     </main>
   </body>

data/app/views/trestle/auth/_userbox.html.erb

@@ -1,8 +1,7 @@
-<div class="userbox pull-right dropdown">
-  <%= link_to "#", class: 'dropdown-toggle', data: { toggle: 'dropdown' } do %>
-    <span class="name">
+<div class="userbox dropdown">
+  <%= link_to "#", data: { toggle: 'dropdown' } do %>
+    <span class="name dropdown-toggle">
       <%= format_user_name(current_user) %>
-      <span class="caret"></span>
     </span>
 
     <%= avatar_for(current_user) %>

data/app/views/trestle/auth/sessions/new.html.erb

@@ -1,22 +1,30 @@
 <%= form_tag login_path, class: "login-form" do %>
-  <%= hook("auth.login.heading") %>
+  <header class="auth-header">
+    <%= hook("auth.login.heading") do %>
+      <h1><%= trestle_auth_title %></h1>
+    <% end %>
+  </header>
 
   <% if flash[:error] -%>
-    <div class="alert alert-danger">
+    <div class="alert alert-danger error-bg">
       <p><%= flash[:error] %></p>
     </div>
   <% end -%>
 
   <div class="form-group">
     <div class="input-group">
-      <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
+      <div class="input-group-prepend">
+        <span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+      </div>
       <%= text_field_tag Trestle.config.auth.authenticate_with, "", placeholder: Trestle.config.auth.authenticate_with.to_s.humanize, class: "form-control" %>
     </div>
   </div>
 
   <div class="form-group">
     <div class="input-group">
-      <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
+      <div class="input-group-prepend">
+        <span class="input-group-text"><i class="fa fa-lock fa-fw"></i></span>
+      </div>
       <%= password_field_tag :password, "", placeholder: "Password", class: "form-control" %>
     </div>
   </div>
@@ -25,14 +33,14 @@
 
   <% if Trestle.config.auth.remember.enabled %>
   <div class="form-group">
-    <label class="remember-me">
-      <%= check_box_tag :remember_me %>
-      <%= t("admin.auth.remember_me", default: "Remember me") %>
-    </label>
+    <div class="custom-control custom-checkbox remember-me">
+      <%= check_box_tag :remember_me, "1", false, class: "custom-control-input" %>
+      <%= label_tag :remember_me, t("admin.auth.remember_me", default: "Remember me"), class: "custom-control-label" %>
+    </div>
   </div>
   <% end %>
 
   <div class="form-group">
-    <%= submit_tag t("admin.auth.login", default: "Login"), class: "btn btn-primary btn-block" %>
+    <%= submit_tag t("admin.auth.login", default: "Login"), class: "btn btn-primary btn-block btn-lg" %>
   </div>
 <% end %>

data/config/locales/es.yml

@@ -0,0 +1,8 @@
+es:
+  admin:
+    auth:
+      my_account: "Mi Conta"
+      login: "Inicio de sesión"
+      logout: "Sair"
+      error: "Email o contraseña incorrectos."
+      remember_me: "Recuérdame"

data/frontend/_form.scss

@@ -0,0 +1,79 @@
+.login-form {
+  .form-control, .input-group-text {
+    background: $auth-form-control-bg;
+    border: $auth-form-control-border;
+  }
+
+  .form-control {
+    color: $auth-form-control-color;
+    font-size: 1.1rem;
+
+    padding: 1.75rem 0.75rem;
+
+    &:focus {
+      outline-color: transparent;
+      outline-style: none;
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: $auth-form-control-placeholder;
+    }
+
+    &:-webkit-autofill {
+      -webkit-text-fill-color: $auth-form-control-color;
+
+      &, &:hover, &:focus, &:active {
+        transition: background-color 9999999s ease-in-out 0s;
+      }
+    }
+  }
+
+  .input-group-prepend {
+    margin-right: 0;
+  }
+
+  .input-group-text {
+    color: $auth-form-control-icon-color;
+    padding: 0.375rem 0.25rem 0.375rem 1rem;
+  }
+
+  .btn-primary {
+    box-shadow: rgba(black, 0.1) 0 0 2px;
+
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .alert-danger {
+    background-color: rgba($alert-danger-bg, 0.75);
+  }
+
+  .remember-me {
+    font-size: 0.95rem;
+    line-height: 1.5;
+
+    padding-left: 0;
+
+    .custom-control-label {
+      display: block;
+      cursor: pointer;
+
+      background: $auth-remember-me-bg;
+      color: $auth-remember-me-color;
+
+      border-radius: $border-radius;
+      padding: 0.75em 1.5em 0.75em 3.25em;
+
+      &:hover {
+        background: opacify($auth-remember-me-bg, 0.05);
+      }
+
+      &::before,
+      &::after {
+        top: 0.175em + 0.75em;
+        left: 1.1em;
+      }
+    }
+  }
+}

data/frontend/_layout.scss

@@ -0,0 +1,35 @@
+.auth-body {
+  display: flex;
+  color: white;
+
+  .container {
+    margin: auto;
+    width: 320px;
+  }
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 20px;
+
+  h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 1.75rem;
+    font-weight: 500;
+    text-shadow: rgba(black, 0.5) 0 1px 1px;
+
+    padding: 0.75rem 1rem;
+  }
+
+  img {
+    max-width: 80%;
+    max-height: 100%;
+  }
+
+  span {
+    margin-left: 10px;
+  }
+}

data/{app/assets/stylesheets/trestle/auth/_defaults.scss → frontend/_variables.scss}

@@ -1,13 +1,9 @@
-$auth-bg: $theme-bg !default;
-
 $auth-form-control-color: white !default;
 $auth-form-control-placeholder: rgba(white, 0.5) !default;
 $auth-form-control-bg: rgba(white, 0.1) !default;
 $auth-form-control-border: 0 !default;
 
+$auth-form-control-icon-color: rgba(white, 0.5) !default;
+
 $auth-remember-me-color: rgba(white, 0.75) !default;
 $auth-remember-me-bg: rgba(black, 0.075) !default;
-
-$auth-login-btn-color: $btn-primary-color !default;
-$auth-login-btn-border: $btn-primary-border !default;
-$auth-login-btn-bg: $btn-primary-bg !default;

data/frontend/index.scss

@@ -0,0 +1,5 @@
+@import "~trestle/frontend/css/support";
+
+@import "variables";
+@import "layout";
+@import "form";

data/{app/assets/stylesheets/trestle/auth → frontend}/userbox.scss

@@ -1,16 +1,15 @@
-@import "trestle/support";
+@import "~trestle/frontend/css/support";
 
 .userbox {
-  margin-top: 2px;
-  margin-bottom: 2px;
+  order: 99;
+  padding: 2px 0;
 
   > a {
-    color: $text-color;
+    color: $body-color;
 
     display: block;
     padding: 2px 0;
 
-    font-size: 14px;
     font-weight: normal;
     line-height: 40px;
 
@@ -24,20 +23,19 @@
     margin-left: 6px;
   }
 
-  .name {
-    color: $text-color;
+  .dropdown-toggle {
+    &::after {
+      vertical-align: middle;
+    }
   }
 }
 
-@include mobile {
+@include media-breakpoint-down(sm) {
   .userbox {
+    display: block;
     position: relative;
     z-index: 5;
 
-    > a, .name {
-      color: white;
-    }
-
     .name {
       display: none;
     }

data/lib/generators/trestle/auth/install/install_generator.rb

@@ -97,6 +97,12 @@ module Trestle
               #
               # config.auth.redirect_on_logout = -> { "/" }
 
+              # Specify the logo used on the login form.
+              # If not specified, will fall back to config.site_logo,
+              # config.site_logo_small or config.site_title.
+              #
+              # config.auth.logo = "auth-logo.png"
+
               # Enable or disable remember me functionality. Defaults to true.
               #
               # config.auth.remember.enabled = false

data/lib/trestle/auth/configuration.rb

@@ -49,6 +49,8 @@ module Trestle
       option :redirect_on_login, -> { Trestle.config.path }, evaluate: false
       option :redirect_on_logout, -> { login_url }, evaluate: false
 
+      option :logo
+
       option :remember, Rememberable.new
     end
   end

data/lib/trestle/auth/engine.rb

@@ -1,7 +1,7 @@
 module Trestle
   module Auth
     class Engine < ::Rails::Engine
-      config.assets.precompile << "trestle/auth.css" << "trestle/auth.js" << "trestle/auth/userbox.scss"
+      config.assets.precompile << "trestle/auth.css" << "trestle/auth/userbox.css"
 
       config.before_initialize do
         Trestle::Engine.paths["app/helpers"].concat(paths["app/helpers"].existent)

data/lib/trestle/auth/version.rb

@@ -1,5 +1,5 @@
 module Trestle
   module Auth
-    VERSION = "0.2.5"
+    VERSION = "0.3.0"
   end
 end

data/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "trestle-auth",
+  "version": "0.3.0",
+  "description": "Authentication plugin for the Trestle admin framework",
+  "repository": "https://github.com/TrestleAdmin/trestle-auth.git",
+  "author": "Sam Pohlenz <sam@sampohlenz.com>",
+  "license": "LGPL-3.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch"
+  },
+  "dependencies": {
+    "trestle": "https://github.com/TrestleAdmin/trestle.git"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.6.1",
+    "css-loader": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.0",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-fix-style-only-entries": "^0.4.0"
+  }
+}

data/trestle-auth.gemspec

@@ -14,10 +14,10 @@ Gem::Specification.new do |spec|
   spec.homepage      = "https://www.trestle.io"
   spec.license       = "LGPL-3.0"
 
-  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(spec|node_modules)/}) }
   spec.require_paths = ["lib"]
 
-  spec.add_dependency "trestle", "~> 0.8"
+  spec.add_dependency "trestle", "~> 0.9.0"
   spec.add_dependency "bcrypt",  "~> 3.1.7"
 
   spec.add_development_dependency "bundler", "~> 1.12"