Show tokens in prominent modal

options/locale/locale_en-US.ini

@@ -22,6 +22,7 @@ enable_javascript = This website works better with JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Gitea
+copy_to_clipboard = Copy
 
 username = Username
 email = Email Address
@@ -30,7 +31,7 @@ access_token = Access Token
 re_type = Re-Type Password
 captcha = CAPTCHA
 twofa = Two-Factor Authentication
-twofa_scratch = Two-Factor Scratch Code
+twofa_scratch = Two-Factor Recovery Code
 passcode = Passcode
 
 u2f_insert_key = Insert your security key
@@ -81,6 +82,7 @@ add = Add
 add_all = Add All
 remove = Remove
 remove_all = Remove All
+ok = OK
 
 write = Write
 preview = Preview
@@ -273,11 +275,11 @@ reset_password_wrong_user = You are signed in as %s, but the account recovery li
 password_too_short = Password length cannot be less than %d characters.
 non_local_account = Non-local users can not update their password through the Gitea web interface.
 verify = Verify
-scratch_code = Scratch code
-use_scratch_code = Use a scratch code
-twofa_scratch_used = You have used your scratch code. You have been redirected to the two-factor settings page so you may remove your device enrollment or generate a new scratch code.
-twofa_passcode_incorrect = Your passcode is incorrect. If you misplaced your device, use your scratch code to sign in.
-twofa_scratch_token_incorrect = Your scratch code is incorrect.
+scratch_code = Recovery code
+use_scratch_code = Use a recovery code
+twofa_scratch_used = You have used your recovery code, which is now no longer valid. You have been redirected to the two-factor settings page and should generate a new recovery code.
+twofa_passcode_incorrect = Your passcode is incorrect. If you misplaced your device, use your recovery code to sign in.
+twofa_scratch_token_incorrect = Your recovery code is incorrect.
 login_userpass = Sign In
 login_openid = OpenID
 oauth_signup_tab = Register New Account
@@ -568,6 +570,7 @@ new_token_desc = Applications using a token have full access to your account.
 token_name = Token Name
 generate_token = Generate Token
 generate_token_success = Your new token has been generated. Copy it now as it will not be shown again.
+generate_token_success_short = Token Generated
 generate_token_name_duplicate = <strong>%s</strong> has been used as an application name already. Please use a new one.
 delete_token = Delete
 access_token_deletion = Delete Access Token
@@ -610,18 +613,19 @@ twofa_desc = Two-factor authentication enhances the security of your account.
 twofa_is_enrolled = Your account is currently <strong>enrolled</strong> in two-factor authentication.
 twofa_not_enrolled = Your account is not currently enrolled in two-factor authentication.
 twofa_disable = Disable Two-Factor Authentication
-twofa_scratch_token_regenerate = Regenerate Scratch Token
-twofa_scratch_token_regenerated = Your scratch token is now %s. Store it in a safe place.
+twofa_scratch_token_regenerate = Regenerate Recovery Token
+twofa_scratch_token_regenerated = Your new recovery token is %s. Store it in a safe place.
 twofa_enroll = Enroll into Two-Factor Authentication
 twofa_disable_note = You can disable two-factor authentication if needed.
 twofa_disable_desc = Disabling two-factor authentication will make your account less secure. Continue?
-regenerate_scratch_token_desc = If you misplaced your scratch token or have already used it to sign in you can reset it here.
+regenerate_scratch_token_desc = If you misplaced your recovery token or have already used it to sign in you can reset it here.
 twofa_disabled = Two-factor authentication has been disabled.
 scan_this_image = Scan this image with your authentication application:
 or_enter_secret = Or enter the secret: %s
 then_enter_passcode = And enter the passcode shown in the application:
 passcode_invalid = The passcode is incorrect. Try again.
-twofa_enrolled = Your account has been enrolled into two-factor authentication. Store your scratch token (%s) in a safe place as it is only shown once!
+twofa_enrolled = Two-Factor Authentication Enabled
+twofa_enrolled_info = Your account has been enrolled into two-factor authentication. The following recovery token can be used as fallback. Store it in a safe place, it is only shown once!
 
 u2f_desc = Security keys are hardware devices containing cryptographic keys. They can be used for two-factor authentication. Security keys must support the <a rel="noreferrer" href="https://fidoalliance.org/">FIDO U2F</a> standard.
 u2f_require_twofa = Your account must be enrolled in two-factor authentication to use security keys.

routers/user/setting/applications.go

@@ -60,10 +60,13 @@ func ApplicationsPost(ctx *context.Context, form auth.NewAccessTokenForm) {
 		return
 	}
 
-	ctx.Flash.Success(ctx.Tr("settings.generate_token_success"))
-	ctx.Flash.Info(t.Token)
+	// show alert in addition to modal for no-JS fallback
+	ctx.Flash.Success(ctx.Tr("settings.generate_token_success"), true)
+	ctx.Flash.Info(t.Token, true)
 
-	ctx.Redirect(setting.AppSubURL + "/user/settings/applications")
+	loadApplicationsData(ctx)
+	ctx.Data["Token"] = t.Token
+	ctx.HTML(200, tplSettingsApplications)
 }
 
 // DeleteApplication response for delete user access token

routers/user/setting/security_twofa.go

@@ -235,6 +235,10 @@ func EnrollTwoFactorPost(ctx *context.Context, form auth.TwoFactorAuthForm) {
 		return
 	}
 
-	ctx.Flash.Success(ctx.Tr("settings.twofa_enrolled", token))
-	ctx.Redirect(setting.AppSubURL + "/user/settings/security")
+	ctx.Flash.Success(ctx.Tr("settings.twofa_enrolled_info"), true)
+	ctx.Flash.Info(token, true)
+
+	loadSecurityData(ctx)
+	ctx.Data["ScratchToken"] = token
+	ctx.HTML(200, tplSettingsSecurity)
 }

templates/user/settings/applications.tmpl

@@ -54,6 +54,8 @@
 	</div>
 </div>
 
+{{template "user/settings/token_modal" Dict "Title" "settings.generate_token_success_short" "Info" "settings.generate_token_success" "Token" .Token "i18n" .i18n}}
+
 <div class="ui small basic delete modal" id="delete-token">
 	<div class="ui icon header">
 		{{svg "octicon-trashcan"}}

templates/user/settings/security.tmpl

@@ -12,4 +12,6 @@
 	</div>
 </div>
 
+{{template "user/settings/token_modal" Dict "Title" "settings.twofa_enrolled" "Info" "settings.twofa_enrolled_info" "Token" .ScratchToken "i18n" .i18n}}
+
 {{template "base/footer" .}}

templates/user/settings/token_modal.tmpl

@@ -0,0 +1,23 @@
+{{if .Token}}
+	<div class="ui small success modal" id="token-generated">
+		<div class="ui icon header">
+			{{svg "octicon-shield-lock"}}
+			{{.i18n.Tr .Title}}
+		</div>
+		<div class="content">
+			<p>{{.i18n.Tr .Info}}</p>
+			<p><code class="ui label basic big blue">{{.Token}}</code></p>
+		</div>
+
+		<div class="actions">
+			<button id="copy-token" data-token="{{.Token}}" class="ui button ok">
+				{{svg "octicon-clippy"}}
+				{{.i18n.Tr "copy_to_clipboard"}}
+			</button>
+			<button class="ui button ok">
+				{{svg "octicon-check"}}
+				OK
+			</button>
+		</div>
+	</div>
+{{end}}

web_src/js/index.js

@@ -2507,6 +2507,16 @@ $(document).ready(async () => {
     }).then(reload);
   });
 
+  // on /user/settings/applications, /user/settings/security (2FA)
+  const tokenGeneratedModal = $('#token-generated');
+  if (tokenGeneratedModal) {
+    tokenGeneratedModal.modal().modal('show');
+    $('#copy-token').on('click', (_) => {
+      navigator.clipboard.writeText($('#copy-token').data('token'));
+      return false;
+    });
+  }
+
   buttonsClickOnEnter();
   searchUsers();
   searchTeams();