Merge pull request #92 from nextcloud/refactor/multiple-providers

Allow multiple providers and other enhancements

6 files changed, 176 insertions, 151 deletions

diff --git a/js/components/GatewaySettings.vue b/js/components/GatewaySettings.vue
new file mode 100644
index 0000000..dbbe4d9
--- /dev/null
+++ b/js/components/GatewaySettings.vue
@@ -0,0 +1,128 @@
+<template>
+	<div v-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}."
+				  :options="{displayName: displayName}" />
+			<button @click="disable">
+				<l10n text="Disable"></l10n>
+			</button>
+		</p>
+	</div>
+</template>
+
+<script>
+	import L10n from "components/L10n.vue";
+	import {
+		getState,
+		startVerification,
+		tryVerification,
+		disable
+	} from "service/registration";
+
+	export default {
+		name: "GatewaySettings",
+		props: [
+			'gatewayName',
+			'displayName',
+		],
+		data () {
+			return {
+				loading: true,
+				state: 0,
+				phoneNumber: '',
+				confirmationCode: '',
+				identifier: '',
+				verificationError: false
+			};
+		},
+		mounted: function () {
+			getState(this.gatewayName)
+				.then(res => {
+					this.state = res.state;
+					this.phoneNumber = res.phoneNumber;
+					this.loading = false;
+				})
+				.catch(console.error.bind(this));
+		},
+		methods: {
+			enable: function () {
+				this.state = 1;
+				this.verificationError = false;
+				this.loading = false;
+			},
+			verify: function () {
+				this.loading = true;
+				this.verificationError = false;
+				startVerification(this.gatewayName, this.identifier)
+					.then(res => {
+						this.state = 2;
+						this.phoneNumber = res.phoneNumber;
+						this.loading = false;
+					})
+					.catch(e => {
+						console.error(e);
+						this.state = 1;
+						this.verificationError = true;
+						this.loading = false;
+					});
+			},
+			confirm: function () {
+				this.loading = true;
+
+				tryVerification(this.gatewayName, this.confirmationCode)
+					.then(res => {
+						this.state = 3;
+						this.loading = false;
+					})
+					.catch(res => {
+						this.state = 1;
+						this.verificationError = true;
+						this.loading = false;
+					});
+			},
+
+			disable: function () {
+				this.loading = true;
+
+				disable(this.gatewayName)
+					.then(res => {
+						this.state = res.state;
+						this.phoneNumber = res.phoneNumber;
+						this.loading = false;
+					})
+					.catch(console.error.bind(this));
+			}
+		},
+		components: {
+			L10n
+		}
+	}
+</script>
diff --git a/js/view/l10n.vue b/js/components/L10n.vue
index 03e32e0..03e32e0 100644
--- a/js/view/l10n.vue
+++ b/js/components/L10n.vue
diff --git a/js/init.js b/js/init.js
index 2dd76ca..cc3f6ae 100644
--- a/js/init.js
+++ b/js/init.js
@@ -1,6 +1,6 @@
 import Vue from "vue"
 
-import SettingsView from "view/settings.vue"
+import SettingsView from "views/Settings.vue"
 
 Vue.config.productionTip = false
 
diff --git a/js/service/registration.js b/js/service/registration.js
index 2b45fd7..16a686c 100644
--- a/js/service/registration.js
+++ b/js/service/registration.js
@@ -1,19 +1,22 @@
-import $ from 'jquery';
 import {nc_fetch_json} from 'nextcloud_fetch';
 
-export function getState () {
-	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
+export function getState (gateway) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/{gateway}/verification', {
+		gateway: gateway
+	})
 
 	return nc_fetch_json(url).then(function (resp) {
 		if (resp.ok) {
-			return resp.json();
+			return resp.json()
 		}
-		throw resp;
+		throw resp
 	})
 }
 
-export function startVerification (identifier) {
-	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/start')
+export function startVerification (gateway, identifier) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/{gateway}/verification/start', {
+		gateway: gateway
+	})
 
 	return nc_fetch_json(url, {
 		method: 'POST',
@@ -28,8 +31,10 @@ export function startVerification (identifier) {
 	})
 }
 
-export function tryVerification (code) {
-	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/finish')
+export function tryVerification (gateway, code) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/{gateway}/verification/finish', {
+		gateway: gateway
+	})
 
 	return nc_fetch_json(url, {
 		method: 'POST',
@@ -44,8 +49,10 @@ export function tryVerification (code) {
 	})
 }
 
-export function disable () {
-	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
+export function disable (gateway) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/{gateway}/verification', {
+		gateway: gateway
+	})
 
 	return nc_fetch_json(url, {
 		method: 'DELETE'
diff --git a/js/view/settings.vue b/js/view/settings.vue
deleted file mode 100644
index 1fd899d..0000000
--- a/js/view/settings.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-	<div class="section">
-		<h2 data-anchor-name="sms-second-factor-auth">
-			<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 gateway for two-factor authentication at the moment."></l10n>
-				<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 {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="Your account was successfully configured to receive messages via {gateway}."
-					  v-bind:options="{gateway: gatewayName}"></l10n>
-				<button @click="disable">
-					<l10n text="Disable"></l10n>
-				</button>
-			</p>
-		</div>
-	</div>
-</template>
-
-<script>
-	import l10n from "view/l10n.vue";
-	import {
-		getState,
-		startVerification,
-		tryVerification,
-		disable
-	} from "service/registration";
-
-	export default {
-		data () {
-			return {
-				loading: true,
-				state: 0,
-				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;
-				})
-				.catch(console.error.bind(this));
-		},
-		methods: {
-			enable: function () {
-				this.state = 1;
-				this.verificationError = false;
-				this.loading = false;
-			},
-			verify: function () {
-				this.loading = true;
-				this.verificationError = false;
-				startVerification(this.identifier)
-					.then(res => {
-						this.state = 2;
-						this.phoneNumber = res.phoneNumber;
-						this.loading = false;
-					})
-					.catch(e => {
-						console.error(e);
-						this.state = 1;
-						this.verificationError = true;
-						this.loading = false;
-					});
-			},
-			confirm: function () {
-				this.loading = true;
-
-				tryVerification(this.confirmationCode)
-					.then(res => {
-						this.state = 3;
-						this.loading = false;
-					})
-					.catch(res => {
-						this.state = 1;
-						this.verificationError = true;
-						this.loading = false;
-					});
-			},
-
-			disable: function () {
-				this.loading = true;
-
-				disable()
-					.then(res => {
-						this.state = res.state;
-						this.phoneNumber = res.phoneNumber;
-						this.loading = false;
-					})
-					.catch(console.error.bind(this));
-			}
-		},
-		components: {
-			l10n
-		}
-	};
-</script>
-
-<style>
-	.icon-loading-small {
-		padding-left: 15px;
-	}
-</style>
diff --git a/js/views/Settings.vue b/js/views/Settings.vue
new file mode 100644
index 0000000..4b96923
--- /dev/null
+++ b/js/views/Settings.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="section">
+		<h2 data-anchor-name="sms-second-factor-auth">
+			<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="sms" display-name="SMS" />
+		<GatewaySettings gateway-name="telegram" display-name="Telegram" />
+	</div>
+</template>
+
+<script>
+	import L10n from "components/L10n.vue";
+	import GatewaySettings from "../components/GatewaySettings.vue";
+
+	export default {
+		components: {
+			GatewaySettings,
+			L10n
+		}
+	};
+</script>
+
+<style>
+	.icon-loading-small {
+		padding-left: 15px;
+	}
+</style>