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