Merge pull request #1262 from opf/feature/multi_provider_login

Multi provider login forms
pull/1266/head
meeee 11 years ago
commit d19915e4b7
  1. BIN
      app/assets/images/auth_provider-developer.png
  2. 139
      app/assets/stylesheets/content/_accounts.css.sass
  3. 2
      app/assets/stylesheets/content/_buttons.css.sass
  4. 85
      app/assets/stylesheets/content/_forms.css.sass
  5. 34
      app/assets/stylesheets/content/_work_package_report.css.sass
  6. 102
      app/assets/stylesheets/content/_work_packages.css.sass
  7. 3
      app/assets/stylesheets/default.css.sass
  8. 8
      app/assets/stylesheets/global/_mixins.sass
  9. 13
      app/assets/stylesheets/layout/_top_menu.css.sass
  10. 21
      app/views/account/_auth_providers.html.erb
  11. 25
      app/views/account/_login.html.erb
  12. 62
      app/views/account/login.html.erb
  13. 4
      app/views/hooks/login/_auth_provider.html.erb
  14. 5
      config/locales/de.yml
  15. 1
      config/locales/en.yml
  16. 4
      features/support/login_steps.rb

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

@ -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

@ -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.

@ -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
.button_highlight
margin-right: 0
#work_package-form
.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
// A general CSS class to be applied to forms using the above defined form style.
// We can't define this on form itself as this would break a lot of existing forms.
//
// Using this form class allows to easily override defaults defined here with a more
// specific definition.
.form
@extend %form-style
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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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 %>

@ -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>
<div id = "optional_login_fields" style = "top = 10px; white-space:nowrap">
<tr>
<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 !User.current.logged? %>
<% if Setting.self_registration? %>
<%= "|" if Setting.lost_password? %>
<% if Setting.autologin? && Setting.self_registration? %>
<%# show here if autologin is enabled, otherwise below login field %>
<%= '<br>'.html_safe if Setting.lost_password? %>
<%= link_to l(:label_register), { :controller => '/account', :action => 'register' } %>
<% end %>
<br>
<%= call_hook :view_account_login_auth_provider %>
<% end %>
</div>
</td>
</tr>
</table>
<%= render :partial => 'account/auth_providers' %>
<% end %>
</div>

@ -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') do %>
<%= form_tag({:action=> "login"}, autocomplete: 'off', id: 'login-form', class: 'form') do %>
<%= back_url_hidden_field_tag %>
<table>
<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 %>
<h1><%= I18n.t(:label_login) %></h1>
<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 %>

@ -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 %>

@ -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"

@ -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"

@ -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 'Password:', :with => password
fill_in User.human_attribute_name(:login), :with => login
fill_in 'Password', :with => password
click_button 'Login'
end
end

Loading…
Cancel
Save