Adding basic claim code confirmation screen

controllers/backpack.js

@@ -13,22 +13,53 @@ module.exports = function (app) {
 
     if (!claimCode)
       return res.render('claim.html');
+    claimCode = claimCode.trim();
 
-    openbadger.claim({
-      code: claimCode.trim(),
+    openbadger.getBadgeFromCode({
+      code: claimCode,
       email: user.email
     }, function(err, data) {
       if (err) {
-        if (err.code === 404 && err.message === 'unknown claim code')
+        if (err.code === 404)
           req.flash('error', "That claim code appears to be invalid.");
         else if (err.code === 409)
-          req.flash('warn', "You already have that badge.");
+          req.flash('warn', "You have already used that claim code.");
         else
-          req.flash('error', "Unable to claim badge.");
+          req.flash('error', "A problem was encountered.");
+        return res.render('claim.html', {
+          code: claimCode
+        });
       }
       else {
-        req.flash('success', 'Badge claimed!');
+        return res.render('claim.html', {
+          code: claimCode,
+          badge: data.badge
+        });
       }
+    });
+
+  });
+
+  app.post('/claim', function (req, res, next) {
+    var claimCode = req.query.code;
+    var user = res.locals.user;
+
+    if (!user) {
+      return res.redirect('/login');
+    }
+
+    openbadger.claim({
+      code: claimCode,
+      email: user.email
+    }, function(err, data) {
+      console.log(err, data);
+      if (err)
+        if (err.code === 409)
+          req.flash('warn', "You already have that badge.");
+        else
+          req.flash('error', "There has been an error claiming your badge.");
+      else
+        req.flash('success', "You've claimed a new badge!");
       return res.redirect('/backpack');
     });
 

openbadger.js

@@ -62,6 +62,14 @@ function filterBadges(data, query) {
   return data;
 }
 
+function getJWTToken(email) {
+  var claims = {
+    prn: email,
+    exp: Date.now() + TOKEN_LIFETIME
+  };
+  return jwt.encode(claims, JWT_SECRET);
+}
+
 var openbadger = new Api(ENDPOINT, {
 
   getBadges: {
@@ -138,16 +146,24 @@ var openbadger = new Api(ENDPOINT, {
     });
   },
 
+  getBadgeFromCode: function getBadgeFromCode (query, callback) {
+    var email = query.email;
+    var code = query.code;
+    var params = {
+      auth: getJWTToken(email),
+      email: email,
+      code: code,
+    };
+    this.get('/unclaimed', { qs: params }, function(err, data) {
+      return callback(err, data);
+    });
+  },
+
   claim: function claim (query, callback) {
     var email = query.email;
     var code = query.code;
-    var claims = {
-      prn: email,
-      exp: Date.now() + TOKEN_LIFETIME
-    };
-    var token = jwt.encode(claims, JWT_SECRET);
     var params = {
-      auth: token,
+      auth: getJWTToken(email),
       email: email,
       code: code,
     };

views/claim.html

@@ -3,22 +3,44 @@
 {% set navItem = 'claim' %}
 
 {% block content %}
-	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  {% if badge %}
+    <div class="row">
+      <div class="span4">
+        <img src="{{ badge.image }}">
+      </div>
+      <div class="span8">
+        <h3>{{ badge.name }}</h3>
+        <form method="post" class="form-horizontal well">
+		      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+          <input type="hidden" id="input-code" name="code" value="{{ code }}">
+          <fieldset>
+            <div class="control-group">
+              <div class="controls">
+                <button type="submit" class="btn">Claim this badge</button>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+  {% else %}
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-	<h3>Already have a claim code?</h3>
-	<form method="get" class="form-horizontal well span6 offset3">
-		<fieldset>
-			<div class="control-group">
-				<label class="control-label" for="input-code">Claim Code</label>
-				<div class="controls">
-					<input type="text" id="input-code" name="code" placeholder="e.g. AE198QPM">
-				</div>
-			</div>
-			<div class="control-group">
-				<div class="controls">
-					<button type="submit" class="btn">Claim this badge</button>
-				</div>
-			</div>
-		</fieldset>
-	</form>
+    <h3>Already have a claim code?</h3>
+    <form method="get" class="form-horizontal well span6 offset3">
+      <fieldset>
+        <div class="control-group">
+          <label class="control-label" for="input-code">Claim Code</label>
+          <div class="controls">
+            <input type="text" id="input-code" name="code" placeholder="e.g. AE198QPM" value="{{ code }}">
+          </div>
+        </div>
+        <div class="control-group">
+          <div class="controls">
+            <button type="submit" class="btn">Claim this badge</button>
+          </div>
+        </div>
+      </fieldset>
+    </form>
+  {% endif %}
 {% endblock %}