view release on metacpan or  search on metacpan

lib/CGI/Application/Plugin/Authentication/Display/Classic.pm  view on Meta::CPAN

}

sub _login_styles {
    my $self = shift;
    my $login_form  = $self->_cgiapp->authen->_config->{LOGIN_FORM} || {};
    my %colour = ();

    $colour{base}    = $login_form->{BASE_COLOUR} || '#445588';
    $colour{lighter} = $login_form->{LIGHTER_COLOUR} if $login_form->{LIGHTER_COLOUR};
    $colour{light}   = $login_form->{LIGHT_COLOUR} if $login_form->{LIGHT_COLOUR};
    $colour{dark}    = $login_form->{DARK_COLOUR} if $login_form->{DARK_COLOUR};
    $colour{darker}  = $login_form->{DARKER_COLOUR} if $login_form->{DARKER_COLOUR};
    $colour{grey}    = $login_form->{GREY_COLOUR} if $login_form->{GREY_COLOUR};
    
    my @undefined_colours =  grep { ! defined $colour{$_} || index($colour{$_}, '%') >= 0 } qw(lighter light dark darker);
    if (@undefined_colours) {
        eval { require Color::Calc };
        if ($@ && $login_form->{BASE_COLOUR}) {
            warn "Color::Calc is required when specifying a custom BASE_COLOUR, and leaving LIGHTER_COLOUR, LIGHT_COLOUR, DARK_COLOUR or DARKER_COLOUR blank or when providing percentage based colour";
        }
        if ($@) {
            $colour{base}    = '#445588';
            $colour{lighter} = '#d0d5e1';
            $colour{light}   = '#a2aac4';
            $colour{dark}    = '#303c5f';
            $colour{darker}  = '#1b2236';
            $colour{grey}    = '#565656';
        } else {
            $colour{lighter} = !$colour{lighter}
                                    ? Color::Calc::light_html($colour{base}, 0.75)
                             : $colour{lighter} =~ m#(\d{2})%#
                                    ? Color::Calc::light_html($colour{base}, $1 / 100)
                             : $colour{lighter};
            $colour{light}   = !$colour{light}
                                    ? Color::Calc::light_html($colour{base}, 0.5)
                             : $colour{light} =~ m#(\d{2})%#
                                    ? Color::Calc::light_html($colour{base}, $1 / 100)
                             : $colour{light};
            $colour{dark}    = !$colour{dark}
                                    ? Color::Calc::dark_html($colour{base}, 0.3)
                             : $colour{dark} =~ m#(\d{2})%#
                                    ? Color::Calc::dark_html($colour{base}, $1 / 100)
                             : $colour{dark};
            $colour{darker}  = !$colour{darker}
                                    ? Color::Calc::dark_html($colour{base}, 0.6)
                             : $colour{darker} =~ m#(\d{2})%#
                                    ? Color::Calc::dark_html($colour{base}, $1 / 100)
                             : $colour{darker};
            #$colour{grey}    ||= Color::Calc::bw_html($colour{base});
            if (!$colour{grey}) {
                $colour{grey} = Color::Calc::bw_html($colour{base});
            }
        }
    }
    $colour{grey} ||= '#565656';
    return <<END;
div.login {
  width: 25em;
  margin: auto;
  padding: 3px;
  font-weight: bold;
  border: 2px solid $colour{base};
  color: $colour{dark};
  font-family: sans-serif;
}
div.login div {
  margin: 0;
  padding: 0;
  border: none;
}
div.login .login_header {
  background: $colour{base};
  border-bottom: 1px solid $colour{darker};
  height: 1.5em;
  padding: 0.45em;
  text-align: left;
  color: #fff;
  font-size: 100%;
  font-weight: bold;
}
div.login .login_content {
  background: $colour{lighter};
  padding: 0.8em;
  border-top: 1px solid white;
  border-bottom: 1px solid $colour{grey};
  font-size: 80%;
}
div.login .login_footer {
  background: $colour{light};
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  text-align: left;
  padding: 0;
  margin: 0;
  min-height: 2.8em;
}
div.login fieldset {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
}
div.login label {
  clear: left;
  float: left;
  padding: 0.6em 1em 0.6em 0;
  width: 8em;
  text-align: right;
}
/* image courtesy of http://www.famfamfam.com/lab/icons/silk/  */
#authen_loginfield {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG5SURBVHjaYvz//z8DJQAggFiIVfh0twHn9w8KD9+/ZBT+9/cfExfvwwc87GxWAAFEtAFf3yl++/9XikHXL56BkYmJ4...
  background-color: #fff;
  border-top: solid 1px $colour{grey};
  border-left: solid 1px $colour{grey};
  border-bottom: solid 1px $colour{light};
  border-right: solid 1px $colour{light};
  padding: 2px 0 2px 18px;
  margin: 0.3em 0;
  width: 12em;
}
/* image courtesy of http://www.famfamfam.com/lab/icons/silk/  */
#authen_passwordfield {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKbSURBVHjaYvz//z8DPvBko+s0IJUJ5U6X8d+dhSwPEEAMIANw4ccbXKYB8f8/P+6BMYgNEkNWAxBAhDV/Pff/5+t5/...
  background-color: #fff;
  border-top: solid 1px $colour{grey};
  border-left: solid 1px $colour{grey};
  border-bottom: solid 1px $colour{light};
  border-right: solid 1px $colour{light};
  padding: 2px 0 2px 18px;
  margin: 0.3em 0;
  width: 12em;
}
#authen_rememberuserfield {
  clear: left;
  margin-left: 8em;
}
#authen_loginfield:focus {
  background-color: #ffc;
  color: #000;
}
#authen_passwordfield:focus {
  background-color: #ffc;
  color: #000;
}
div.login a {
  font-size: 80%;
  color: $colour{dark};
}
div.login div.buttons input {
  border-top: solid 2px $colour{light};
  border-left: solid 2px $colour{light};
  border-bottom: solid 2px $colour{grey};
  border-right: solid 2px $colour{grey};
  background-color: $colour{lighter};
  padding: .2em 1em ;
  font-size: 80%;
  font-weight: bold;
  color: $colour{dark};
}
div.login div.buttons {
  display: block;
  margin: 8px 4px;
  width: 100%;
}
#authen_loginbutton {
  float: right;
  margin-right: 1em;
}
#authen_registerlink {
  display: block;
}
#authen_forgotpasswordlink {
  display: block;
}
ul.message {
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
ul.message li {
  text-indent: -2em;
  padding: 0px;
  margin: 0px;
  font-style: italic;
}
ul.message li.warning {
  color: red;
}
END
}

=head1 NAME

CGI::Application::Plugin::Authentication::Display::Classic - login box that works out of the box

=head1 DESCRIPTION 

This module provides a login box that works out of the box but which can be 
configured to modify the styling.

=head1 METHODS

=head2 new 

The constructor must be passed the L<CGI::Application> object as the first
non-object argument.

=head2 login_box

This method will return the HTML for a login box that can be
embedded into another page.  This is the same login box that is used
in the default authen_login runmode that the plugin provides.

You can set this option to customize the login form that is created when a user
needs to be authenticated.  If you wish to replace the entire login form with a
completely custom version, then just set LOGIN_RUNMODE to point to your custom
runmode.