Add basic setup instructions for the user settings

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

4 files changed, 93 insertions, 47 deletions

diff --git a/js/components/GatewaySettings.vue b/js/components/GatewaySettings.vue
index 119ec0b..b36d269 100644
--- a/js/components/GatewaySettings.vue
+++ b/js/components/GatewaySettings.vue
@@ -1,44 +1,50 @@
 <template>
-	<div v-if="!isAvailable">
-		<L10n text="The {displayName} gateway is not configured."
-			  :options="{displayName: displayName}" />
-	</div>
-	<div v-else-if="loading">
-		<span class="icon-loading-small"></span>
-	</div>
-	<div v-else>
-		<p v-if="state === 0">
-			<L10n text="You are not using {displayName} for two-factor authentication at the moment."
-				  :options="{displayName: displayName}" />
-			<button @click="enable">
-				<L10n text="Enable"></L10n>
-			</button>
-		</p>
-		<p v-if="state === 1">
-			<strong v-if="verificationError === true">
-				<L10n text="Could not verify your code. Please try again."></L10n>
-			</strong>
-			<L10n text="Enter your identification (e.g. phone number to start the verification):"></L10n>
-			<input v-model="identifier">
-			<button @click="verify">
-				<L10n text="Verify"></L10n>
-			</button>
-		</p>
-		<p v-if="state === 2">
-			<L10n text="A confirmation code has been sent to {phone} via SMS. Please insert the code here:"
-				  :options="{phone: phoneNumber}"></L10n>
-			<input v-model="confirmationCode">
-			<button @click="confirm">
-				<L10n text="Confirm"></L10n>
-			</button>
-		</p>
-		<p v-if="state === 3">
-			<L10n text="Your account was successfully configured to receive messages via {displayName}."
+	<div>
+		<h3>{{ displayName }}</h3>
+		<div v-if="!isAvailable">
+			<slot name="instructions" />
+			<L10n text="The {displayName} gateway is not configured."
 				  :options="{displayName: displayName}" />
-			<button @click="disable">
-				<l10n text="Disable"></l10n>
-			</button>
-		</p>
+		</div>
+		<div v-else-if="loading">
+			<span class="icon-loading-small"></span>
+		</div>
+		<div v-else>
+			<p v-if="state === 0">
+				<slot name="instructions" />
+				<L10n text="You are not using {displayName} for two-factor authentication at the moment."
+					  :options="{displayName: displayName}" />
+				<button @click="enable">
+					<L10n text="Enable"></L10n>
+				</button>
+			</p>
+			<p v-if="state === 1">
+				<slot name="instructions" />
+				<strong v-if="verificationError === true">
+					<L10n text="Could not verify your code. Please try again."></L10n>
+				</strong>
+				<L10n text="Enter your identification (e.g. phone number to start the verification):"></L10n>
+				<input v-model="identifier">
+				<button @click="verify">
+					<L10n text="Verify"></L10n>
+				</button>
+			</p>
+			<p v-if="state === 2">
+				<L10n text="A confirmation code has been sent to {phone} via SMS. Please insert the code here:"
+					  :options="{phone: phoneNumber}"></L10n>
+				<input v-model="confirmationCode">
+				<button @click="confirm">
+					<L10n text="Confirm"></L10n>
+				</button>
+			</p>
+			<p v-if="state === 3">
+				<L10n text="Your account was successfully configured to receive messages via {displayName}."
+					  :options="{displayName: displayName}" />
+				<button @click="disable">
+					<l10n text="Disable"></l10n>
+				</button>
+			</p>
+		</div>
 	</div>
 </template>
 
@@ -133,3 +139,9 @@
 		}
 	}
 </script>
+
+<style>
+	.icon-loading-small {
+		padding-left: 15px;
+	}
+</style>
diff --git a/js/components/SignalInstructions.vue b/js/components/SignalInstructions.vue
new file mode 100644
index 0000000..a6a3489
--- /dev/null
+++ b/js/components/SignalInstructions.vue
@@ -0,0 +1,13 @@
+<template>
+	<div>
+		<p>
+			The gateway can send authentication to your Signal mobile and deskop app.
+		</p>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "SignalInstructions"
+	}
+</script>
diff --git a/js/components/TelegramInstructions.vue b/js/components/TelegramInstructions.vue
new file mode 100644
index 0000000..a2b515f
--- /dev/null
+++ b/js/components/TelegramInstructions.vue
@@ -0,0 +1,19 @@
+<template>
+	<div>
+		<p>
+			In order to receive authentication codes via Telegram, you first
+			have to start a new chat with the bot set up by your admin.<br>
+			Secondly, you have to obtain your Telegram ID via the <a
+				href="https://telegram.me/get_id_bot"
+				target="_blank"
+				rel="noreferrer noopener">ID Bot</a>.
+			Enter this ID to receive your verification code below.
+		</p>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "TelegramInstructions"
+	}
+</script>
diff --git a/js/views/Settings.vue b/js/views/Settings.vue
index 4b96923..f3f08a7 100644
--- a/js/views/Settings.vue
+++ b/js/views/Settings.vue
@@ -4,26 +4,28 @@
 			<L10n text="Message gateway second-factor auth"/>
 		</h2>
 		<L10n text="Here you can configure the message gateway to receive two-factor authentication codes via Signal, SMS or Telegram." />
-		<GatewaySettings gateway-name="signal" display-name="Signal" />
+		<GatewaySettings gateway-name="signal" display-name="Signal">
+			<SignalInstructions slot="instructions" />
+		</GatewaySettings>
 		<GatewaySettings gateway-name="sms" display-name="SMS" />
-		<GatewaySettings gateway-name="telegram" display-name="Telegram" />
+		<GatewaySettings gateway-name="telegram" display-name="Telegram">
+			<TelegramInstructions slot="instructions" />
+		</GatewaySettings>
 	</div>
 </template>
 
 <script>
 	import L10n from "components/L10n.vue";
 	import GatewaySettings from "../components/GatewaySettings.vue";
+	import SignalInstructions from "../components/SignalInstructions.vue";
+	import TelegramInstructions from "../components/TelegramInstructions.vue";
 
 	export default {
 		components: {
+			TelegramInstructions,
+			SignalInstructions,
 			GatewaySettings,
 			L10n
 		}
 	};
 </script>
-
-<style>
-	.icon-loading-small {
-		padding-left: 15px;
-	}
-</style>