refactor(pages): login
add loading indicator to button after submit
This commit is contained in:
parent
f0b107c2fd
commit
80dbd05468
@ -1,6 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
import { notification } from "ant-design-vue";
|
import { notification } from "ant-design-vue";
|
||||||
|
|
||||||
interface FormState {
|
interface FormState {
|
||||||
username: string;
|
username: string;
|
||||||
password: string;
|
password: string;
|
||||||
@ -15,23 +16,26 @@
|
|||||||
useHead({
|
useHead({
|
||||||
title: "Log In",
|
title: "Log In",
|
||||||
});
|
});
|
||||||
|
const loadRef = ref<boolean>(false);
|
||||||
|
|
||||||
const formState = reactive<FormState>({
|
const formState = reactive<FormState>({
|
||||||
username: "",
|
username: "",
|
||||||
password: "",
|
password: "",
|
||||||
});
|
});
|
||||||
const darkRef = inject<Ref<boolean>>("dark");
|
const darkRef = inject<Ref<boolean>>("dark")!;
|
||||||
const onFinish = async (values: any) => {
|
const onFinish = async (values: any) => {
|
||||||
const { signIn } = useAuth();
|
const { signIn } = useAuth();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
loadRef.value = true;
|
||||||
await signIn(values, { redirect: true, callbackUrl: "/" });
|
await signIn(values, { redirect: true, callbackUrl: "/" });
|
||||||
const { data } = useAuth();
|
const { data } = useAuth();
|
||||||
darkRef.value = data.value.user.profile.nightMode;
|
darkRef!.value = data.value?.user?.profile.nightMode || false;
|
||||||
if (darkRef.value) document.body.dataset.theme = "dark";
|
if (darkRef!.value) document.body.dataset.theme = "dark";
|
||||||
await navigateTo("/");
|
await navigateTo("/");
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
if (e.data) {
|
if (e.data) {
|
||||||
|
loadRef.value = false;
|
||||||
notification["error"]({
|
notification["error"]({
|
||||||
message: h("div", { innerHTML: e.data.message }),
|
message: h("div", { innerHTML: e.data.message }),
|
||||||
});
|
});
|
||||||
@ -50,7 +54,7 @@
|
|||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-row :justify="'center'" :align="'middle'">
|
<a-row :justify="'center'" :align="'middle'">
|
||||||
<a-col>
|
<a-col>
|
||||||
<a-button data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
|
<a-button :loading="loadRef" data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user