Extrac l10n vue view

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

2 files changed, 27 insertions, 6 deletions

diff --git a/js/view/l10n.vue b/js/view/l10n.vue
new file mode 100644
index 0000000..16b39a1
--- /dev/null
+++ b/js/view/l10n.vue
@@ -0,0 +1,14 @@
+<template>
+    <span>{{ translated }}</span>
+</template>
+
+<script>
+export default {
+  computed: {
+    translated: function() {
+      return t("twofactor_sms", this.text, this.options || {});
+    }
+  },
+  props: ["text", "options"]
+};
+</script>
diff --git a/js/view/settings.vue b/js/view/settings.vue
index a75a204..8d8dcac 100644
--- a/js/view/settings.vue
+++ b/js/view/settings.vue
@@ -1,26 +1,30 @@
 <template>
     <div class="section">
-        <h2 data-anchor-name="totp-second-factor-auth">SMS second-factor auth</h2>
+        <h2 data-anchor-name="sms-second-factor-auth"><l10n text="SMS second-factor auth"></l10n></h2>
         <p v-if="state === 0">
-            You are not using SMS-based two-factor authentication at the moment.
-            <button @click="enable">Enable</button>
+            <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">
-            A confirmation code has been sent to …. Please check your phone and insert the code here: …
+            <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">Confirm</button>
+            <button @click="confirm"><l10n text="Confirm"></l10n></button>
         </p>
         <p v-if="state === 2">
-            SMS-based two-factor authentication is enabled for your account.
+            <l10n text="SMS-based two-factor authentication is enabled for your account."></l10n>
         </p>
     </div>
 </template>
 
 <script>
+import l10n from "./l10n.vue";
+
 export default {
   data() {
     return {
       state: 0,
+      phoneNumber: "12344556",
       confirmationCode: ""
     };
   },
@@ -33,6 +37,9 @@ export default {
 
       this.state = 2;
     }
+  },
+  components: {
+    l10n
   }
 };
 </script>