UX: Improve second factor UI (#9526)

This will make a few minor improvements to the second factor user interface. Highlights include:

- Using the site's title to prefix the backup code filename. If non-ascii characters are detected, then prefix "discourse" instead.
- Add icons and change the text on some of the buttons for better clarity and consistency
- Add an education link to the security key modal

test/javascripts/lib/utilities-test.js

@@ -9,6 +9,8 @@ import {
   setDefaultHomepage,
   caretRowCol,
   setCaretPosition,
+  toAsciiPrintable,
+  slugify,
   fillMissingDates,
   inCodeBlock
 } from "discourse/lib/utilities";
@@ -175,6 +177,49 @@ QUnit.test("caretRowCol", assert => {
   document.body.removeChild(textarea);
 });
 
+QUnit.test("toAsciiPrintable", assert => {
+  const accentedString = "Créme_Brûlée!";
+  const unicodeString = "談話";
+
+  assert.equal(
+    toAsciiPrintable(accentedString, "discourse"),
+    "Creme_Brulee!",
+    "it replaces accented characters with the appropriate ASCII equivalent"
+  );
+
+  assert.equal(
+    toAsciiPrintable(unicodeString, "discourse"),
+    "discourse",
+    "it uses the fallback string when unable to convert"
+  );
+
+  assert.strictEqual(
+    typeof toAsciiPrintable(unicodeString),
+    "undefined",
+    "it returns undefined when unable to convert and no fallback is provided"
+  );
+});
+
+QUnit.test("slugify", assert => {
+  const asciiString = "--- 0__( Some-cool Discourse Site! )__0 --- ";
+  const accentedString = "Créme_Brûlée!";
+  const unicodeString = "談話";
+
+  assert.equal(
+    slugify(asciiString),
+    "0-some-cool-discourse-site-0",
+    "it properly slugifies an ASCII string"
+  );
+
+  assert.equal(
+    slugify(accentedString),
+    "crme-brle",
+    "it removes accented characters"
+  );
+
+  assert.equal(slugify(unicodeString), "", "it removes unicode characters");
+});
+
 QUnit.test("fillMissingDates", assert => {
   const startDate = "2017-11-12"; // YYYY-MM-DD
   const endDate = "2017-12-12"; // YYYY-MM-DD