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> <script lang="ts" setup>
import { ref, reactive } from 'vue' import { ref, reactive } from "vue";
import useApiFetch from '../composables/useApiFetch'; import useApiFetch from "../composables/useApiFetch";
interface FormState { import { notification } from "ant-design-vue";
username: string; interface FormState {
password: string; username: string;
} password: string;
const formState = reactive<FormState>({ }
username: "", definePageMeta({
password: "" auth: {
}) unauthenticatedOnly: true,
const onFinish = async (values: any) => { navigateAuthenticatedTo: "/",
await useApiFetch("/auth/login", { },
method: "post", });
body: values,
}) const formState = reactive<FormState>({
} username: "",
</script> password: "",
<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!' }]"> const onFinish = async (values: any) => {
<a-input v-model:value="formState.username"/> const { signIn, data } = useAuth();
</a-form-item>
<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]"> let reso: any;
<a-input-password v-model:value="formState.password"/> try {
</a-form-item> reso = await signIn(values);
<a-form-item> } catch (e: any) {
<a-button type="primary" html-type="submit">Log in</a-button> if (e.data) {
</a-form-item> notification["error"]({
</a-form> message: h("div", { innerHTML: e.data.message }),
</template> });
}
}
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>