Merge pull request #1262 from opf/feature/multi_provider_login

Multi provider login forms

app/assets/stylesheets/content/_accounts.css.sass

@@ -0,0 +1,139 @@
+/*-- copyright
+ * OpenProject is a project management system.
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See doc/COPYRIGHT.rdoc for more details.  ++
+ */
+
+@import global/mixins
+@import content/forms
+
+#login-form
+  margin-left: auto
+  margin-right: auto
+  padding-top: 20px
+  // label width + label padding-right + input width + input padding-left + input border
+  width: 155px + 5px + $content_from_input_width + 10px + 2px
+
+  .button_highlight
+    // align with input fields
+    // label width + label padding-right
+    margin-left: 155px + 5px
+
+    height: 32px
+
+  .attribute_wrapper
+    @include prevent-float-collapse
+
+  label
+    // inline-block can't guarantee a specific width (possibly due to whitespace)
+    display: block
+    float: left
+
+  input
+    &[type=password], &[type=text]
+      // inline-block can't guarantee a specific width
+      display: block
+
+  .login-options-container
+    margin-bottom: 10px
+    .login-links
+      float: right
+      text-align: right
+      font-size: 12px
+
+// use id selectors to be specific enough to override general content and top-menu definitions
+#content .login-auth-providers, #top-menu #nav-login-content .login-auth-providers
+  width: 471px
+  margin-top: 25px
+
+  h3
+    border: none
+    margin-top: 20px
+    font-weight: normal
+    font-size: $global_font_size
+    text-decoration: none
+    text-align: center
+
+    position: relative
+    z-index: 1
+
+    // line behind title
+    // from http://codepen.io/ericrasch/pen/Irlpm
+    &:before
+      border-top: 2px solid $content_form_separator_color
+      content: ""
+      // this centers the line to the full width specified
+      margin: 0 auto
+      // positioning must be absolute here, and relative positioning
+      //  must be applied to the parent
+      position: absolute
+      top: 50%
+      left: 0
+      right: 0
+      bottom: 0
+      width: 95%
+      z-index: -1
+
+    // also line behind title
+    span
+      // to hide the lines from behind the text, you have to set the
+      // background color the same as the container
+      background: $content_form_bg_color
+      padding: 0 15px
+
+  .login-auth-provider-list
+    @include prevent-float-collapse
+
+  a.auth-provider
+    float: left
+    width: 97px
+    height: 40px
+    padding-left: 50px
+    margin-left: 10px
+    margin-top: 20px
+    background-image: url(image-path('auth_provider-developer.png'))
+    background-size: 40px 40px
+    background-repeat: no-repeat
+    font-weight: normal
+    color: $global_font_color
+
+    &:hover
+      text-decoration: none
+
+    .auth-provider-name
+      vertical-align: middle
+      height: 40px
+      display: table-cell
+      white-space: normal
+
+#top-menu #nav-login-content .login-auth-providers
+  h3
+    &:before
+      width: 100%
+    span
+      background: $header_drop_down_bg_color
+  .login-auth-provider-list
+    margin-top: -15px
+    margin-bottom: 10px

app/assets/stylesheets/content/_buttons.css.sass

@@ -1,6 +1,6 @@
 /*-- copyright
  * OpenProject is a project management system.
- * Copyright (C) 2012-2013 the OpenProject Foundation (OPF)
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License version 3.

app/assets/stylesheets/content/_forms.css.sass

@@ -1,6 +1,6 @@
 /*-- copyright
  * OpenProject is a project management system.
- * Copyright (C) 2012-2013 the OpenProject Foundation (OPF)
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License version 3.
@@ -66,7 +66,7 @@
   padding-right: 5px
   vertical-align: middle
 
-#login-form form, #work_package-form, #update #work_package-form
+%form-style
   padding: 30px 20px
   background-color: $content_form_bg_color
   display: block
@@ -85,6 +85,9 @@
       width: 100px
       margin-right: 200px
 
+    &.indented
+      margin-left: 160px
+
   select
     @include select-style
 
@@ -114,74 +117,13 @@
         vertical-align: middle
         width: 160px
 
-#login-form form
+// A general CSS class to be applied to forms using the above defined form style.
-  .button_highlight
+// We can't define this on form itself as this would break a lot of existing forms.
-    margin-right: 0
+//
-
+// Using this form class allows to easily override defaults defined here with a more
-#work_package-form
+// specific definition.
-  .attributes
+.form
-    margin-bottom: 30px
+  @extend %form-style
-    overflow: auto
-
-  #watchers_form
-    position: relative
-    padding-left: 160px
-    margin-bottom: 30px
-    font-size: 14px
-    line-height: 30px
-
-    .watcher_label
-      @include label-style
-      width: 152px
-      margin-left: -160px
-
-    .floating
-      float: none
-      display: inline-block
-
-  #attachments
-    padding-left: 0
-    padding-right: 0
-
-  .handle_attachments, #attachments
-    > label
-      @include label-style
-      height: 30px
-      display: block
-    margin-bottom: 30px
-
-    #attachments_fields
-      display: inline-block
-
-    .attachment_field
-      display: block
-      margin-bottom: 10px
-      height: 32px
-      > input
-        @include input-style
-        border: none
-        &:hover, &:focus
-          border: none
-      label
-        @include label-style
-        width: auto
-        height: 32px
-        input
-          margin-left: 50px
-    .add_another_file
-      padding-left: 10px
-
-  fieldset
-    margin-bottom: 20px
-    padding: 30px 20px
-
-  legend.change_properties
-    padding-right: 20px
-  #show_more_wp_properties
-    float: left
-    margin-left: 115px
-    margin-top: -48px
-    background-color: $content_form_bg_color
 
 hr.form_separator
   border: 0
@@ -189,9 +131,6 @@ hr.form_separator
   margin: 0 0 30px
   background: none
 
-#lost_password
-  margin-top: 20px
-
 .form-space
   padding-top: 10px
 

app/assets/stylesheets/content/_work_package_report.css.sass

@@ -1,34 +0,0 @@
-/*-- copyright
- * OpenProject is a project management system.
- * Copyright (C) 2012-2013 the OpenProject Foundation (OPF)
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License version 3.
- *
- * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
- * Copyright (C) 2006-2013 Jean-Philippe Lang
- * Copyright (C) 2010-2013 the ChiliProject Team
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; either version 2
- * of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * See doc/COPYRIGHT.rdoc for more details.  ++
- */
-
-div
-  .report-category-actions
-    margin-top: -28px
-    font-size: 17px // like h3
-    width: 100%
-    text-align: right

app/assets/stylesheets/content/_work_packages.css.sass

@@ -0,0 +1,102 @@
+/*-- copyright
+ * OpenProject is a project management system.
+ * Copyright (C) 2012-2014 the OpenProject Foundation (OPF)
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See doc/COPYRIGHT.rdoc for more details.  ++
+ */
+
+@import content/forms
+
+div
+  .report-category-actions
+    margin-top: -28px
+    font-size: 17px // like h3
+    width: 100%
+    text-align: right
+
+#work_package-form
+  @extend %form-style
+  .attributes
+    margin-bottom: 30px
+    overflow: auto
+
+  #watchers_form
+    position: relative
+    padding-left: 160px
+    margin-bottom: 30px
+    font-size: 14px
+    line-height: 30px
+
+    .watcher_label
+      @include label-style
+      width: 152px
+      margin-left: -160px
+
+    .floating
+      float: none
+      display: inline-block
+
+  #attachments
+    padding-left: 0
+    padding-right: 0
+
+  .handle_attachments, #attachments
+    > label
+      @include label-style
+      height: 30px
+      display: block
+    margin-bottom: 30px
+
+    #attachments_fields
+      display: inline-block
+
+    .attachment_field
+      display: block
+      margin-bottom: 10px
+      height: 32px
+      > input
+        @include input-style
+        border: none
+        &:hover, &:focus
+          border: none
+      label
+        @include label-style
+        width: auto
+        height: 32px
+        input
+          margin-left: 50px
+    .add_another_file
+      padding-left: 10px
+
+  fieldset
+    margin-bottom: 20px
+    padding: 30px 20px
+
+  legend.change_properties
+    padding-right: 20px
+  #show_more_wp_properties
+    float: left
+    margin-left: 115px
+    margin-top: -48px
+    background-color: $content_form_bg_color

app/assets/stylesheets/default.css.sass

@@ -39,6 +39,7 @@
 @import work_packages
 @import openproject_plugins
 @import layout/all
+@import content/accounts
 @import content/forms
 @import content/flash_messages
 @import content/calendar
@@ -49,7 +50,7 @@
 @import content/buttons
 @import content/boxes
 @import content/tabular
-@import content/work_package_report
+@import content/work_packages
 @import content/expandable_group_content
 @import content/control_colors
 @import content/tabular

app/assets/stylesheets/global/_mixins.sass

@@ -172,6 +172,14 @@ $button_gray_font_color: #222222
   ul
     margin-bottom: 20px
 
+// Make sure an element doesn't collapse due to floated elements inside
+@mixin prevent-float-collapse
+  &:after
+    content: " "
+    display: block
+    height: 0
+    clear: both
+
 @mixin text-shortener
   white-space: nowrap
   overflow: hidden

app/assets/stylesheets/layout/_top_menu.css.sass

@@ -156,12 +156,12 @@
     border: 0px solid #194E60
     border-top: 0
     line-height: 19px
-    padding: 10px
+    padding: 15px 10px 15px 15px
     @include header-fonts(#555555, 13px)
 
     input[type=text]
       height: 16px
-      width: 150px
+      width: 175px
       border: 1px solid #CCCCCC
       padding: 5px
       @include default-transition
@@ -169,22 +169,21 @@
         border: 1px solid #888888
     input[type=password]
       height: 16px
-      width: 150px
+      width: 175px
       border: 1px solid #CCCCCC
       padding: 5px
       @include default-transition
       &:hover
         border: 1px solid #888888
-    div a
+    input[type=submit]
+      height: 28px
+    a
       display: inline
       padding: 0
       font-family: $font_family_normal
       font-weight: normal
     table td
       padding: 3px
-  #optional_login_fields
-    white-space: nowrap
-    margin: 5px 0 0 3px
 
 #quick-search
   float: right

app/views/account/_auth_providers.html.erb

@@ -0,0 +1,21 @@
+<%
+# Remove this ugly hack when creating an authentication plugin.
+#
+# This hack is required as we don't have a way to list all active
+# Omniauth Providers without a patch.
+#
+# See
+# * https://www.openproject.org/work_packages/7192
+# * http://stackoverflow.com/questions/13112430/find-loaded-providers-for-omniauth
+auth_provider_html = call_hook :view_account_login_auth_provider
+%>
+<% if auth_provider_html.strip != '' %>
+  <div class="login-auth-providers">
+    <h3 class="login-auth-providers-title"><span>
+      <%= I18n.t('account.login_with_auth_provider')%>
+    </span></h3>
+    <div class="login-auth-provider-list">
+      <%= auth_provider_html %>
+    </div>
+  </div>
+<% end %>

app/views/account/_login.html.erb

@@ -43,24 +43,27 @@ See doc/COPYRIGHT.rdoc for more details.
                                    :id => 'password-pulldown' %></td>
         <td><input type="submit" name="login" value="<%=l(:button_login)%>" class="button_highlight" /></td>
       </tr>
-    </table>
+      <tr>
-    <div id = "optional_login_fields" style = "top = 10px; white-space:nowrap">
+        <td>
           <% if Setting.autologin? %>
             <label for="autologin"><%= check_box_tag 'autologin', 1, false %> <%= l(:label_stay_logged_in) %></label>
+          <% elsif Setting.self_registration? %>
+            <%# show here if autologin is disabled, otherwise below lost_password link %>
+            <%= link_to l(:label_register), { :controller => '/account', :action => 'register' } %>
           <% end %>
-
+        </td>
+        <td>
           <% if Setting.lost_password? %>
             <%= link_to l(:label_password_lost), {:controller => '/account', :action => 'lost_password'} %>
           <% end %>
-
+          <% if Setting.autologin? && Setting.self_registration? %>
-      <% if !User.current.logged? %>
+            <%# show here if autologin is enabled, otherwise below login field %>
-        <% if Setting.self_registration? %>
+            <%= '<br>'.html_safe if Setting.lost_password? %>
-          <%= "|" if Setting.lost_password? %>
             <%= link_to l(:label_register), { :controller => '/account', :action => 'register' } %>
           <% end %>
-        <br>
+        </td>
-        <%= call_hook :view_account_login_auth_provider %>
+      </tr>
-      <% end %>
+    </table>
-    </div>
+    <%= render :partial => 'account/auth_providers' %>
   <% end %>
 </div>

app/views/account/login.html.erb

@@ -31,42 +31,42 @@ See doc/COPYRIGHT.rdoc for more details.
 
 <% breadcrumb_paths(l(:label_login)) %>
 <%= call_hook :view_account_login_top %>
-<div id="login-form">
+<%= form_tag({:action=> "login"}, autocomplete: 'off', id: 'login-form', class: 'form') do %>
-  <%= form_tag({:action=> "login"}, :autocomplete => 'off') do %>
   <%= back_url_hidden_field_tag %>
-    <table>
+  <h1><%= I18n.t(:label_login) %></h1>
-      <tr>
-        <td class="label"><label for="username"><%= User.human_attribute_name :login %>:</label></td>
-        <td><%= text_field_tag 'username', nil %></td>
-      </tr>
-      <tr>
-        <td class="label"><label for="password"><%= User.human_attribute_name :password %>:</label></td>
-        <td><%= password_field_tag 'password', nil %></td>
-      </tr>
-      <tr>
-        <td></td>
-        <td>
-          <% if Setting.autologin? %>
-            <label for="autologin"><%= check_box_tag 'autologin', 1, false %> <%= l(:label_stay_logged_in) %></label>
-          <% end %>
-        </td>
-      </tr>
-      <tr>
-        <td>
-        </td>
-        <td align="right">
-          <input type="submit" name="login" value="<%=l(:button_login)%>" class="button_highlight" />
-        </td>
-      </tr>
-    </table>
-    <%= javascript_tag "Form.Element.focus('username');" %>
-  <% end %>
 
+  <hr class="form_separator">
+
+  <div class="attribute_wrapper">
+    <label for="username"><%= User.human_attribute_name :login %></label>
+    <%= text_field_tag 'username', nil %>
+  </div>
+
+  <div class="attribute_wrapper">
+    <label for="password"><%= User.human_attribute_name :password %></label>
+    <%= password_field_tag 'password', nil %>
+  </div>
+
+  <div class="login-options-container">
+    <div class="login-links">
       <% if Setting.lost_password? %>
-    <div id="lost_password">
           <%= link_to l(:label_password_lost), :controller => '/account', :action => 'lost_password' %>
+          <br>
+      <% end %>
+      <% if Setting.self_registration? %>
+        <%= link_to l(:label_register), { :controller => '/account', :action => 'register' } %>
+      <% end %>
+    </div>
+    <% if Setting.autologin? %>
+      <div class="attribute_wrapper indented">
+        <label for="autologin">
+          <%= check_box_tag 'autologin', 1, false %> <%= l(:label_stay_logged_in) %>
+        </label>
       </div>
     <% end %>
   </div>
-<%= call_hook :view_account_login_auth_provider %>
+  <input type="submit" name="login" value="<%=l(:button_login)%>" class="button_highlight" />
+  <%= render :partial => 'auth_providers' %>
+  <%= javascript_tag "Form.Element.focus('username');" %>
+<% end %>
 <%= call_hook :view_account_login_bottom %>

app/views/hooks/login/_auth_provider.html.erb

@@ -1,3 +1,5 @@
 <% unless Rails.env.production? %>
-  <%= link_to "Omniauth Developer", :controller => '/auth', :action => 'developer' %>
+  <a href="<%= url_for controller: '/auth', action: 'developer' %>" class="auth-provider auth-provider-developer">
+    <span class="auth-provider-name">Omniauth Developer</span>
+  </a>
 <% end %>

config/locales/de.yml

@@ -51,6 +51,7 @@ de:
     error_self_registration_disabled: >
       Auf diesem System ist die Nutzerregistierung deaktiviert. Bitte fragen Sie einen
       Administrator nach einem Nutzerkonto.
+    login_with_auth_provider: "oder melden Sie sich mit einem bestehenden Konto an"
 
   actionview_instancetag_blank_option: "Bitte auswählen"
 
@@ -806,7 +807,7 @@ de:
   label_overall_activity: "Aktivität aller Projekte anzeigen"
   label_overall_spent_time: "Aufgewendete Zeit aller Projekte anzeigen"
   label_overview: "Übersicht"
-  label_password_lost: "Kennwort vergessen"
+  label_password_lost: "Kennwort vergessen?"
   label_password_rule_lowercase: "Kleinbuchstaben"
   label_password_rule_numeric: "Ziffern"
   label_password_rule_special: "Sonderzeichen"
@@ -840,7 +841,7 @@ de:
   label_query_plural: "Benutzerdefinierte Berichte"
   label_query_menu_item: "Filter-Menüpunkt"
   label_read: "Lesen ..."
-  label_register: "Registrieren"
+  label_register: "Neues Konto erstellen"
   label_register_with_developer: "Als Entwickler anmelden"
   label_registered_on: "Angemeldet am"
   label_registration_activation_by_email: "Kontoaktivierung durch E-Mail"

config/locales/en.yml

@@ -51,6 +51,7 @@ en:
     error_self_registration_disabled: >
       User registration is disabled on this system. Please ask an administrator to create an
       account for you.
+    login_with_auth_provider: "or sign in with your existing account"
 
   actionview_instancetag_blank_option: "Please select"
 

features/support/login_steps.rb

@@ -32,8 +32,8 @@ module LoginSteps
     # visit '/logout' # uncomment me if needed
     visit '/login'
     within('#login-form') do
-      fill_in User.human_attribute_name(:login)+":", :with => login
+      fill_in User.human_attribute_name(:login), :with => login
-      fill_in 'Password:', :with => password
+      fill_in 'Password', :with => password
       click_button 'Login'
     end
   end