Add UI mockup

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

3 files changed, 54 insertions, 1 deletions

diff --git a/js/init.js b/js/init.js
index 652fb67..2dd76ca 100644
--- a/js/init.js
+++ b/js/init.js
@@ -1 +1,9 @@
-console.log('henlo');
+import Vue from "vue"
+
+import SettingsView from "view/settings.vue"
+
+Vue.config.productionTip = false
+
+new Vue({
+    render: h => h(SettingsView)
+}).$mount('#twofactor-sms-section')
diff --git a/js/view/settings.vue b/js/view/settings.vue
new file mode 100644
index 0000000..a75a204
--- /dev/null
+++ b/js/view/settings.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="section">
+        <h2 data-anchor-name="totp-second-factor-auth">SMS second-factor auth</h2>
+        <p v-if="state === 0">
+            You are not using SMS-based two-factor authentication at the moment.
+            <button @click="enable">Enable</button>
+        </p>
+        <p v-if="state === 1">
+            A confirmation code has been sent to …. Please check your phone and insert the code here: …
+            <input v-model="confirmationCode">
+            <button @click="confirm">Confirm</button>
+        </p>
+        <p v-if="state === 2">
+            SMS-based two-factor authentication is enabled for your account.
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      state: 0,
+      confirmationCode: ""
+    };
+  },
+  methods: {
+    enable: function() {
+      this.state = 1;
+    },
+    confirm: function() {
+      console.error(this.confirmationCode);
+
+      this.state = 2;
+    }
+  }
+};
+</script>
diff --git a/js/webpack.base.config.js b/js/webpack.base.config.js
index acc33bc..13bd91f 100644
--- a/js/webpack.base.config.js
+++ b/js/webpack.base.config.js
@@ -14,6 +14,13 @@ module.exports = {
 	},
 	module: {
 		rules: [
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+				options: {
+					loaders: {}
+				}
+			}
 		]
 	}
 };