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

refactor(pages): tweak login page

Browse Source 
it looks a bit nicer and uses functions from the `useAuth` composable to manage the session
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2023-10-10 22:41:54 -04:00
parent 122976f707
commit 6c4e62b3d0
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 73 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
pages/login.vue
View File

@ -1,31 +1,73 @@
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import useApiFetch from '../composables/useApiFetch';
interface FormState {
username: string;
password: string;
}
const formState = reactive<FormState>({
username: "",
password: ""
})
const onFinish = async (values: any) => {
await useApiFetch("/auth/login", {
method: "post",
body: values,
})
}
</script>
<template>
<a-form :model="formState" name="basic" :label-col="{span: 8}" autocomplete="off" @finish="onFinish">
<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
<a-input v-model:value="formState.username"/>
</a-form-item>
<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
<a-input-password v-model:value="formState.password"/>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">Log in</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import useApiFetch from "../composables/useApiFetch";
import { notification } from "ant-design-vue";
interface FormState {
username: string;
password: string;
}
definePageMeta({
auth: {
unauthenticatedOnly: true,
navigateAuthenticatedTo: "/",
},
});
const formState = reactive<FormState>({
username: "",
password: "",
});
const onFinish = async (values: any) => {
const { signIn, data } = useAuth();
let reso: any;
try {
reso = await signIn(values);
} catch (e: any) {
if (e.data) {
notification["error"]({
message: h("div", { innerHTML: e.data.message }),
});
}
}
await navigateTo({
path: "/",
});
};
</script>
<template>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
autocomplete="off"
:colon="false"
layout="vertical"
@finish="onFinish"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Username required!' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
:colon="false"
label="Password"
name="password"
:rules="[{ required: true, message: 'Password required!' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item>
<a-row :justify="'center'" :align="'middle'">
<a-col>
<a-button type="primary" html-type="submit">Log in</a-button>
</a-col>
</a-row>
</a-form-item>
</a-form>
</template>