login lindo

.gitignore

@@ -1,2 +1,3 @@
 .bundle/
 vendor/
+node_modules/

lib/sutty/login.rb

@@ -17,6 +17,9 @@ module Sutty
     enable :logging
     enable :auth_use_referrer
 
+    set :auth_error_message, 'Hubo un error al ingresar'
+    set :auth_success_message, '¡Bienvenida!'
+
     # Configura Warden para usar la estrategia IMAP y obtener la cuenta
     # de usuaria a partir de la cookie.
     use Warden::Manager do |config|
@@ -30,5 +33,9 @@ module Sutty
     end
 
     set :root, File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
+
+    before do
+      @has_cover = true
+    end
   end
 end

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bootstrap": "4.0"
+  }
+}

public/assets/css/bootstrap.min.css

@@ -0,0 +1 @@
+../../../node_modules/bootstrap/dist/css/bootstrap.min.css

public/assets/css/bootstrap.min.css.map

@@ -0,0 +1 @@
+../../../node_modules/bootstrap/dist/css/bootstrap.min.css.map

public/assets/css/sutty.css

@@ -0,0 +1,11 @@
+.background-cover {
+  background: url(/assets/img/background.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.full-height {
+  height: 100vh;
+}

views/layout.haml

@@ -0,0 +1,10 @@
+!!!
+%html
+  %head
+    %meta{content: "text/html; charset=UTF-8", 'http-equiv': "Content-Type"}/
+    %title Sutty
+    %link{rel: 'stylesheet', type: 'text/css', href: '/assets/css/bootstrap.min.css'}
+    %link{rel: 'stylesheet', type: 'text/css', href: '/assets/css/sutty.css'}
+  %body{class: @has_cover ? 'background-cover' : ''}
+    .container
+      = yield

views/login.haml

@@ -1,11 +1,14 @@
-%h1 Hola!
+.row.align-items-center.justify-content-center.full-height
+  .col-md-6.align-self-center
+    - if flash[:error]
+      .alert.alert-danger{role: 'alert'}
+        = flash[:error]
 
-- if flash[:error]
-  .alert.alert-danger{role: 'alert'}
-    = flash[:error]
+    %form{method: 'post', action: '/login'}
+      .form-group
+        %input{type: 'email', name: 'username', class: 'form-control', placeholder: 'Correo'}
+      .form-group
+        %input{type: 'password', name: 'password', class: 'form-control', placeholder: 'Contraseña'}
 
-%form{method: 'post', action: '/login'}
-  %input{type: 'email', name: 'username', placeholder: 'Correo'}
-  %input{type: 'password', name: 'password', placeholder: 'Contraseña'}
-
-  %input{type: 'submit', value: 'Ingresar'}
+      .form-group
+        %input{type: 'submit', value: 'Ingresar', class: 'btn btn-lg btn-primary btn-block'}

yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+bootstrap@4.0:
+  version "4.0.0-beta"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6"