Merge "Add download link for recovery codes"

extension.json

@@ -102,8 +102,14 @@
 	},
 	"ResourceModules": {
 		"ext.oath.totp.showqrcode.styles": {
+			"class": "MediaWiki\\ResourceLoader\\CodexModule",
 			"styles": [
-				"totp/ext.oath.showqrcode.styles.css"
+				"totp/ext.oath.showqrcode.styles.less"
+			],
+			"codexStyleOnly": "true",
+			"codexComponents": [
+				"CdxButton",
+				"CdxIcon"
 			]
 		}
 	},

i18n/en.json

@@ -14,6 +14,7 @@
 	"oathauth-enable": "Enable two-factor authentication",
 	"oathauth-recoverycodes": "The following list is a list of one-time use recovery codes. These codes can only be used once, and are for emergency use when you don't have access to your device. Please write these down and keep them in a secure location. It is recommended that you mark each code as used when you have logged in using it. If you lose your device, these codes are the only way to rescue your account.\n\n'''These codes will never be shown again'''.",
 	"oathauth-recoverycodes-important": "This step is important! Do not skip this step!",
+	"oathauth-recoverycodes-download": "Download recovery codes",
 	"oathauth-disable": "Disable two-factor authentication",
 	"oathauth-validatedoath": "Validated two-factor credentials. Two-factor authentication will now be enforced.",
 	"oathauth-noscratchforvalidation": "You cannot use a recovery code to confirm two-factor authentication. Recovery codes are for backup and incidental use only. Please use a code from your two-factor authentication application (such as Google Authenticator).",

i18n/qqq.json

@@ -29,6 +29,7 @@
 	"oathauth-enable": "Page title on Special:OATH, when enabling OATH.\n\nSee [https://en.wikipedia.org/wiki/Two_factor_authentication two factor authentication]",
 	"oathauth-recoverycodes": "Plain text, found on Special:OATH while enabling OATH.",
 	"oathauth-recoverycodes-important": "Plain text, found on Special:OATH while enabling OATH.",
+	"oathauth-recoverycodes-download": "Plain text, text of the download link on Special:OATH while enabling OATH.",
 	"oathauth-disable": "Page title on Special:OATH while disabling OATH.\n\nSee [https://en.wikipedia.org/wiki/Two_factor_authentication two factor authentication]",
 	"oathauth-validatedoath": "Plain text found on Special:OATH after a token has been validated.\n\nSee [https://en.wikipedia.org/wiki/Two_factor_authentication two factor authentication]",
 	"oathauth-noscratchforvalidation": "Plain text found on Special:OATH if the user used the incorrect type of token while enabling OATH.\n\nSee [https://en.wikipedia.org/wiki/Two_factor_authentication two factor authentication]",

modules/totp/ext.oath.showqrcode.styles.css

@@ -1,9 +0,0 @@
-kbd {
-	font-family: monospace, monospace;
-	white-space: nowrap;
-	font-size: larger;
-}
-
-fieldset {
-	page-break-inside: avoid;
-}

modules/totp/ext.oath.showqrcode.styles.less

@@ -0,0 +1,18 @@
+@import "mediawiki.skin.variables.less";
+
+kbd {
+	font-family: monospace, monospace;
+	white-space: nowrap;
+	font-size: larger;
+}
+
+fieldset {
+	page-break-inside: avoid;
+}
+
+.cdx-button.mw-oathauth-recoverycodes-download {
+	margin-top: 1em;
+}
+.mw-oathauth-recoverycodes-download-icon {
+	.cdx-mixin-css-icon( @cdx-icon-download, @param-is-button-icon: true );
+}

src/HTMLForm/TOTPEnableForm.php

@@ -105,7 +105,8 @@ class TOTPEnableForm extends OATHAuthOOUIHTMLForm {
 				'default' =>
 					'<strong>' . $this->msg( 'oathauth-recoverycodes-important' )->escaped() . '</strong><br/>'
 					. $this->msg( 'oathauth-recoverycodes' )->parse()
-					. $this->createResourceList( $this->getScratchTokensForDisplay( $key ) ),
+					. $this->createResourceList( $this->getScratchTokensForDisplay( $key ) )
+					. $this->createDownloadLink( $this->getScratchTokensForDisplay( $key ) ),
 				'raw' => true,
 				'section' => 'step3',
 			],
@@ -134,6 +135,27 @@ class TOTPEnableForm extends OATHAuthOOUIHTMLForm {
 		return Html::rawElement( 'ul', [], $resourceList );
 	}
 
+	private function createDownloadLink( array $scratchTokensForDisplay ): string {
+		$icon = Html::element( 'span', [
+			'class' => [ 'mw-oathauth-recoverycodes-download-icon', 'cdx-button__icon' ],
+			'aria-hidden' => 'true',
+		] );
+		return Html::rawElement(
+			'a',
+			[
+				'href' => 'data:text/plain;charset=utf-8,'
+					// https://bugzilla.mozilla.org/show_bug.cgi?id=1895687
+					. rawurlencode( implode( PHP_EOL, $scratchTokensForDisplay ) ),
+				'download' => 'recovery-codes.txt',
+				'class' => [
+					'mw-oathauth-recoverycodes-download',
+					'cdx-button', 'cdx-button--fake-button', 'cdx-button--fake-button--enabled',
+				],
+			],
+			$icon . $this->msg( 'oathauth-recoverycodes-download' )->escaped()
+		);
+	}
+
 	/**
 	 * Retrieve the current secret for display purposes
 	 *