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"
+  );
+});