Allow sharing of badges through the certificate web view.

lms/djangoapps/certificates/models.py

@@ -597,6 +597,13 @@ class BadgeAssertion(models.Model):
         """
         return self.data['image']
 
+    @property
+    def assertion_url(self):
+        """
+        Get the public URL for the assertion.
+        """
+        return self.data['json']['id']
+
     class Meta(object):
         """
         Meta information for Django's construction of the model.

lms/djangoapps/certificates/views.py

@@ -20,8 +20,8 @@ from certificates.models import (
     CertificateStatuses,
     GeneratedCertificate,
     ExampleCertificate,
-    CertificateHtmlViewConfiguration
-)
+    CertificateHtmlViewConfiguration,
+    BadgeAssertion)
 from certificates.queue import XQueueCertInterface
 from edxmako.shortcuts import render_to_response
 from xmodule.modulestore.django import modulestore
@@ -293,6 +293,11 @@ def _update_certificate_context(context, course, user, user_certificate):
     context['accomplishment_copy_course_org'] = course.org
     context['accomplishment_copy_course_name'] = course.display_name
     context['logo_alt'] = platform_name
+    try:
+        badge = BadgeAssertion.objects.get(user=user, course_id=course.location.course_key)
+    except BadgeAssertion.DoesNotExist:
+        badge = None
+    context['badge'] = badge
 
     # Override the defaults with any mode-specific static values
     context['certificate_id_number'] = user_certificate.verify_uuid

lms/static/certificates/sass/_components.scss

@@ -58,7 +58,6 @@
     @extend %depth-card;
 }
 
-
 // ------------------------------
 // #IMAGES
 // ------------------------------
@@ -554,3 +553,71 @@
     }
 }
 
+// ------------------------------
+// #BADGES MODAL
+// ------------------------------
+.badges-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: z-index(front);
+    background-color: palette(grayscale, trans); /* dim the background */
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+
+    .badges-modal {
+        @extend %copy-large;
+        box-sizing: content-box;
+        position: fixed;
+        top: spacing-vertical(large);
+        right: 0;
+        left: 0;
+        z-index: z-index(very-front);
+        max-width: 50%;
+        margin-right: auto;
+        margin-left: auto;
+        border-top: rem(10) solid palette(primary, light);
+        background: palette(grayscale, white);
+        padding-right: spacing-horizontal(large);
+        padding-left: spacing-horizontal(large);
+        overflow-x: hidden;
+        color: palette(grayscale, dark);
+
+        .close {
+            position: absolute;
+            right: spacing-horizontal(mid-small);
+            top: spacing-vertical(small);
+            font-weight: font-weight(bold);
+            cursor: pointer;
+        }
+
+        .badges-steps {
+            display: table;
+        }
+
+        .image-container{
+            // Lines the image up with the content of the above list.
+            @include ltr {
+                @include padding-left(2em);
+            }
+            @include rtl {
+                @include padding-right(1em);
+                float: right;
+            }
+        }
+
+        .backpack-logo {
+            @include float(right);
+            @include margin-left(spacing-horizontal(small));
+        }
+    }
+}
+
+.modal-hr {
+    display: block;
+    border: none;
+    background-color: palette(grayscale, light);
+    height: rem(2);
+    width: 100%;
+}

lms/static/certificates/sass/_overrides.scss

@@ -10,10 +10,6 @@
 // ------------------------------
 // #TEMP
 // ------------------------------
-// temporarily hidden banner actions
-.action-share-mozillaopenbadges {
-    display: none !important;
-}
 
 // ------------------------------
 // #DEVELOPERS

lms/static/js/certificates/certificates.js

+$(function () {
+    'use strict';
+    $('.action-share-mozillaopenbadges').click(function (event) {
+        $('.badges-overlay').fadeIn();
+        event.preventDefault();
+    });
+    $('.badges-modal .close').click(function () {
+        $('.badges-overlay').fadeOut();
+    });
+});
\ No newline at end of file

lms/templates/certificates/_accomplishment-banner.html

@@ -8,11 +8,13 @@
             <div class="wrapper-copy-and-actions">
                 <p class="message-copy copy copy-base emphasized">${accomplishment_banner_congrats}</p>
                 <div class="message-actions">
+                %if badge:
                     <p class="sr-only">${_("Share on:")}</p>
                     <button class="action action-share-mozillaopenbadges btn btn-overlay btn-small">
                         <img class="icon icon-mozillaopenbadges" src="/static/certificates/images/ico-mozillaopenbadges.png" alt="Mozilla Open Badges Backpack">
                         ${_("Add to Mozilla Backpack")}
                     </button>
+                %endif
                     <p class="sr-only">Take this with you:</p>
                     <button class="action action-print btn btn-overlay btn-small" id="action-print-view">
                         <i class="icon fa fa-print" aria-hidden="true"></i>

lms/templates/certificates/_badges-modal.html

+<%namespace name='static' file='../static_content.html'/>
+<script src="${static.url('js/lms-base-vendor.js')}"></script>
+<script src="${static.url('js/certificates/certificates.js')}"></script>
+<div class="badges-overlay" style="display:none;">
+    <div class="badges-modal">
+        <div class="close"><i class="fa fa-close" alt="Close"><input type="button" class="sr-only" value="Close"/></i></div>
+        <h1 class="hd-1 emphasized">Share on Mozilla Backpack</h1>
+        <p class="explanation">
+            To share your certificate on Mozilla Backpack, you must first have a Backpack account.
+            Complete the following steps to add your certificate to Backpack.
+        </p>
+        <hr class="modal-hr"/>
+        <img class="backpack-logo" src="${static.url('certificates/images/backpack-logo.png')}">
+        <ol class="badges-steps">
+            <li class="step">Create a <a href="https://backpack.openbadges.org/" target="_blank">Mozilla Backpack</a> account, or log in to your existing account
+            </li>
+            <li class="step"><a href="${badge.image_url}" target="_blank">Download this image (right-click, save as)</a> and then <a href="https://backpack.openbadges.org/backpack/add" target="_blank">upload</a> it to your backpack.</li>
+        </ol>
+        <div class="image-container">
+            <img class="badges-backpack-example" src="${static.url('certificates/images/backpack-ui.png')}">
+        </div>
+    </div>
+</div>

lms/templates/certificates/accomplishment-base.html

@@ -39,5 +39,8 @@ course_mode_class = course_mode if course_mode else ''
     </div>
 
     <%include file="_assets-secondary.html" />
+    %if badge:
+        <%include file="_badges-modal.html" />
+    %endif
 </body>
 </html>