From 0ec8139e5c9697c99e42904613c41a5c7ed7be6c Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Tue, 11 Nov 2025 20:04:43 +0000
Subject: [PATCH] fix: vertically center first install (#3501)

---
 lnbits/templates/pages/first-install.vue | 145 ++++++++++++-----------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/lnbits/templates/pages/first-install.vue b/lnbits/templates/pages/first-install.vue
index c7f94661..f3cfa575 100644
--- a/lnbits/templates/pages/first-install.vue
+++ b/lnbits/templates/pages/first-install.vue
@@ -1,75 +1,78 @@
 <template id="page-first-install">
-  <div class="row q-col-gutter-md justify-center main first-install">
-    <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 || $t('invalid_password_repeat')
-                ]"
-                ><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 class="fullscreen">
+    <div class="row q-col-gutter-md justify-center main first-install">
+      <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 ||
+                      $t('invalid_password_repeat')
+                  ]"
+                  ><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>
   </div>
 </template>