fix: vertically center first install (#3501)
This commit is contained in:
parent
a8c3181852
commit
0ec8139e5c
1 changed files with 74 additions and 71 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue