feat: add confirmation options UI

lnbits/static/i18n/en.js

@@ -720,6 +720,11 @@ window.localisation.en = {
   one_time_activation_code_label: 'Add activation code',
   one_time_activation_code_hint:
     'List of one-time activation codes. Each code can be used only once, then will be reomved from the list.',
+  confirmation_code: 'Confirmation Code',
+  confirmation_code_hint: 'The confirmation code that you have received.',
+  email: 'Email',
+  email_confirmation_hint: 'Email address to send the confirmation code to.',
+
   new_user_not_allowed: 'Registration is disabled.',
   start_user_impersonation: 'Impersonate this user',
   stop_user_impersonation: 'Stop User Impersonation',

lnbits/static/js/components.js

@@ -445,7 +445,11 @@ window.app.component('username-password', {
       username: this.userName,
       password: this.password_1,
       passwordRepeat: this.password_2,
-      reset_key: this.resetKey
+      reset_key: this.resetKey,
+      confirmationMethod: 'code',
+      confirmationEmail: '',
+      confirmationCode: '',
+      showConfirmationCode: false
     }
   },
   methods: {

lnbits/templates/components.vue

@@ -814,6 +814,64 @@ include('components/lnbits-error.vue') %}
           type="password"
           :rules="[val => !val || val.length >= 8 || $t('invalid_password')]"
         ></q-input>
+        <div class="row justify-center q-mb-md">
+          <q-tabs
+            v-model="confirmationMethod"
+            dense
+            active-color="primary"
+            indicator-color="primary"
+          >
+            <q-tab name="code" icon="confirmation_number" label="Code"></q-tab>
+            <q-tab name="payment" icon="bolt" label="Payment"></q-tab>
+            <q-tab name="nostr" icon="bolt" label="Nostr"></q-tab>
+            <q-tab name="email" icon="email" label="Email"></q-tab>
+          </q-tabs>
+        </div>
+        <div>
+          <q-tab-panels v-model="confirmationMethod">
+            <q-tab-panel name="code" class="q-pa-none">
+              <div>
+                <q-input
+                  dense
+                  filled
+                  v-model="confirmationCode"
+                  :label="$t('confirmation_code')"
+                  :type="showConfirmationCode ? 'text' : 'password'"
+                  :hint="$t('confirmation_code_hint')"
+                >
+                  <q-btn
+                    @click="showConfirmationCode = !showConfirmationCode"
+                    dense
+                    flat
+                    :icon="
+                      showConfirmationCode ? 'visibility_off' : 'visibility'
+                    "
+                    color="grey"
+                  ></q-btn>
+                </q-input>
+              </div>
+            </q-tab-panel>
+            <q-tab-panel name="payment">
+              <div>payment</div>
+            </q-tab-panel>
+            <q-tab-panel name="nostr">
+              <div>nostr</div>
+            </q-tab-panel>
+            <q-tab-panel name="email" class="q-pa-none">
+              <div>
+                <q-input
+                  dense
+                  filled
+                  v-model="confirmationEmail"
+                  :label="$t('email')"
+                  :hint="$t('email_confirmation_hint')"
+                >
+                </q-input>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+
         <div class="row justify-end">
           <q-btn
             unelevated