Merge pull request #121 from AyuntamientoMadrid/user

styles user account

app/assets/stylesheets/debates.scss

@@ -15,6 +15,7 @@
 //   08.2. Sign Up
 // 09. Forms
 // 10. Alerts
+// 11. User account
 //
 
 // 01. Variables
@@ -846,3 +847,62 @@ form {
     color: $alert-color;
   }
 }
+
+
+// 11. User account
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.account {
+  background: white;
+  min-height: $line-height*23;
+  padding-top: $line-height;
+
+
+  input[type="checkbox"], .checkbox {
+    margin-top: -(rem-calc(12));
+  }
+
+  .back, .icon-angle-left {
+    @include back;
+  }
+
+  h1 {
+    clear: both;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin-bottom: $line-height;
+  }
+
+  .icon-comment-quotes {
+    color: $debates;
+    font-size: rem-calc(60);
+    line-height: $line-height;
+    opacity: .5;
+  }
+
+  h2 {
+    clear: both;
+    font-size: rem-calc(20);
+    font-weight: bold;
+    line-height: $line-height;
+    margin: 0;
+  }
+
+  .recommendations {
+    list-style-type: none;
+    margin-left: 0;
+    margin-top: $line-height;
+
+    li {
+      font-size: rem-calc(12);
+      margin: rem-calc(12) 0;
+
+      &:before {
+        color: $debates;
+        content: "l ";
+        font-family: "icons" !important;
+      }
+    }
+  }
+}

app/assets/stylesheets/variables.scss

@@ -26,7 +26,7 @@ $comments-info:     #A5B2B9;
 $comments-text:     #3F4549;
 
 $header-color:      #292B33;
-$link:              #2895F1;
+$link:              #2895F1;//#0077B9;
 $link-hover: 		#2178BF;
 
 $tags-bg:           #FAFAFA;
@@ -59,7 +59,7 @@ $success-bg:        #DFF0D8;
 $success-border:    #D6E9C6;
 $success-color:     #3C763D;
 
-$info-bg:	          #D9EDF7;
+$info-bg:	        #D9EDF7;
 $info-border:       #BCE8F1;
 $info-color:        #31708F;
 

app/controllers/account_controller.rb

@@ -7,8 +7,11 @@ class AccountController < ApplicationController
   end
 
   def update
-    flash[:notice] = t("flash.actions.save_changes.notice") if @account.update(account_params)
-    redirect_to account_path
+    if @account.update(account_params)
+      redirect_to account_path, notice: t("flash.actions.save_changes.notice")
+    else
+      render :show
+    end
   end
 
   private

app/views/account/show.html.erb

@@ -1,32 +1,62 @@
-<h1><%= t("account.show.title") %></h1>
+<div class="row account">
+  <div class="small-12 medium-9 column">
+    <h1><%= t("account.show.title") %></h1>
 
-<%= form_for @account, as: :account, url: account_path do |f| %>
+    <%= form_for @account, as: :account, url: account_path do |f| %>
 
-  <%= f.label :first_name, t("account.show.first_name_label") %>
-  <%= f.text_field :first_name %>
-  <%= f.label :last_name, t("account.show.last_name_label") %>
-  <%= f.text_field :last_name %>
+      <% if @account.errors.any? %>
+        <div id="error_explanation" class="alert-box alert radius">
+          <p><strong><%= pluralize(@account.errors.count, t("debates.form.error"), t("debates.form.errors")) %> <%= t("debates.form.not_saved") %></strong></p>
+          <ul>
+              <% @account.errors.full_messages.each do |message| %>
+                  <li><%= message %></li>
+              <% end %>
+          </ul>
+        </div>
+      <% end %>
 
-  <div>
-  <%= f.check_box :use_nickname %>
-  <%= t("account.show.use_nickname_label") %>
+      <div class="row">
+        <div class="small-12 medium-6 column">
+          <%= f.label :first_name, t("account.show.first_name_label") %>
+          <%= f.text_field :first_name, placeholder: t("account.show.first_name_label") %>
+        </div>
+
+        <div class="small-12 medium-6 column">
+          <%= f.label :last_name, t("account.show.last_name_label") %>
+          <%= f.text_field :last_name, placeholder:  t("account.show.last_name_label") %>
+        </div>
+
+        <div class="small-12 medium-6 column">
+          <%= f.label :nickname, t("account.show.nickname_label") %>
+          <%= f.text_field :nickname, placeholder: t("account.show.nickname_label") %>
+          <%= f.label :use_nickname do %>
+            <%= f.check_box :use_nickname %>
+            <span class="checkbox"><%= t("account.show.use_nickname_label") %></span>
+          <% end %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.label :email_on_debate_comment do %>
+            <%= f.check_box :email_on_debate_comment %>
+            <span class="checkbox"><%= t("account.show.email_on_debate_comment_label") %></span>
+          <% end %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.label :email_on_comment_reply do %>
+            <%= f.check_box :email_on_comment_reply %>
+            <span class="checkbox"><%= t("account.show.email_on_comment_reply_label") %></span>
+          <% end %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.submit t("account.show.save_changes_submit"), class: "button radius" %>
+        </div>
+      </div>
+    <% end %>
   </div>
 
-  <%= f.label :nickname, t("account.show.nickname_label") %>
-  <%= f.text_field :nickname %>
-
-  <div>
-    <%= f.check_box :email_on_debate_comment %>
-    <%= f.label :email_on_debate_comment, t("account.show.email_on_debate_comment_label") %>
+  <div class="small-12 medium-3 column text-center">
+    <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: 'button radius small secondary' %>
   </div>
-
-  <div>
-    <%= f.check_box :email_on_comment_reply %>
-    <%= f.label :email_on_comment_reply, t("account.show.email_on_comment_reply_label") %>
-  </div>
-
-  <%= f.submit t("account.show.save_changes_submit"), class: "button radius" %>
-<% end %>
-
-<%= link_to t("account.show.change_credentials_link"), edit_user_registration_path %>
-
+</div>

app/views/devise/registrations/edit.html.erb

@@ -1,39 +1,45 @@
-<h2><%= t("devise_views.registrations.edit.edit") %> <%= resource_name.to_s.humanize %></h2>
+<div class="row">
+  <div class="account small-12 medium-9 column small-centered">
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= devise_error_messages! %>
+    <i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.registrations.edit.back_link"), :back, class: "left back" %>
 
-  <div class="field">
-    <%= f.label :email, t("devise_views.registrations.edit.email_label") %><br />
-    <%= f.email_field :email, autofocus: true %>
+    <h1><%= t("devise_views.registrations.edit.edit") %> <%= resource_name.to_s.humanize %></h1>
+
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+      <%= devise_error_messages! %>
+      <div class="row">
+        <div class="small-12 column">
+          <%= f.label :email, t("devise_views.registrations.edit.email_label") %>
+          <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.registrations.edit.email_label") %>
+        </div>
+
+        <div class="small-12 column">
+          <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+            <div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
+          <% end %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.label :password, t("devise_views.registrations.edit.password_label") %>
+          <span class="note"><%= t("devise_views.registrations.edit.leave_blank") %></span>
+          <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_label") %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %>
+          <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_confirmation_label") %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %>
+          <span class="note"><%= t("devise_views.registrations.edit.need_current") %></span>
+          <%= f.password_field :current_password, autocomplete: "off", placeholder:  t("devise_views.registrations.edit.current_password_label") %>
+        </div>
+
+        <div class="small-12 column">
+          <%= f.submit t("devise_views.registrations.edit.update_submit"), class: "button radius" %>
+        </div>
+      </div>
+    <% end %>
   </div>
-
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password, t("devise_views.registrations.edit.password_label") %> <i><%= t("devise_views.registrations.edit.leave_blank") %></i><br />
-    <%= f.password_field :password, autocomplete: "off" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "off" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %> <i><%= t("devise_views.registrations.edit.need_current") %></i><br />
-    <%= f.password_field :current_password, autocomplete: "off" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit t("devise_views.registrations.edit.update_submit") %>
-  </div>
-<% end %>
-
-<h3><%= t("devise_views.registrations.edit.cancel_title") %></h3>
-
-<p><%= t("devise_views.registrations.edit.cancel_text") %> <%= button_to t("devise_views.registrations.edit.cancel_link"), registration_path(resource_name), data: { confirm: t("devise_views.registrations.edit.cancel_confirm") }, method: :delete %></p>
-
-<%= link_to t("devise_views.registrations.edit.back_link"), :back %>
+</div>

config/locales/devise_views.en.yml

@@ -41,16 +41,12 @@ en:
         edit: "Edit"
         email_label: "Email"
         waiting_for: "Currently waiting confirmation for:"
-        leave_blank: "(leave blank if you don't want to change it)"
+        leave_blank: "Leave blank if you don't want to change it"
         password_label: "New password"
         password_confirmation_label: "Confirm new password"
         current_password_label: "Current password"
-        need_current: "(we need your current password to confirm your changes)"
+        need_current: "We need your current password to confirm your changes"
         update_submit: "Update"
-        cancel_title: "Cancel my account"
-        cancel_text: "Unhappy?"
-        cancel_link: "Cancel my account"
-        cancel_confirm: "Are you sure?"
         back_link: "Back"
       new:
         title: "Sign up"

config/locales/devise_views.es.yml

@@ -41,16 +41,12 @@ es:
         edit: "Editar"
         email_label: "Email"
         waiting_for: "Esperando confirmación de:"
-        leave_blank: "(dejar en blanco si no deseas cambiarla)"
+        leave_blank: "Dejar en blanco si no deseas cambiarla"
         password_label: "Contraseña nueva"
         password_confirmation_label: "Confirmar contraseña nueva"
         current_password_label: "Contraseña actual"
-        need_current: "(necesitamos tu contraseña actual para confirmar los cambios)"
+        need_current: "Necesitamos tu contraseña actual para confirmar los cambios"
         update_submit: "Actualizar"
-        cancel_title: "Cancelar cuenta"
-        cancel_text: "¿Deseas borrar tu cuenta?"
-        cancel_link: "Cancelar mi cuenta"
-        cancel_confirm: "¿Seguro?"
         back_link: "Atrás"
       new:
         title: "Registrarse"

config/locales/es.yml

@@ -63,9 +63,9 @@ es:
     show:
       title: "Mi cuenta"
       save_changes_submit: "Guardar cambios"
+      change_credentials_link: "Cambiar mis credenciales"
       email_on_debate_comment_label: "Recibir un email cuando alguien commenta en mis debates"
       email_on_comment_reply_label: "Recibir un email cuando alguien contesta a mis comentarios"
-      change_credentials_link: "Cambiar mi contraseña"
       first_name_label: "Nombre"
       last_name_label: "Apellidos"
       use_nickname_label: "Usar pseudónimo"

spec/features/account_spec.rb

@@ -15,6 +15,20 @@ feature 'Account' do
     expect(page).to have_selector("input[value='Colau']")
   end
 
+  scenario "Failed Edit" do
+    login_as(@user)
+    visit account_path
+
+    fill_in 'account_first_name', with: ''
+    fill_in 'account_last_name', with: ''
+    fill_in 'account_nickname', with: ''
+    click_button 'Save changes'
+
+    expect(page).to have_content "2 errors prohibited this debate from being saved"
+    expect(page).to have_content "First name can't be blank"
+    expect(page).to have_content "First name can't be blank"
+  end
+
   scenario 'Edit' do
     login_as(@user)
     visit account_path