metacpan
diff --git a/‎root/base.tx‎
Lines changed: 2 additions & 3 deletions b/‎root/base.tx‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎root/static/js/cpan.js‎
Lines changed: 29 additions & 28 deletions b/‎root/static/js/cpan.js‎
Lines changed: 29 additions & 28 deletions
diff --git a/‎root/static/less/nav.less‎
Lines changed: 1 addition & 1 deletion b/‎root/static/less/nav.less‎
Lines changed: 1 addition & 1 deletion
@@ -3,6 +3,7 @@
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  <title>[% $title || 'Search the CPAN' %] - metacpan.org</title>
+ <link rel="preload" as="fetch" href="/account/login_status" crossorigin="anonymous" />
  %% if $rss {
  <link rel="alternate" type="application/rss+xml" title="[% $rss_title || 'RSS'; %]" href="[% $rss %]" />
  %% }
@@ -125,9 +126,7 @@
  <form action="/account/logout" method="POST" id="metacpan-logout"></form>
  <li class="dropdown logged_in" style="display: none;">
  <button type="button" class="dropdown-toggle" data-toggle="dropdown">
- <!--Add the below back in once we have a way to store a logged in user's gravatar-->
- <!--<img class="logged-in-gravatar" src="[% gravatar_image() %]">-->
- <i class="fa fa-user button-fa-icon" aria-hidden="true"></i>
+ <i class="fa fa-user button-fa-icon logged-in-icon" aria-hidden="true"></i>
  <i class="fas fa-chevron-down"></i>
  </button>
  <ul class="dropdown-menu">
 
@@ -484,27 +484,32 @@ function set_page_size(selector, storage_name) {
  });
 }
 
-function processUserData() {
-
- // Could do some fancy localStorage thing here
- // but as the user favs data is cached at fastly
- // not worth the effort yet
-
- // TODO: get this working to save hits and 403's
- // if(document.cookie.match('metacpan_secure')) {
- // getFavDataFromServer();
- // } else {
- // // Can't be logged in
- // $('.logged_out').css('display', 'inline');
- // }
-
- getFavDataFromServer();
+// poor man's RFC-6570 formatter
+function format_string(input_string, replacements) {
+ const output_string = input_string.replace(
+ /\{(\/?)(\w+)\}/g,
+ (x, slash, placeholder) =>
+ replacements.hasOwnProperty(placeholder) ?
+ slash + replacements[placeholder] : ''
+ );
+ return output_string;
 }
 
 function showUserData(user_data) {
  // User is logged in, so show it
  $('.logged_in').css('display', 'grid');
  $('.logged_placeholder').css('display', 'none');
+ if (user_data.avatar) {
+ const avatar = document.createElement('img');
+ avatar.classList.add('logged-in-avatar');
+
+ // could use srcset
+ avatar.src = format_string(user_data.avatar, {
+ size: Math.floor(35 * window.devicePixelRatio)
+ });
+ avatar.crossorigin = 'anonymous';
+ document.querySelector('.logged_in .logged-in-icon').replaceWith(avatar);
+ }
 
  // process users current favs
  $.each(user_data.faves, function(index, value) {
@@ -524,24 +529,20 @@ function showUserData(user_data) {
 
 }
 
-function getFavDataFromServer() {
- $.ajax({
- type: 'GET',
- url: '/account/login_status',
- success: function(databack) {
- if (databack.logged_in) {
- showUserData(databack);
+function processUserData() {
+ fetch('/account/login_status')
+ .then(res => res.json())
+ .then(data => {
+ if (data.logged_in) {
+ showUserData(data);
  } else {
  $('.logged_out').css('display', 'inline');
  }
  $('.logged_placeholder').css('display', 'none');
- },
- error: function() {
- // Can't be logged in, should be getting 403
+ })
+ .catch(() => {
  $('.logged_out').css('display', 'inline');
- $('.logged_placeholder').css('display', 'none');
- }
- });
+ });
  return true;
 }
 
 
@@ -108,7 +108,7 @@ nav {
  border: 0;
 
  .button-fa-icon,
- .logged-in-gravatar {
+ .logged-in-avatar {
  border: 1px solid @list-group-border;
  border-radius: 25px;
  cursor: pointer;