Course mock UI redeem code dialog

app/styles/courses/mock1/courses.sass

@@ -9,3 +9,7 @@
   .button-row
     margin-top: 20px
     text-align: center
+
+  #redeemCodeModal .modal-dialog
+    background-color: white
+    max-width: 400px

app/templates/courses/mock1/courses.jade

@@ -4,11 +4,21 @@ block content
 
   //- DO NOT localize / i18n
   
-  div TODO: enter a code popup dialog
   div(style='border-bottom: 1px solid black')
     span *UNDER CONSTRUCTION, send feedback to
     a.spl(href='mailto:team@codecombat.com') team@codecombat.com
 
+  .modal#redeemCodeModal
+    .modal-dialog
+      .modal-header
+        button.close(data-dismiss='modal')
+          span ×
+        h3.modal-title Loading...
+      .modal-body
+        input.code-input(type='text', placeholder="Enter unlock code")
+      .modal-footer
+        button.btn.btn-success.btn-redeem-code Enroll
+
   h1.center Courses
   .container-fluid
     - var i = 0
@@ -34,7 +44,7 @@ mixin course-block(course, courseID)
         .container-fluid
           .row.button-row
             .col-md-4
-              button.btn.btn-warning.btn-have-code(data-course-id="#{courseID}") I have a code
+              button.btn.btn-warning.btn-have-code(data-toggle='modal', data-target="#redeemCodeModal", data-course-title="#{course.title}", data-course-id="#{courseID}") I have a code
             .col-md-4
               if course.unlocked
                 button.btn.btn-success.btn-enter(data-course-id="#{courseID}") Enter

app/views/courses/mock1/CoursesView.coffee

@@ -10,6 +10,7 @@ module.exports = class CoursesView extends RootView
     'click .btn-enter': 'onClickEnter'
     'click .btn-have-code': 'onClickHaveCode'
     'click .btn-more-info': 'onClickMoreInfo'
+    'click .btn-redeem-code': 'onClickRedeemCode'
 
   constructor: (options) ->
     super options
@@ -24,7 +25,7 @@ module.exports = class CoursesView extends RootView
     mockData = require 'views/courses/mock1/CoursesMockData'
     @courses = mockData.courses
     for course, i in @courses
-      if _.random(0, 3) is 0
+      if _.random(0, 2) > 0
         course.unlocked = true
       else
         break
@@ -36,15 +37,19 @@ module.exports = class CoursesView extends RootView
 
   onClickHaveCode: (e) ->
     courseID = $(e.target).data('course-id')
-    alert 'TODO: Popup for entering prepaid code to unlock this course'
-
-    # TODO: would just navigate instead of rendering unlock here in practice
-    @courses[courseID].unlocked = true
-    @render?()
-    # app.router.navigate "/courses/mock1/#{courseID}"
-    # window.location.reload()
+    courseTitle = $(e.target).data('course-title')
+    $('#redeemCodeModal').find('.modal-title').text(courseTitle)
+    $('#redeemCodeModal').find('.redeem-code-btn').data('course-id', courseID)
 
   onClickMoreInfo: (e) ->
     courseID = $(e.target).data('course-id')
     app.router.navigate "/courses/mock1/#{courseID}/info"
     window.location.reload()
+
+  onClickRedeemCode: (e) ->
+    $('#redeemCodeModal').modal('hide')
+    courseID = $(e.target).data('course-id')
+
+    # TODO: would just navigate instead of rendering unlock here in practice
+    @courses[courseID].unlocked = true
+    @render?()