FEATURE: Show "Recently used devices" in user preferences (#6335)

* FEATURE: Added MaxMindDb to resolve IP information.

* FEATURE: Added browser detection based on user agent.

* FEATURE: Added recently used devices in user preferences.

* DEV: Added acceptance test for recently used devices.

* UX: Do not show 'Show more' button if there aren't more tokens.

* DEV: Fix unit tests.

* DEV: Make changes after code review.

* Add more detailed unit tests.

* Improve logging messages.

* Minor coding style fixes.

* DEV: Use DropdownSelectBoxComponent and run Prettier.

* DEV: Fix unit tests.

test/javascripts/acceptance/preferences-test.js.es6

@@ -39,6 +39,10 @@ acceptance("User Preferences", {
         gravatar_avatar_template: "something"
       });
     });
+
+    server.get("/u/eviltrout/activity.json", () => {
+      return helper.response({});
+    });
   }
 });
 
@@ -248,3 +252,38 @@ QUnit.test("visit my preferences", async assert => {
   );
   assert.ok(exists(".user-preferences"), "it shows the preferences");
 });
+
+QUnit.test("recently connected devices", async assert => {
+  await visit("/u/eviltrout/preferences");
+
+  assert.equal(
+    find(".pref-auth-tokens > a:first")
+      .text()
+      .trim(),
+    I18n.t("user.auth_tokens.show_all", { count: 3 }),
+    "it should display two tokens"
+  );
+  assert.ok(
+    find(".pref-auth-tokens .auth-token").length === 2,
+    "it should display two tokens"
+  );
+
+  await click(".pref-auth-tokens > a:first");
+
+  assert.ok(
+    find(".pref-auth-tokens .auth-token").length === 3,
+    "it should display three tokens"
+  );
+
+  await click(".auth-token-dropdown:first button");
+  await click("li[data-value='notYou']");
+
+  assert.ok(find(".d-modal:visible").length === 1, "modal should appear");
+
+  await click(".modal-footer .btn-primary");
+
+  assert.ok(
+    find(".pref-password.highlighted").length === 1,
+    "it should highlight password preferences"
+  );
+});

test/javascripts/fixtures/user_fixtures.js.es6

@@ -236,7 +236,45 @@ export default {
         badge_grouping_id: 8,
         system: false,
         badge_type_id: 3
-      }
+      },
+      user_auth_tokens: [
+        {
+          id: 2,
+          client_ip: "188.192.99.49",
+          location: "Augsburg, Bavaria, Germany",
+          browser: "Google Chrome",
+          device: "Linux Computer",
+          os: "Linux",
+          icon: "linux",
+          created_at: "2018-09-08T21:22:56.225Z",
+          seen_at: "2018-09-08T21:22:56.512Z",
+          is_active: false
+        },
+        {
+          id: 3,
+          client_ip: "188.120.223.89",
+          location: "České Budějovice, České Budějovice District, Czechia",
+          browser: "Google Chrome",
+          device: "Linux Computer",
+          os: "Linux",
+          icon: "linux",
+          created_at: "2018-09-08T21:33:41.616Z",
+          seen_at: "2018-09-08T21:33:42.209Z",
+          is_active: true
+        },
+        {
+          id: 6,
+          client_ip: "188.233.223.89",
+          location: "Tula, Tul'skaya Oblast, Russia",
+          browser: "Internet Explorer",
+          device: "Windows Computer",
+          os: "Windows",
+          icon: "windows",
+          created_at: "2018-09-07T21:44:41.616Z",
+          seen_at: "2018-09-08T21:44:42.209Z",
+          is_active: false
+        }
+      ]
     }
   },
   "/user_actions.json": {