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> <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>