aplicar diseño a devise

app/assets/stylesheets/application.scss

@@ -1,4 +1,11 @@
 //= require_tree .
+
+$black: black;
+$white: white;
+$grey: grey;
+$cyan: #13fefe;
+$magenta: #f206f9;
+
 // TODO: Encontrar la forma de generar esto desde los locales de Rails
 $custom-file-text: (
   en: 'Browse',
@@ -50,11 +57,11 @@ $verde: #96d643;
 
 /* Tema */
 ol.breadcrumb {
-  background-color: white;
+  background-color: transparent;
 }
 
 .breadcrumb-item {
-  color: black;
+  color: $black;
 }
 
 .form-control {
@@ -95,7 +102,7 @@ ol.breadcrumb {
 }
 
 .full-height {
-  min-height: calc(100vh - #{$footer-height});
+  min-height: 80vh;
 }
 
 html {
@@ -216,6 +223,39 @@ textarea.post-content {
 
 svg {
   .is-path-magenta {
-    fill: black
+    fill: $black
+  }
+}
+
+.black-bg {
+  color: $white;
+  background-color: $black;
+
+  svg {
+    .is-path-magenta {
+      fill: $white
+    }
+  }
+
+  a {
+    color: $magenta;
+  }
+
+  .btn {
+    background-color: $white;
+    color: $black;
+    border: none;
+
+    &:active {
+      background-color: $cyan;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 0.2rem $cyan;
+    }
+  }
+
+  .breadcrumb-item {
+    color: $white;
   }
 }

app/controllers/collaborations_controller.rb

@@ -10,7 +10,6 @@ class CollaborationsController < ApplicationController
     @site = Site.find_by_name(params[:site_id])
     authorize Collaboration.new(@site)
 
-    @has_cover = true
     @invitade = current_usuarie || @site.usuaries.build
   end
 

app/views/devise/confirmations/new.haml

@@ -1,16 +1,36 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-4.align-self-center
+    .sr-only
       %h2= t('.resend_confirmation_instructions')
-    = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+
+    = form_for(resource,
+      as: resource_name,
+      url: confirmation_path(resource_name),
+      html: { method: :post }) do |f|
+
       = render 'devise/shared/error_messages', resource: resource
+
+      :ruby
+        value = if resource.pending_reconfirmation?
+                  resource.unconfirmed_email
+                else
+                  resource.email
+                end
+
       .form-group
-        = f.label :email
+        = f.label :email, class: 'sr-only'
         = f.email_field :email,
           autofocus: true,
           autocomplete: 'email',
           class: 'form-control',
-          value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email)
+          value: value,
+          placeholder: t('activerecord.attributes.usuarie.email')
       .actions
         = f.submit t('.resend_confirmation_instructions'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
     = render 'devise/shared/links'

app/views/devise/invitations/edit.haml

@@ -1,16 +1,36 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
     %h2= t 'devise.invitations.edit.header'
-    = form_for(resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put }) do |f|
+    = form_for(resource,
+      as: resource_name,
+      url: invitation_path(resource_name),
+      html: { method: :put }) do |f|
       = render 'devise/shared/error_messages', resource: resource
       = f.hidden_field :invitation_token, readonly: true
       - if f.object.class.require_password_on_accepting
         .form-group
-          = f.label :password
-          = f.password_field :password, class: 'form-control'
+          = f.label :password, class: 'sr-only'
+          = f.password_field :password, class: 'form-control',
+            min: @minimum_password_length,
+            aria: { describedby: 'minimum-password-length' },
+            placeholder: t('activerecord.attributes.usuarie.password')
+        - if @minimum_password_length
+          %small.text-muted.form-text#minimum-password-length
+            = t('devise.shared.minimum_password_length',
+              count: @minimum_password_length)
+
         .form-group
-          = f.label :password_confirmation
-          = f.password_field :password_confirmation, class: 'form-control'
+          = f.label :password_confirmation, class: 'sr-only'
+          = f.password_field :password_confirmation,
+            class: 'form-control',
+            min: @minimum_password_length,
+            aria: { describedby: 'minimum-password-length' },
+            placeholder: t('activerecord.attributes.usuarie.password')
       .actions
         = f.submit t('devise.invitations.edit.submit_button'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'

app/views/devise/invitations/new.haml

@@ -1,7 +1,15 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
     %h2= t 'devise.invitations.new.header'
-    = form_for(resource, as: resource_name, url: invitation_path(resource_name), html: { method: :post }) do |f|
+    = form_for(resource,
+      as: resource_name,
+      url: invitation_path(resource_name),
+      html: { method: :post }) do |f|
       = render 'devise/shared/error_messages', resource: resource
       - resource.class.invite_key_fields.each do |field|
         .form-group
@@ -9,4 +17,4 @@
           = f.text_field field, class: 'form-control'
       .actions
         = f.submit t('devise.invitations.new.submit_button'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'

app/views/devise/passwords/edit.haml

@@ -1,26 +1,45 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
+    .sr-only
       %h2= t('.change_your_password')
+      %p= t('.help')
+
     = form_for(resource, as: resource_name,
       url: password_path(resource_name),
       html: { method: :put }) do |f|
       = render 'devise/shared/error_messages', resource: resource
+
       = f.hidden_field :reset_password_token
+
       .form-group
-        = f.label :password, t('.new_password')
-        - if @minimum_password_length
-          %em
-            = t('devise.shared.minimum_password_length',
-              count: @minimum_password_length)
+        = f.label :password, t('.new_password'), class: 'sr-only'
         = f.password_field :password,
           autofocus: true,
           autocomplete: 'new-password',
-          class: 'form-control'
+          class: 'form-control', min: @minimum_password_length,
+          aria: { describedby: 'minimum_password_length' },
+          placeholder: t('.new_password')
+        - if @minimum_password_length
+          %small.form-text.text-muted
+            = t('devise.shared.minimum_password_length',
+              count: @minimum_password_length)
+
       .form-group
-        = f.label :password_confirmation, t('.confirm_new_password')
+        = f.label :password_confirmation, t('.confirm_new_password'),
+          class: 'sr-only'
         = f.password_field :password_confirmation, autocomplete: 'off',
-          class: 'form-control'
+          class: 'form-control',
+          min: @minimum_password_length,
+          aria: { describedby: 'minimum_password_length' },
+          placeholder: t('.confirm_new_password')
+
       .actions
         = f.submit t('.change_my_password'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
+
     = render 'devise/shared/links'

app/views/devise/passwords/new.haml

@@ -1,13 +1,25 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
+    .sr-only
       %h2= t('.forgot_your_password')
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+      %p= t('.help')
+
+    = form_for(resource,
+      as: resource_name,
+      url: password_path(resource_name),
+      html: { method: :post }) do |f|
       = render 'devise/shared/error_messages', resource: resource
       .form-group
-        = f.label :email
+        = f.label :email, class: 'sr-only'
         = f.email_field :email, autofocus: true, autocomplete: 'email',
-          class: 'form-control'
+          class: 'form-control',
+          placeholder: t('activerecord.attributes.usuarie.email')
       .actions
         = f.submit t('.send_me_reset_password_instructions'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
     = render 'devise/shared/links'

app/views/devise/registrations/edit.haml

@@ -1,6 +1,9 @@
 = render 'layouts/breadcrumb',
   crumbs: [link_to(t('.index'), sites_path), t('.title')]
 
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
   .col-md-6.align-self-center
     %h2= t('.title')
@@ -29,7 +32,7 @@
       .form-group
         = f.label :password
         = f.password_field :password, autocomplete: 'new-password',
-          class: 'form-control', 'aria-describedby': 'password-help'
+          class: 'form-control', aria: { describedby: 'password-help' }
         %small.text-muted.form-text#password-help
           = t('.leave_blank_if_you_don_t_want_to_change_it')
           - if @minimum_password_length
@@ -48,16 +51,17 @@
           autocomplete: 'current-password',
           required: true,
           class: 'form-control',
-          'aria-describedby': 'current-password-help'
+          aria: { describedby: 'current-password-help' }
         %small.text-muted.form-text#current-password-help
           = t('.we_need_your_current_password_to_confirm_your_changes')
       .actions
         = f.submit t('.update'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
     %hr/
+
+    .sr-only
       %h3= t('.cancel_my_account')
-    %p
     = button_to t('.cancel_my_account'),
       registration_path(resource_name),
       data: { confirm: t('.are_you_sure') },
-        method: :delete, class: 'btn btn-danger btn-block'
+      method: :delete, class: 'btn btn-block'

app/views/devise/registrations/new.haml

@@ -1,24 +1,49 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
+    .sr-only
       %h2= t('.sign_up')
-    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+      %p= t('.help')
+
+    = form_for(resource,
+      as: resource_name,
+      url: registration_path(resource_name)) do |f|
+
       = render 'devise/shared/error_messages', resource: resource
+
       .form-group
-        = f.label :email
+        = f.label :email, class: 'sr-only'
         = f.email_field :email, autofocus: true, autocomplete: 'email',
-          class: 'form-control'
+          class: 'form-control',
+          placeholder: t('activerecord.attributes.usuarie.email')
+
+      - password = 'activerecord.attributes.usuarie.password'
+
       .form-group
-        = f.label :password
-        - if @minimum_password_length
-          %em= t('devise.shared.minimum_password_length', count: @minimum_password_length)
+        = f.label :password, class: 'sr-only'
         = f.password_field :password, autocomplete: 'new-password',
-          class: 'form-control'
+          class: 'form-control', min: @minimum_password_length,
+          aria: { describedby: 'minimum-password-length' },
+          placeholder: t(password)
+        - if @minimum_password_length
+          %small.text-muted.form-text#minimum-password-length
+            = t('devise.shared.minimum_password_length',
+              count: @minimum_password_length)
+
       .form-group
-        = f.label :password_confirmation
+        = f.label :password_confirmation, class: 'sr-only'
         = f.password_field :password_confirmation,
           autocomplete: 'new-password',
-          class: 'form-control'
+          class: 'form-control',
+          min: @minimum_password_length,
+          aria: { describedby: 'minimum-password-length' },
+          placeholder: t("#{password}_confirmation")
       .actions
         = f.submit t('.sign_up'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
+
     = render 'devise/shared/links'

app/views/devise/sessions/new.haml

@@ -1,9 +1,19 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
     = render 'layouts/flash'
 
+    .sr-only
       %h2= t('.sign_in')
-    = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+      %p= t('.help')
+
+    = form_for(resource,
+      as: resource_name,
+      url: session_path(resource_name)) do |f|
       - if @site
         = hidden_field :referer, value: site_path(@site)
       .form-group
@@ -22,9 +32,12 @@
           placeholder: t('login.password')
       - if devise_mapping.rememberable?
         .form-group
-          = f.check_box :remember_me
+          = f.check_box :remember_me, aria: { describedby: 'remember-for' }
           = f.label :remember_me
+          %small.form-text.text-muted#remember-for
+            = t('login.remember_me',
+              remember_for: distance_of_time_in_words(Usuarie.remember_for))
       .actions
         = f.submit t('.sign_in'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
     = render 'devise/shared/links'

app/views/devise/shared/_links.haml

@@ -1,19 +1,34 @@
+%hr/
+
 - if controller_name != 'sessions'
-  = link_to t(".sign_in"), new_session_path(resource_name)
+  = link_to t('.sign_in'), new_session_path(resource_name)
   %br/
+
 - if devise_mapping.registerable? && controller_name != 'registrations'
-  = link_to t(".sign_up"), new_registration_path(resource_name)
+  = link_to t('.sign_up'), new_registration_path(resource_name)
   %br/
-- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
-  = link_to t(".forgot_your_password"), new_password_path(resource_name)
+
+- if devise_mapping.recoverable?
+  - unless %w[passwords registrations].include?(controller_name)
+    = link_to t('.forgot_your_password'),
+              new_password_path(resource_name)
     %br/
+
 - if devise_mapping.confirmable? && controller_name != 'confirmations'
-  = link_to t('.didn_t_receive_confirmation_instructions'), new_confirmation_path(resource_name)
+  = link_to t('.didn_t_receive_confirmation_instructions'),
+    new_confirmation_path(resource_name)
   %br/
-- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks'
-  = link_to t('.didn_t_receive_unlock_instructions'), new_unlock_path(resource_name)
+
+- if devise_mapping.lockable?
+  - if resource_class.unlock_strategy_enabled?(:email)
+    - if controller_name != 'unlocks'
+      = link_to t('.didn_t_receive_unlock_instructions'),
+                new_unlock_path(resource_name)
       %br/
+
 - if devise_mapping.omniauthable?
   - resource_class.omniauth_providers.each do |provider|
-    = link_to t('.sign_in_with_provider', provider: OmniAuth::Utils.camelize(provider)), omniauth_authorize_path(resource_name, provider)
+    = link_to t('.sign_in_with_provider',
+                provider: OmniAuth::Utils.camelize(provider)),
+              omniauth_authorize_path(resource_name, provider)
     %br/

app/views/devise/unlocks/new.haml

@@ -1,13 +1,25 @@
+= render 'layouts/breadcrumb', crumbs: nil
+
+= content_for :body do
+  - 'black-bg'
+
 .row.align-items-center.justify-content-center.full-height
-  .col-md-6.align-self-center
+  .col-md-5.align-self-center
+    .sr-only
       %h2= t('.resend_unlock_instructions')
-    = form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f|
+      %p= t('.help')
+
+    = form_for(resource,
+      as: resource_name,
+      url: unlock_path(resource_name),
+      html: { method: :post }) do |f|
       = render 'devise/shared/error_messages', resource: resource
       .form-group
-        = f.label :email
+        = f.label :email, class: 'sr-only'
         = f.email_field :email, autofocus: true, autocomplete: 'email',
-          class: 'form-control'
+          class: 'form-control',
+          placeholder: t('activerecord.attributes.usuarie.email')
       .actions
         = f.submit t('.resend_unlock_instructions'),
-          class: 'btn btn-lg btn-primary btn-block'
+          class: 'btn btn-lg btn-block'
     = render 'devise/shared/links'

app/views/layouts/_breadcrumb.haml

@@ -3,23 +3,23 @@
     = inline_svg 'sutty.svg', class: 'black', aria: true,
       title: t('svg.sutty.title'), desc: t('svg.sutty.desc')
 
+  - if crumbs
     %nav{ aria: { label: t('.title') }, role: 'navigation' }
       %ol.breadcrumb
         %li.breadcrumb-item
           = link_to edit_usuarie_registration_path,
-          data: { toggle: 'tooltip' }, title: t('help.usuarie.edit') do
+            data: { toggle: 'tooltip' },
+            title: t('help.usuarie.edit') do
             = current_usuarie.email
 
-      - if @site
-        - if @site.persisted? && (help = @site.config.dig('help'))
-          %li.breadcrumb-item= link_to t('.help'), help, target: '_blank'
-
         - crumbs.compact.each do |crumb|
           - if crumb == crumbs.last
-          %li.breadcrumb-item.active{ 'aria-current': 'page' }= crumb
+            %li.breadcrumb-item.active{ aria: { current: 'page' } }
+              = crumb
           - else
             %li.breadcrumb-item= crumb
 
+  - if current_usuarie
     %ul.navbar-nav
       %li.nav-item
         = link_to t('.mutual_aid'), mutual_aid_url(local_channel)

app/views/layouts/_flash.haml

@@ -1,7 +1,3 @@
 - flash.each do |type, message|
-  .alert.alert-dismissible.fade.show{role: 'alert', class: "alert-#{type.to_s}"}
+  .alert{ role: 'alert', class: "alert-#{type}" }
     = message
-    %button.close{type: 'button',
-      data: { dismiss: 'alert' },
-      'aria-label': t('help.close') }
-      %span{'aria-hidden': true} ×

app/views/layouts/application.html.haml

@@ -13,13 +13,6 @@
     = javascript_include_tag 'application',
       'data-turbolinks-track': 'reload'
 
-    -# TODO: Reimplementar get_url_from_site
-
-  - style = "background-image: url(#{@site.try(:cover)})"
-  -# haml-lint:disable InlineStyles
-  %body{ class: @has_cover ? 'background-cover' : '',
-    style: @has_cover ? style : '' }
-
+  %body{ class: yield(:body) }
     .container-fluid#sutty
       = yield
-  -# haml-lint:enable InlineStyles

config/initializers/devise.rb

@@ -220,7 +220,7 @@ Devise.setup do |config|
   # ==> Configuration for :rememberable
   # The time the user will be remembered without asking for credentials
   # again.
-  # config.remember_for = 2.weeks
+  config.remember_for = 2.weeks
 
   # Invalidates all the remember me tokens when the user signs out.
   config.expire_all_remember_me_on_sign_out = true

config/locales/devise.views.es.yml

@@ -84,10 +84,10 @@ es:
         new_password: Nueva contraseña
       new:
         forgot_your_password: "¿Has olvidado tu contraseña?"
-        send_me_reset_password_instructions: Envíame las instrucciones para resetear mi contraseña
-      no_token: No puedes acceder a esta página si no es a través de un enlace para resetear tu contraseña. Si has llegado hasta aquí desde el email para resetear tu contraseña, por favor asegúrate de que la URL introducida esté completa.
-      send_instructions: Recibirás un correo con instrucciones sobre cómo resetear tu contraseña en unos pocos minutos.
-      send_paranoid_instructions: Si tu correo existe en nuestra base de datos, recibirás un correo con instrucciones sobre cómo resetear tu contraseña en tu bandeja de entrada.
+        send_me_reset_password_instructions: Recuperar contraseña
+      no_token: No puedes acceder a esta página si no es a través de un enlace para recuperar tu contraseña. Si has llegado hasta aquí desde el email para recuperar tu contraseña, por favor asegúrate de que la URL introducida esté completa.
+      send_instructions: Recibirás un correo con instrucciones sobre cómo recuperar tu contraseña en unos pocos minutos.
+      send_paranoid_instructions: Si tu correo existe en nuestra base de datos, recibirás un correo con instrucciones sobre cómo recuperar tu contraseña en tu bandeja de entrada.
       updated: Se ha cambiado tu contraseña. Ya iniciaste sesión.
       updated_not_active: Tu contraseña fue cambiada.
     registrations:
@@ -98,7 +98,7 @@ es:
         cancel_my_account: Eliminar mi cuenta
         currently_waiting_confirmation_for_email: 'Actualmente esperando la confirmacion de: %{email} '
         leave_blank_if_you_don_t_want_to_change_it: Deja este campo vacío si no deseas cambiarla.
-        title: Editar mi cuenta
+        title: Editar mi perfil
         update: Actualizar mi perfil
         we_need_your_current_password_to_confirm_your_changes: Necesitamos tu contraseña actual para confirmar los cambios.
       new:

config/locales/en.yml

@@ -1,4 +1,10 @@
 en:
+  login:
+    email: E-mail address
+    password: Password
+    remember_me: 'Keeps session open for %{remember_for}'
+  actions:
+    sr-help: "After this form you'll find links to recover your account and other actions."
   _true: Yes
   _false: No
   dir: ltr

config/locales/es.yml

@@ -2,7 +2,9 @@ es:
   login:
     email: Correo electrónico
     password: Contraseña
-    remember_me: Recordarme
+    remember_me: 'Mantiene la sesión abierta por %{remember_for}'
+  actions:
+    sr-help: 'Después del formulario encontrarás vínculos para recuperar tu cuenta, entre otras acciones.'
   _true: Sí
   _false: No
   dir: ltr
@@ -66,6 +68,7 @@ es:
         password_confirmation: 'Confirmación de contraseña'
         current_password: 'Contraseña actual'
         lang: Idioma principal
+        remember_me: Recordarme
       site:
         name: 'Nombre'
         title: 'Título'
@@ -76,14 +79,6 @@ es:
           attributes:
             deploys:
               deploy_local_presence: '¡Necesitamos poder generar el sitio!'
-        invitadx:
-          attributes:
-            email:
-              taken: 'Esa cuenta ya está tomada, por favor elige otra.'
-            password_confirmation:
-              confirmation: Las contraseñas no coinciden
-            acepta_politicas_de_privacidad:
-              no_acepta_politicas_de_privacidad: "Por favor lee y acepta la política de privacidad"
   errors:
     argument_error: 'El argumento `%{argument}` debe ser una instancia de %{class}'
     unknown_locale: 'El idioma %{locale} es desconocido'