fix: vertically center first install (#3501)

This commit is contained in:
Tiago Vasconcelos 2025-11-11 20:04:43 +00:00 committed by GitHub
parent a8c3181852
commit 0ec8139e5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,75 +1,78 @@
<template id="page-first-install"> <template id="page-first-install">
<div class="row q-col-gutter-md justify-center main first-install"> <div class="fullscreen">
<div class="col-10 col-md-8 col-lg-6 q-gutter-y-md"> <div class="row q-col-gutter-md justify-center main first-install">
<q-card> <div class="col-10 col-md-8 col-lg-6 q-gutter-y-md">
<q-card-section class="grid"> <q-card>
<div> <q-card-section class="grid">
<h6 class="q-my-none text-center"> <div>
<strong v-text="$t('welcome_lnbits')"></strong> <h6 class="q-my-none text-center">
<p><span v-text="$t('setup_su_account')"></span></p> <strong v-text="$t('welcome_lnbits')"></strong>
</h6> <p><span v-text="$t('setup_su_account')"></span></p>
<br /> </h6>
<q-form class="q-gutter-md"> <br />
<q-input <q-form class="q-gutter-md">
filled <q-input
v-model="loginData.username" filled
:label="$t('username')" v-model="loginData.username"
></q-input> :label="$t('username')"
<q-input ></q-input>
filled <q-input
v-model.trim="loginData.password" filled
:type="loginData.isPwd ? 'password' : 'text'" v-model.trim="loginData.password"
autocomplete="off" :type="loginData.isPwd ? 'password' : 'text'"
:label="$t('password')" autocomplete="off"
:rules="[ :label="$t('password')"
val => !val || val.length >= 8 || $t('invalid_password') :rules="[
]" val => !val || val.length >= 8 || $t('invalid_password')
><template v-slot:append> ]"
<q-icon ><template v-slot:append>
:name="loginData.isPwd ? 'visibility_off' : 'visibility'" <q-icon
class="cursor-pointer" :name="loginData.isPwd ? 'visibility_off' : 'visibility'"
@click="loginData.isPwd = !loginData.isPwd" class="cursor-pointer"
/> </template @click="loginData.isPwd = !loginData.isPwd"
></q-input> /> </template
<q-input ></q-input>
filled <q-input
v-model.trim="loginData.passwordRepeat" filled
:type="loginData.isPwdRepeat ? 'password' : 'text'" v-model.trim="loginData.passwordRepeat"
autocomplete="off" :type="loginData.isPwdRepeat ? 'password' : 'text'"
:label="$t('password_repeat')" autocomplete="off"
:rules="[ :label="$t('password_repeat')"
val => !val || val.length >= 8 || $t('invalid_password'), :rules="[
val => val => !val || val.length >= 8 || $t('invalid_password'),
val === loginData.password || $t('invalid_password_repeat') val =>
]" val === loginData.password ||
><template v-slot:append> $t('invalid_password_repeat')
<q-icon ]"
:name=" ><template v-slot:append>
loginData.isPwdRepeat ? 'visibility_off' : 'visibility' <q-icon
" :name="
class="cursor-pointer" loginData.isPwdRepeat ? 'visibility_off' : 'visibility'
@click="loginData.isPwdRepeat = !loginData.isPwdRepeat" "
/> </template class="cursor-pointer"
></q-input> @click="loginData.isPwdRepeat = !loginData.isPwdRepeat"
<q-btn /> </template
@click="setPassword()" ></q-input>
unelevated <q-btn
color="primary" @click="setPassword()"
:label="$t('login')" unelevated
:disable=" color="primary"
checkPasswordsMatch || :label="$t('login')"
!loginData.username || :disable="
!loginData.password || checkPasswordsMatch ||
!loginData.passwordRepeat !loginData.username ||
" !loginData.password ||
></q-btn> !loginData.passwordRepeat
</q-form> "
</div> ></q-btn>
<div class="hero-wrapper"> </q-form>
<div class="hero q-mx-auto"></div> </div>
</div> <div class="hero-wrapper">
</q-card-section> <div class="hero q-mx-auto"></div>
</q-card> </div>
</q-card-section>
</q-card>
</div>
</div> </div>
</div> </div>
</template> </template>