From 736699af9480372624852c2f8c3ad29f5601bc86 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Thu, 6 Feb 2025 13:10:16 +0000
Subject: [PATCH] . (#2925)

---
 lnbits/core/templates/core/first_install.html | 275 +++++++++---------
 1 file changed, 143 insertions(+), 132 deletions(-)

diff --git a/lnbits/core/templates/core/first_install.html b/lnbits/core/templates/core/first_install.html
index 331f18ab..a98cb44c 100644
--- a/lnbits/core/templates/core/first_install.html
+++ b/lnbits/core/templates/core/first_install.html
@@ -1,139 +1,150 @@
 {% extends "public.html" %} {% block page_container %}
-<div class="row q-col-gutter-md justify-center main">
-  <div class="col-10 col-md-8 col-lg-6 q-gutter-y-md">
-    <q-card>
-      <q-card-section class="grid">
-        <div>
-          <h6 class="q-my-none text-center">
-            <strong v-text="$t('welcome_lnbits')"></strong>
-            <p><span v-text="$t('setup_su_account')"></span></p>
-          </h6>
-          <br />
-          <q-form class="q-gutter-md">
-            <q-input
-              filled
-              v-model="loginData.username"
-              :label="$t('username')"
-            ></q-input>
-            <q-input
-              filled
-              v-model.trim="loginData.password"
-              :type="loginData.isPwd ? 'password' : 'text'"
-              autocomplete="off"
-              :label="$t('password')"
-              :rules="[(val) => !val || val.length >= 8 || $t('invalid_password')]"
-              ><template v-slot:append>
-                <q-icon
-                  :name="loginData.isPwd ? 'visibility_off' : 'visibility'"
-                  class="cursor-pointer"
-                  @click="loginData.isPwd = !loginData.isPwd"
-                /> </template
-            ></q-input>
-            <q-input
-              filled
-              v-model.trim="loginData.passwordRepeat"
-              :type="loginData.isPwdRepeat ? 'password' : 'text'"
-              autocomplete="off"
-              :label="$t('password_repeat')"
-              :rules="[(val) => !val || val.length >= 8 || $t('invalid_password'), (val) => val === loginData.password || 'Passwords_dont_match']"
-              ><template v-slot:append>
-                <q-icon
-                  :name="loginData.isPwdRepeat ? 'visibility_off' : 'visibility'"
-                  class="cursor-pointer"
-                  @click="loginData.isPwdRepeat = !loginData.isPwdRepeat"
-                /> </template
-            ></q-input>
-            <q-btn
-              @click="setPassword()"
-              unelevated
-              color="primary"
-              :label="$t('login')"
-              :disable="checkPasswordsMatch || !loginData.username || !loginData.password || !loginData.passwordRepeat"
-            ></q-btn>
-          </q-form>
-        </div>
-        <div class="hero-wrapper">
-          <div class="hero q-mx-auto"></div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</div>
-{% endblock %} {% block scripts %}
-<style>
-  main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .grid {
-    display: block;
-  }
-  .hero-wrapper {
-    display: none;
-  }
-  .hero {
-    display: block;
-    height: 100%;
-    max-width: 250px;
-    background-image: url("{{ static_url_for('static', 'images/logos/lnbits.svg') }}");
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
+<q-page-container>
+  <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+    {% block page %}
+    <div class="row q-col-gutter-md justify-center main">
+      <div class="col-10 col-md-8 col-lg-6 q-gutter-y-md">
+        <q-card>
+          <q-card-section class="grid">
+            <div>
+              <h6 class="q-my-none text-center">
+                <strong v-text="$t('welcome_lnbits')"></strong>
+                <p><span v-text="$t('setup_su_account')"></span></p>
+              </h6>
+              <br />
+              <q-form class="q-gutter-md">
+                <q-input
+                  filled
+                  v-model="loginData.username"
+                  :label="$t('username')"
+                ></q-input>
+                <q-input
+                  filled
+                  v-model.trim="loginData.password"
+                  :type="loginData.isPwd ? 'password' : 'text'"
+                  autocomplete="off"
+                  :label="$t('password')"
+                  :rules="[(val) => !val || val.length >= 8 || $t('invalid_password')]"
+                  ><template v-slot:append>
+                    <q-icon
+                      :name="loginData.isPwd ? 'visibility_off' : 'visibility'"
+                      class="cursor-pointer"
+                      @click="loginData.isPwd = !loginData.isPwd"
+                    /> </template
+                ></q-input>
+                <q-input
+                  filled
+                  v-model.trim="loginData.passwordRepeat"
+                  :type="loginData.isPwdRepeat ? 'password' : 'text'"
+                  autocomplete="off"
+                  :label="$t('password_repeat')"
+                  :rules="[(val) => !val || val.length >= 8 || $t('invalid_password'), (val) => val === loginData.password || 'Passwords_dont_match']"
+                  ><template v-slot:append>
+                    <q-icon
+                      :name="loginData.isPwdRepeat ? 'visibility_off' : 'visibility'"
+                      class="cursor-pointer"
+                      @click="loginData.isPwdRepeat = !loginData.isPwdRepeat"
+                    /> </template
+                ></q-input>
+                <q-btn
+                  @click="setPassword()"
+                  unelevated
+                  color="primary"
+                  :label="$t('login')"
+                  :disable="checkPasswordsMatch || !loginData.username || !loginData.password || !loginData.passwordRepeat"
+                ></q-btn>
+              </q-form>
+            </div>
+            <div class="hero-wrapper">
+              <div class="hero q-mx-auto"></div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+    {% endblock %} {% block scripts %}
+    <style>
+      main {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .grid {
+        display: block;
+      }
+      .hero-wrapper {
+        display: none;
+      }
+      .hero {
+        display: block;
+        height: 100%;
+        max-width: 250px;
+        background-image: url("{{ static_url_for('static', 'images/logos/lnbits.svg') }}");
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
 
-  @media (min-width: 992px) {
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 1rem;
-    }
-    .hero-wrapper {
-      display: block;
-      position: relative;
-      height: 100%;
-      padding: 1rem;
-    }
-  }
-</style>
-<script>
-  window.app = Vue.createApp({
-    el: '#vue',
-    mixins: [window.windowMixin],
-    data: function () {
-      return {
-        loginData: {
-          isPwd: true,
-          isPwdRepeat: true,
-          username: '',
-          password: '',
-          passwordRepeat: ''
+      @media (min-width: 992px) {
+        .grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-gap: 1rem;
+        }
+        .hero-wrapper {
+          display: block;
+          position: relative;
+          height: 100%;
+          padding: 1rem;
         }
       }
-    },
-    created() {
-      this.hasAdminUI = '{{ LNBITS_ADMIN_UI | tojson}}'
-    },
-    computed: {
-      checkPasswordsMatch() {
-        return this.loginData.password !== this.loginData.passwordRepeat
-      }
-    },
-    methods: {
-      async setPassword() {
-        try {
-          await LNbits.api.request('PUT', '/api/v1/auth/first_install', null, {
-            username: this.loginData.username,
-            password: this.loginData.password,
-            password_repeat: this.loginData.passwordRepeat
-          })
+    </style>
+    <script>
+      window.app = Vue.createApp({
+        el: '#vue',
+        mixins: [window.windowMixin],
+        data: function () {
+          return {
+            loginData: {
+              isPwd: true,
+              isPwdRepeat: true,
+              username: '',
+              password: '',
+              passwordRepeat: ''
+            }
+          }
+        },
+        created() {
+          this.hasAdminUI = '{{ LNBITS_ADMIN_UI | tojson}}'
+        },
+        computed: {
+          checkPasswordsMatch() {
+            return this.loginData.password !== this.loginData.passwordRepeat
+          }
+        },
+        methods: {
+          async setPassword() {
+            try {
+              await LNbits.api.request(
+                'PUT',
+                '/api/v1/auth/first_install',
+                null,
+                {
+                  username: this.loginData.username,
+                  password: this.loginData.password,
+                  password_repeat: this.loginData.passwordRepeat
+                }
+              )
 
-          window.location.href = '/admin'
-        } catch (e) {
-          LNbits.utils.notifyApiError(e)
+              window.location.href = '/admin'
+            } catch (e) {
+              LNbits.utils.notifyApiError(e)
+            }
+          }
         }
-      }
-    }
-  })
-</script>
+      })
+    </script>
+    {% endblock %}
+  </q-page>
+</q-page-container>
 {% endblock %}