Attachment 15678 Details for Bug 9704 – [SIGNED-OFF] Bug 9704 : Adding persona login to the CCSR theme

[patch] [SIGNED-OFF] Bug 9704 : Adding persona login to the CCSR theme

SIGNED-OFF-Bug-9704--Adding-persona-login-to-the-C.patch (text/plain), 12.35 KB, created by Bernardo Gonzalez Kriegel on 2013-02-26 11:45:54 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Bernardo Gonzalez Kriegel

Created: 2013-02-26 11:45:54 UTC

Size: 12.35 KB

patch

obsolete

>From aa5ebaa627d6b0eec3ec86200c0b2539ffdac2ca Mon Sep 17 00:00:00 2001
>From: Chris Cormack <chris@bigballofwax.co.nz>
>Date: Mon, 25 Feb 2013 15:39:02 +1300
>Subject: [PATCH] [SIGNED-OFF] Bug 9704 : Adding persona login to the CCSR
> theme
>
>To test
>Enable the Persona login
>Enable the CCSR theme
>Login with a user that worked with the prog theme
>
>Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
>
>Comment: Works as described. Tested normal/persona log-in/out.
>No errors.
>---
> .../opac-tmpl/ccsr/en/css/persona-buttons.css      |  228 ++++++++++++++++++++
> .../opac-tmpl/ccsr/en/includes/doc-head-close.inc  |    4 +
> koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc  |    2 +-
> .../opac-tmpl/ccsr/en/includes/opac-bottom.inc     |   40 ++++
> 4 files changed, 273 insertions(+), 1 deletion(-)
> create mode 100644 koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css
>
>diff --git a/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css b/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css
>new file mode 100644
>index 0000000..d1acbb0
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/ccsr/en/css/persona-buttons.css
>@@ -0,0 +1,228 @@
>+/* Link body */
>+.persona-button{
>+  color: #fff;
>+  display: inline-block;
>+  font-size: 14px;
>+  font-family: Helvetica, Arial, sans-serif;
>+  font-weight: bold;
>+  line-height: 1.1;
>+  overflow: hidden;
>+  position: relative;
>+  text-decoration: none;
>+  text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);
>+
>+  background: #297dc3;
>+  background: -moz-linear-gradient(top, #43a6e2, #287cc2);
>+  background: -ms-linear-gradient(top, #43a6e2, #287cc2);
>+  background: -o-linear-gradient(top, #43a6e2, #287cc2);
>+  background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
>+  background: linear-gradient(top, #43a6e2, #287cc2);
>+
>+  -moz-border-radius:   3px;
>+  -ms-border-radius:     3px;
>+  -o-border-radius:     3px;
>+  -webkit-border-radius:   3px;
>+  border-radius:       3px;
>+
>+  -moz-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
>+  -ms-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
>+  -o-box-shadow:     0 1px 0 rgba(0,0,0,0.2);
>+  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
>+  box-shadow:     0 1px 0 rgba(0,0,0,0.2);
>+}
>+
>+.persona-button:hover{
>+  background: #21669f;
>+  background: -moz-linear-gradient(top, #3788b9, #21669f);
>+  background: -ms-linear-gradient(top, #3788b9, #21669f);
>+  background: -o-linear-gradient(top, #3788b9, #21669f);
>+  background: -webkit-linear-gradient(top, #3788b9, #21669f);
>+  background: linear-gradient(top, #3788b9, #21669f);
>+}
>+
>+.persona-button:active, .persona-button:focus{
>+  top: 1px;
>+  -moz-box-shadow:   none;
>+  -ms-box-shadow:   none;
>+  -o-box-shadow:     none;
>+  -webkit-box-shadow: none;
>+  box-shadow:     none;
>+}
>+
>+.persona-button span{
>+  display: inline-block;
>+  padding: 5px 10px 5px 40px;
>+}
>+
>+/* Icon */
>+.persona-button span:after{
>+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
>+  content: '';
>+  display: block;
>+  width: 31px;
>+
>+  position: absolute;
>+  bottom: 0;
>+  left: -3px;
>+  top: 0;
>+  z-index: 10;
>+}
>+
>+/*  Icon background */
>+.persona-button span:before{
>+  content: '';
>+  display: block;
>+  height: 100%;
>+  width: 20px;
>+
>+  position: absolute;
>+  bottom: 0;
>+  left: 0;
>+  top: 0;
>+  z-index: 1;
>+
>+  background: #42a9dd;
>+  background: -moz-linear-gradient(top, #50b8e8, #3095ce);
>+  background: -ms-linear-gradient(top, #50b8e8, #3095ce);
>+  background: -o-linear-gradient(top, #50b8e8, #3095ce);
>+  background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
>+  background: linear-gradient(top, #50b8e8, #3095ce);
>+
>+  -moz-border-radius:   3px 0 0 3px;
>+  -ms-border-radius:     3px 0 0 3px;
>+  -o-border-radius:     3px 0 0 3px;
>+  -webkit-border-radius:   3px 0 0 3px;
>+  border-radius:       3px 0 0 3px;
>+}
>+
>+/* Triangle */
>+.persona-button:before{
>+  background: #42a9dd;
>+  content: '';
>+  display: block;
>+  height: 26px;
>+  width: 26px;
>+
>+  position: absolute;
>+  left: 2px;
>+  top: 50%;
>+  margin-top: -13px;
>+  z-index: 0;
>+
>+  background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
>+  background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
>+  background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
>+  background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
>+  background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */
>+
>+  -moz-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
>+  -ms-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
>+  -o-box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
>+  -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
>+  box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
>+
>+  -moz-transform:   rotate(45deg);
>+  -ms-transform:     rotate(45deg);
>+  -o-transform:     rotate(45deg);
>+  -webkit-transform:   rotate(45deg);
>+  transform:       rotate(45deg);
>+}
>+
>+/* Inset shadow (required here because the icon background clips it when on the `a` element) */
>+.persona-button:after{
>+  content: '';
>+  display: block;
>+  height: 100%;
>+  width: 100%;
>+
>+  position: absolute;
>+  left: 0;
>+  top: 0;
>+  bottom: 0;
>+  right: 0;
>+  z-index: 10;
>+
>+  -moz-border-radius:   3px;
>+  -ms-border-radius:     3px;
>+  -o-border-radius:     3px;
>+  -webkit-border-radius:   3px;
>+  border-radius:       3px;
>+
>+  -moz-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
>+  -ms-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
>+  -o-box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
>+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
>+  box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
>+}
>+
>+/* ========================================================
>+ *    Dark button
>+ * ===================================================== */
>+.persona-button.dark{
>+  background: #3c3c3c;
>+  background: -moz-linear-gradient(top, #606060, #3c3c3c);
>+  background: -ms-linear-gradient(top, #606060, #3c3c3c);
>+  background: -o-linear-gradient(top, #606060, #3c3c3c);
>+  background: -webkit-linear-gradient(top, #606060, #3c3c3c);
>+  background: linear-gradient(top, #606060, #3c3c3c);
>+}
>+.persona-button.dark:hover{
>+  background: #2d2d2d;
>+  background: -moz-linear-gradient(top, #484848, #2d2d2d);
>+  background: -ms-linear-gradient(top, #484848, #2d2d2d);
>+  background: -o-linear-gradient(top, #484848, #2d2d2d);
>+  background: -webkit-linear-gradient(top, #484848, #2d2d2d);
>+  background: linear-gradient(top, #484848, #2d2d2d);
>+}
>+.persona-button.dark span:before{ /* Icon BG */
>+  background: #d34f2d;
>+  background: -moz-linear-gradient(top, #ebac45, #d34f2d);
>+  background: -ms-linear-gradient(top, #ebac45, #d34f2d);
>+  background: -o-linear-gradient(top, #ebac45, #d34f2d);
>+  background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
>+  background: linear-gradient(top, #ebac45, #d34f2d);
>+}
>+.persona-button.dark:before{ /* Triangle */
>+  background: #d34f2d;
>+  background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
>+  background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
>+  background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
>+  background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
>+  background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
>+}
>+
>+/* ========================================================
>+ *    Orange button
>+ * ===================================================== */
>+.persona-button.orange{
>+  background: #ee731a;
>+  background: -moz-linear-gradient(top, #ee731a, #d03116);
>+  background: -ms-linear-gradient(top, #ee731a, #d03116);
>+  background: -o-linear-gradient(top, #ee731a, #d03116);
>+  background: -webkit-linear-gradient(top, #ee731a, #d03116);
>+  background: linear-gradient(top, #ee731a, #d03116);
>+}
>+.persona-button.orange:hover{
>+  background: #cb6216;
>+  background: -moz-linear-gradient(top, #cb6216, #b12a13);
>+  background: -ms-linear-gradient(top, #cb6216, #b12a13);
>+  background: -o-linear-gradient(top, #cb6216, #b12a13);
>+  background: -webkit-linear-gradient(top, #cb6216, #b12a13);
>+  background: linear-gradient(top, #cb6216, #b12a13);
>+}
>+.persona-button.orange span:before{ /* Icon BG */
>+  background: #e84a21;
>+  background: -moz-linear-gradient(top, #f7ad27, #e84a21);
>+  background: -ms-linear-gradient(top, #f7ad27, #e84a21);
>+  background: -o-linear-gradient(top, #f7ad27, #e84a21);
>+  background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
>+  background: linear-gradient(top, #f7ad27, #e84a21);
>+}
>+.persona-button.orange:before{ /* Triangle */
>+  background: #e84a21;
>+  background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
>+  background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
>+  background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
>+  background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
>+  background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
>+}
>diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
>index b5255ad..f99eb63 100644
>--- a/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
>+++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/doc-head-close.inc
>@@ -26,6 +26,10 @@
> <link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="[% themelang %]/css/mobile.css" />
> [% IF ( OPACMobileUserCSS ) %]<style type="text/css" media="screen and (max-width:700px)">[% OPACMobileUserCSS %]</style>[% END %]
> [% IF ( OPACUserCSS ) %]<style type="text/css">[% OPACUserCSS %]</style>[% END %]
>+[% IF persona %]
>+ <link rel="stylesheet" type="text/css" href="[% themelang %]/css/persona-buttons.css" />
>+[% END %]
>+
> 
> <script type="text/javascript" src="[% yuipath %]/utilities/utilities.js"></script>
> <script type="text/javascript" src="[% yuipath %]/container/container-min.js"></script>
>diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
>index b1bfb29..1d8538e 100644
>--- a/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
>+++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/masthead.inc
>@@ -65,7 +65,7 @@
>                 [% IF ( ShowOpacRecentSearchLink ) %]
>                     <li><a href="/cgi-bin/koha/opac-search-history.pl" title="View your search history">Search history</a></li>
>                 [% END %]
>-                [% IF ( loggedinusername ) %]<li><a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1">Log Out</a></li>[% END %]
>+ [% IF ( loggedinusername ) %]<li>[% IF persona %]<a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1" onclick='navigator.id.logout();'>[% ELSE %]<a class="logout" id="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1">[% END %]Log Out</a></li>[% END %]
>         </ul>
>       [% END %]
>     </div>
>diff --git a/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc
>index b89e6ac..24d9398 100644
>--- a/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc
>+++ b/koha-tmpl/opac-tmpl/ccsr/en/includes/opac-bottom.inc
>@@ -87,5 +87,45 @@ $(function() {
> 
> 
> 
>+[% IF persona %]
>+<script src="https://login.persona.org/include.js"></script>
>+<script type="text/javascript" language="javascript">
>+
>+navigator.id.watch({
>+    loggedInUser: [% IF emailaddress && loggedinpersona %]'[% emailaddress %]'[% ELSE %]null[% END %],
>+    onlogin: function (assertion) {
>+        $.post('/cgi-bin/koha/svc/login',
>+        { assertion: assertion },
>+        function (data) {
>+            window.location = '/cgi-bin/koha/opac-user.pl';
>+        }
>+        )
>+        .fail(function() {
>+            var errstr = _("Could not login, perhaps your Persona email does not match your Koha one");
>+            alert(errstr);
>+        });
>+    },
>+    onlogout: function () {
>+        window.location = '/cgi-bin/koha/opac-main.pl?logout.x=1';
>+    }
>+});
>+
>+var signinLink = document.getElementById('browserid');
>+
>+if (signinLink) {
>+    signinLink.onclick = function(evt) {
>+        // Requests a signed identity assertion from the user.
>+        navigator.id.request({
>+            siteName: "[% LibraryName | html %]",
>+            returnTo: '/cgi-bin/koha/opac-user.pl',
>+            oncancel: function() { alert('user refuses to share identity.'); }
>+        });
>+    };
>+}
>+
>+</script>
>+[% END %]
>+
>+
> </body>
> </html>
>-- 
>1.7.9.5

Actions: View | Diff | Splinter Review

Attachments on bug 9704: 15647 | 15668 | 15678 | 16512