rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(pages): login

Browse Source 
add loading indicator to button after submit
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2024-12-08 22:54:40 -05:00
parent f0b107c2fd
commit 80dbd05468
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/auth/login.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import { reactive } from "vue";
import { notification } from "ant-design-vue";
interface FormState {
username: string;
password: string;
@ -15,23 +16,26 @@
useHead({
title: "Log In",
});
const loadRef = ref<boolean>(false);
const formState = reactive<FormState>({
username: "",
password: "",
});
const darkRef = inject<Ref<boolean>>("dark");
const darkRef = inject<Ref<boolean>>("dark")!;
const onFinish = async (values: any) => {
const { signIn } = useAuth();
try {
loadRef.value = true;
await signIn(values, { redirect: true, callbackUrl: "/" });
const { data } = useAuth();
darkRef.value = data.value.user.profile.nightMode;
if (darkRef.value) document.body.dataset.theme = "dark";
darkRef!.value = data.value?.user?.profile.nightMode || false;
if (darkRef!.value) document.body.dataset.theme = "dark";
await navigateTo("/");
} catch (e: any) {
if (e.data) {
loadRef.value = false;
notification["error"]({
message: h("div", { innerHTML: e.data.message }),
});
@ -50,7 +54,7 @@
<a-form-item>
<a-row :justify="'center'" :align="'middle'">
<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-row>
</a-form-item>