[core] Improved backend setup on login page
This commit is contained in:
parent
7a705d5f9a
commit
6732921ff7
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="row justify-center items-center content-center q-pa-md">
|
||||
<q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>Servereinstellung</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-card-section>
|
||||
<q-form class="q-gutter-md" @submit="changeUrl">
|
||||
<q-input v-model="server" filled label="Server" dense />
|
||||
<q-btn dense color="primary" label="Speichern" type="submit" />
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { notEmpty, PersistentStorage } from '@flaschengeist/api';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { api } from '@flaschengeist/api';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageBackend',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
const server = ref(api.defaults.baseURL);
|
||||
|
||||
function changeUrl() {
|
||||
if (server.value) {
|
||||
void PersistentStorage.set('baseURL', server.value).then(() => {
|
||||
console.log('uiuiui');
|
||||
void router.push({ name: 'login' }).then(() => router.go(0));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
changeUrl,
|
||||
notEmpty,
|
||||
server,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,55 +2,68 @@
|
|||
<q-page padding class="fit row justify-center items-center content-center">
|
||||
<q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title> Login </q-toolbar-title>
|
||||
<q-toolbar-title>{{ backendSetup ? 'Servereinrichtung' : 'Login' }}</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
|
||||
<q-card-section>
|
||||
<q-form @submit="doLogin">
|
||||
<q-input
|
||||
v-model="userid"
|
||||
class="q-pa-md"
|
||||
filled
|
||||
label="Benutzername oder E-Mail"
|
||||
autocomplete="username"
|
||||
:rules="[notEmpty]"
|
||||
tabindex="1"
|
||||
/>
|
||||
<password-input
|
||||
v-model="password"
|
||||
class="q-px-md q-pt-md q-pb-none"
|
||||
filled
|
||||
label="Passwort"
|
||||
autocomplete="cureent-password"
|
||||
:rules="[notEmpty]"
|
||||
tabindex="2"
|
||||
/>
|
||||
<div class="full-width row justify-end q-px-md">
|
||||
<q-btn
|
||||
label="Passwort vergessen?"
|
||||
type="a"
|
||||
color="secondary"
|
||||
tabindex="4"
|
||||
flat
|
||||
dense
|
||||
size="sm"
|
||||
@click="doReset"
|
||||
<div v-if="!backendSetup">
|
||||
<q-card-section>
|
||||
<q-form @submit="doLogin">
|
||||
<q-input
|
||||
v-model="userid"
|
||||
class="q-pa-md"
|
||||
filled
|
||||
label="Benutzername oder E-Mail"
|
||||
autocomplete="username"
|
||||
:rules="[notEmpty]"
|
||||
tabindex="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="full-width row justify-end q-px-md q-pt-md">
|
||||
<q-btn label="Login" type="submit" color="primary" tabindex="3" />
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<div class="row justify-end">
|
||||
<q-btn
|
||||
v-if="$q.platform.is.capacitor || $q.platform.is.electron"
|
||||
flat
|
||||
round
|
||||
icon="mdi-menu-down"
|
||||
:to="{ name: 'setup_backend' }"
|
||||
/>
|
||||
<password-input
|
||||
v-model="password"
|
||||
class="q-px-md q-pt-md q-pb-none"
|
||||
filled
|
||||
label="Passwort"
|
||||
autocomplete="cureent-password"
|
||||
:rules="[notEmpty]"
|
||||
tabindex="2"
|
||||
/>
|
||||
<div class="full-width row justify-end q-px-md">
|
||||
<q-btn
|
||||
label="Passwort vergessen?"
|
||||
type="a"
|
||||
color="secondary"
|
||||
tabindex="4"
|
||||
flat
|
||||
dense
|
||||
size="sm"
|
||||
@click="doReset"
|
||||
/>
|
||||
</div>
|
||||
<div class="full-width row justify-end q-px-md q-pt-md">
|
||||
<q-btn label="Login" type="submit" color="primary" tabindex="3" />
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<div class="row justify-end">
|
||||
<q-btn
|
||||
v-if="$q.platform.is.capacitor || $q.platform.is.electron"
|
||||
flat
|
||||
round
|
||||
:icon="showBackendSetup ? 'mdi-menu-up' : 'mdi-menu-down'"
|
||||
@click="showBackendSetup = !showBackendSetup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-slide-transition v-if="$q.platform.is.capacitor">
|
||||
<div v-show="showBackendSetup || backendSetup">
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-form ref="ServerSettingsForm" class="q-gutter-md" @submit="changeBackend">
|
||||
<div class="text-h6">Backend einrichten</div>
|
||||
<q-input v-model="server" filled label="Server" dense />
|
||||
<q-btn dense color="primary" label="Speichern" type="submit" />
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-card>
|
||||
</q-page>
|
||||
</template>
|
||||
|
|
@ -58,23 +71,44 @@
|
|||
<script lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Loading, Notify } from 'quasar';
|
||||
import { notEmpty, useMainStore, useUserStore } from '@flaschengeist/api';
|
||||
import { api, notEmpty, PersistentStorage, useMainStore, useUserStore } from '@flaschengeist/api';
|
||||
import { PasswordInput } from '@flaschengeist/api/components';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageLogin',
|
||||
components: { PasswordInput },
|
||||
setup() {
|
||||
props: {
|
||||
backendSetup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const mainRoute = { name: 'dashboard' };
|
||||
|
||||
const mainStore = useMainStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
if (mainStore.session) void router.replace(mainRoute);
|
||||
});
|
||||
|
||||
/* Stuff for the real login page */
|
||||
const userid = ref('');
|
||||
const password = ref('');
|
||||
const server = ref(api.defaults.baseURL);
|
||||
const showBackendSetup = ref(!!props.backendSetup);
|
||||
|
||||
function changeBackend() {
|
||||
if (server.value) {
|
||||
void PersistentStorage.set('baseURL', server.value).then(() => {
|
||||
showBackendSetup.value = false;
|
||||
void router.go(0);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function doLogin() {
|
||||
Loading.show({ message: 'Du wirst angemeldet' });
|
||||
|
|
@ -129,11 +163,14 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
return {
|
||||
changeBackend,
|
||||
doLogin,
|
||||
doReset,
|
||||
notEmpty,
|
||||
password,
|
||||
userid,
|
||||
server,
|
||||
showBackendSetup,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,12 +10,18 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'login',
|
||||
path: 'login',
|
||||
component: () => import('pages/Login.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
name: 'password_reset',
|
||||
path: 'reset',
|
||||
component: () => import('pages/Reset.vue'),
|
||||
},
|
||||
{
|
||||
path: '/setup-backend',
|
||||
name: 'setup_backend',
|
||||
redirect: { name: 'login', params: { backendSetup: 1 } },
|
||||
},
|
||||
{
|
||||
name: 'about_out',
|
||||
path: 'about',
|
||||
|
|
@ -53,11 +59,6 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'offline',
|
||||
component: () => import('pages/Offline.vue'),
|
||||
},
|
||||
{
|
||||
path: '/setup-backend',
|
||||
name: 'setup_backend',
|
||||
component: () => import('pages/Backend.vue'),
|
||||
},
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue