1
0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-27 07:31:46 +01:00

fix: cleans up login page (#3263)

This commit is contained in:
Amir Raminfar
2024-09-09 08:28:03 -07:00
committed by GitHub
parent 141874b6a5
commit 8183b9e70f
2 changed files with 23 additions and 25 deletions

View File

@@ -53,6 +53,7 @@ declare module 'vue' {
LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
'Mdi:account': typeof import('~icons/mdi/account')['default']
'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
'Mdi:check': typeof import('~icons/mdi/check')['default']
@@ -65,6 +66,7 @@ declare module 'vue' {
'Mdi:docker': typeof import('~icons/mdi/docker')['default']
'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
'Mdi:key': typeof import('~icons/mdi/key')['default']
'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']

View File

@@ -1,38 +1,36 @@
<template>
<div class="card w-96 flex-shrink-0 bg-base-lighter shadow-2xl">
<div class="card-body">
<form action="" method="post" @submit.prevent="onLogin" ref="form">
<div class="form-control">
<label class="label">
<span class="label-text"> {{ $t("label.username") }} </span>
</label>
<form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
<label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
<mdi:account class="has-[+:focus]:text-primary" />
<input
class="input input-bordered"
type="text"
class="grow"
:placeholder="$t('label.username')"
name="username"
autocomplete="username"
v-model="username"
autofocus
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">{{ $t("label.password") }}</span>
</label>
</label>
<label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
<mdi:key class="has-[+:focus]:text-primary" />
<input
class="input input-bordered"
type="password"
class="grow"
:placeholder="$t('label.password')"
name="password"
autocomplete="current-password"
v-model="password"
autofocus
required
/>
</div>
</label>
<label class="label text-red" v-if="error">
{{ $t("error.invalid-auth") }}
</label>
<div class="form-control mt-6">
<button class="btn btn-primary" type="submit">{{ $t("button.login") }}</button>
</div>
<button class="btn btn-primary uppercase" type="submit">{{ $t("button.login") }}</button>
</form>
</div>
</div>
@@ -43,27 +41,25 @@ const { t } = useI18n();
setTitle(t("title.login"));
let error = $ref(false);
let username = $ref("");
let password = $ref("");
let form: HTMLFormElement | undefined = $ref();
const error = ref(false);
const form = ref<HTMLFormElement>();
const params = new URLSearchParams(window.location.search);
async function onLogin() {
const response = await fetch(withBase("/api/token"), {
body: new FormData(form),
body: new FormData(form.value),
method: "POST",
});
if (response.status == 200) {
error = false;
error.value = false;
if (params.has("redirectUrl")) {
window.location.href = withBase(params.get("redirectUrl")!);
} else {
window.location.href = withBase("/");
}
} else {
error = true;
error.value = true;
}
}
</script>