Let gateways tell their name to make it more clear how users receive codes

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

1 files changed, 12 insertions, 5 deletions

diff --git a/js/view/settings.vue b/js/view/settings.vue
index adeff27..1fd899d 100644
--- a/js/view/settings.vue
+++ b/js/view/settings.vue
@@ -1,14 +1,18 @@
 <template>
 	<div class="section">
 		<h2 data-anchor-name="sms-second-factor-auth">
-			<l10n text="SMS second-factor auth"></l10n>
+			<l10n text="Message gateway second-factor auth"></l10n>
 		</h2>
 		<div v-if="loading">
 			<span class="icon-loading-small"></span>
 		</div>
 		<div v-else>
+			<p>
+				<l10n text="Here you can configure the message gateway to receive two-factor authentication codes via {gateway}."
+					  v-bind:options="{gateway: gatewayName}"></l10n>
+			</p>
 			<p v-if="state === 0">
-				<l10n text="You are not using SMS-based two-factor authentication at the moment"></l10n>
+				<l10n text="You are not using gateway for two-factor authentication at the moment."></l10n>
 				<button @click="enable">
 					<l10n text="Enable"></l10n>
 				</button>
@@ -24,15 +28,16 @@
 				</button>
 			</p>
 			<p v-if="state === 2">
-				<l10n text="A confirmation code has been sent to {phone}. Please check your phone and insert the code here:"
-					  v-bind:options="{phone: phoneNumber}"></l10n>
+				<l10n text="A confirmation code has been sent to {phone} via {gateway}. Please insert the code here:"
+					  v-bind:options="{gateway: gatewayName, phone: phoneNumber}"></l10n>
 				<input v-model="confirmationCode">
 				<button @click="confirm">
 					<l10n text="Confirm"></l10n>
 				</button>
 			</p>
 			<p v-if="state === 3">
-				<l10n text="SMS-based two-factor authentication is enabled for your account."></l10n>
+				<l10n text="Your account was successfully configured to receive messages via {gateway}."
+					  v-bind:options="{gateway: gatewayName}"></l10n>
 				<button @click="disable">
 					<l10n text="Disable"></l10n>
 				</button>
@@ -58,12 +63,14 @@
 				phoneNumber: '',
 				confirmationCode: '',
 				identifier: '',
+				gatewayName: '',
 				verificationError: false
 			};
 		},
 		mounted: function () {
 			getState()
 				.then(res => {
+					this.gatewayName = res.gatewayName;
 					this.state = res.state;
 					this.phoneNumber = res.phoneNumber;
 					this.loading = false;