diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/components/GatewaySettings.vue | 90 | ||||
-rw-r--r-- | js/components/SignalInstructions.vue | 13 | ||||
-rw-r--r-- | js/components/TelegramInstructions.vue | 19 | ||||
-rw-r--r-- | js/views/Settings.vue | 18 |
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> |