Let the user specify their identifier/phone number

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

2 files changed, 168 insertions, 137 deletions

diff --git a/js/service/registration.js b/js/service/registration.js
index fb741fb..2b45fd7 100644
--- a/js/service/registration.js
+++ b/js/service/registration.js
@@ -1,55 +1,58 @@
 import $ from 'jquery';
-import { nc_fetch_json } from 'nextcloud_fetch';
+import {nc_fetch_json} from 'nextcloud_fetch';
 
-export function getState() {
-    let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
+export function getState () {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
 
-    return nc_fetch_json(url).then(function (resp) {
-        if (resp.ok) {
-            return resp.json();
-        }
-        throw resp;
-    })
+	return nc_fetch_json(url).then(function (resp) {
+		if (resp.ok) {
+			return resp.json();
+		}
+		throw resp;
+	})
 }
 
-export function startVerification() {
-    let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/start')
-
-    return nc_fetch_json(url, {
-        method: 'POST'
-    }).then(function (resp) {
-        if (resp.ok) {
-            return resp.json();
-        }
-        throw resp;
-    })
+export function startVerification (identifier) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/start')
+
+	return nc_fetch_json(url, {
+		method: 'POST',
+		body: JSON.stringify({
+			identifier: identifier
+		})
+	}).then(function (resp) {
+		if (resp.ok) {
+			return resp.json();
+		}
+		throw resp;
+	})
 }
 
-export function tryVerification(code) {
-    let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/finish')
-
-    return nc_fetch_json(url, {
-        method: 'POST',
-        body: JSON.stringify({
-            verificationCode: code
-        })
-    }).then(function (resp) {
-        if (resp.ok) {
-            return resp.json();
-        }
-        throw resp;
-    })
+export function tryVerification (code) {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification/finish')
+
+	return nc_fetch_json(url, {
+		method: 'POST',
+		body: JSON.stringify({
+			verificationCode: code
+		})
+	}).then(function (resp) {
+		if (resp.ok) {
+			return resp.json();
+		}
+		throw resp;
+	})
 }
 
-export function disable() {
-    let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
-
-    return nc_fetch_json(url, {
-        method: 'DELETE'
-    }).then(function (resp) {
-        if (resp.ok) {
-            return resp.json();
-        }
-        throw resp;
-    })
+export function disable () {
+	let url = OC.generateUrl('/apps/twofactor_gateway/settings/verification')
+
+	return nc_fetch_json(url, {
+		method: 'DELETE'
+	}).then(function (resp) {
+		if (resp.ok) {
+			return resp.json();
+		}
+		throw resp;
+	})
 }
diff --git a/js/view/settings.vue b/js/view/settings.vue
index ee63145..adeff27 100644
--- a/js/view/settings.vue
+++ b/js/view/settings.vue
@@ -1,104 +1,132 @@
 <template>
-    <div class="section">
-        <h2 data-anchor-name="sms-second-factor-auth"><l10n text="SMS second-factor auth"></l10n></h2>
-        <div v-if="loading">
-              <span class="icon-loading-small"></span>
-        </div>
-        <div v-else>
-          <p v-if="state === 0">
-              <strong v-if="verificationError === true"><l10n text="Could not verify your code. Please try again."></l10n></strong>
-              <l10n text="You are not using SMS-based two-factor authentication at the moment"></l10n>
-              <button @click="enable"><l10n text="Enable"></l10n></button>
-          </p>
-          <p v-if="state === 1">
-              <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>
-              <input v-model="confirmationCode">
-              <button @click="confirm"><l10n text="Confirm"></l10n></button>
-          </p>
-          <p v-if="state === 2">
-              <l10n text="SMS-based two-factor authentication is enabled for your account."></l10n>
-              <button @click="disable"><l10n text="Disable"></l10n></button>
-          </p>
-        </div>
-    </div>
+	<div class="section">
+		<h2 data-anchor-name="sms-second-factor-auth">
+			<l10n text="SMS second-factor auth"></l10n>
+		</h2>
+		<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 SMS-based 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}. Please check your phone and insert the code here:"
+					  v-bind:options="{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>
+				<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";
+	import l10n from "view/l10n.vue";
+	import {
+		getState,
+		startVerification,
+		tryVerification,
+		disable
+	} from "service/registration";
 
-export default {
-  data() {
-    return {
-      loading: true,
-      state: 0,
-      phoneNumber: "",
-      confirmationCode: "",
-      verificationError: false
-    };
-  },
-  mounted: function() {
-    getState()
-      .then(res => {
-        this.state = res.state;
-        this.phoneNumber = res.phoneNumber;
-        this.loading = false;
-      })
-      .catch(console.error.bind(this));
-  },
-  methods: {
-    enable: function() {
-      this.loading = true;
-      this.verificationError = false;
-      startVerification()
-        .then(res => {
-          this.state = 1;
-          this.phoneNumber = res.phoneNumber;
-          this.loading = false;
-        })
-        .catch(console.error.bind(this));
-    },
-    confirm: function() {
-      this.loading = true;
+	export default {
+		data () {
+			return {
+				loading: true,
+				state: 0,
+				phoneNumber: '',
+				confirmationCode: '',
+				identifier: '',
+				verificationError: false
+			};
+		},
+		mounted: function () {
+			getState()
+				.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.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 = 2;
-          this.loading = false;
-        })
-        .catch(res => {
-          this.state = 0;
-          this.verificationError = true;
-          this.loading = false;
-        });
-    },
+				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: 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
-  }
-};
+				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;
-}
+	.icon-loading-small {
+		padding-left: 15px;
+	}
 </style>